@wavemaker-ai/react-codegen 1.0.0-rc.647469

package/src/transpile/transpile.js

@@ -0,0 +1,1057 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createExpression = exports.transformDollarBracketSyntax = exports.decodeHTMLEntities = exports.transpileElement = exports.processTextContentForJSX = exports.addFragmentOptionalChaining = exports.createComponent = exports.preTranspile = exports.transformAttrs = exports.transpileMarkup = exports.registerTransformer = exports.TranspilationContext = exports.generateRandomString = void 0;
+const lodash_1 = require("lodash");
+const node_html_parser_1 = require("node-html-parser");
+const fomatter_1 = require("../fomatter");
+const bind_ex_transformer_1 = __importStar(require("./bind.ex.transformer"));
+const style_transformer_1 = __importDefault(require("./style.transformer"));
+const property_parser_1 = require("./property/property-parser");
+const utils_1 = require("../utils");
+const id_generator_1 = require("./id-generator");
+const widget_inline_style_processor_1 = require("./widget-inline-style-processor");
+const generateRandomString = (length = 10) => Math.random().toString(20).substr(2, length);
+exports.generateRandomString = generateRandomString;
+const EVENT_NAME_MAP = {
+    "on-dblclick": "on-doubleClick",
+    "on-mouseenter": "on-mouseEnter",
+    "on-mouseleave": "on-mouseLeave",
+    "on-mouseover": "on-mouseOver",
+    "on-mouseout": "on-mouseOut",
+    "on-beforesubmit": "on-BeforeSubmit",
+    "on-dragstart": "on-dragStart",
+    "on-dragend": "on-dragEnd",
+    "on-dragover": "on-dragOver",
+    "on-dragenter": "on-dragEnter",
+    "on-dragleave": "on-dragLeave",
+};
+/**
+ * Processes text content for JSX compatibility
+ * If content is only special characters (like > or <), wraps them in React expressions
+ * @param textContent The raw text content from the node
+ * @returns Processed text content safe for JSX, or empty string if no valid content
+ */
+const processTextContentForJSX = (textContent) => {
+    const trimmedContent = textContent.trim();
+    if (!trimmedContent) {
+        return "";
+    }
+    // If content is only special characters (like > or <), wrap in React expression
+    if (/^[<>&]+$/.test(trimmedContent)) {
+        // Convert each special character to React expression
+        return trimmedContent
+            .split("")
+            .map(char => `{'${char}'}`)
+            .join("");
+    }
+    return textContent;
+};
+exports.processTextContentForJSX = processTextContentForJSX;
+// Input widgets that should inherit required/floating-label behavior from wm-composite
+const COMPOSITE_INPUT_TAGS = new Set([
+    "wm-text",
+    "wm-number",
+    "wm-currency",
+    "wm-date",
+    "wm-time",
+    "wm-datetime",
+    "wm-textarea",
+    "wm-select",
+    "wm-radioset",
+    "wm-checkbox",
+    "wm-checkboxset",
+    "wm-switch",
+    "wm-slider",
+    "wm-fileupload",
+    "wm-rating",
+    "wm-colorpicker",
+    "wm-search",
+]);
+/**
+ * Adds optional chaining to fragment expressions and fallback values
+ * Converts fragment.Variables.wsGetActiveTheme.dataSet.content[0].themeId
+ * to (fragment?.Variables?.wsGetActiveTheme?.dataSet?.content?.[0]?.themeId || "")
+ *
+ * Note: Does not add fallback for expressions containing function calls to preserve syntax
+ */
+const addFragmentOptionalChaining = (expression, addFallback = false) => {
+    const chainingObj = {
+        targetPattern: /fragment(?:\.[a-zA-Z_$][a-zA-Z0-9_$]*|\[[^\]]+\])*/g,
+        addFallback: addFallback,
+        detectFunctionCalls: true,
+        ...(addFallback && { fallbackValue: '""' }),
+    };
+    return (0, utils_1.addOptionalChaining)(expression);
+};
+exports.addFragmentOptionalChaining = addFragmentOptionalChaining;
+class TranspilationContext {
+    constructor(args) {
+        this.result = args.result;
+        this.transformer = args.transformer;
+        this.isPartOfPrefab = args.isPartOfPrefab;
+        this.listener = args.listener;
+        this.props = args.props;
+        this.data = (0, lodash_1.assign)({}, args.data);
+    }
+    get(key) {
+        return this.data && this.data[key];
+    }
+    set(key, value) {
+        this.data[key] = value;
+    }
+}
+exports.TranspilationContext = TranspilationContext;
+class Transpiler {
+    constructor() {
+        this.transformers = new Map();
+        this.componentNamesList = [];
+        this.transpile = (e, isPartOfPrefab, splitCode = true, oldContext) => {
+            var _a;
+            const isHtmlElement = utils_1.htmlElements.includes(e.tagName.toLowerCase());
+            const ignoreElements = ["wm-filter-action", "wm-form-action"];
+            const transformer = this.transformers.get(e && e.tagName.toLowerCase());
+            let result = {
+                markup: "",
+                components: {},
+                attrs: {},
+                imports: [],
+                partials: [],
+                prefabs: [],
+                wmxcomponents: [],
+            };
+            // Skip name auto-generation for elements inside table column or explicitly ignored elements
+            if (!e.getAttribute("name") &&
+                !ignoreElements.includes(e.tagName.toLowerCase()) &&
+                !((_a = oldContext === null || oldContext === void 0 ? void 0 : oldContext.data) === null || _a === void 0 ? void 0 : _a.isInsideTableColumn)) {
+                e.setAttribute("name", `${e.tagName.toLowerCase().replace(/-/g, "_")}_${(0, exports.generateRandomString)()}`);
+            }
+            // for every new page, initially context is empty. Hence clearing the prev page componentNamesList array.
+            if (!oldContext) {
+                this.componentNamesList = [];
+            }
+            if (isHtmlElement) {
+                result.markup = preTranspileHtmlElement(e);
+                e.childNodes.forEach(c => {
+                    if (c && c.nodeType == node_html_parser_1.NodeType.ELEMENT_NODE) {
+                        const cResult = this.transpile(c, isPartOfPrefab, splitCode);
+                        (0, lodash_1.assignIn)(result.components, cResult.components);
+                        result.markup += cResult.markup;
+                        result.imports.push(...cResult.imports);
+                        result.prefabs.push(...cResult.prefabs);
+                        result.partials.push(...cResult.partials);
+                        result.components = { ...result.components, ...cResult.components };
+                        if (cResult.pageEvents)
+                            result.pageEvents = cResult.pageEvents;
+                    }
+                    else if (c && c.nodeType == node_html_parser_1.NodeType.TEXT_NODE) {
+                        // Preserve text nodes
+                        const processedContent = processTextContentForJSX(c.text);
+                        if (processedContent) {
+                            result.markup += processedContent;
+                        }
+                    }
+                });
+                result.markup += postTranspileHtmlElement(e);
+            }
+            else if (transformer != null) {
+                const context = new TranspilationContext({
+                    result: result,
+                    isPartOfPrefab: isPartOfPrefab,
+                    transformer: transformer,
+                    listener: oldContext === null || oldContext === void 0 ? void 0 : oldContext.listener,
+                    props: (oldContext === null || oldContext === void 0 ? void 0 : oldContext.props) || [],
+                    data: oldContext === null || oldContext === void 0 ? void 0 : oldContext.data,
+                });
+                result.imports.push(...transformer.imports(e, context));
+                result.markup +=
+                    transformer.pre(e, context).replace(new RegExp(bind_ex_transformer_1.FORMAT_CONTEXT, "g"), "") +
+                        (e.childNodes.length > 0 ? "\n" : "");
+                e.childNodes.forEach(c => {
+                    if (c && c.nodeType == node_html_parser_1.NodeType.ELEMENT_NODE) {
+                        const cResult = this.transpile(c, isPartOfPrefab, splitCode, context);
+                        (0, lodash_1.assignIn)(result.components, cResult.components);
+                        result.markup += cResult.markup;
+                        result.imports.push(...cResult.imports);
+                        result.prefabs.push(...cResult.prefabs);
+                        result.wmxcomponents.push(...cResult.wmxcomponents);
+                        result.partials.push(...cResult.partials);
+                        result.components = { ...result.components, ...cResult.components };
+                        if (cResult.pageEvents)
+                            result.pageEvents = cResult.pageEvents;
+                    }
+                    else if (c && c.nodeType == node_html_parser_1.NodeType.TEXT_NODE) {
+                        // Handle text nodes for custom elements
+                        const processedContent = processTextContentForJSX(c.text);
+                        if (processedContent) {
+                            result.markup += processedContent;
+                        }
+                    }
+                });
+                transformer.partials && result.partials.push(...transformer.partials(e, context));
+                transformer.prefabs && result.prefabs.push(...transformer.prefabs(e, context));
+                transformer.wmxcomponents &&
+                    result.wmxcomponents.push(...transformer.wmxcomponents(e, context));
+                result.markup += transformer.post(e, context).replace(new RegExp(bind_ex_transformer_1.FORMAT_CONTEXT, "g"), "");
+                // splitCode && transformer.createComponent && transformer.createComponent(e, context);
+                const accessRole = e.attrs["accessroles"];
+                if (accessRole) {
+                    result.markup = `{fragment.appConfig.SecurityService.hasAccessToWidget('${accessRole}') ? (${result.markup}): null}`;
+                }
+                result.markup = (0, fomatter_1.prependSpace)(result.markup, 2) + "\n";
+            }
+            return result;
+        };
+    }
+    /**
+     * Transforms $[...] syntax to fragment.property for use with Angular parser
+     * Examples:
+     *   $[location] -> fragment.location
+     *   $[data[$i].locationDesc] -> fragment.locationDesc (removes data[$i]. prefix)
+     */
+    transformDollarBracketForFragmentContext(expression) {
+        // First, remove data[$i]. prefixes from within $[...] brackets
+        expression = expression.replace(/\$\[data\[\$i\]\./g, "$[");
+        // Transform $[property.path] to fragment.property.path
+        expression = expression.replace(/\$\[([^\]]+)\]/g, (match, property) => {
+            // Remove any remaining data[index]. patterns
+            property = property.replace(/data\[\d+\]\./g, "");
+            return `${property}`;
+        });
+        return expression;
+    }
+    /**
+     * Checks if a parent element has a dataset that matches the base path of the current dataset.
+     * This is used to determine if [$i] should be handled by parent's $item transformation.
+     * Example: child has "Variables.list.dataSet[$i].Features", parent has "Variables.list.dataSet"
+     */
+    hasParentWithMatchingDataset(element, basePath) {
+        var _a;
+        let parent = element.parentNode;
+        while (parent) {
+            const parentDataset = (_a = parent.getAttribute) === null || _a === void 0 ? void 0 : _a.call(parent, "dataset");
+            if (parentDataset) {
+                // Remove bind: prefix if present
+                const parentDatasetValue = parentDataset.startsWith("bind:")
+                    ? parentDataset.substring(5)
+                    : parentDataset;
+                // Check if parent dataset matches the base path (the array being iterated)
+                if (parentDatasetValue === basePath || parentDatasetValue === `fragment.${basePath}`) {
+                    return true;
+                }
+            }
+            parent = parent.parentNode;
+        }
+        return false;
+    }
+    /**
+     * Transforms dataset expressions containing [$i] into a map function.
+     * Handles two cases:
+     * 1. Expression case: path[$i] inside a broader expression (e.g. function calls, pipes)
+     *    Example: (calculateLoanMetric(Variables.CustomerLoansData.dataSet[$i], 'percentagePaid')) | suffix: '%'
+     * 2. Simple path case: path-like structure with optional nested [$i]
+     *    Example: Variables.A[$i].children[$i].name
+     */
+    transformDatasetWithIndex(value) {
+        // Check if there are any [$i] patterns
+        if (!value.includes("[$i]")) {
+            return "bind:" + (0, bind_ex_transformer_1.default)(value, "fragment", "attr");
+        }
+        const segments = value.split("[$i]");
+        if (segments.length < 2) {
+            return "bind:" + (0, bind_ex_transformer_1.default)(value, "fragment", "attr");
+        }
+        // Detect expression case: second segment contains expression syntax (parens, pipes, commas)
+        // e.g. ", 'percentagePaid')) | suffix: '%'" vs simple path ".children.name"
+        const secondSegment = segments[1].trim();
+        const isSimplePathSegment = /^\.?[a-zA-Z0-9_.]*$/.test(secondSegment);
+        if (!isSimplePathSegment) {
+            // Expression case: replace path[$i] with item, transform inner expr, wrap in map
+            const pathIndexMatch = value.match(/([a-zA-Z_$][a-zA-Z0-9_$]*(?:\.[a-zA-Z_$][a-zA-Z0-9_$]*)*)\[\$i\]/);
+            if (!pathIndexMatch) {
+                return "bind:" + (0, bind_ex_transformer_1.default)(value, "fragment", "attr");
+            }
+            const basePath = pathIndexMatch[1];
+            const pathWithIndex = `${basePath}[$i]`;
+            const innerExpression = value.replace(pathWithIndex, "item");
+            value = this.transformDollarBracketForFragmentContext(innerExpression);
+            let transformedInner = (0, bind_ex_transformer_1.default)(value, "fragment", "attr");
+            // transformEx treats bare 'item' as fragment.item; fix for map callback param
+            transformedInner = transformedInner
+                .replace(/fragment\?\.item\b/g, "item")
+                .replace(/fragment\.item\b/g, "item");
+            const transformedBase = (0, utils_1.addOptionalChaining)(`fragment.${basePath}`);
+            const mapExpression = `${transformedBase}?.map((item) => ${transformedInner})`;
+            return `mapfn:() => ${mapExpression}`;
+        }
+        // Simple path case: use nested map logic
+        const basePath = segments[0];
+        const transformedBase = (0, utils_1.addOptionalChaining)(`fragment.${basePath}`);
+        const buildNestedMap = (segmentIndex, itemVar) => {
+            const segment = segments[segmentIndex];
+            let cleanSegment = segment.startsWith(".") ? segment.substring(1) : segment;
+            cleanSegment = cleanSegment.trim();
+            const isLastSegment = segmentIndex === segments.length - 1;
+            if (isLastSegment) {
+                if (cleanSegment) {
+                    return (0, utils_1.addOptionalChaining)(`${itemVar}.${cleanSegment}`);
+                }
+                return itemVar;
+            }
+            else {
+                const nextItemVar = segmentIndex === 1 ? "child" : `item${segmentIndex}`;
+                const nextExpression = buildNestedMap(segmentIndex + 1, nextItemVar);
+                if (cleanSegment) {
+                    const propertyAccess = (0, utils_1.addOptionalChaining)(`${itemVar}.${cleanSegment}`);
+                    return `${propertyAccess}?.map(${nextItemVar} => ${nextExpression})`;
+                }
+                return `${itemVar}?.map(${nextItemVar} => ${nextExpression})`;
+            }
+        };
+        const mapExpression = `${transformedBase}?.map(item => ${buildNestedMap(1, "item")}) || []`;
+        return `mapfn:() => ${mapExpression}`;
+    }
+    preTranspile(e) {
+        Object.keys(e.attributes).forEach(name => {
+            let value = e.attributes[name];
+            if (value.startsWith("bind:")) {
+                value = value.substring(5).trim();
+                // Remove trailing semicolons (common in WaveMaker expressions but invalid in JSX)
+                value = value.replace(/;+$/, "");
+                // Check if this is a simple single $[...] expression that can be simplified
+                const simpleSinglePattern = /^\$\[([^\]]+)\]$/;
+                const match = value.match(simpleSinglePattern);
+                if (match) {
+                    // Extract property path and remove data[$i]. prefix if present
+                    let propertyPath = match[1];
+                    propertyPath = propertyPath.replace(/^data\[\$i\]\./, "");
+                    propertyPath = propertyPath.replace(/^data\[\d+\]\./, "");
+                    e.setAttribute(name, propertyPath);
+                }
+                else if (name === "dataset" && value.includes("[$i]")) {
+                    // Check if this [$i] should be handled by a parent's $item transformation
+                    // Extract base path (everything before [$i])
+                    const basePathMatch = value.match(/^(.+?)\[\$i\]/);
+                    const basePath = basePathMatch ? basePathMatch[1] : null;
+                    if (basePath && this.hasParentWithMatchingDataset(e, basePath)) {
+                        // Parent has matching dataset - let transformRepeatChildData handle [$i] → $item
+                        // Transform $[...] syntax before passing to Angular parser
+                        value = this.transformDollarBracketForFragmentContext(value);
+                        let transformedValue = (0, bind_ex_transformer_1.default)(value, "fragment", "attr");
+                        e.setAttribute(name, "bind:" + transformedValue);
+                    }
+                    else {
+                        // No parent with matching dataset - generate map function
+                        const datasetMapResult = this.transformDatasetWithIndex(value);
+                        e.setAttribute(name, datasetMapResult);
+                    }
+                }
+                else {
+                    // Transform $[...] syntax before passing to Angular parser
+                    value = this.transformDollarBracketForFragmentContext(value);
+                    let transformedValue = (0, bind_ex_transformer_1.default)(value, "fragment", "attr");
+                    // Apply optional chaining with fallback only for backgroundimage
+                    if (name === "backgroundimage") {
+                        transformedValue = addFragmentOptionalChaining(transformedValue, true);
+                    }
+                    e.setAttribute(name, "bind:" + transformedValue);
+                }
+            }
+            else if (name === "groupby" && value.includes("(")) {
+                e.setAttribute(name, (0, bind_ex_transformer_1.default)(value, "fragment", "event"));
+            }
+            else if (name.startsWith("on-")) {
+                //on-tap to onclick conversion
+                if (name === "on-tap") {
+                    if (e.getAttribute("on-click")) {
+                        e.removeAttribute("on-tap");
+                        return;
+                    }
+                    const tapValue = value;
+                    e.removeAttribute("on-tap");
+                    name = "on-click";
+                    value = tapValue;
+                }
+                const mappedName = EVENT_NAME_MAP[name];
+                if (mappedName) {
+                    e.removeAttribute(name);
+                    name = mappedName;
+                }
+                let transformedValue = (0, bind_ex_transformer_1.default)(value, "fragment", "event");
+                // Apply optional chaining for event handlers
+                transformedValue = addFragmentOptionalChaining(transformedValue, false);
+                e.setAttribute(name, transformedValue + ";");
+            }
+        });
+        e.childNodes.forEach(c => {
+            if (c instanceof node_html_parser_1.HTMLElement) {
+                this.preTranspile(c);
+            }
+        });
+    }
+    transformStyles(e, context) {
+        // WaveMaker source markup may carry a `styles` attr with raw CSS (e.g. "cursor:pointer;").
+        // Parse it into a JS style object and remove the raw attr so it doesn't leak into output.
+        let rawStylesObj = {};
+        const rawStyles = e.getAttribute("styles");
+        if (rawStyles && !rawStyles.startsWith("bind:") && !rawStyles.startsWith("{")) {
+            rawStyles.split(";").forEach(rule => {
+                const colonIdx = rule.indexOf(":");
+                if (colonIdx > 0) {
+                    const prop = rule.substring(0, colonIdx).trim();
+                    const val = rule.substring(colonIdx + 1).trim();
+                    if (prop && val) {
+                        const camelProp = prop.replace(/-([a-z])/g, (_, l) => l.toUpperCase());
+                        rawStylesObj[camelProp] = val;
+                    }
+                }
+            });
+            e.removeAttribute("styles");
+        }
+        const hasConditionalStyles = e.getAttribute("conditionalstyle");
+        if (hasConditionalStyles) {
+            // add optional chaining to the conditional styles
+            e.setAttribute("conditionalstyle", addFragmentOptionalChaining(hasConditionalStyles, true));
+        }
+        const styleObj = (0, style_transformer_1.default)(e, (propName) => {
+            const transformer = context.transformer;
+            if (transformer && transformer.isStyleProperty) {
+                return transformer.isStyleProperty(propName, e, context);
+            }
+            return true;
+        }) || {};
+        // Merge raw CSS properties from `styles` attr into the style object
+        if (Object.keys(rawStylesObj).length > 0) {
+            (0, lodash_1.merge)(styleObj, rawStylesObj);
+        }
+        let classes = e.getAttribute("class") || "";
+        let isStatic = true;
+        let styles = styleObj;
+        let style = {};
+        const styleAttr = e.getAttribute("style");
+        if (styleAttr) {
+            style =
+                (0, style_transformer_1.default)(e, (propName) => {
+                    const transformer = context.transformer;
+                    if (transformer && transformer.isStyleProperty) {
+                        return transformer.isStyleProperty(propName, e, context);
+                    }
+                    return true;
+                }) || {};
+            styles = (0, lodash_1.merge)(style, styleObj);
+        }
+        if (styles) {
+            Object.keys(styleObj).forEach(i => {
+                const styleProp = styleObj[i];
+                if ((0, lodash_1.isString)(styleProp) && styleProp.startsWith("bind:")) {
+                    isStatic = false;
+                    const bindExpr = styleProp.substring(5);
+                    styleObj[i] = `{___${(0, utils_1.addOptionalChaining)(bindExpr)}___}`;
+                }
+            });
+            if (styles.background) {
+                styles.root = styles.root || {};
+                styles.root._background = styles.background;
+                delete styles.background;
+            }
+            styles = JSON.stringify(styleObj).replace(/\\"/g, '"');
+            if (!isStatic) {
+                styles = styles.replace(/"\{___/g, "");
+                styles = styles.replace(/___\}"/g, "");
+            }
+        }
+        let conditionalClasses = e.getAttribute("conditionalclass") || e.getAttribute("ngclass");
+        if (classes.startsWith("bind:")) {
+            classes = `{${classes.substring(5)}}`;
+        }
+        if (conditionalClasses) {
+            conditionalClasses = conditionalClasses.startsWith("bind:")
+                ? `${conditionalClasses.substring(5)}`
+                : conditionalClasses;
+            if (conditionalClasses.startsWith("{") && conditionalClasses.endsWith("}")) {
+                conditionalClasses = conditionalClasses.slice(1, -1);
+                let expressions = conditionalClasses.split(",").map(expression => {
+                    const [className, condition] = expression.split(":");
+                    // If no condition is provided (no colon), wrap the class in quotes
+                    if (!condition) {
+                        return `'${className.trim()}'`;
+                    }
+                    return `(${(0, utils_1.addOptionalChaining)(condition.trim())} ? ${className.replace(/'$/, " '")} : '')`;
+                });
+                conditionalClasses = expressions.join("+");
+            }
+            else if (!conditionalClasses.includes(":") &&
+                !conditionalClasses.includes("&&") &&
+                !conditionalClasses.includes("||") &&
+                !conditionalClasses.includes("$formField")) {
+                conditionalClasses = `${conditionalClasses}`;
+            }
+            else {
+                conditionalClasses = (0, utils_1.addOptionalChaining)(conditionalClasses);
+            }
+            if (classes === null || classes === void 0 ? void 0 : classes.startsWith("{")) {
+                classes = classes.substring(0, classes.length - 1);
+                classes = `${classes} + ' ' + ${conditionalClasses}}`;
+            }
+            else if (classes) {
+                classes = `{'${classes} ' + ${conditionalClasses}}`;
+            }
+            else {
+                classes = `{${conditionalClasses}}`;
+            }
+        }
+        else if (!!classes && !classes.startsWith("{")) {
+            classes = `'${classes}'`;
+        }
+        e.removeAttribute("conditionalclass");
+        e.removeAttribute("ngclass");
+        e.removeAttribute("class");
+        e.removeAttribute("style");
+        return {
+            styles: styles,
+            className: (0, utils_1.addOptionalChaining)(classes),
+        };
+    }
+    findArgs(str, context) {
+        var _a;
+        let argStr = "";
+        let maxSplits = 0;
+        (_a = str.match(/\([^;]*\)/g)) === null || _a === void 0 ? void 0 : _a.forEach(s => {
+            const c = s.split(",").length;
+            if (maxSplits < c) {
+                maxSplits = c;
+                argStr = s;
+            }
+        });
+        argStr = argStr.replace(/\(|\)/g, "");
+        if (argStr.indexOf("currentItemWidgets") > 0 && (context === null || context === void 0 ? void 0 : context.get("isInsideList"))) {
+            argStr = argStr
+                .split(",")
+                // implement the logic for currentItemWidgets in proxy mechanism for looped items
+                .filter(s => !(0, lodash_1.includes)(["$item", "currentItemWidgets"], s.trim()))
+                .join(",");
+        }
+        // Parse arguments properly, handling commas inside object literals and arrays
+        const parseArguments = (argString) => {
+            const args = [];
+            let currentArg = "";
+            let braceCount = 0;
+            let bracketCount = 0;
+            for (let i = 0; i < argString.length; i++) {
+                const char = argString[i];
+                // Track object literals (curly braces) and arrays (square brackets)
+                if (char === "{")
+                    braceCount++;
+                else if (char === "}")
+                    braceCount--;
+                else if (char === "[")
+                    bracketCount++;
+                else if (char === "]")
+                    bracketCount--;
+                // If we encounter a comma at the top level (not inside an object or array), it's an argument separator
+                if (char === "," && braceCount === 0 && bracketCount === 0) {
+                    if (currentArg.trim()) {
+                        args.push(currentArg.trim());
+                    }
+                    currentArg = "";
+                    continue;
+                }
+                currentArg += char;
+            }
+            // Add the last argument
+            if (currentArg.trim()) {
+                args.push(currentArg.trim());
+            }
+            return args;
+        };
+        // Droping literal arguments like strings, numbers, booleans, null/undefined
+        const isLiteral = (s) => {
+            const v = s.trim();
+            return (/^(['"]).*\1$/.test(v) ||
+                /^-?\d+(?:\.\d+)?$/.test(v) ||
+                /^(true|false|null|undefined)$/i.test(v));
+        };
+        // Arithmetic/binary expressions (e.g. "0-5", "0+3") are not valid parameter names.
+        // The Angular parser converts unary negatives like -5 into binary (0-5).
+        const isArithmeticExpression = (s) => {
+            const v = s.trim();
+            return /^\d+\s*[-+*/%]\s*\d+/.test(v);
+        };
+        // Check if argument contains a dot (property access), which makes it an expression, not a valid parameter name
+        const isPropertyAccess = (s) => {
+            return s.trim().includes(".");
+        };
+        // Object literals should not be extracted as function parameters
+        const isObjectLiteral = (s) => {
+            const trimmed = s.trim();
+            // Check if it starts with { and contains at least one : (key-value pair)
+            if (trimmed.startsWith("{") && trimmed.includes(":")) {
+                // Verify it's a balanced object literal
+                let braceCount = 0;
+                let inString = false;
+                let stringChar = "";
+                for (let i = 0; i < trimmed.length; i++) {
+                    const char = trimmed[i];
+                    if ((char === '"' || char === "'") && (i === 0 || trimmed[i - 1] !== "\\")) {
+                        if (!inString) {
+                            inString = true;
+                            stringChar = char;
+                        }
+                        else if (char === stringChar) {
+                            inString = false;
+                        }
+                    }
+                    else if (!inString) {
+                        if (char === "{")
+                            braceCount++;
+                        else if (char === "}")
+                            braceCount--;
+                    }
+                }
+                // If braces are balanced and it ends with }, it's an object literal
+                return braceCount === 0 && trimmed.endsWith("}");
+            }
+            return false;
+        };
+        // Array literals should not be extracted as function parameters
+        const isArrayLiteral = (s) => {
+            const trimmed = s.trim();
+            // Check if it starts with [ and ends with ]
+            if (trimmed.startsWith("[") && trimmed.endsWith("]")) {
+                // Verify it's a balanced array literal
+                let bracketCount = 0;
+                let inString = false;
+                let stringChar = "";
+                for (let i = 0; i < trimmed.length; i++) {
+                    const char = trimmed[i];
+                    if ((char === '"' || char === "'") && (i === 0 || trimmed[i - 1] !== "\\")) {
+                        if (!inString) {
+                            inString = true;
+                            stringChar = char;
+                        }
+                        else if (char === stringChar) {
+                            inString = false;
+                        }
+                    }
+                    else if (!inString) {
+                        if (char === "[")
+                            bracketCount++;
+                        else if (char === "]")
+                            bracketCount--;
+                    }
+                }
+                // If brackets are balanced, it's an array literal
+                return bracketCount === 0;
+            }
+            return false;
+        };
+        const parsedArgs = parseArguments(argStr);
+        const args = parsedArgs
+            .filter(Boolean)
+            .filter(s => !isLiteral(s))
+            .filter(s => !isArithmeticExpression(s))
+            .filter(s => !isPropertyAccess(s))
+            .filter(s => !isObjectLiteral(s))
+            .filter(s => !isArrayLiteral(s));
+        return `(${args.join(", ")})`;
+    }
+    quoteAttr(v) {
+        return ("" + v) /* Forces the conversion to string. */
+            .replace(/&/g, "&amp;") /* This MUST be the 1st replacement. */
+            .replace(/'/g, "&apos;") /* The 4 other predefined entities, required. */
+            .replace(/"/g, "&quot;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;");
+    }
+    /**
+     * Converts ternary expressions that return string literals "true"/"false" to actual boolean values
+     * Example: (condition?"true":"false") -> (condition?true:false)
+     * Handles cases like: (condition?"true":"false"), (condition? "true" : "false"), etc.
+     */
+    convertStringBooleanTernary(exp) {
+        return exp.replace(/\?\s*["'](true|false)["']\s*:\s*["'](true|false)["']/g, (_, g1, g2) => `?${g1}:${g2}`);
+    }
+    shouldTrimUrlAttribute(name) {
+        const attrName = name.toLowerCase();
+        return attrName.endsWith("url") || attrName.endsWith("src");
+    }
+    transformAttr(tagName, name, value, context, tx) {
+        if (name === "styles" || name === "style" || name === "className") {
+            // continue
+        }
+        else if (name === "groupby" && value.includes("(")) {
+            value = `${this.findArgs(value, context)} => ${value}`;
+            value = `{${value}}`;
+        }
+        else if (name.startsWith("on-")) {
+            name = "on" + name.charAt(3).toUpperCase() + name.substr(4);
+            value = value.replace(/item,/g, "$item,");
+            value = value.replace(/item\./g, "$item.");
+            value = value.replace(/item\)/g, "$item)");
+            const args = this.findArgs(value, context);
+            if (context === null || context === void 0 ? void 0 : context.get("isInsideTableColumn")) {
+                value = value.replace(/\brow\b/g, "rowData");
+            }
+            value = `${args} => {${value}}`;
+            value = `{${value}}`;
+        }
+        else if (name === "datasource" || name === "deletedatasource") {
+            if (value.startsWith("fragment")) {
+                value = `{${value}}`;
+            }
+        }
+        else if (value.startsWith("mapfn:")) {
+            // Handle dataset with $i - wrapped as a function
+            const exp = value.substring(6); // Remove "mapfn:" prefix
+            value = `{${exp}}`;
+        }
+        else if (value.startsWith("bind:")) {
+            let exp = `${value.substring(5)}`;
+            exp = exp.replace("fragment.Page", "fragment");
+            const isProgressCircleDatavalue = tagName === "wm-progress-circle" && name === "datavalue";
+            exp = (0, utils_1.modifyExpression)(exp);
+            exp = this.convertStringBooleanTernary(exp);
+            // If expression is empty after transformation, use empty string instead of empty braces
+            if (!exp) {
+                exp = '""';
+            }
+            if (isProgressCircleDatavalue) {
+                value = `{(${exp} || 0)}`; // for progress circle datavalue, we need to set the value to 0 if it is null or undefined
+            }
+            else {
+                value = name === "show" ? `{(${exp} || false)}` : `{${exp}}`;
+            }
+            if (name === "conditionalclass") {
+                return "";
+            }
+        }
+        else if (name === "width" || name === "height") {
+            let exp = `${value.substring(5)}`;
+            value = `{${value}}`;
+        }
+        else {
+            if (this.shouldTrimUrlAttribute(name)) {
+                value = value.trim();
+            }
+            value = this.quoteAttr(value);
+            value = (0, property_parser_1.parseProperty)(value, name, tagName);
+        }
+        if (tx) {
+            const rvalue = tx(name, value);
+            if (!(0, lodash_1.isNil)(rvalue)) {
+                value = rvalue;
+            }
+        }
+        return (0, lodash_1.isNil)(value) || (0, lodash_1.isEmpty)(value) ? "" : `${name}=${value}`;
+    }
+    transformAttrs(e, context, tx) {
+        var _a, _b, _c;
+        const autolayout = (_a = context.data) === null || _a === void 0 ? void 0 : _a.autolayoutCodegen;
+        const autoLayoutResult = (_b = autolayout === null || autolayout === void 0 ? void 0 : autolayout.processElement(e)) !== null && _b !== void 0 ? _b : null;
+        e.setAttribute("data-widget-id", (0, id_generator_1.generateWidgetId)());
+        const { styles, className } = this.transformStyles(e, context);
+        const tagName = e.tagName.toLowerCase();
+        if (!(0, lodash_1.isEmpty)(styles) && styles != "{}") {
+            e.setAttribute("styles", `{${styles}}`);
+        }
+        if (!(0, lodash_1.isEmpty)(className) && className) {
+            e.setAttribute("className", className);
+        }
+        if (tagName === "wm-composite" &&
+            (e.getAttribute("captionposition") === "floating" || e.getAttribute("required") === "true")) {
+            const labelNode = e.childNodes.find((node) => { var _a; return node.tagName && ((_a = node.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "wm-label"; });
+            const isRequired = e.getAttribute("required") === "true";
+            const floatingLabel = e.getAttribute("captionposition") === "floating";
+            const labelCaption = (labelNode === null || labelNode === void 0 ? void 0 : labelNode.getAttribute("caption")) || "";
+            const containerNode = e.childNodes.find((node) => { var _a; return node.tagName && ((_a = node.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "wm-container"; });
+            const searchNodes = (containerNode === null || containerNode === void 0 ? void 0 : containerNode.childNodes) || e.childNodes || [];
+            const foundInputs = searchNodes.filter((node) => { var _a, _b; return COMPOSITE_INPUT_TAGS.has(((_b = (_a = node.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a)) || ""); });
+            if (foundInputs.length && floatingLabel) {
+                foundInputs[0].setAttribute("floatinglabel", labelCaption);
+                labelNode && labelNode.remove();
+            }
+            if (isRequired) {
+                labelNode && labelNode.setAttribute("required", "true");
+                const name = (_c = foundInputs[0]) === null || _c === void 0 ? void 0 : _c.getAttribute("name");
+                labelNode && name && labelNode.setAttribute("htmlFor", name);
+                foundInputs.forEach(n => n.setAttribute("required", "true"));
+            }
+        }
+        let str = Object.keys(e.attributes)
+            .map(name => {
+            return this.transformAttr(tagName, name, e.attributes[name], context, tx);
+        })
+            .join(" ");
+        // Append layoutClassName as a separate attribute, bypassing setAttribute to avoid HTML-entity encoding
+        if (autoLayoutResult && autolayout) {
+            const layoutClassNameValue = autolayout.buildLayoutClassNameAttr(autoLayoutResult);
+            str += ` layoutClassName=${layoutClassNameValue}`;
+        }
+        return str;
+    }
+    createUniqueComponentName(components, name, counter = 0) {
+        name = name + counter;
+        if (components[name]) {
+            return this.createUniqueComponentName(components, name, counter++);
+        }
+        return name;
+    }
+    createComponent(e, context) {
+        const result = context.result;
+        let widgetName = "PC_" + (0, lodash_1.capitalize)(e.attrs["name"]);
+        widgetName = (0, lodash_1.replace)(widgetName, /[^a-zA-Z0-9]/g, "_");
+        if (this.componentNamesList.indexOf(widgetName) !== -1) {
+            widgetName = this.createUniqueComponentName(result.components, widgetName);
+        }
+        this.componentNamesList.push(widgetName);
+        const props = ["fragment", ...context.props];
+        result.components[widgetName] = `({${props.join(",")}}) => {
+            return (${result.markup});
+        }`;
+        result.markup = `<${widgetName} ${props.map(p => `${p}={${p}}`).join(" ")}/>`;
+        return result;
+    }
+    registerTransformer(tagName, transformer) {
+        transpiler.transformers.set(tagName, transformer);
+    }
+}
+const transpiler = new Transpiler();
+exports.registerTransformer = transpiler.registerTransformer.bind(transpiler);
+const transpileMarkup = (markup, isPartOfPrefab, splitCode, variables) => {
+    const parsed = (0, node_html_parser_1.parse)(markup, {
+        blockTextElements: {},
+    });
+    let finalResult = {
+        markup: "",
+        components: {},
+        partials: [],
+        wmxcomponents: [],
+        prefabs: [],
+        imports: [],
+    };
+    // Create a map of ModelVariables (wm.Variable category) with twoWayBinding: true
+    // Only ModelVariables support twoWayBinding, other variable types don't
+    const twoWayBindingVariables = new Set();
+    if (variables) {
+        Object.values(variables).forEach((v) => {
+            // Only check twoWayBinding for ModelVariables (category === "wm.Variable")
+            // These are the only variables that support two-way binding
+            if (v.category === "wm.Variable" && v.twoWayBinding === true && v.name) {
+                twoWayBindingVariables.add(v.name);
+            }
+        });
+    }
+    const autolayoutCodegen = new widget_inline_style_processor_1.AutolayoutCodegen();
+    // Create initial context with twoWayBinding variables info to pass down the tree
+    const initialContext = new TranspilationContext({
+        result: finalResult,
+        isPartOfPrefab: isPartOfPrefab,
+        transformer: {},
+        props: [],
+        data: {
+            twoWayBindingVariables: twoWayBindingVariables,
+            autolayoutCodegen,
+        },
+    });
+    // Process all child nodes (including text nodes that come before the main element)
+    parsed.childNodes.forEach((node) => {
+        if (node.nodeType === node_html_parser_1.NodeType.TEXT_NODE) {
+            const textContent = node.text;
+            if (textContent.trim()) {
+                finalResult.markup += `{"${textContent.trim()}"} \n`;
+            }
+        }
+        else if (node.nodeType === node_html_parser_1.NodeType.ELEMENT_NODE) {
+            transpiler.preTranspile(node);
+            const result = transpiler.transpile(node, isPartOfPrefab, splitCode, initialContext);
+            finalResult.markup += result.markup;
+            finalResult.components = { ...finalResult.components, ...result.components };
+            finalResult.partials.push(...result.partials);
+            finalResult.prefabs.push(...result.prefabs);
+            finalResult.wmxcomponents.push(...result.wmxcomponents);
+            finalResult.imports.push(...result.imports);
+            if (result.pageEvents)
+                finalResult.pageEvents = result.pageEvents;
+        }
+    });
+    finalResult.autolayoutCss = autolayoutCodegen.getDynamicCssRules();
+    return finalResult;
+};
+exports.transpileMarkup = transpileMarkup;
+exports.transformAttrs = transpiler.transformAttrs.bind(transpiler);
+exports.preTranspile = transpiler.preTranspile.bind(transpiler);
+exports.createComponent = transpiler.createComponent.bind(transpiler);
+const transpileElement = (element, isPartOfPrefab, splitCode = true, oldContext) => {
+    return transpiler.transpile(element, isPartOfPrefab, splitCode, oldContext);
+};
+exports.transpileElement = transpileElement;
+/**
+ * Decodes HTML entities in a string
+ * Handles common entities like &quot;, &amp;, &lt;, &gt;, &apos;
+ */
+const decodeHTMLEntities = (text) => {
+    const entities = {
+        "&quot;": '"',
+        "&amp;": "&",
+        "&lt;": "<",
+        "&gt;": ">",
+        "&apos;": "'",
+    };
+    return text.replace(/&[a-z]+;/g, entity => entities[entity] || entity);
+};
+exports.decodeHTMLEntities = decodeHTMLEntities;
+/**
+ * Transforms $[...] syntax to proper property access
+ * Examples:
+ *   $[location] -> $item.location
+ *   $[data[$i].locationDesc] -> $item.locationDesc (removes data[$i]. prefix)
+ *   $[fragment.assetType] -> $item.assetType (removes fragment. prefix)
+ */
+const transformDollarBracketSyntax = (expression) => {
+    // First, remove data[$i]. prefixes from within $[...] brackets
+    expression = expression.replace(/\$\[data\[\$i\]\./g, "$[");
+    // Transform $[property.path] to $item.property.path
+    expression = expression.replace(/\$\[([^\]]+)\]/g, (match, property) => {
+        // Remove data[index]. and fragment. prefixes
+        property = property.replace(/data\[\d+\]\./g, "").replace(/^fragment\./, "");
+        return `$item.${property}`;
+    });
+    return expression;
+};
+exports.transformDollarBracketSyntax = transformDollarBracketSyntax;
+const createExpression = (element, attrName) => {
+    let displayexpression = element.attrs[attrName];
+    if (displayexpression === null || displayexpression === void 0 ? void 0 : displayexpression.startsWith("bind:")) {
+        displayexpression = displayexpression.substring(5).trim();
+        // Remove trailing semicolons (common in WaveMaker expressions but invalid in JSX)
+        displayexpression = displayexpression.replace(/;+$/, "");
+        // Decode HTML entities like &quot; to "
+        displayexpression = (0, exports.decodeHTMLEntities)(displayexpression);
+        // Transform $[...] syntax to proper property access
+        displayexpression = (0, exports.transformDollarBracketSyntax)(displayexpression);
+        // Replace fragment references with $item
+        displayexpression = displayexpression.replace(/fragment\.\$item/g, "$item");
+        displayexpression = displayexpression.replace(/fragment\.\$index/g, "$index");
+        displayexpression = displayexpression.replace(/fragment\.\$length/g, "$length");
+        displayexpression = displayexpression.replace(/fragment\.\$/g, "$item");
+        displayexpression = displayexpression.replace(/\$item\['fragment.(.*?)'\]/g, "$item['$1']");
+        displayexpression = displayexpression.replace(/\$item\[fragment.(.*?)\]/g, "$item['$1']");
+        displayexpression = displayexpression.replace(/\$item\['(.*?)'\]/g, "_get($item, '$1')");
+        displayexpression = displayexpression.replace(/fragment.index/g, "$index");
+        if (displayexpression.indexOf("fragment.formatters.") >= 0) {
+            displayexpression = displayexpression.replace(new RegExp(bind_ex_transformer_1.FORMAT_CONTEXT, "g"), "$item");
+        }
+        // Transform fragment.name -> $item.name for arrow functions with $item
+        displayexpression = displayexpression.replace(/fragment\.([a-zA-Z_$][a-zA-Z0-9_$]*)/g, "$item.$1");
+        // Add optional chaining for all property access (e.g., $item.App.appLocale -> $item?.App?.appLocale)
+        // Use negative lookbehind to avoid double optional chaining (??)
+        displayexpression = displayexpression.replace(/(?<!\?)\.([a-zA-Z_$][a-zA-Z0-9_$]*)/g, "?.$1");
+        displayexpression = displayexpression.replace(/([a-zA-Z0-9_$\]])\[/g, "$1?.[");
+        const exp = (0, lodash_1.includes)(displayexpression, "(") ? `${displayexpression}` : displayexpression;
+        if (displayexpression.indexOf("$index") >= 0) {
+            return `{($item, $index, $length) => (${exp})}`;
+        }
+        return `{($item) => (${exp})}`;
+    }
+    if ((0, utils_1.isJSExpression)(displayexpression)) {
+        const transformedExp = (0, bind_ex_transformer_1.default)(displayexpression, "$item");
+        return `{($item) => (${transformedExp})}`;
+    }
+};
+exports.createExpression = createExpression;
+const preTranspileHtmlElement = (e) => {
+    // Process style properties using style transformer
+    const styleObj = (0, style_transformer_1.default)(e, (propName) => {
+        return true; // Process all style properties
+    }) || {};
+    // Get all attributes except name (which is added by transpiler) and convert class to className
+    const attrs = Object.keys(e.attributes)
+        .filter(attr => attr !== "name")
+        .map(attr => {
+        const value = e.getAttribute(attr);
+        if (!value)
+            return `${attr}=""`;
+        // Convert HTML 'class' attribute to JSX 'className'
+        if (attr === "class") {
+            return `className="${value}"`;
+        }
+        // Convert HTML 'style' attribute to JSX style object
+        else if (attr === "style") {
+            const styleObject = convertStyleStringToObject(value);
+            return `style={${styleObject}}`;
+        }
+        return `${attr}="${value}"`;
+    })
+        .join(" ");
+    // Add processed styles if any were found
+    let styleAttr = "";
+    if (styleObj && Object.keys(styleObj).length > 0) {
+        styleAttr = ` style={${JSON.stringify(styleObj)}}`;
+    }
+    const attrsStr = attrs ? ` ${attrs}` : "";
+    return `<${e.tagName.toLowerCase()}${attrsStr}${styleAttr}>`;
+};
+/**
+ * Converts CSS style string to React style object format
+ * Example: "color:#ffffff; font-size:14px" -> {color:"#ffffff",fontSize:"14px"}
+ */
+const convertStyleStringToObject = (styleString) => {
+    if (!styleString || styleString.trim() === "") {
+        return "{}";
+    }
+    const styleObject = {};
+    // Split by semicolon and process each style property
+    styleString.split(";").forEach(rule => {
+        const colonIndex = rule.indexOf(":");
+        if (colonIndex > 0) {
+            const property = rule.substring(0, colonIndex).trim();
+            const value = rule.substring(colonIndex + 1).trim();
+            if (property && value) {
+                // Convert kebab-case to camelCase (e.g., font-size -> fontSize)
+                const camelCaseProperty = property.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+                styleObject[camelCaseProperty] = value;
+            }
+        }
+    });
+    // Convert to JSON string and return
+    return JSON.stringify(styleObject);
+};
+const postTranspileHtmlElement = (e) => {
+    return `</${e.tagName.toLowerCase()}>`;
+};
+//# sourceMappingURL=transpile.js.map