@wavemaker-ai/react-codegen 1.0.0-next.27766

package/src/transpile/transpile.js

@@ -0,0 +1,1349 @@
+"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.HTMLElementClass = exports.isHTMLElement = exports.NodeType = exports.parse = exports.generateRandomString = void 0;
+const lodash_1 = require("lodash");
+const node_html_parser_1 = __importStar(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_browser_1 = require("../utils.browser");
+const id_generator_1 = require("./id-generator");
+const widget_inline_style_processor_1 = require("./widget-inline-style-processor");
+const utils_1 = require("./components/data/table/utils");
+const class_expression_util_1 = require("./class-expression.util");
+const generateRandomString = (length = 10) => Math.random().toString(20).substr(2, length);
+exports.generateRandomString = generateRandomString;
+/**
+ * Variable categories that do NOT expose a loading state.
+ * ModelVariable (wm.Variable) holds static/client-side data.
+ * Action types fire one-shot effects and have no in-flight indicator.
+ */
+const CATEGORIES_WITHOUT_LOADING = new Set([
+    "wm.Variable",
+    "wm.NavigationAction",
+    "wm.TimerAction",
+    "wm.NotificationAction",
+    "wm.LoginAction",
+    "wm.LogoutAction",
+]);
+/**
+ * Scans an element's `bind:` attribute values (post-preTranspile) and returns
+ * the distinct variable names referenced via `fragment?.Variables?.varName`.
+ */
+function extractVariableNamesFromElement(e) {
+    const vars = new Set();
+    const pattern = /fragment\??\.Variables\??\.([a-zA-Z_$][a-zA-Z0-9_$]*)/g;
+    Object.keys(e.attributes).forEach(attrName => {
+        const value = e.attributes[attrName];
+        if (!value)
+            return;
+        const matches = [...value.matchAll(pattern)];
+        matches.forEach(m => vars.add(m[1]));
+    });
+    return Array.from(vars);
+}
+/**
+ * Scans generated source (markup + split component bodies) for cross-context bindings on the
+ * active page — `fragment?.App?.activePage?.<...path>` — and returns the distinct dependency
+ * paths (normalized to dot-notation) the component reads, e.g.
+ * `Variables.PageDataInvoke1.dataSet.content` or `Widgets.button1.caption`.
+ *
+ * This is what powers cross-context reactivity: a partial/prefab can read another (the active)
+ * page's state (`Variables`, `Widgets`, anything), and the runtime needs to know, declaratively,
+ * which paths so it can value-gate re-renders to exactly those. Discovering them at codegen time
+ * avoids any runtime read-tracking proxy. The captured chain stops at the first non-identifier
+ * token (e.g. `(`, `[`), so method/bracket accessors are truncated harmlessly.
+ *
+ * Ancestor paths fully covered by a more specific descendant are dropped: e.g. a `datasource`
+ * binding to `Variables.PageDataInvoke1` and a `dataset` binding to
+ * `Variables.PageDataInvoke1.dataSet.content` collapse to just the latter. The ancestor resolves
+ * to a stable instance reference that never changes, so it adds no gating value.
+ */
+function extractActivePageDeps(source) {
+    const deps = new Set();
+    const pattern = /fragment(?:\?\.|\.)App(?:\?\.|\.)activePage((?:(?:\?\.|\.)[a-zA-Z0-9_$]+)+)/g;
+    for (const m of source.matchAll(pattern)) {
+        const path = m[1].replace(/\?\./g, ".").replace(/^\./, "");
+        if (path) {
+            deps.add(path);
+        }
+    }
+    const all = Array.from(deps);
+    return all.filter(path => !all.some(other => other !== path && other.startsWith(`${path}.`)));
+}
+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;
+// node-html-parser ESM wrapper bug: when bundlers use default interop, named exports (parse, NodeType, HTMLElement) are undefined
+exports.parse = typeof node_html_parser_1.default === "function"
+    ? node_html_parser_1.default
+    : node_html_parser_1.default.parse;
+// Use standard DOM node type constants (1, 3) - NodeType named export breaks under Turbopack/Next bundling
+exports.NodeType = {
+    ELEMENT_NODE: 1,
+    TEXT_NODE: 3,
+};
+/** Prefer over `instanceof HTMLElement` when the constructor may not match (e.g. bundlers). */
+const isHTMLElement = (node) => node != null && node.nodeType === exports.NodeType.ELEMENT_NODE;
+exports.isHTMLElement = isHTMLElement;
+// HTMLElement constructor - fallback for when named export is undefined (Turbopack/Next bundling)
+function getHTMLElementClass() {
+    var _a, _b, _c;
+    const fromModule = (_a = node_html_parser_1.default.HTMLElement) !== null && _a !== void 0 ? _a : node_html_parser_1.HTMLElement;
+    if (fromModule)
+        return fromModule;
+    // Fallback: get from parsed node (parse creates HTMLElement instances)
+    const parsed = (0, exports.parse)("<div></div>");
+    const firstEl = (_b = parsed.childNodes) === null || _b === void 0 ? void 0 : _b.find((c) => (c === null || c === void 0 ? void 0 : c.nodeType) === 1);
+    return ((_c = firstEl === null || firstEl === void 0 ? void 0 : firstEl.constructor) !== null && _c !== void 0 ? _c : (() => {
+        throw new Error("node-html-parser HTMLElement not available");
+    })());
+}
+exports.HTMLElementClass = getHTMLElementClass();
+// 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_browser_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_browser_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 == exports.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 == exports.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 == exports.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 == exports.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_browser_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_browser_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_browser_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_browser_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) {
+        // remove variant attribute from element
+        // because it's not required in JSX
+        e === null || e === void 0 ? void 0 : e.removeAttribute("variant");
+        // Rename lowercase skeleton attributes to their camelCase forms so that
+        // property-parser.ts resolves them correctly as numeric/boolean props.
+        Object.keys(e.attributes).forEach(name => {
+            const camelName = Transpiler.SKELETON_ATTR_RENAME[name];
+            if (camelName) {
+                const val = e.attributes[name];
+                e.removeAttribute(name);
+                e.setAttribute(camelName, val);
+            }
+        });
+        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 ((0, exports.isHTMLElement)(c)) {
+                this.preTranspile(c);
+            }
+        });
+    }
+    transformStyles(e, context) {
+        var _a, _b;
+        // 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 style_attr = e.getAttribute("style");
+        const rawStyles = e.getAttribute("styles") || style_attr;
+        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");
+            if (style_attr) {
+                e.removeAttribute("style");
+            }
+        }
+        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_browser_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:")) {
+            if ((_a = context === null || context === void 0 ? void 0 : context.get) === null || _a === void 0 ? void 0 : _a.call(context, "isInsideTableColumn")) {
+                let exp = classes.substring(5).replace("fragment.Page", "fragment");
+                exp = (0, utils_1.transformTableColumnClassExpression)(exp);
+                classes = `{${exp}}`;
+            }
+            else {
+                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_browser_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_browser_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.includes("{{") && classes.includes("}}")) {
+            const mustacheClass = (0, class_expression_util_1.transformClassWithMustacheExpressions)(classes, {
+                isInsideTableColumn: !!((_b = context === null || context === void 0 ? void 0 : context.get) === null || _b === void 0 ? void 0 : _b.call(context, "isInsideTableColumn")),
+            });
+            classes = mustacheClass !== null && mustacheClass !== void 0 ? mustacheClass : `'${classes}'`;
+        }
+        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_browser_1.addOptionalChaining)(classes),
+        };
+    }
+    // Parse arguments properly, handling commas inside object literals and arrays
+    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;
+        }
+        if (currentArg.trim()) {
+            args.push(currentArg.trim());
+        }
+        return args;
+    }
+    // Droping literal arguments like strings, numbers, booleans, null/undefined
+    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).
+    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
+    isPropertyAccess(s) {
+        return s.trim().includes(".");
+    }
+    // Object literals should not be extracted as function parameters
+    isObjectLiteral(s) {
+        const trimmed = s.trim();
+        if (trimmed.startsWith("{") && trimmed.includes(":")) {
+            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--;
+                }
+            }
+            return braceCount === 0 && trimmed.endsWith("}");
+        }
+        return false;
+    }
+    // Array literals should not be extracted as function parameters
+    isArrayLiteral(s) {
+        const trimmed = s.trim();
+        if (trimmed.startsWith("[") && trimmed.endsWith("]")) {
+            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--;
+                }
+            }
+            return bracketCount === 0;
+        }
+        return false;
+    }
+    findArgs(str, context) {
+        var _a, _b;
+        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 ((_b = context === null || context === void 0 ? void 0 : context.get) === null || _b === void 0 ? void 0 : _b.call(context, "isInsideList")) {
+            argStr = argStr
+                .split(",")
+                // List row context: omit loop-scoped proxies from synthesized handler params (`$item` from outer closure)
+                .filter(s => !(0, lodash_1.includes)(["$item", "currentItemWidgets"], s.trim()))
+                .join(",");
+        }
+        const parsedArgs = this.parseArguments(argStr);
+        const args = parsedArgs
+            .filter(Boolean)
+            .filter(s => !this.isLiteral(s))
+            .filter(s => !this.isArithmeticExpression(s))
+            .filter(s => !this.isPropertyAccess(s))
+            .filter(s => !this.isObjectLiteral(s))
+            .filter(s => !this.isArrayLiteral(s));
+        const usesBareEvent = /\$event\b/.test(str);
+        const hasEventParam = args.some(a => a.trim() === "$event");
+        if (usesBareEvent && !hasEventParam) {
+            return args.length > 0 ? `(${args.join(", ")}, $event)` : `($event)`;
+        }
+        return `(${args.join(", ")})`;
+    }
+    // Parse "($event, widget)" → ["$event", "widget"]; "()" → []
+    parseArrowParamNames(argsStr) {
+        const inner = argsStr.replace(/^\(|\)$/g, "").trim();
+        if (!inner)
+            return [];
+        return inner
+            .split(",")
+            .map(s => s.trim())
+            .filter(Boolean);
+    }
+    // Detect a `;` outside strings/parens/braces/brackets — signals multiple top-level statements
+    hasTopLevelSemicolon(body) {
+        let paren = 0;
+        let brace = 0;
+        let bracket = 0;
+        let inString = false;
+        let stringChar = "";
+        for (let i = 0; i < body.length; i++) {
+            const ch = body[i];
+            if ((ch === '"' || ch === "'") && (i === 0 || body[i - 1] !== "\\")) {
+                if (!inString) {
+                    inString = true;
+                    stringChar = ch;
+                }
+                else if (ch === stringChar) {
+                    inString = false;
+                }
+                continue;
+            }
+            if (inString)
+                continue;
+            if (ch === "(")
+                paren++;
+            else if (ch === ")")
+                paren--;
+            else if (ch === "{")
+                brace++;
+            else if (ch === "}")
+                brace--;
+            else if (ch === "[")
+                bracket++;
+            else if (ch === "]")
+                bracket--;
+            else if (ch === ";" && paren === 0 && brace === 0 && bracket === 0)
+                return true;
+        }
+        return false;
+    }
+    isInstanceBoundFragmentCallee(calleeRef) {
+        return Transpiler.INSTANCE_BOUND_CALLEE.test(calleeRef);
+    }
+    // Match a body shaped like `fragment(...property chain...)?.(args)` — return callee ref + raw arg list
+    extractFragmentMethodCall(body) {
+        const trimmed = body.trim();
+        if (!trimmed.endsWith(")") || !trimmed.startsWith("fragment"))
+            return null;
+        let depth = 0;
+        let openIdx = -1;
+        for (let i = trimmed.length - 1; i >= 0; i--) {
+            const ch = trimmed[i];
+            if (ch === ")")
+                depth++;
+            else if (ch === "(") {
+                depth--;
+                if (depth === 0) {
+                    openIdx = i;
+                    break;
+                }
+            }
+        }
+        if (openIdx < 2)
+            return null;
+        if (trimmed.substring(openIdx - 2, openIdx) !== "?.")
+            return null;
+        const calleeRef = trimmed.substring(0, openIdx - 2);
+        if (!Transpiler.FRAGMENT_CALLEE_REF.test(calleeRef))
+            return null;
+        const argsStr = trimmed.substring(openIdx + 1, trimmed.length - 1);
+        const callArgs = this.parseArguments(argsStr);
+        return { calleeRef, callArgs };
+    }
+    // Decide if an `on-*` handler body can be emitted as a direct function reference instead of an arrow wrapper.
+    // Eligible when body is a single `fragment?.x?.(...)` call whose args are all simple identifiers already
+    // present in the synthesized arrow parameter list — i.e. nothing references closure-only values like `$item`,
+    // `currentItemWidgetsRef.current`, literals, property-access expressions, or table column `rowData`.
+    //
+    // Additional exclusion: callee paths through `Actions` or `Variables` resolve to runtime instance
+    // methods (NavigationAction.invoke, BaseVariable.invoke, setData, navigate, …) that rely on `this`.
+    // Emitting them as detached refs strips the receiver and breaks runtime + WmAnchor's
+    // `getGoToPageNameFromClickHandler` source-string detection, so always wrap those in an arrow.
+    canUseDirectHandlerReference(body, arrowParams) {
+        const trimmed = body.replace(/;+\s*$/, "").trim();
+        if (!trimmed)
+            return null;
+        if (this.hasTopLevelSemicolon(trimmed))
+            return null;
+        const parsed = this.extractFragmentMethodCall(trimmed);
+        if (!parsed)
+            return null;
+        if (this.isInstanceBoundFragmentCallee(parsed.calleeRef))
+            return null;
+        const paramSet = new Set(arrowParams);
+        for (const raw of parsed.callArgs) {
+            const a = raw.trim();
+            if (!a)
+                continue;
+            if (this.isLiteral(a) ||
+                this.isArithmeticExpression(a) ||
+                this.isObjectLiteral(a) ||
+                this.isArrayLiteral(a) ||
+                this.isPropertyAccess(a)) {
+                return null;
+            }
+            if (!paramSet.has(a))
+                return null;
+        }
+        return parsed.calleeRef;
+    }
+    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) {
+        var _a, _b, _c;
+        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)");
+            // List preprocessors strip `?.` via removeOptionChaining before dataset replace — restore
+            // fragment/Variables optional chaining for the emitted handler body.
+            if ((_a = context === null || context === void 0 ? void 0 : context.get) === null || _a === void 0 ? void 0 : _a.call(context, "isInsideList")) {
+                value = value.replace(/;+\s*$/, "").trim();
+                value = addFragmentOptionalChaining(value, false);
+            }
+            const args = this.findArgs(value, context);
+            if ((_b = context === null || context === void 0 ? void 0 : context.get) === null || _b === void 0 ? void 0 : _b.call(context, "isInsideTableColumn")) {
+                value = value.replace(/\brow\b/g, "rowData");
+            }
+            const arrowParams = this.parseArrowParamNames(args);
+            const bodyForCheck = value.replace(/;+\s*$/, "").trim();
+            const directRef = this.canUseDirectHandlerReference(bodyForCheck, arrowParams);
+            if (directRef) {
+                value = `{${directRef}}`;
+            }
+            else {
+                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 = ((_c = context === null || context === void 0 ? void 0 : context.get) === null || _c === void 0 ? void 0 : _c.call(context, "isInsideTableColumn"))
+                ? (0, utils_1.transformTableColumnClassExpression)(exp)
+                : (0, utils_browser_1.modifyExpression)(exp);
+            exp = (0, bind_ex_transformer_1.resolveFormatContext)(exp, context);
+            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, _d;
+        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);
+            }
+            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}`;
+        }
+        // Inject a `loading` prop driven by the variable(s) the widget consumes so the
+        // skeleton hides once data arrives. showSkeleton is not emitted by codegen —
+        // runtime shows skeleton by default whenever loading is true.
+        const loadableVars = (_d = context.data) === null || _d === void 0 ? void 0 : _d.loadableVariables;
+        const referencedVars = extractVariableNamesFromElement(e);
+        const loadingVars = loadableVars
+            ? referencedVars.filter(name => loadableVars.has(name))
+            : referencedVars;
+        if (loadingVars.length > 0) {
+            const loadingParts = loadingVars.map(name => `fragment?.Variables?.${name}?.loading`);
+            str += ` loading={${loadingParts.join(" || ")} || false}`;
+        }
+        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);
+    }
+}
+// Skeleton-related attrs are authored in camelCase in WaveMaker markup but the HTML
+// parser lowercases all attribute names. Rename them back before attribute processing
+// so that property-parser.ts can match the camelCase keys it registers.
+Transpiler.SKELETON_ATTR_RENAME = {
+    skeletonrows: "skeletonRows",
+    skeletoncolumns: "skeletonColumns",
+    showskeleton: "showSkeleton",
+};
+// Pure property / safe-property / keyed-read chain rooted at `fragment`.
+// Rejects callee refs that contain intermediate calls (e.g. `fragment.a?.b?.()?.c`),
+// operators, assignments, whitespace — anything that would change semantics when
+// evaluated at render time instead of click time.
+Transpiler.FRAGMENT_CALLEE_REF = /^fragment(?:\??\.[a-zA-Z_$][\w$]*|(?:\?\.)?\[[^\]]*\])*$/;
+// Callee paths rooted at runtime instance objects (Actions, Variables) whose methods
+// (invoke, navigate, setData, …) rely on `this` and must not be emitted as detached refs.
+// Anchored to `fragment` so `fragment?.myService?.Actions?.run` (custom object that happens
+// to have an Actions property) is NOT incorrectly forced into an arrow wrapper.
+Transpiler.INSTANCE_BOUND_CALLEE = /^fragment(?:\?\.|\.)(?:Actions|Variables)(?:\?\.|\.|\[|$)/;
+const transpiler = new Transpiler();
+exports.registerTransformer = transpiler.registerTransformer.bind(transpiler);
+const transpileMarkup = (markup, isPartOfPrefab, splitCode, variables, preview, insideTableColumn) => {
+    const parsed = (0, exports.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();
+    // Variables that expose a .loading state — everything except ModelVariable and Actions
+    const loadableVariables = 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);
+            }
+            // Collect variables that have a loading state (excludes ModelVariable and all Actions)
+            if (v.name && !CATEGORIES_WITHOUT_LOADING.has(v.category)) {
+                loadableVariables.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,
+            loadableVariables: loadableVariables,
+            autolayoutCodegen,
+            preview: preview === true,
+            ...(insideTableColumn ? { isInsideTableColumn: true } : {}),
+        },
+    });
+    // Process all child nodes (including text nodes that come before the main element)
+    parsed.childNodes.forEach((node) => {
+        if (node.nodeType === exports.NodeType.TEXT_NODE) {
+            const textContent = node.text;
+            if (textContent.trim()) {
+                finalResult.markup += `{"${textContent.trim()}"} \n`;
+            }
+        }
+        else if (node.nodeType === exports.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();
+    // Statically discover cross-context active-page dependency paths from the generated source
+    // (top-level markup + any split component bodies) so the runtime can value-gate declaratively.
+    const generatedSource = [finalResult.markup, ...Object.values(finalResult.components)].join("\n");
+    finalResult.activePageDeps = extractActivePageDeps(generatedSource);
+    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 (/formatters/.test(displayexpression)) {
+            displayexpression = displayexpression.split(bind_ex_transformer_1.FORMAT_CONTEXT).join("$item");
+        }
+        // Transform fragment.name -> $item.name for item properties, but preserve
+        // page-level variables (appLocale, Variables) as fragment references.
+        displayexpression = displayexpression.replace(/fragment\.([a-zA-Z_$][a-zA-Z0-9_$]*)/g, (match, name) => (bind_ex_transformer_1.FRAGMENT_SCOPED_NAMES.includes(name) ? match : `$item.${name}`));
+        // Add optional chaining while preserving dots inside string literals (e.g. custom.rowCurrencyList)
+        displayexpression = (0, utils_browser_1.addOptionalChaining)(displayexpression);
+        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_browser_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