@wavemaker-ai/react-codegen 1.0.0-rc.647502 → 1.0.0-rc.647582

package/src/transpile/transpile.js

@@ -46,6 +46,7 @@ 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 generateRandomString = (length = 10) => Math.random().toString(20).substr(2, length);
 exports.generateRandomString = generateRandomString;
 const EVENT_NAME_MAP = {
@@ -576,8 +577,115 @@ class Transpiler {
             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;
+        var _a, _b;
         let argStr = "";
         let maxSplits = 0;
         (_a = str.match(/\([^;]*\)/g)) === null || _a === void 0 ? void 0 : _a.forEach(s => {
@@ -588,135 +696,21 @@ class Transpiler {
             }
         });
         argStr = argStr.replace(/\(|\)/g, "");
-        if (context === null || context === void 0 ? void 0 : context.get("isInsideList")) {
+        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(",");
         }
-        // Parse arguments properly, handling commas inside object literals and arrays
-        const parseArguments = (argString) => {
-            const args = [];
-            let currentArg = "";
-            let braceCount = 0;
-            let bracketCount = 0;
-            for (let i = 0; i < argString.length; i++) {
-                const char = argString[i];
-                // Track object literals (curly braces) and arrays (square brackets)
-                if (char === "{")
-                    braceCount++;
-                else if (char === "}")
-                    braceCount--;
-                else if (char === "[")
-                    bracketCount++;
-                else if (char === "]")
-                    bracketCount--;
-                // If we encounter a comma at the top level (not inside an object or array), it's an argument separator
-                if (char === "," && braceCount === 0 && bracketCount === 0) {
-                    if (currentArg.trim()) {
-                        args.push(currentArg.trim());
-                    }
-                    currentArg = "";
-                    continue;
-                }
-                currentArg += char;
-            }
-            // Add the last argument
-            if (currentArg.trim()) {
-                args.push(currentArg.trim());
-            }
-            return args;
-        };
-        // Droping literal arguments like strings, numbers, booleans, null/undefined
-        const isLiteral = (s) => {
-            const v = s.trim();
-            return (/^(['"]).*\1$/.test(v) ||
-                /^-?\d+(?:\.\d+)?$/.test(v) ||
-                /^(true|false|null|undefined)$/i.test(v));
-        };
-        // Arithmetic/binary expressions (e.g. "0-5", "0+3") are not valid parameter names.
-        // The Angular parser converts unary negatives like -5 into binary (0-5).
-        const isArithmeticExpression = (s) => {
-            const v = s.trim();
-            return /^\d+\s*[-+*/%]\s*\d+/.test(v);
-        };
-        // Check if argument contains a dot (property access), which makes it an expression, not a valid parameter name
-        const isPropertyAccess = (s) => {
-            return s.trim().includes(".");
-        };
-        // Object literals should not be extracted as function parameters
-        const isObjectLiteral = (s) => {
-            const trimmed = s.trim();
-            // Check if it starts with { and contains at least one : (key-value pair)
-            if (trimmed.startsWith("{") && trimmed.includes(":")) {
-                // Verify it's a balanced object literal
-                let braceCount = 0;
-                let inString = false;
-                let stringChar = "";
-                for (let i = 0; i < trimmed.length; i++) {
-                    const char = trimmed[i];
-                    if ((char === '"' || char === "'") && (i === 0 || trimmed[i - 1] !== "\\")) {
-                        if (!inString) {
-                            inString = true;
-                            stringChar = char;
-                        }
-                        else if (char === stringChar) {
-                            inString = false;
-                        }
-                    }
-                    else if (!inString) {
-                        if (char === "{")
-                            braceCount++;
-                        else if (char === "}")
-                            braceCount--;
-                    }
-                }
-                // If braces are balanced and it ends with }, it's an object literal
-                return braceCount === 0 && trimmed.endsWith("}");
-            }
-            return false;
-        };
-        // Array literals should not be extracted as function parameters
-        const isArrayLiteral = (s) => {
-            const trimmed = s.trim();
-            // Check if it starts with [ and ends with ]
-            if (trimmed.startsWith("[") && trimmed.endsWith("]")) {
-                // Verify it's a balanced array literal
-                let bracketCount = 0;
-                let inString = false;
-                let stringChar = "";
-                for (let i = 0; i < trimmed.length; i++) {
-                    const char = trimmed[i];
-                    if ((char === '"' || char === "'") && (i === 0 || trimmed[i - 1] !== "\\")) {
-                        if (!inString) {
-                            inString = true;
-                            stringChar = char;
-                        }
-                        else if (char === stringChar) {
-                            inString = false;
-                        }
-                    }
-                    else if (!inString) {
-                        if (char === "[")
-                            bracketCount++;
-                        else if (char === "]")
-                            bracketCount--;
-                    }
-                }
-                // If brackets are balanced, it's an array literal
-                return bracketCount === 0;
-            }
-            return false;
-        };
-        const parsedArgs = parseArguments(argStr);
+        const parsedArgs = this.parseArguments(argStr);
         const args = parsedArgs
             .filter(Boolean)
-            .filter(s => !isLiteral(s))
-            .filter(s => !isArithmeticExpression(s))
-            .filter(s => !isPropertyAccess(s))
-            .filter(s => !isObjectLiteral(s))
-            .filter(s => !isArrayLiteral(s));
+            .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) {
@@ -724,6 +718,124 @@ class Transpiler {
         }
         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. */
@@ -745,6 +857,7 @@ class Transpiler {
         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
         }
@@ -759,16 +872,24 @@ class Transpiler {
             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 (context === null || context === void 0 ? void 0 : context.get("isInsideList")) {
+            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 (context === null || context === void 0 ? void 0 : context.get("isInsideTableColumn")) {
+            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");
             }
-            value = `${args} => {${value}}`;
-            value = `{${value}}`;
+            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")) {
@@ -784,7 +905,10 @@ class Transpiler {
             let exp = `${value.substring(5)}`;
             exp = exp.replace("fragment.Page", "fragment");
             const isProgressCircleDatavalue = tagName === "wm-progress-circle" && name === "datavalue";
-            exp = (0, utils_browser_1.modifyExpression)(exp);
+            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) {
@@ -890,9 +1014,17 @@ class Transpiler {
         transpiler.transformers.set(tagName, transformer);
     }
 }
+// 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.
+Transpiler.INSTANCE_BOUND_CALLEE = /(?:\?\.|\.)(?:Actions|Variables)(?:\?\.|\.|\[|$)/;
 const transpiler = new Transpiler();
 exports.registerTransformer = transpiler.registerTransformer.bind(transpiler);
-const transpileMarkup = (markup, isPartOfPrefab, splitCode, variables, preview) => {
+const transpileMarkup = (markup, isPartOfPrefab, splitCode, variables, preview, insideTableColumn) => {
     const parsed = (0, exports.parse)(markup, {
         blockTextElements: {},
     });
@@ -927,6 +1059,7 @@ const transpileMarkup = (markup, isPartOfPrefab, splitCode, variables, preview)
             twoWayBindingVariables: twoWayBindingVariables,
             autolayoutCodegen,
             preview: preview === true,
+            ...(insideTableColumn ? { isInsideTableColumn: true } : {}),
         },
     });
     // Process all child nodes (including text nodes that come before the main element)
@@ -1014,15 +1147,13 @@ const createExpression = (element, attrName) => {
         displayexpression = displayexpression.replace(/\$item\[fragment.(.*?)\]/g, "$item['$1']");
         displayexpression = displayexpression.replace(/\$item\['(.*?)'\]/g, "_get($item, '$1')");
         displayexpression = displayexpression.replace(/fragment.index/g, "$index");
-        if (displayexpression.indexOf("fragment.formatters.") >= 0) {
-            displayexpression = displayexpression.replace(new RegExp(bind_ex_transformer_1.FORMAT_CONTEXT, "g"), "$item");
+        if (/formatters/.test(displayexpression)) {
+            displayexpression = displayexpression.split(bind_ex_transformer_1.FORMAT_CONTEXT).join("$item");
         }
         // Transform fragment.name -> $item.name for arrow functions with $item
         displayexpression = displayexpression.replace(/fragment\.([a-zA-Z_$][a-zA-Z0-9_$]*)/g, "$item.$1");
-        // Add optional chaining for all property access (e.g., $item.App.appLocale -> $item?.App?.appLocale)
-        // Use negative lookbehind to avoid double optional chaining (??)
-        displayexpression = displayexpression.replace(/(?<!\?)\.([a-zA-Z_$][a-zA-Z0-9_$]*)/g, "?.$1");
-        displayexpression = displayexpression.replace(/([a-zA-Z0-9_$\]])\[/g, "$1?.[");
+        // 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})}`;