@wavemaker/react-codegen 11.14.2-1.245 → 12.0.0-next.28533

package/src/transpile/transpile.js

@@ -47,6 +47,27 @@ const utils_1 = require("../utils");
 const id_generator_1 = require("./id-generator");
 const generateRandomString = (length = 10) => Math.random().toString(20).substr(2, length);
 exports.generateRandomString = generateRandomString;
+/**
+ * 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;
+};
 // Input widgets that should inherit required/floating-label behavior from wm-composite
 const COMPOSITE_INPUT_TAGS = new Set([
     "wm-text",
@@ -81,7 +102,7 @@ const addFragmentOptionalChaining = (expression, addFallback = false) => {
         detectFunctionCalls: true,
         ...(addFallback && { fallbackValue: '""' }),
     };
-    return (0, utils_1.addOptionalChaining)(expression, chainingObj);
+    return (0, utils_1.addOptionalChaining)(expression);
 };
 class TranspilationContext {
     constructor(args) {
@@ -105,6 +126,7 @@ class Transpiler {
         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());
@@ -116,7 +138,10 @@ class Transpiler {
                 partials: [],
                 prefabs: [],
             };
-            if (!e.getAttribute("name") && !ignoreElements.includes(e.tagName.toLowerCase())) {
+            // 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.
@@ -137,9 +162,9 @@ class Transpiler {
                     }
                     else if (c && c.nodeType == node_html_parser_1.NodeType.TEXT_NODE) {
                         // Preserve text nodes
-                        const textContent = c.text;
-                        if (textContent.trim()) {
-                            result.markup += textContent;
+                        const processedContent = processTextContentForJSX(c.text);
+                        if (processedContent) {
+                            result.markup += processedContent;
                         }
                     }
                 });
@@ -170,9 +195,9 @@ class Transpiler {
                     }
                     else if (c && c.nodeType == node_html_parser_1.NodeType.TEXT_NODE) {
                         // Handle text nodes for custom elements
-                        const textContent = c.text;
-                        if (textContent.trim()) {
-                            result.markup += textContent;
+                        const processedContent = processTextContentForJSX(c.text);
+                        if (processedContent) {
+                            result.markup += processedContent;
                         }
                     }
                 });
@@ -189,18 +214,144 @@ class Transpiler {
             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 multiple [$i] occurrences by creating nested map chains.
+     */
+    transformDatasetWithIndex(value) {
+        // Check if there are any [$i] patterns
+        if (!value.includes("[$i]")) {
+            // Fallback to normal transformation if pattern doesn't match
+            return "bind:" + (0, bind_ex_transformer_1.default)(value, "fragment", "attr");
+        }
+        // Split the path by [$i] to get all segments
+        const segments = value.split("[$i]");
+        if (segments.length < 2) {
+            // Should not happen if includes("[$i]") is true, but safety check
+            return "bind:" + (0, bind_ex_transformer_1.default)(value, "fragment", "attr");
+        }
+        // First segment is the base path
+        const basePath = segments[0];
+        const transformedBase = (0, utils_1.addOptionalChaining)(`fragment.${basePath}`);
+        /**
+         * Recursively builds nested map expressions for each [$i] occurrence
+         * @param segmentIndex - Current segment index (starting from 1)
+         * @param itemVar - Variable name for the current iteration item
+         * @returns The nested map expression
+         */
+        const buildNestedMap = (segmentIndex, itemVar) => {
+            const segment = segments[segmentIndex];
+            // Remove leading dot if present and trim whitespace
+            let cleanSegment = segment.startsWith(".") ? segment.substring(1) : segment;
+            cleanSegment = cleanSegment.trim();
+            const isLastSegment = segmentIndex === segments.length - 1;
+            if (isLastSegment) {
+                // Last segment: extract the final property
+                if (cleanSegment) {
+                    return (0, utils_1.addOptionalChaining)(`${itemVar}.${cleanSegment}`);
+                }
+                else {
+                    return itemVar;
+                }
+            }
+            else {
+                // Intermediate segment: need to handle next [$i]
+                const nextItemVar = segmentIndex === 1 ? "child" : `item${segmentIndex}`;
+                const nextExpression = buildNestedMap(segmentIndex + 1, nextItemVar);
+                if (cleanSegment) {
+                    // Build nested map: currentItem.property.map(nextItem => ...)
+                    const propertyAccess = (0, utils_1.addOptionalChaining)(`${itemVar}.${cleanSegment}`);
+                    return `${propertyAccess}?.map(${nextItemVar} => ${nextExpression})`;
+                }
+                else {
+                    // No property, just map over the item itself
+                    return `${itemVar}?.map(${nextItemVar} => ${nextExpression})`;
+                }
+            }
+        };
+        // Build the complete expression with nested maps
+        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);
+                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) {
-                    e.setAttribute(name, match[1]);
+                    // 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") {
@@ -313,7 +464,7 @@ class Transpiler {
                     if (!condition) {
                         return `'${className.trim()}'`;
                     }
-                    return `(${condition.trim()} ? ${className.replace(/'$/, " '")} : '')`;
+                    return `(${(0, utils_1.addOptionalChaining)(condition.trim())} ? ${className.replace(/'$/, " '")} : '')`;
                 });
                 conditionalClasses = expressions.join("+");
             }
@@ -346,7 +497,7 @@ class Transpiler {
             className: classes,
         };
     }
-    findArgs(str) {
+    findArgs(str, context) {
         var _a;
         let argStr = "";
         let maxSplits = 0;
@@ -358,13 +509,46 @@ class Transpiler {
             }
         });
         argStr = argStr.replace(/\(|\)/g, "");
-        if (argStr.indexOf("currentItemWidgets") > 0) {
+        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();
@@ -376,12 +560,77 @@ class Transpiler {
         const isPropertyAccess = (s) => {
             return s.trim().includes(".");
         };
-        const args = argStr
-            .split(",")
-            .map(s => s.trim())
+        // 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 => !isPropertyAccess(s));
+            .filter(s => !isPropertyAccess(s))
+            .filter(s => !isObjectLiteral(s))
+            .filter(s => !isArrayLiteral(s));
         return `(${args.join(", ")})`;
     }
     quoteAttr(v) {
@@ -392,12 +641,20 @@ class Transpiler {
             .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}`);
+    }
     transformAttr(tagName, name, value, context, tx) {
         if (name === "styles" || name === "style" || name === "className") {
             // continue
         }
         else if (name === "groupby" && value.includes("(")) {
-            value = `${this.findArgs(value)} => ${value}`;
+            value = `${this.findArgs(value, context)} => ${value}`;
             value = `{${value}}`;
         }
         else if (name.startsWith("on-")) {
@@ -405,7 +662,11 @@ class Transpiler {
             value = value.replace(/item,/g, "$item,");
             value = value.replace(/item\./g, "$item.");
             value = value.replace(/item\)/g, "$item)");
-            value = `${this.findArgs(value)} => {${value}}`;
+            const args = this.findArgs(value, context);
+            if (context === null || context === void 0 ? void 0 : context.get("isInsideTableColumn")) {
+                value = value.replace(/\(row\)/g, "(rowData)");
+            }
+            value = `${args} => {${value}}`;
             value = `{${value}}`;
         }
         else if (name === "datasource" || name === "deletedatasource") {
@@ -413,10 +674,27 @@ class Transpiler {
                 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);
-            value = name === "show" ? `{Boolean(${exp})}` : `{${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 "";
             }
@@ -503,7 +781,7 @@ class Transpiler {
 }
 const transpiler = new Transpiler();
 exports.registerTransformer = transpiler.registerTransformer.bind(transpiler);
-const transpileMarkup = (markup, isPartOfPrefab, splitCode) => {
+const transpileMarkup = (markup, isPartOfPrefab, splitCode, variables) => {
     const parsed = (0, node_html_parser_1.parse)(markup, {
         blockTextElements: {},
     });
@@ -514,6 +792,28 @@ const transpileMarkup = (markup, isPartOfPrefab, splitCode) => {
         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);
+            }
+        });
+    }
+    // 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,
+        },
+    });
     // 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) {
@@ -524,7 +824,7 @@ const transpileMarkup = (markup, isPartOfPrefab, splitCode) => {
         }
         else if (node.nodeType === node_html_parser_1.NodeType.ELEMENT_NODE) {
             transpiler.preTranspile(node);
-            const result = transpiler.transpile(node, isPartOfPrefab, splitCode);
+            const result = transpiler.transpile(node, isPartOfPrefab, splitCode, initialContext);
             finalResult.markup += result.markup;
             finalResult.components = { ...finalResult.components, ...result.components };
             finalResult.partials.push(...result.partials);
@@ -541,12 +841,49 @@ 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);
+};
+/**
+ * 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;
+};
 const createExpression = (element, attrName) => {
     let displayexpression = element.attrs[attrName];
     if (displayexpression === null || displayexpression === void 0 ? void 0 : displayexpression.startsWith("bind:")) {
-        displayexpression = displayexpression.substring(5);
-        displayexpression = displayexpression.replace(/data\[\d+\]\./g, "");
-        displayexpression = displayexpression.replace(/$\[(.*?)\]/g, "$['$1']");
+        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 = decodeHTMLEntities(displayexpression);
+        // Transform $[...] syntax to proper property access
+        displayexpression = 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");
@@ -560,12 +897,20 @@ const createExpression = (element, attrName) => {
         }
         // 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) => {