at-builder 1.2.9 → 1.3.3

package/webpack.config.js

@@ -40,12 +40,76 @@ let ignoreFolders = [
 
 
 /**
- * Method to traverse folder recursively
- * @param {*} dir - Directory name
+ * Resolve which top-level folders to build, and optionally nested page folders.
+ * Priority: build.config.json (variations keys + buildFolders) → V prefix fallback
+ * Returns: { topLevel: string[] | null, nested: Set<string> | null }
  */
-var traversePath = function (dir) {
+function resolveEntryConfig(buildRoot) {
+    const configPaths = [
+        path.join(buildRoot, 'shared', 'build.config.json'),
+        path.join(buildRoot, 'Shared', 'build.config.json')
+    ];
+    const configPath = configPaths.find(p => fs.existsSync(p));
+
+    if (configPath) {
+        const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));
+        const variations = config.activityInfo?.variations || {};
+        const variationFolders = Array.isArray(variations)
+            ? variations
+            : Object.keys(variations);
+        const extraFolders = config.activityInfo?.buildFolders || [];
+        const allFolders = [...new Set([...variationFolders, ...extraFolders])];
+
+        if (allFolders.length > 0) {
+            // Filter to only folders that exist on disk
+            const existingFolders = allFolders.filter(f => {
+                const fullPath = path.join(buildRoot, f);
+                return fs.existsSync(fullPath) && fs.statSync(fullPath).isDirectory();
+            });
+            const skipped = allFolders.filter(f => !existingFolders.includes(f));
+            if (skipped.length > 0) {
+                console.log('\x1b[33m%s\x1b[0m', `[Config] Skipped (not on disk): ${skipped.join(', ')}`);
+            }
+            console.log('\x1b[36m%s\x1b[0m', `[Config] Entry folders: ${existingFolders.join(', ')}`);
+
+            // Extract nested page folder leaf names from multi-page variations.
+            // e.g. "Post-Migration/Global" → "Global"
+            const nestedFolders = new Set();
+            for (const value of Object.values(variations)) {
+                if (typeof value === 'object' && value !== null && value.pages) {
+                    for (const subPath of Object.values(value.pages)) {
+                        const parts = subPath.split('/');
+                        if (parts.length > 1) {
+                            nestedFolders.add(parts[parts.length - 1]);
+                        }
+                    }
+                }
+            }
+
+            if (nestedFolders.size > 0) {
+                console.log('\x1b[36m%s\x1b[0m', `[Config] Page folders: ${[...nestedFolders].join(', ')}`);
+            }
+
+            return {
+                topLevel: existingFolders.length > 0 ? existingFolders : null,
+                nested: nestedFolders.size > 0 ? nestedFolders : null
+            };
+        }
+    }
+
+    // Fallback: scan for V-prefixed folders (legacy single-page convention)
+    console.log('\x1b[33m%s\x1b[0m', '[Fallback] No build.config.json — using V prefix convention');
+    return { topLevel: null, nested: null };
+}
+
+/**
+ * Traverse activity folder to discover JS/TS entry points.
+ * @param {string} dir - Directory to traverse
+ * @param {boolean} isTopLevel - true for the activity root; false for nested page subfolders
+ */
+var traversePath = function (dir, isTopLevel) {
     var foldername = dir.split("/").pop();
-    // Skip path if it start with . or present in ignoredFolders
+    // Skip path if it starts with . or is in ignoreFolders
     if (foldername.startsWith(".") || ~ignoreFolders.indexOf(foldername)) {
         return;
     }
@@ -55,18 +119,30 @@ var traversePath = function (dir) {
         var file = dir + '/' + fileName;
         var stat = fs.statSync(file);
         if (stat && stat.isDirectory()) {
-            if (!fileName.startsWith("V")) {
-                return;
+            if (isTopLevel) {
+                // Top-level: use config-driven list, or V prefix fallback
+                if (entryConfig.topLevel) {
+                    if (!entryConfig.topLevel.includes(fileName)) return;
+                } else {
+                    if (!fileName.startsWith("V")) return;
+                }
+            } else {
+                // Nested (page subfolder under an experience): use config nested set,
+                // or V prefix fallback (legacy)
+                if (entryConfig.nested) {
+                    if (!entryConfig.nested.has(fileName)) return;
+                } else {
+                    if (!fileName.startsWith("V")) return;
+                }
+            }
+            var res = traversePath(file, false);
+            if (res && res.length) {
+                results = results.concat(res);
             }
-            // 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)
-                results = results.concat(traversePath(file));
         } else {
-            // Process only if it is a js file
-            if (path.extname(file) == ".js" || path.extname(file) == ".ts")
+            if (path.extname(file) == ".js" || path.extname(file) == ".ts") {
                 results.push(file);
+            }
         }
     });
     return results;
@@ -97,7 +173,11 @@ if (!fs.existsSync(activityPath)) {
     process.exit(1);
 }
 
-var files = traversePath(activityPath.toString());
+// Resolve config-driven entry layout (must happen before traversePath is invoked,
+// since traversePath closes over entryConfig).
+const entryConfig = resolveEntryConfig(activityPath.toString());
+
+var files = traversePath(activityPath.toString(), true);
 
 // Check if we found any files to build
 if (!files || files.length === 0) {
@@ -186,35 +266,130 @@ plugins.push({
             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 };
-            });
+            // Read build config for grouping context
+            let configVariations = {};
+            let configType = 'ab';
+            const summaryConfigPaths = [
+                path.join(activityPath, 'shared', 'build.config.json'),
+                path.join(activityPath, 'Shared', 'build.config.json')
+            ];
+            const cfgPath = summaryConfigPaths.find(p => fs.existsSync(p));
+            if (cfgPath) {
+                try {
+                    const cfg = JSON.parse(fs.readFileSync(cfgPath, 'utf8'));
+                    configVariations = cfg.activityInfo?.variations || {};
+                    configType = (cfg.activityInfo?.activityType || 'ab').toUpperCase();
+                } catch (_e) { /* ignore — fall back to single-page summary */ }
+            }
+
+            const isMultiPage = Object.values(configVariations).some(v => typeof v === 'object' && v !== null && v.pages);
 
             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('├── ') + kleur.bold('Type:     ') + kleur.magenta(configType));
+
+            if (isMultiPage) {
+                // Group entries by experience, with each page nested under it.
+                const groups = {};
+                Object.entries(entries).forEach(([out]) => {
+                    let matchedExp = null;
+                    let matchedPage = null;
+
+                    for (const [folder, config] of Object.entries(configVariations)) {
+                        if (typeof config === 'object' && config && config.pages) {
+                            for (const [pageName, subpath] of Object.entries(config.pages)) {
+                                if (out.includes(`/${subpath}/`) || out.includes(`\\${subpath}\\`)) {
+                                    matchedExp = folder;
+                                    matchedPage = pageName;
+                                    break;
+                                }
+                            }
+                        }
+                        if (matchedExp) break;
+                    }
+
+                    if (!matchedExp) {
+                        // Likely a buildFolders entry (e.g. Vanalytics)
+                        const parts = out.split(path.sep);
+                        const folderName = parts[parts.length - 3] || 'Unknown';
+                        matchedExp = '📊 Build Folders';
+                        matchedPage = folderName;
+                    }
+
+                    if (!groups[matchedExp]) groups[matchedExp] = [];
+                    groups[matchedExp].push({ page: matchedPage, out });
+                });
+
+                console.log(kleur.gray('├── ') + kleur.bold('Modules:'));
+
+                const groupKeys = Object.keys(groups);
+                groupKeys.forEach((expName, gi) => {
+                    const isLastGroup = gi === groupKeys.length - 1;
+                    const groupPrefix = isLastGroup ? '└──' : '├──';
+                    const childBranch = isLastGroup ? '    ' : '│   ';
+
+                    const configEntry = configVariations[expName];
+                    const displayName = (typeof configEntry === 'object' && configEntry ? configEntry.experienceName : configEntry) || expName;
+                    const isControl = displayName.toString().toLowerCase().includes('control');
+                    const labelColor = isControl ? kleur.blue : kleur.yellow;
+
+                    console.log(kleur.gray(`│   ${groupPrefix} `) + labelColor().bold(`${displayName}`));
+
+                    groups[expName].forEach((item, pi) => {
+                        const isLastPage = pi === groups[expName].length - 1;
+                        const pagePrefix = isLastPage ? '└──' : '├──';
+
+                        const assetPath = item.out.replace(/^\/+/, '');
+                        const assetName = assetPath + '.js';
+                        const asset = info.assets.find(a => a.name === assetName);
+                        const sizeKB = asset ? (asset.size / 1024).toFixed(2) : '0.00';
+
+                        console.log(kleur.gray(`│   ${childBranch}${pagePrefix} `) + kleur.green(`${item.page} (${sizeKB} KB)`));
+
+                        if (environment === PRODUCTION) {
+                            const absPath = path.resolve(PWD, assetPath.replace(/\/build$/, ""), 'at-build.html');
+                            const atBuildLink = makeClickableLink(absPath, 1, 1);
+                            console.log(`   ${kleur.gray(childBranch)}    🔗 ${kleur.blue(`${displayName}/${item.page}`)} 🔗`);
+                            console.log(`   ${kleur.gray(childBranch)}    ${kleur.gray().underline(atBuildLink)}`);
+                        }
+                    });
+                });
+            } else {
+                // Single-page: flat list (matches at-builder's pre-multi-page output)
+                console.log(kleur.gray('├── ') + kleur.bold('Modules:'));
+
+                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}`;
+                    const configKey = Object.keys(configVariations).find(k => k.toLowerCase() === name.toLowerCase());
+                    const configEntry = configKey ? configVariations[configKey] : null;
+                    const displayName = (typeof configEntry === 'string' ? configEntry : null) || name;
+                    const isControl = displayName.toString().toLowerCase().includes('control');
+                    return { name: displayName.toString(), path: out, isControl };
+                });
+
+                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) ? '└──' : '├──';
+                    const labelColor = m.isControl ? kleur.blue : kleur.yellow;
+                    console.log(kleur.gray(`│   ${prefix} `) + labelColor(`${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));
@@ -230,7 +405,21 @@ 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)[1]}" type="application/javascript">`;
+            // outputPath is the dist folder. The generator passes it through
+            // path.join(targetPath, "../"), which leaves a trailing separator,
+            // so split() would produce an empty trailing element and skew the
+            // slice indexes. Strip trailing separators first.
+            //   single-page:  …/Activities/<activity>/Variation-1/dist
+            //   multi-page:   …/Activities/<activity>/Variation-1/Global/dist
+            const cleanPath = outputPath.replace(/[\\/]+$/, '');
+            const parts = cleanPath.split(path.sep);
+            // parts ends with the dist folder; the variation/page folder is its parent.
+            const folderName = parts[parts.length - 2];
+            const isNestedPage = entryConfig.nested && entryConfig.nested.has(folderName);
+            const variation = isNestedPage
+                ? `${parts[parts.length - 3]}/${folderName}`   // e.g. "Variation-1/Global"
+                : folderName;                                  // e.g. "Variation-1"
+            return `<script targetExp="${process.env.ACTIVITY_FOLDER_NAME}" variation="${variation}" type="application/javascript">`;
         },
         footer: function () {
             return `</script>`;
@@ -308,7 +497,7 @@ module.exports = {
                         options: {
                             injectType: 'singletonStyleTag', // styleTag | singletonStyleTag | lazyStyleTag | lazySingletonStyleTag | linkTag
                             attributes: {
-                                id: process.env.STYLE_ID || "ddo-styles"
+                                id: process.env.STYLE_ID || "atb-styles"
                             }
                             // sourceMap: environment !== PRODUCTION
                             // insert: "body" | (element) => {}

package/.plop/templates/build-template.hbs

@@ -1,7 +0,0 @@
-(function(){
-    if(!window.{{hashId}}){
-        //# sourceURL={{hashId}}.js  
-        {{build}}
-        window.{{hashId}} = true;
-    }
-})();

package/.plop/templates/build.config.hbs

@@ -1,7 +0,0 @@
-{
-    "activityInfo": {
-        "id": null,
-        "name": "",
-        "variations": {}
-    }
-}

package/.plop/templates/observer.hbs

@@ -1,18 +0,0 @@
-export class Observer {
-    constructor() {
-        this.config = {
-            childlist: true,
-            subtree: true,
-            attributes: true
-        }
-    }
-
-    setObserver(cb) {
-        const mt = new MutationObserver(cb);
-        if (window.NodeList && !NodeList.prototype.forEach) {
-            NodeList.prototype.forEach = Array.prototype.forEach;
-        }
-        mt.observe(document.body, this.config);
-    }
-
-}