@embeddables/cli 0.1.0

package/dist/compiler/index.js

@@ -0,0 +1,934 @@
+import fg from 'fast-glob';
+import fs from 'node:fs';
+import path from 'node:path';
+import { parsePageFromFile } from './parsePage.js';
+import { CompileError } from './errors.js';
+import CSSJSON from 'cssjson';
+import { sanitizeFileName } from './reverse.js';
+import { generateRandomIdByType } from './helpers/duplicateIds.js';
+import { parse } from '@babel/parser';
+import traverseImport from '@babel/traverse';
+import * as generator from '@babel/generator';
+import * as t from '@babel/types';
+import { ALLOWED_PRIMITIVES } from './registry.js';
+const traverse = (traverseImport.default ?? traverseImport);
+const generate = generator.default.generate;
+/**
+ * Deep clones an object or array while preserving the order of all properties
+ * at all nesting levels. Arrays preserve element order (already guaranteed),
+ * and objects preserve property insertion order.
+ */
+function deepClonePreservingOrder(value) {
+    if (value === null || value === undefined) {
+        return value;
+    }
+    if (Array.isArray(value)) {
+        // For arrays, recursively clone each element
+        return value.map((item) => deepClonePreservingOrder(item));
+    }
+    if (typeof value === 'object') {
+        // For objects, preserve property order by iterating through keys
+        const cloned = {};
+        const keys = Object.keys(value);
+        for (const key of keys) {
+            cloned[key] = deepClonePreservingOrder(value[key]);
+        }
+        return cloned;
+    }
+    // Primitive values (string, number, boolean) are returned as-is
+    return value;
+}
+/**
+ * Returns a copy of newVal with object key order (recursively) matching oldVal
+ * where possible. Keeps existing keys in old order; appends new keys at the end.
+ * Arrays are not reordered; we recurse into elements by index for nested objects.
+ * Used so embeddable.json diffs show only actual changes, not reordering noise.
+ */
+export function reorderObjectKeysToMatch(oldVal, newVal) {
+    if (newVal === null || newVal === undefined) {
+        return newVal;
+    }
+    if (Array.isArray(newVal)) {
+        const oldArr = Array.isArray(oldVal) ? oldVal : [];
+        // If array contains objects with 'id' properties, match by id instead of index
+        // This handles cases where components are removed (e.g., invalid parent_id)
+        if (newVal.length > 0 &&
+            typeof newVal[0] === 'object' &&
+            newVal[0] !== null &&
+            'id' in newVal[0]) {
+            // Build a map of old items by id for efficient lookup
+            const oldById = new Map();
+            for (const oldItem of oldArr) {
+                if (typeof oldItem === 'object' && oldItem !== null && 'id' in oldItem) {
+                    oldById.set(oldItem.id, oldItem);
+                }
+            }
+            // Match new items with old items by id, fallback to index if id not found
+            return newVal.map((newItem, i) => {
+                if (typeof newItem === 'object' && newItem !== null && 'id' in newItem) {
+                    const id = newItem.id;
+                    const oldItem = oldById.get(id);
+                    if (oldItem !== undefined) {
+                        return reorderObjectKeysToMatch(oldItem, newItem);
+                    }
+                }
+                // Fallback to index-based matching if no id or id not found
+                return reorderObjectKeysToMatch(oldArr[i], newItem);
+            });
+        }
+        // For arrays without id-based objects, use index-based matching
+        return newVal.map((item, i) => reorderObjectKeysToMatch(oldArr[i], item));
+    }
+    if (typeof newVal === 'object' && newVal !== null) {
+        const oldObj = oldVal !== null && typeof oldVal === 'object' && !Array.isArray(oldVal)
+            ? oldVal
+            : {};
+        const newObj = newVal;
+        const oldKeys = Object.keys(oldObj);
+        const newKeysSet = new Set(Object.keys(newObj));
+        const orderedKeys = [
+            ...oldKeys.filter((k) => newKeysSet.has(k)),
+            ...Object.keys(newObj).filter((k) => !oldKeys.includes(k)),
+        ];
+        const result = {};
+        for (const k of orderedKeys) {
+            result[k] = reorderObjectKeysToMatch(oldObj[k], newObj[k]);
+        }
+        return result;
+    }
+    return newVal;
+}
+export async function compileAllPages(opts) {
+    const files = await fg(opts.pagesGlob, { dot: false });
+    if (files.length === 0) {
+        throw new CompileError(`No pages found for glob: ${opts.pagesGlob}`);
+    }
+    // First pass: collect all IDs from pages and detect duplicates
+    // Note: We check pages first, then global components are checked separately in loadGlobalComponents
+    const idOccurrences = new Map();
+    const filePages = [];
+    // Parse all page files first to collect IDs
+    for (const file of files) {
+        const code = fs.readFileSync(file, 'utf8');
+        const pageKey = derivePageKey(file, opts.pageKeyFrom);
+        const page = parsePageFromFile({ code, filePath: file, pageKey });
+        // Collect component and button IDs with their locations
+        for (let compIndex = 0; compIndex < page.components.length; compIndex++) {
+            const component = page.components[compIndex];
+            const compId = component.id;
+            if (!idOccurrences.has(compId)) {
+                idOccurrences.set(compId, []);
+            }
+            idOccurrences.get(compId).push({
+                file,
+                pageKey,
+                componentType: component.type,
+                componentIndex: compIndex,
+                id: compId,
+            });
+            // Collect button IDs from OptionSelector components
+            if (component.type === 'OptionSelector' && Array.isArray(component.buttons)) {
+                for (let btnIndex = 0; btnIndex < component.buttons.length; btnIndex++) {
+                    const button = component.buttons[btnIndex];
+                    if (button?.id) {
+                        const buttonId = button.id;
+                        if (!idOccurrences.has(buttonId)) {
+                            idOccurrences.set(buttonId, []);
+                        }
+                        idOccurrences.get(buttonId).push({
+                            file,
+                            pageKey,
+                            componentType: component.type,
+                            componentIndex: compIndex,
+                            buttonIndex: btnIndex,
+                            id: buttonId,
+                        });
+                    }
+                }
+            }
+        }
+        filePages.push({ file, pageKey, page });
+    }
+    // Detect duplicates and generate fixes
+    const idFixes = new Map(); // Maps "file:componentIndex" or "file:componentIndex:buttonIndex" -> newId
+    const allIds = new Set();
+    // Collect all existing IDs
+    for (const occurrences of idOccurrences.values()) {
+        for (const occ of occurrences) {
+            allIds.add(occ.id);
+        }
+    }
+    // Find duplicates and generate unique replacements
+    for (const [id, occurrences] of idOccurrences.entries()) {
+        if (occurrences.length > 1) {
+            console.warn(`Found duplicate ID "${id}" used ${occurrences.length} times. Fixing...`);
+            // Keep first occurrence, fix the rest (type-based: plaintext_xxx, button_xxx, option_xxx)
+            for (let i = 1; i < occurrences.length; i++) {
+                const occ = occurrences[i];
+                const fixKey = occ.buttonIndex !== undefined
+                    ? `${occ.file}:${occ.componentIndex}:${occ.buttonIndex}`
+                    : `${occ.file}:${occ.componentIndex}`;
+                const isOptionButton = occ.buttonIndex !== undefined;
+                const newId = generateRandomIdByType(occ.componentType, isOptionButton, allIds, idFixes.values());
+                allIds.add(newId);
+                idFixes.set(fixKey, newId);
+                console.warn(`  → Fixing duplicate ID "${id}" to "${newId}" in ${occ.file} (component ${occ.componentIndex}${occ.buttonIndex !== undefined ? `, button ${occ.buttonIndex}` : ''})`);
+            }
+        }
+    }
+    // Apply fixes to source files if any duplicates were found
+    if (idFixes.size > 0) {
+        // Fix page files
+        for (const { file } of filePages) {
+            const fixesForFile = Array.from(idFixes.entries()).filter(([key]) => key.startsWith(file + ':'));
+            if (fixesForFile.length > 0) {
+                const code = fs.readFileSync(file, 'utf8');
+                const updatedCode = fixIdsInSourceFile(code, file, fixesForFile);
+                fs.writeFileSync(file, updatedCode, 'utf8');
+                console.log(`  ✓ Updated ${file} with fixed IDs`);
+            }
+        }
+    }
+    // Second pass: re-parse all files (now with fixed IDs) and compile
+    // If no duplicates were found, reuse the already-parsed pages
+    const pages = [];
+    const seenIds = new Map();
+    // Map of pageKey -> PageJson for applying metadata later
+    const pageMap = new Map();
+    if (idFixes.size > 0) {
+        // Re-parse files if we fixed any duplicates
+        for (const { file, pageKey } of filePages) {
+            const code = fs.readFileSync(file, 'utf8');
+            const page = parsePageFromFile({ code, filePath: file, pageKey });
+            // Global ID uniqueness: components + option ids
+            for (const c of page.components) {
+                checkUniqueId(seenIds, c.id, { file, pageKey });
+                if (c.type === 'OptionSelector' && Array.isArray(c.buttons)) {
+                    for (const b of c.buttons) {
+                        if (b?.id)
+                            checkUniqueId(seenIds, b.id, { file, pageKey });
+                    }
+                }
+            }
+            pages.push(page);
+            pageMap.set(pageKey, page);
+        }
+    }
+    else {
+        // No duplicates found, reuse already-parsed pages
+        for (const filePage of filePages) {
+            const { page, pageKey, file } = filePage;
+            // Global ID uniqueness: components + option ids
+            for (const c of page.components) {
+                checkUniqueId(seenIds, c.id, { file, pageKey });
+                if (c.type === 'OptionSelector' && Array.isArray(c.buttons)) {
+                    for (const b of c.buttons) {
+                        if (b?.id)
+                            checkUniqueId(seenIds, b.id, { file, pageKey });
+                    }
+                }
+            }
+            pages.push(page);
+            pageMap.set(pageKey, page);
+        }
+    }
+    // Read config.json if it exists
+    let config = null;
+    if (opts.configPath && fs.existsSync(opts.configPath)) {
+        try {
+            const configContent = fs.readFileSync(opts.configPath, 'utf8');
+            config = JSON.parse(configContent);
+        }
+        catch (error) {
+            console.warn(`Failed to parse config.json: ${error}`);
+        }
+    }
+    else if (opts.embeddableId) {
+        // Try to infer config path from embeddableId
+        const inferredConfigPath = path.join('embeddables', opts.embeddableId, 'config.json');
+        if (fs.existsSync(inferredConfigPath)) {
+            try {
+                const configContent = fs.readFileSync(inferredConfigPath, 'utf8');
+                config = JSON.parse(configContent);
+            }
+            catch (error) {
+                console.warn(`Failed to parse config.json: ${error}`);
+            }
+        }
+    }
+    // Apply page ordering and metadata from config
+    let orderedPages = pages;
+    if (config && config.pages && Array.isArray(config.pages)) {
+        // Create a map for quick lookup
+        const orderedPageMap = new Map();
+        for (const pageMetadata of config.pages) {
+            orderedPageMap.set(pageMetadata.key, pageMetadata);
+        }
+        // Sort pages according to config order
+        const orderedPageKeys = config.pages.map((p) => p.key);
+        const unorderedPages = [];
+        orderedPages = orderedPageKeys
+            .map((key) => {
+            const page = pageMap.get(key);
+            if (page) {
+                // Apply metadata from config (preserving nested object order)
+                const pageMetadata = orderedPageMap.get(key);
+                if (pageMetadata) {
+                    // Merge metadata (excluding key and components)
+                    // Preserve order by iterating through keys in original order
+                    const pageMetadataKeys = Object.keys(pageMetadata);
+                    for (const metaKey of pageMetadataKeys) {
+                        if (metaKey !== 'key' && metaKey !== 'components') {
+                            ;
+                            page[metaKey] = deepClonePreservingOrder(pageMetadata[metaKey]);
+                        }
+                    }
+                }
+                return page;
+            }
+            return null;
+        })
+            .filter((p) => p !== null);
+        // Add any pages not in the config order
+        for (const page of pages) {
+            if (!orderedPageKeys.includes(page.key)) {
+                unorderedPages.push(page);
+            }
+        }
+        orderedPages = [...orderedPages, ...unorderedPages];
+    }
+    // Compile styles from CSS files
+    const styles = await compileStyles(opts.stylesDir || 'styles');
+    // Build embeddable object preserving the order from config
+    const embeddable = {};
+    // Read computedFields from JS files
+    let computedFields = [];
+    if (opts.embeddableId) {
+        computedFields = await loadComputedFields(opts.embeddableId);
+    }
+    // Read dataOutputs from JS files
+    let dataOutputs = [];
+    if (opts.embeddableId) {
+        dataOutputs = await loadDataOutputs(opts.embeddableId, config);
+    }
+    // Read global components from TSX files
+    let globalComponents = [];
+    if (opts.embeddableId) {
+        globalComponents = await loadGlobalComponents(opts.embeddableId, config);
+    }
+    // Preserve the order of top-level properties from config
+    if (config) {
+        const configKeys = Object.keys(config);
+        // Iterate through config keys in order to preserve property order
+        for (const key of configKeys) {
+            if (key === 'pages') {
+                // Replace pages with orderedPages (which include components)
+                embeddable.pages = orderedPages;
+            }
+            else if (key === 'styles') {
+                // Skip styles from config - they will be added from compiled CSS files later
+                continue;
+            }
+            else if (key === 'computedFields') {
+                // Replace computedFields with loaded computedFields (which include code)
+                if (computedFields.length > 0) {
+                    embeddable.computedFields = computedFields;
+                }
+            }
+            else if (key === 'dataOutputs') {
+                // Replace dataOutputs with loaded dataOutputs (which include code)
+                if (dataOutputs.length > 0) {
+                    embeddable.dataOutputs = dataOutputs;
+                }
+            }
+            else if (key === 'components') {
+                // Replace components with loaded global components
+                if (globalComponents.length > 0) {
+                    embeddable.components = globalComponents;
+                }
+            }
+            else {
+                // Regular metadata property - preserve as-is, with order preserved recursively
+                const value = config[key];
+                if (value !== undefined && value !== null) {
+                    embeddable[key] = deepClonePreservingOrder(value);
+                }
+            }
+        }
+    }
+    // If no config or pages not in config, add pages at the beginning
+    if (!embeddable.pages) {
+        embeddable.pages = orderedPages;
+    }
+    // If styles exist, insert them after pages (since styles are not in config.json)
+    // This preserves the logical grouping while maintaining order for other properties
+    if (Object.keys(styles).length > 0) {
+        const embeddableKeys = Object.keys(embeddable);
+        const pagesIndex = embeddableKeys.indexOf('pages');
+        if (pagesIndex !== -1) {
+            // Insert styles after pages by rebuilding the object
+            const newEmbeddable = {};
+            let stylesInserted = false;
+            for (const key of embeddableKeys) {
+                newEmbeddable[key] = embeddable[key];
+                if (key === 'pages' && !stylesInserted) {
+                    newEmbeddable.styles = styles;
+                    stylesInserted = true;
+                }
+            }
+            // If pages was the last key, add styles after it
+            if (!stylesInserted && pagesIndex === embeddableKeys.length - 1) {
+                newEmbeddable.styles = styles;
+            }
+            // Rebuild embeddable in the correct order by clearing and rebuilding
+            Object.keys(embeddable).forEach((key) => delete embeddable[key]);
+            Object.assign(embeddable, newEmbeddable);
+        }
+        else {
+            // Pages doesn't exist in embeddable, add styles at the end
+            embeddable.styles = styles;
+        }
+    }
+    // If computedFields or dataOutputs don't exist in config but we have them, add them at the end
+    if (computedFields.length > 0 && !embeddable.computedFields) {
+        embeddable.computedFields = computedFields;
+    }
+    if (dataOutputs.length > 0 && !embeddable.dataOutputs) {
+        embeddable.dataOutputs = dataOutputs;
+    }
+    if (globalComponents.length > 0 && !embeddable.components) {
+        embeddable.components = globalComponents;
+    }
+    let toWrite = embeddable;
+    if (fs.existsSync(opts.outPath)) {
+        try {
+            const existing = fs.readFileSync(opts.outPath, 'utf8');
+            const oldEmbeddable = JSON.parse(existing);
+            toWrite = reorderObjectKeysToMatch(oldEmbeddable, embeddable);
+        }
+        catch {
+            // If read/parse fails, keep embeddable as-is
+        }
+    }
+    writeAtomic(opts.outPath, JSON.stringify(toWrite, null, 2));
+    console.log(`Wrote ${opts.outPath} (${orderedPages.length} pages, ${Object.keys(styles).length > 0 ? 'with styles' : 'no styles'})`);
+}
+function derivePageKey(file, mode) {
+    if (mode === 'filename') {
+        const base = path.basename(file);
+        // email.page.tsx -> email
+        return base.replace(/\.page\.tsx$/, '').replace(/\.tsx$/, '');
+    }
+    // v1: export-based not implemented here
+    return path
+        .basename(file)
+        .replace(/\.page\.tsx$/, '')
+        .replace(/\.tsx$/, '');
+}
+/**
+ * Fixes duplicate IDs in a React source file by updating JSX attributes.
+ * @param code Original source code
+ * @param filePath File path (for error reporting)
+ * @param fixes Array of [fixKey, newId] tuples where fixKey is "file:componentIndex" or "file:componentIndex:buttonIndex"
+ */
+function fixIdsInSourceFile(code, filePath, fixes) {
+    // Parse the file
+    let ast;
+    try {
+        ast = parse(code, {
+            sourceType: 'module',
+            plugins: ['typescript', 'jsx'],
+            sourceFilename: filePath,
+        });
+    }
+    catch (error) {
+        throw new CompileError(`Failed to parse file for ID fixing: ${error.message}`, {
+            file: filePath,
+        });
+    }
+    // Build a map of component index -> new ID, and component index + button index -> new ID
+    const componentIdMap = new Map();
+    const buttonIdMap = new Map(); // "componentIndex:buttonIndex" -> newId
+    for (const [fixKey, newId] of fixes) {
+        // fixKey format is "file:componentIndex" or "file:componentIndex:buttonIndex"
+        // Since we filtered by file prefix, remove the file prefix to get just the indices
+        const filePrefix = filePath + ':';
+        if (!fixKey.startsWith(filePrefix)) {
+            // This shouldn't happen since we filtered, but skip just in case
+            continue;
+        }
+        const indicesStr = fixKey.substring(filePrefix.length);
+        const parts = indicesStr.split(':');
+        if (parts.length === 1) {
+            // Component ID fix: "componentIndex"
+            const componentIndex = parseInt(parts[0], 10);
+            componentIdMap.set(componentIndex, newId);
+        }
+        else if (parts.length === 2) {
+            // Button ID fix: "componentIndex:buttonIndex"
+            const componentIndex = parseInt(parts[0], 10);
+            const buttonIndex = parseInt(parts[1], 10);
+            buttonIdMap.set(`${componentIndex}:${buttonIndex}`, newId);
+        }
+    }
+    let componentIndex = -1;
+    // Traverse AST to find and update IDs
+    traverse(ast, {
+        JSXElement(path) {
+            const opening = path.node.openingElement;
+            const tagName = opening.name.type === 'JSXIdentifier' ? opening.name.name : null;
+            // Only process allowed primitives (components), not regular HTML elements
+            if (!tagName || !ALLOWED_PRIMITIVES.has(tagName))
+                return;
+            // Check if this component has an id attribute
+            const hasIdAttr = opening.attributes.some((attr) => attr.type === 'JSXAttribute' &&
+                attr.name.type === 'JSXIdentifier' &&
+                attr.name.name === 'id');
+            if (hasIdAttr) {
+                componentIndex++;
+                // Check if we need to fix this component's ID
+                if (componentIdMap.has(componentIndex)) {
+                    const newId = componentIdMap.get(componentIndex);
+                    // Find and update the id attribute
+                    for (const attr of opening.attributes) {
+                        if (attr.type === 'JSXAttribute' &&
+                            attr.name.type === 'JSXIdentifier' &&
+                            attr.name.name === 'id') {
+                            if (attr.value?.type === 'StringLiteral') {
+                                attr.value.value = newId;
+                            }
+                            else if (attr.value?.type === 'JSXExpressionContainer') {
+                                // Replace expression with string literal
+                                attr.value = t.stringLiteral(newId);
+                            }
+                            break;
+                        }
+                    }
+                }
+                // Check if this is an OptionSelector and we need to fix button IDs
+                if (tagName === 'OptionSelector') {
+                    // Find the buttons prop
+                    for (const attr of opening.attributes) {
+                        if (attr.type === 'JSXAttribute' &&
+                            attr.name.type === 'JSXIdentifier' &&
+                            attr.name.name === 'buttons' &&
+                            attr.value?.type === 'JSXExpressionContainer') {
+                            // The buttons prop is an array expression
+                            const expr = attr.value.expression;
+                            if (expr.type === 'ArrayExpression') {
+                                let buttonIndex = 0;
+                                for (const element of expr.elements) {
+                                    if (element &&
+                                        element.type === 'ObjectExpression' &&
+                                        buttonIdMap.has(`${componentIndex}:${buttonIndex}`)) {
+                                        const newButtonId = buttonIdMap.get(`${componentIndex}:${buttonIndex}`);
+                                        // Find the id property in this button object
+                                        for (const prop of element.properties) {
+                                            if (prop.type === 'ObjectProperty' &&
+                                                prop.key.type === 'Identifier' &&
+                                                prop.key.name === 'id') {
+                                                if (prop.value.type === 'StringLiteral') {
+                                                    prop.value.value = newButtonId;
+                                                }
+                                                else {
+                                                    prop.value = t.stringLiteral(newButtonId);
+                                                }
+                                                break;
+                                            }
+                                        }
+                                    }
+                                    buttonIndex++;
+                                }
+                            }
+                            break;
+                        }
+                    }
+                }
+            }
+        },
+    });
+    // Generate updated code
+    const result = generate(ast, {}, code);
+    return result.code;
+}
+function checkUniqueId(seen, id, loc) {
+    const prev = seen.get(id);
+    if (prev) {
+        throw new CompileError(`Duplicate id "${id}"\n- first: ${prev.file} (page: ${prev.pageKey})\n- second: ${loc.file} (page: ${loc.pageKey})\nIDs must be globally unique across all pages.`, { file: loc.file });
+    }
+    seen.set(id, loc);
+}
+async function compileStyles(stylesDir) {
+    const stylesPath = path.resolve(stylesDir);
+    // Check if styles directory exists
+    if (!fs.existsSync(stylesPath)) {
+        return {};
+    }
+    // Find all CSS files in the styles directory
+    const cssFiles = await fg('**/*.css', {
+        cwd: stylesPath,
+        dot: false,
+    });
+    if (cssFiles.length === 0) {
+        return {};
+    }
+    // Combine all CSS files into a single JSON object
+    const combinedStyles = {};
+    for (const cssFile of cssFiles) {
+        const fullPath = path.join(stylesPath, cssFile);
+        const cssContent = fs.readFileSync(fullPath, 'utf8');
+        // Skip empty files
+        if (!cssContent.trim()) {
+            continue;
+        }
+        // Convert CSS to JSON
+        const cssJson = CSSJSON.toJSON(cssContent);
+        // Flatten the structure: extract selectors and their attributes
+        // cssjson returns { children: { selector: { children: {}, attributes: {...} } } }
+        if (cssJson && cssJson.children) {
+            for (const [selector, rule] of Object.entries(cssJson.children)) {
+                if (rule && typeof rule === 'object' && 'attributes' in rule) {
+                    // Extract just the attributes (styles) for each selector
+                    combinedStyles[selector] = rule.attributes || {};
+                }
+            }
+        }
+    }
+    return combinedStyles;
+}
+function writeAtomic(outPath, content) {
+    fs.mkdirSync(path.dirname(outPath), { recursive: true });
+    const tmp = `${outPath}.tmp`;
+    fs.writeFileSync(tmp, content, 'utf8');
+    fs.renameSync(tmp, outPath);
+}
+/**
+ * Loads computedFields from JS files in computed-fields/ folder.
+ * Each JS file corresponds to one computedField.
+ */
+async function loadComputedFields(embeddableId) {
+    const computedFieldsDir = path.join('embeddables', embeddableId, 'computed-fields');
+    if (!fs.existsSync(computedFieldsDir)) {
+        return [];
+    }
+    // Find all JS files in computed-fields directory
+    const jsFiles = await fg('**/*.js', {
+        cwd: computedFieldsDir,
+        dot: false,
+    });
+    if (jsFiles.length === 0) {
+        return [];
+    }
+    const computedFields = [];
+    // Read config.json to get computedField metadata (if available)
+    const configPath = path.join('embeddables', embeddableId, 'config.json');
+    let config = null;
+    if (fs.existsSync(configPath)) {
+        try {
+            const configContent = fs.readFileSync(configPath, 'utf8');
+            config = JSON.parse(configContent);
+        }
+        catch (error) {
+            // Ignore config parsing errors
+        }
+    }
+    // Build a map of computed fields by key/id for quick lookup
+    const computedFieldsMap = new Map();
+    for (const jsFile of jsFiles) {
+        const filePath = path.join(computedFieldsDir, jsFile);
+        const code = fs.readFileSync(filePath, 'utf8');
+        // Extract key from filename (remove .js extension)
+        const key = path.basename(jsFile, '.js');
+        // Build computedField object
+        const computedField = {
+            id: key, // Use key as id if not specified in config
+            key,
+            formula: 'custom',
+            code,
+        };
+        // If config has computedFields metadata, try to find matching field
+        if (config && config.computedFields) {
+            const configField = config.computedFields.find((cf) => cf.key === key || cf.id === key);
+            if (configField) {
+                // Merge metadata from config (but keep code from file)
+                // Preserve order by cloning the config field first
+                const clonedConfigField = deepClonePreservingOrder(configField);
+                Object.assign(computedField, clonedConfigField);
+                computedField.code = code; // Ensure code comes from file
+            }
+        }
+        // Store in map using both key and id as lookup keys
+        computedFieldsMap.set(key, computedField);
+        if (computedField.id && computedField.id !== key) {
+            computedFieldsMap.set(computedField.id, computedField);
+        }
+    }
+    // If config has computedFields, preserve order from config
+    if (config && config.computedFields && Array.isArray(config.computedFields)) {
+        const orderedFields = [];
+        const processedKeys = new Set();
+        // First, add fields in config order
+        for (const configField of config.computedFields) {
+            const lookupKey = configField.key || configField.id;
+            if (lookupKey) {
+                const field = computedFieldsMap.get(lookupKey);
+                if (field) {
+                    orderedFields.push(field);
+                    processedKeys.add(lookupKey);
+                    if (field.id && field.id !== lookupKey) {
+                        processedKeys.add(field.id);
+                    }
+                }
+            }
+        }
+        // Then, add any fields not in config (in filesystem order)
+        for (const jsFile of jsFiles) {
+            const key = path.basename(jsFile, '.js');
+            if (!processedKeys.has(key)) {
+                const field = computedFieldsMap.get(key);
+                if (field) {
+                    orderedFields.push(field);
+                    processedKeys.add(key);
+                }
+            }
+        }
+        return orderedFields;
+    }
+    // No config or no computedFields in config, return in filesystem order
+    // Use a Set to deduplicate since we may have multiple keys pointing to the same field
+    const seenFields = new Set();
+    const orderedFields = [];
+    for (const jsFile of jsFiles) {
+        const key = path.basename(jsFile, '.js');
+        const field = computedFieldsMap.get(key);
+        if (field && !seenFields.has(field)) {
+            orderedFields.push(field);
+            seenFields.add(field);
+        }
+    }
+    return orderedFields;
+}
+/**
+ * Loads dataOutputs (actions) from JS files in actions/ folder.
+ * Each JS file corresponds to one action.
+ */
+async function loadDataOutputs(embeddableId, config = null) {
+    const actionsDir = path.join('embeddables', embeddableId, 'actions');
+    if (!fs.existsSync(actionsDir)) {
+        return [];
+    }
+    // Find all JS files in actions directory
+    const jsFiles = await fg('**/*.js', {
+        cwd: actionsDir,
+        dot: false,
+    });
+    if (jsFiles.length === 0) {
+        return [];
+    }
+    // Use provided config or read it if not provided
+    if (!config) {
+        const configPath = path.join('embeddables', embeddableId, 'config.json');
+        if (fs.existsSync(configPath)) {
+            try {
+                const configContent = fs.readFileSync(configPath, 'utf8');
+                config = JSON.parse(configContent);
+            }
+            catch (error) {
+                // Ignore config parsing errors
+            }
+        }
+    }
+    // Build a map of actions by various identifiers for quick lookup
+    const dataOutputsMap = new Map();
+    for (const jsFile of jsFiles) {
+        const filePath = path.join(actionsDir, jsFile);
+        const code = fs.readFileSync(filePath, 'utf8');
+        // Extract key/name from filename (remove .js extension)
+        const identifier = path.basename(jsFile, '.js');
+        // Build action object
+        const action = {
+            id: identifier, // Use identifier as id if not specified
+            name: identifier,
+            output: 'custom',
+            code,
+        };
+        // If config has dataOutputs metadata, try to find matching action
+        // Match by comparing sanitized names since filenames are based on sanitized action names
+        if (config && config.dataOutputs) {
+            const configAction = config.dataOutputs.find((act) => {
+                // Compare sanitized versions since filename is based on sanitized name
+                const sanitizedName = act.name ? sanitizeFileName(act.name) : null;
+                return act.name === identifier || act.id === identifier || sanitizedName === identifier;
+            });
+            if (configAction) {
+                // Merge metadata from config (but keep code from file)
+                // Preserve order by cloning the config action first
+                const clonedConfigAction = deepClonePreservingOrder(configAction);
+                Object.assign(action, clonedConfigAction);
+                action.code = code; // Ensure code comes from file
+                // Preserve the original name from config, not the sanitized filename
+                if (configAction.name) {
+                    action.name = configAction.name;
+                }
+            }
+            delete action.key; // name is enough; don't emit key
+        }
+        // Store in map using identifier (filename) as the primary key
+        // Also store by id, key, name, and sanitized name for lookup
+        dataOutputsMap.set(identifier, action);
+        if (action.id && action.id !== identifier) {
+            dataOutputsMap.set(action.id, action);
+        }
+        if (action.name && action.name !== identifier && action.name !== action.id) {
+            const sanitizedName = sanitizeFileName(action.name);
+            if (sanitizedName !== identifier) {
+                dataOutputsMap.set(sanitizedName, action);
+            }
+        }
+    }
+    // If config has dataOutputs, preserve order from config
+    if (config && config.dataOutputs && Array.isArray(config.dataOutputs)) {
+        const orderedOutputs = [];
+        const processedIdentifiers = new Set();
+        // First, add actions in config order
+        for (const configAction of config.dataOutputs) {
+            // Try multiple matching strategies (name is enough; no key)
+            let matchedAction;
+            const possibleKeys = [
+                configAction.id,
+                configAction.name,
+                configAction.name ? sanitizeFileName(configAction.name) : null,
+            ].filter(Boolean);
+            for (const key of possibleKeys) {
+                const action = dataOutputsMap.get(key);
+                if (action && !processedIdentifiers.has(key)) {
+                    matchedAction = action;
+                    // Mark all possible identifiers as processed
+                    processedIdentifiers.add(key);
+                    if (action.id)
+                        processedIdentifiers.add(action.id);
+                    if (action.name) {
+                        processedIdentifiers.add(action.name);
+                        processedIdentifiers.add(sanitizeFileName(action.name));
+                    }
+                    break;
+                }
+            }
+            if (matchedAction) {
+                orderedOutputs.push(matchedAction);
+            }
+        }
+        // Then, add any actions not in config (in filesystem order)
+        for (const jsFile of jsFiles) {
+            const identifier = path.basename(jsFile, '.js');
+            if (!processedIdentifiers.has(identifier)) {
+                const action = dataOutputsMap.get(identifier);
+                if (action) {
+                    orderedOutputs.push(action);
+                    processedIdentifiers.add(identifier);
+                    if (action.id)
+                        processedIdentifiers.add(action.id);
+                    if (action.name) {
+                        processedIdentifiers.add(action.name);
+                        processedIdentifiers.add(sanitizeFileName(action.name));
+                    }
+                }
+            }
+        }
+        return orderedOutputs;
+    }
+    // No config or no dataOutputs in config, return in filesystem order
+    // Use a Set to deduplicate since we may have multiple keys pointing to the same action
+    const seenActions = new Set();
+    const orderedOutputs = [];
+    for (const jsFile of jsFiles) {
+        const identifier = path.basename(jsFile, '.js');
+        const action = dataOutputsMap.get(identifier);
+        if (action && !seenActions.has(action)) {
+            orderedOutputs.push(action);
+            seenActions.add(action);
+        }
+    }
+    return orderedOutputs;
+}
+/**
+ * Loads global components from TSX files in global-components/ folder.
+ * Each TSX file corresponds to components at a specific location.
+ * File naming: <location>.location.tsx (e.g., before_page.location.tsx)
+ * The _location is derived from the filename - no need for _location props in TSX or config.
+ */
+async function loadGlobalComponents(embeddableId, _config = null // config.components is no longer used - location comes from filename
+) {
+    const globalComponentsDir = path.join('embeddables', embeddableId, 'global-components');
+    if (!fs.existsSync(globalComponentsDir)) {
+        return [];
+    }
+    // Find all TSX files in global-components directory
+    const tsxFiles = await fg('**/*.location.tsx', {
+        cwd: globalComponentsDir,
+        dot: false,
+    });
+    if (tsxFiles.length === 0) {
+        return [];
+    }
+    const allComponents = [];
+    const seenIds = new Map();
+    // Build a component map for parent resolution
+    const componentMap = new Map();
+    // Map component ID to file location (derived from filename)
+    const componentToFileLocation = new Map();
+    for (const tsxFile of tsxFiles) {
+        const filePath = path.join(globalComponentsDir, tsxFile);
+        const code = fs.readFileSync(filePath, 'utf8');
+        // Extract location from filename (e.g., "before_page.location.tsx" -> "before_page")
+        const locationMatch = tsxFile.match(/^(.+)\.location\.tsx$/);
+        if (!locationMatch) {
+            console.warn(`Global component file "${tsxFile}" doesn't match expected pattern <location>.location.tsx`);
+            continue;
+        }
+        const fileLocation = locationMatch[1];
+        // Parse components from the file
+        const { parseGlobalComponentsFromFile } = await import('./parsePage.js');
+        const fileComponents = parseGlobalComponentsFromFile({
+            code,
+            filePath,
+        });
+        // Add components to map and validate
+        for (const component of fileComponents) {
+            // Store file location for this component (derived from filename)
+            componentToFileLocation.set(component.id, fileLocation);
+            // Global ID uniqueness check (using file location as pageKey for global components)
+            checkUniqueId(seenIds, component.id, {
+                file: filePath,
+                pageKey: `global-${fileLocation}`,
+            });
+            // Validate OptionSelector buttons
+            if (component.type === 'OptionSelector' && Array.isArray(component.buttons)) {
+                for (const b of component.buttons) {
+                    if (b?.id)
+                        checkUniqueId(seenIds, b.id, {
+                            file: filePath,
+                            pageKey: `global-${fileLocation}`,
+                        });
+                }
+            }
+            componentMap.set(component.id, component);
+        }
+    }
+    // Set _location for root components (no parent_id) based on filename
+    for (const [componentId, component] of componentMap) {
+        // Remove any _location prop that might have been in the TSX (we derive it from filename)
+        delete component._location;
+        // Root components (no parent_id) get _location from their filename
+        if (!component.parent_id) {
+            const fileLocation = componentToFileLocation.get(componentId);
+            if (!fileLocation) {
+                throw new CompileError(`Global component "${component.id}" (key: "${component.key}") has no parent_id but couldn't determine location from file.`);
+            }
+            component._location = fileLocation;
+        }
+        // Child components inherit location from parent - they don't need _location
+        allComponents.push(component);
+    }
+    return allComponents;
+}