at-builder 1.2.9 → 1.4.0

package/lib/at-sync.js

@@ -0,0 +1,455 @@
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-require-imports */
+
+/*
+ * at-sync.js — Sync build.config.json with Adobe Target activity details
+ * ----------------------------------------------------------------------
+ * Reads activity id/type from build.config.json, fetches the full activity
+ * from the AT API, and rewrites build.config.json with:
+ *   - Activity name
+ *   - Experiences/variations with correct names
+ *   - Pages and locationLocalId mapping (for multi-page activities)
+ *   - locationsMeta block (informational; preserved across syncs)
+ *
+ * Usage (via CLI):
+ *   atb sync [--scaffold]
+ *
+ * Usage (direct, when developing at-builder itself):
+ *   node lib/at-sync.js [--scaffold]
+ *
+ * Path resolution:
+ *   at-builder is a globally-installed CLI. Every consumer file resolves against
+ *   PWD = process.env.executionPath || process.cwd() so that the user's project
+ *   directory is the source of truth, not at-builder's install location.
+ *
+ * Environment variables (consumer's .env):
+ *   ACTIVITY_FOLDER_NAME      (required)
+ *   ACTIVITIES_BASE_FOLDER    (optional, defaults to "Activities")
+ *   ADOBE_CLIENT_ID           (required)
+ *   ADOBE_CLIENT_SECRET       (required)
+ *   ADOBE_TENANT              (optional, your AT tenant slug — enables clickable AT UI link)
+ */
+
+/* eslint-env node */
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+const axios = require('axios');
+const qs = require('querystring');
+const dotenv = require('dotenv');
+
+const PWD = process.env.executionPath || process.cwd();
+dotenv.config({ path: path.join(PWD, '.env'), quiet: true });
+
+const SCAFFOLD = process.argv.includes('--scaffold');
+
+// Fallback to ANSI codes since chalk 5.x is ESM only
+const chalk = {
+    green: (s) => `\x1b[32m${s}\x1b[0m`,
+    yellow: (s) => `\x1b[33m${s}\x1b[0m`,
+    cyan: (s) => `\x1b[36m${s}\x1b[0m`,
+    red: (s) => `\x1b[31m${s}\x1b[0m`,
+    bold: (s) => `\x1b[1m${s}\x1b[0m`,
+    gray: (s) => `\x1b[90m${s}\x1b[0m`,
+    white: (s) => `\x1b[37m${s}\x1b[0m`
+};
+
+// ─── Validate env ───
+if (!process.env.ACTIVITY_FOLDER_NAME || process.env.ACTIVITY_FOLDER_NAME.trim() === '') {
+    console.error(chalk.red('❌ Error: ACTIVITY_FOLDER_NAME environment variable is required but not set.'));
+    console.error(chalk.yellow('💡 Set ACTIVITY_FOLDER_NAME in your .env file or run "atb doctor --fix".'));
+    process.exit(1);
+}
+if (!process.env.ADOBE_CLIENT_ID || !process.env.ADOBE_CLIENT_SECRET) {
+    console.error(chalk.red('❌ Error: ADOBE_CLIENT_ID and ADOBE_CLIENT_SECRET are required.'));
+    console.error(chalk.yellow('💡 Set your Adobe Target API credentials in your .env file.'));
+    process.exit(1);
+}
+
+const { BASE_URL, IMS_TOKEN_URL, IMS_SCOPE } = require(path.join(PWD, 'adobe.config'));
+
+const API_KEY = process.env.ADOBE_CLIENT_ID;
+const ACTIVITIES_BASE_FOLDER = process.env.ACTIVITIES_BASE_FOLDER || 'Activities';
+const ACTIVITY_FOLDER = process.env.ACTIVITY_FOLDER_NAME.trim();
+const BUILD_ROOT = path.join(PWD, ACTIVITIES_BASE_FOLDER, ACTIVITY_FOLDER);
+
+const CONFIG_PATHS = [
+    path.join(BUILD_ROOT, 'shared', 'build.config.json'),
+    path.join(BUILD_ROOT, 'Shared', 'build.config.json')
+];
+
+// ─── Auth ───
+async function fetchToken() {
+    const data = qs.stringify({
+        grant_type: 'client_credentials',
+        client_id: process.env.ADOBE_CLIENT_ID,
+        client_secret: process.env.ADOBE_CLIENT_SECRET,
+        scope: IMS_SCOPE
+    });
+    const res = await axios.post(IMS_TOKEN_URL, data, {
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
+    });
+    return res.data.access_token;
+}
+
+// Build a clickable AT UI link if ADOBE_TENANT is set; otherwise return null.
+function buildAtUiLink(activityType, activityId) {
+    const tenant = (process.env.ADOBE_TENANT || '').trim();
+    if (!tenant) return null;
+    return `https://experience.adobe.com/#/@${tenant}/target/activities/${activityType}/${activityId}`;
+}
+
+// ─── Main ───
+(async () => {
+    try {
+        console.log(chalk.cyan(`📦 Syncing activity: ${ACTIVITY_FOLDER}`));
+        console.log(chalk.cyan(`📁 Activities folder: ${ACTIVITIES_BASE_FOLDER}`));
+
+        // 1. Read existing config
+        const configPath = CONFIG_PATHS.find(p => fs.existsSync(p));
+        if (!configPath) {
+            console.error(chalk.red('❌ No build.config.json found. Checked:'));
+            CONFIG_PATHS.forEach(p => console.error(chalk.gray(`   ${p}`)));
+            console.error(chalk.yellow('💡 Run "atb new" to create an activity, then add the activity id to build.config.json.'));
+            process.exit(1);
+        }
+
+        const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+        const { id, activityType } = config.activityInfo || {};
+
+        if (!id) {
+            console.error(chalk.red('❌ No activity id found in build.config.json'));
+            console.error(chalk.yellow('💡 Edit shared/build.config.json and set activityInfo.id to your AT activity id.'));
+            process.exit(1);
+        }
+
+        const type = (activityType || 'ab').toLowerCase();
+        console.log(chalk.cyan(`\n🔄 Syncing activity ${type.toUpperCase()} #${id}...`));
+
+        // 2. Fetch from AT API
+        const token = await fetchToken();
+        const activityUrl = `${BASE_URL}${type}/${id}`;
+
+        const res = await axios.get(activityUrl, {
+            headers: {
+                'X-Api-Key': API_KEY,
+                Accept: 'application/vnd.adobe.target.v3+json',
+                Authorization: `Bearer ${token}`
+            }
+        });
+
+        const activity = res.data;
+        console.log(chalk.green(`✓ Fetched: "${activity.name}" (state: ${activity.state})`));
+
+        // 3. Extract locations (pages)
+        const selectors = activity.locations?.selectors || activity.locations?.mboxes || [];
+        const hasMultipleLocations = selectors.length > 1;
+
+        if (hasMultipleLocations) {
+            console.log(chalk.cyan(`\n📄 Pages (${selectors.length} locations):`));
+            selectors.forEach(s => {
+                console.log(chalk.gray(`   [${s.locationLocalId}] ${s.name}`));
+            });
+        }
+
+        // 4. Extract experiences
+        console.log(chalk.cyan(`\n👥 Experiences (${activity.experiences.length}):`));
+        activity.experiences.forEach(exp => {
+            const optionIds = [...new Set(exp.optionLocations.map(ol => ol.optionLocalId))];
+            console.log(chalk.gray(`   ${exp.name} → options: [${optionIds.join(', ')}]`));
+        });
+
+        // 5. Build updated config
+        const updatedConfig = { activityInfo: {} };
+        updatedConfig.activityInfo.id = id;
+        updatedConfig.activityInfo.activityType = type;
+        updatedConfig.activityInfo.name = activity.name;
+
+        if (hasMultipleLocations) {
+            // Preserve existing page names (AT API only returns generic "Location N";
+            // descriptive names live in the UI and the config carries them across syncs).
+            const existingPages = config.activityInfo?.pages || {};
+            const locIdToExistingName = {};
+            for (const [name, locId] of Object.entries(existingPages)) {
+                locIdToExistingName[locId] = name;
+            }
+
+            updatedConfig.activityInfo.pages = {};
+            const hasGenericNames = [];
+            selectors.forEach(s => {
+                const customName = locIdToExistingName[s.locationLocalId];
+                const pageName = customName || s.name;
+                updatedConfig.activityInfo.pages[pageName] = s.locationLocalId;
+                if (!customName) hasGenericNames.push(pageName);
+            });
+
+            if (hasGenericNames.length > 0) {
+                console.log(chalk.yellow(`\n⚠️  ${hasGenericNames.length} page(s) have generic names: ${hasGenericNames.join(', ')}`));
+                console.log(chalk.yellow('   Rename them in build.config.json → pages to match your AT UI page names.'));
+            }
+
+            const locIdToName = {};
+            for (const [name, locId] of Object.entries(updatedConfig.activityInfo.pages)) {
+                locIdToName[locId] = name;
+            }
+
+            updatedConfig.activityInfo.variations = {};
+
+            activity.experiences.forEach(exp => {
+                const expName = exp.name.trim();
+                const folderName = expName.replace(/\s+/g, '-');
+
+                const expPages = {};
+                exp.optionLocations.forEach(ol => {
+                    // Skip locations using Default Content (optionLocalId 0) —
+                    // they have no code to deploy, so no asset path needed.
+                    if (ol.optionLocalId === 0) return;
+
+                    const pageName = locIdToName[ol.locationLocalId];
+                    if (pageName) {
+                        const pageFolder = pageName
+                            .replace(/[^a-zA-Z0-9\s]/g, '')
+                            .replace(/\s+/g, '')
+                            .trim();
+                        expPages[pageName] = `${folderName}/${pageFolder}`;
+                    }
+                });
+
+                updatedConfig.activityInfo.variations[folderName] = {
+                    experienceName: expName,
+                    pages: expPages
+                };
+            });
+
+            // ── locationsMeta: human-readable location reference ──
+            // Purely informational — never read by at-deploy.js.
+            // Shows selector, audiences, and per-experience active/inactive status.
+            // The "note" field is freeform and preserved across syncs.
+            {
+                const existingMeta = config.activityInfo?.locationsMeta || {};
+
+                const expContentMap = {};
+                activity.experiences.forEach(exp => {
+                    const folderName = exp.name.trim().replace(/\s+/g, '-');
+                    expContentMap[folderName] = {};
+                    exp.optionLocations.forEach(ol => {
+                        expContentMap[folderName][ol.locationLocalId] = ol.optionLocalId !== 0;
+                    });
+                });
+
+                const locationsMeta = {};
+                selectors.forEach(s => {
+                    const pageName = locIdToName[s.locationLocalId] || s.name;
+                    const existing = existingMeta[pageName] || {};
+
+                    const experiences = {};
+                    Object.entries(expContentMap).forEach(([expFolder, locMap]) => {
+                        const hasContent = locMap[s.locationLocalId];
+                        experiences[expFolder] = hasContent === true ? 'active'
+                            : hasContent === false ? 'inactive'
+                                : 'not-assigned';
+                    });
+
+                    locationsMeta[pageName] = {
+                        id: s.locationLocalId,
+                        selector: s.selector,
+                        note: existing.note || '',
+                        experiences
+                    };
+                });
+
+                updatedConfig.activityInfo.locationsMeta = locationsMeta;
+            }
+        } else {
+            // Single-page: simple string variations
+            updatedConfig.activityInfo.variations = {};
+            activity.experiences.forEach(exp => {
+                const expName = exp.name.trim();
+                const folderName = expName.replace(/\s+/g, '-');
+                updatedConfig.activityInfo.variations[folderName] = expName;
+            });
+        }
+
+        // Preserve buildFolders if present (Vanalytics, etc.)
+        if (config.activityInfo?.buildFolders) {
+            updatedConfig.activityInfo.buildFolders = config.activityInfo.buildFolders;
+        }
+
+        // 6. Write updated config
+        fs.writeFileSync(configPath, JSON.stringify(updatedConfig, null, 4) + '\n');
+        console.log(chalk.green(`\n✅ Updated ${configPath}`));
+
+        // 7. Summary
+        console.log(chalk.bold('\n--- Sync Summary ---'));
+        console.log(chalk.white(`Activity:    ${activity.name}`));
+        console.log(chalk.white(`Type:        ${type.toUpperCase()}`));
+        console.log(chalk.white(`State:       ${activity.state}`));
+        console.log(chalk.white(`Pages:       ${hasMultipleLocations ? selectors.length : 1}`));
+        console.log(chalk.white(`Experiences: ${activity.experiences.length}`));
+
+        const variations = updatedConfig.activityInfo.variations;
+        console.log(chalk.cyan('\nGenerated variations:'));
+        Object.entries(variations).forEach(([folder, value]) => {
+            if (typeof value === 'string') {
+                console.log(chalk.gray(`   ${folder}/ → "${value}"`));
+            } else {
+                console.log(chalk.gray(`   ${folder}/ → "${value.experienceName}"`));
+                Object.entries(value.pages).forEach(([page, subpath]) => {
+                    console.log(chalk.gray(`      └── ${page} → ${subpath}/`));
+                });
+            }
+        });
+
+        // 8. Folder status
+        console.log(chalk.cyan('\nFolder status:'));
+        const foldersToCreate = [];
+        Object.entries(variations).forEach(([folder, value]) => {
+            if (typeof value === 'string') {
+                const fullPath = path.join(BUILD_ROOT, folder);
+                const exists = fs.existsSync(fullPath);
+                console.log(`   ${exists ? '✅' : '❌'} ${folder}/`);
+                if (!exists) foldersToCreate.push(folder);
+            } else {
+                Object.values(value.pages).forEach(subpath => {
+                    const fullPath = path.join(BUILD_ROOT, subpath);
+                    const exists = fs.existsSync(fullPath);
+                    console.log(`   ${exists ? '✅' : '❌'} ${subpath}/`);
+                    if (!exists) foldersToCreate.push(subpath);
+                });
+            }
+        });
+
+        if (foldersToCreate.length > 0) {
+            if (SCAFFOLD) {
+                console.log(chalk.green(`\n📁 Scaffolding ${foldersToCreate.length} missing folder(s)...`));
+                foldersToCreate.forEach(f => {
+                    const fullPath = path.join(BUILD_ROOT, f);
+                    scaffoldFolder(fullPath);
+                });
+                console.log(chalk.green('✅ All folders scaffolded!'));
+            } else {
+                console.log(chalk.yellow(`\n⚠️  ${foldersToCreate.length} folder(s) don't exist yet.`));
+                console.log(chalk.yellow('   Run "atb sync --scaffold" to auto-create, or create manually:'));
+                foldersToCreate.forEach(f => {
+                    console.log(chalk.gray(`     mkdir -p "${path.join(BUILD_ROOT, f)}"`));
+                });
+            }
+        }
+
+        const atUiLink = buildAtUiLink(type, id);
+        if (atUiLink) {
+            console.log(chalk.cyan(`\n🔗 Activity: ${atUiLink}`));
+        } else {
+            console.log(chalk.cyan(`\n🔗 Activity ID: ${id} (set ADOBE_TENANT in .env for a clickable link)`));
+        }
+        console.log(chalk.bold('\n--------------------\n'));
+    } catch (err) {
+        if (err.response) {
+            console.error(chalk.red('❌ API Error:'), err.response.data);
+        } else {
+            console.error(chalk.red('❌ Error:'), err.message);
+        }
+        process.exit(1);
+    }
+})();
+
+/**
+ * Scaffold a missing variation folder with at-builder's variation skeleton:
+ *   index.js, scripts/app.js, css/style.scss, constants/index.js
+ *
+ * Mirrors the boilerplate emitted by .plop/templates so scaffolded variations
+ * are indistinguishable from ones created via `atb new`.
+ */
+function scaffoldFolder(fullPath) {
+    const indexContent = `/**
+ *  This is the test entry point and main variations gets executed from here
+ */
+
+// Load styles
+import "./css/style.scss";
+
+import { App } from './scripts/app';
+const app = new App();
+app.init();
+`;
+
+    const appContent = `// import * as CONSTANTS from '../constants';
+
+export class App {
+    /**
+    * @param define constructor properties
+    */
+    constructor() {
+        this.state = {}; // For managing app state
+    }
+
+    /**
+    *  Initializes the application, sets up observer and logs the event
+    */
+    init = () => {
+        this.isRunning = true;
+        this.onStart();
+    }
+
+    /**
+    *  Starts the app or app-specific functionality
+    */
+    onStart = () => {
+        // Additional initialization logic (e.g., setting up listeners, data fetching)
+    }
+
+    /**
+    *  Reset the app to its initial state
+    */
+    reset = () => {
+        this.state = {};
+        this.onStart();
+    }
+
+    /**
+    *  Disconnect mutation observer, clear any window variable or perform cleanup activity
+    */
+    destroy = () => {
+    }
+
+    /**
+    *  Mutation Observer Callback
+    */
+    callback = () => {
+        // Callback logic for mutation observer
+    }
+}
+`;
+
+    const styleContent = `/* Add variation specific scss properties here */
+
+
+`;
+
+    const constantsContent = `/**
+*   Declare all Variation level constants here
+*/
+
+export const VariationConstants = {
+    sampleConstants: { country: "us" }
+};
+`;
+
+    const files = [
+        { path: path.join(fullPath, 'index.js'), content: indexContent },
+        { path: path.join(fullPath, 'scripts', 'app.js'), content: appContent },
+        { path: path.join(fullPath, 'css', 'style.scss'), content: styleContent },
+        { path: path.join(fullPath, 'constants', 'index.js'), content: constantsContent }
+    ];
+
+    files.forEach(({ path: filePath, content }) => {
+        fs.mkdirSync(path.dirname(filePath), { recursive: true });
+        if (!fs.existsSync(filePath)) {
+            fs.writeFileSync(filePath, content);
+            console.log(chalk.green(`   ✅ Created ${path.relative(BUILD_ROOT, filePath)}`));
+        } else {
+            console.log(chalk.gray(`   ⏭️  Skipped ${path.relative(BUILD_ROOT, filePath)} (exists)`));
+        }
+    });
+}

package/lib/eslint-flat-config-plugin.js

@@ -68,8 +68,16 @@ class ESLintFlatConfigPlugin {
                         ...overrideConfigs
                     ];
 
+                    // overrideConfigFile: true tells ESLint v9 to skip the
+                    // cwd-based flat-config lookup entirely and treat
+                    // overrideConfig as the complete configuration. Without
+                    // this, ESLint walks the consumer's PWD looking for an
+                    // `eslint.config.js` (which they don't have, since at-builder
+                    // ships its own) and fails the build with "Could not find
+                    // config file." even though we provided everything inline.
                     const eslint = new ESLint({
                         cwd: this.options.context,
+                        overrideConfigFile: true,
                         overrideConfig: mergedConfig,
                         ignore: false,  // Don't use default ignore patterns
                         fix: this.options.fix  // Enable auto-fix if option is set
@@ -82,44 +90,37 @@ class ESLintFlatConfigPlugin {
                         await ESLint.outputFixes(results);
                     }
 
-                    let hasErrors = false;
-                    let hasWarnings = false;
-
+                    // Push every ESLint message as a discrete error/warning on
+                    // the compilation. Webpack renders each one with its file
+                    // path, line/column, message, and rule. The build fails
+                    // automatically when compilation.errors is non-empty, so
+                    // there's no need to throw — throwing here used to abort
+                    // the hook before webpack could render the queued errors,
+                    // leaving the user with a generic "Build failed due to
+                    // linting errors" and no detail.
                     for (const result of results) {
-                        if (result.errorCount > 0) {
-                            hasErrors = true;
-                            for (const message of result.messages.filter(m => m.severity === 2)) {
-                                const error = new Error(
-                                    `[ESLint] ${result.filePath}:${message.line}:${message.column}\n  ${message.message} (${message.ruleId})`
-                                );
-                                error.file = result.filePath;
-                                compilation.errors.push(error);
-                            }
-                        }
-
-                        if (result.warningCount > 0) {
-                            hasWarnings = true;
-                            for (const message of result.messages.filter(m => m.severity === 1)) {
-                                const warning = new Error(
-                                    `[ESLint] ${result.filePath}:${message.line}:${message.column}\n  ${message.message} (${message.ruleId})`
-                                );
-                                warning.file = result.filePath;
-                                compilation.warnings.push(warning);
+                        for (const message of result.messages) {
+                            const formatted = new Error(
+                                `[ESLint] ${result.filePath}:${message.line}:${message.column}\n  ${message.message} (${message.ruleId})`
+                            );
+                            formatted.file = result.filePath;
+
+                            const isError = message.severity === 2;
+                            const isWarning = message.severity === 1;
+                            const treatAsError =
+                                (isError && this.options.failOnError) ||
+                                (isWarning && this.options.failOnWarning);
+
+                            if (treatAsError) {
+                                compilation.errors.push(formatted);
+                            } else if (isError || isWarning) {
+                                compilation.warnings.push(formatted);
                             }
                         }
                     }
-
-                    if (this.options.failOnError && hasErrors) {
-                        throw new Error('[ESLint] Build failed due to linting errors');
-                    }
-
-                    if (this.options.failOnWarning && hasWarnings) {
-                        throw new Error('[ESLint] Build failed due to linting warnings');
-                    }
                 } catch (error) {
-                    if (error.message.includes('Build failed')) {
-                        throw error;
-                    }
+                    // ESLint setup itself failed (config load, file resolution,
+                    // etc.). Surface as a single compilation error.
                     compilation.errors.push(error);
                 }
             });