@wavemaker-ai/react-codegen 1.0.0-rc.647602 → 1.0.0-rc.647647

package/dist/transpiler/index.d.mts

@@ -14,6 +14,12 @@ interface TranspiledOutput {
     imports: Import[];
     pageEvents?: Record<string, string>;
     autolayoutCss?: string[];
+    /**
+     * Dependency paths this component reads cross-context from the active page, e.g.
+     * `Variables.PageDataInvoke1.dataSet.content` or `Widgets.button1.caption`. The runtime
+     * value-gates re-renders to exactly these. Empty for components with no such bindings.
+     */
+    activePageDeps?: string[];
 }
 
 declare const transform: (expr: string, scopeName?: string, mode?: "event" | "attr") => string;

package/dist/transpiler/index.mjs

@@ -39328,6 +39328,7 @@ var htmlElements = [
 var FORMAT_CONTEXT = "{formatContext:''}";
 var FORMAT_CONTEXT_REGEX = /\{formatContext:''\}/g;
 var FRAGMENT_SCOPED_NAMES = ["appLocale", "Variables"];
+var LIST_SCOPE_VARS = /* @__PURE__ */ new Set(["currentItemWidgets"]);
 var ExpressionTransformer = class {
   constructor(ctx = "this", mode = "attr") {
     this.ctx = ctx;
@@ -39357,10 +39358,16 @@ var ExpressionTransformer = class {
     if (this.mode === "event" && ast.receiver instanceof ImplicitReceiver && ast.name === "$event") {
       return "$event";
     }
+    if (ast.receiver instanceof ImplicitReceiver && LIST_SCOPE_VARS.has(ast.name)) {
+      return ast.name;
+    }
     const r = this.build(ast.receiver);
     return `${r}.${ast.name}`;
   }
   processSafePropertyRead(ast) {
+    if (ast.receiver instanceof ImplicitReceiver && LIST_SCOPE_VARS.has(ast.name)) {
+      return ast.name;
+    }
     const r = this.build(ast.receiver);
     return `${r}?.${ast.name}`;
   }
@@ -40399,14 +40406,16 @@ var transformRepeatChildAttr = (element, replace2, replaceWith) => {
     if (isList) {
       return;
     }
-    let value = element.attributes[name];
-    value = removeOptionChaining(value);
+    const value = element.attributes[name];
     const regex = new RegExp(
       replace2.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") + "(?![a-zA-Z_$0-9])",
       "g"
     );
-    value = value.replace(regex, replaceWith);
-    element.setAttribute(name, value);
+    const stripped = removeOptionChaining(value);
+    const replaced = stripped.replace(regex, replaceWith);
+    if (replaced !== stripped) {
+      element.setAttribute(name, replaced);
+    }
   });
   element.childNodes.forEach((c) => {
     if (isHTMLElement(c)) {
@@ -40806,6 +40815,7 @@ var PARSER_MAP = /* @__PURE__ */ new Map([
       ["flexshrink", NUMERIC_PARSER],
       ["hastwowaybinding", BOOLEAN_PARSER],
       ["headernavigation", BOOLEAN_PARSER],
+      ["hidden", BOOLEAN_PARSER],
       ["hideclose", BOOLEAN_PARSER],
       ["iconsize", STRING_PARSER],
       ["imageheight", STRING_PARSER],
@@ -40889,7 +40899,8 @@ var PARSER_MAP = /* @__PURE__ */ new Map([
       ["fastload", BOOLEAN_PARSER],
       ["enablescroll", BOOLEAN_PARSER],
       ["showactions", BOOLEAN_PARSER],
-      ["popoverarrow", BOOLEAN_PARSER]
+      ["popoverarrow", BOOLEAN_PARSER],
+      ["enablefullscreen", BOOLEAN_PARSER]
     ])
   ],
   [
@@ -42017,6 +42028,18 @@ function extractVariableNamesFromElement(e) {
   });
   return Array.from(vars);
 }
+function extractActivePageDeps(source) {
+  const deps = /* @__PURE__ */ 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}.`)));
+}
 var EVENT_NAME_MAP = {
   "on-dblclick": "on-doubleClick",
   "on-mouseenter": "on-mouseEnter",
@@ -42354,7 +42377,8 @@ var _Transpiler = class _Transpiler {
   transformStyles(e, context) {
     var _a, _b;
     let rawStylesObj = {};
-    const rawStyles = e.getAttribute("styles");
+    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(":");
@@ -42368,6 +42392,9 @@ var _Transpiler = class _Transpiler {
         }
       });
       e.removeAttribute("styles");
+      if (style_attr) {
+        e.removeAttribute("style");
+      }
     }
     const hasConditionalStyles = e.getAttribute("conditionalstyle");
     if (hasConditionalStyles) {
@@ -42866,7 +42893,9 @@ _Transpiler.SKELETON_ATTR_RENAME = {
 _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)(?:\?\.|\.|\[|$)/;
+// 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)(?:\?\.|\.|\[|$)/;
 var Transpiler = _Transpiler;
 var transpiler = new Transpiler();
 var registerTransformer = transpiler.registerTransformer.bind(transpiler);
@@ -42928,6 +42957,8 @@ var transpileMarkup = (markup, isPartOfPrefab, splitCode, variables, preview, in
     }
   });
   finalResult.autolayoutCss = autolayoutCodegen.getDynamicCssRules();
+  const generatedSource = [finalResult.markup, ...Object.values(finalResult.components)].join("\n");
+  finalResult.activePageDeps = extractActivePageDeps(generatedSource);
   return finalResult;
 };
 var transformAttrs = transpiler.transformAttrs.bind(transpiler);
@@ -42974,7 +43005,7 @@ var createExpression = (element, attrName) => {
     }
     displayexpression = displayexpression.replace(
       /fragment\.([a-zA-Z_$][a-zA-Z0-9_$]*)/g,
-      "$item.$1"
+      (match, name) => FRAGMENT_SCOPED_NAMES.includes(name) ? match : `$item.${name}`
     );
     displayexpression = addOptionalChaining(displayexpression);
     const exp = (0, import_lodash5.includes)(displayexpression, "(") ? `${displayexpression}` : displayexpression;
@@ -43415,10 +43446,12 @@ function buildPartialMarkup(element, context, componentName) {
     });
   }
   const watch = [];
+  const typedParams = /* @__PURE__ */ new Set();
   element.childNodes.filter((node) => isHTMLElement(node) && node.tagName === "WM-PARAM").forEach((node) => {
     const e = node;
     const name2 = e.getAttribute("name") || "";
     let value = e.getAttribute("value") || "";
+    const type = e.getAttribute("type") || "";
     if (value.includes("currentItem")) {
       const match = value.match(/currentItem\..+/);
       if (match) {
@@ -43426,14 +43459,23 @@ function buildPartialMarkup(element, context, componentName) {
       }
     }
     params[name2] = value;
+    if (type && ["string", "boolean", "number"].includes(type)) {
+      typedParams.add(name2);
+    }
     watch.push(name2);
   });
   const syntheticTag = componentName.replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "");
   let paramStr = Object.keys(params).filter((k) => k !== "on-load").map((k) => `${k}="${(0, import_html_entities.encode)(params[k])}"`).join(" ");
+  const typeAwareInfer = (name2, valWithQuotes) => {
+    if (typedParams.has(name2)) {
+      return valWithQuotes;
+    }
+    return inferTypeAndParseProperty(name2, valWithQuotes);
+  };
   paramStr = transformAttrs(
     parse5(`<${syntheticTag} ${paramStr}/>`).firstChild,
     context,
-    inferTypeAndParseProperty
+    typeAwareInfer
   );
   paramStr += ` content={props.content}`;
   if (context.isPartOfPrefab) {
@@ -43854,7 +43896,7 @@ var buildItemAttrsFromListTemplate = (template, context) => {
   if (autoLayoutResult && autolayout) {
     parts.push(`layoutClassName: ${autolayout.buildItemAttrsClassName(autoLayoutResult)}`);
   }
-  const skipAttrs = /* @__PURE__ */ new Set(["name", "data-widget-id", "item-id"]);
+  const skipAttrs = /* @__PURE__ */ new Set(["name", "data-widget-id", "item-id", "layout"]);
   if (autoLayoutResult) {
     for (const name of LAYOUT_ATTR_NAMES) skipAttrs.add(name);
   }
@@ -44177,13 +44219,15 @@ var getFormWidgetTemplate = (widgetType, widgetName, element, formDataVariable)
   widgetName = widgetName.replace(".", "_");
   (_b = (_a = getAttribute(element, "key")) == null ? void 0 : _a.split(".")) == null ? void 0 : _b.at(-1);
   const formfieldName = getAttribute(element, "name");
-  var labelMarkup = getAttribute(element, "displayname") ? `<wm-label 
+  const displayname = getAttribute(element, "displayname");
+  var labelMarkup = `<wm-label 
     required="bind:$formField.required"
     htmlFor="${formfieldName}_formWidget"
     caption="bind:$formField.displayname"
     class="app-label control-label formfield-label"
     conditionalclass="bind:$formField.captionCls + ' ' + $formField.invalidCls"
-    name="${widgetName}_formLabel"></wm-label>` : "";
+    name="${widgetName}_formLabel"
+    ${!displayname ? 'hidden="true"' : ""}></wm-label>`;
   const onFocus = getAttribute(element, "on-focus");
   if (onFocus) {
     element.removeAttribute("on-focus");
@@ -44312,6 +44356,7 @@ var getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
                 ></wm-search>`;
       break;
     case "chips":
+      const chipsDatasource = getDatasourceExpr(element);
       const chipsKeyAttribute = element.getAttribute("key");
       if (chipsKeyAttribute) {
         element.setAttribute("searchkey", chipsKeyAttribute);
@@ -44325,6 +44370,7 @@ var getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
                 dataset="bind:$formField.dataset || 'Option 1, Option 2, Option 3'"
                 displayfield="bind:$formField.displayfield"
                 datafield="bind:$formField.datafield"
+                ${chipsDatasource ? `datasource="${chipsDatasource}"` : ""}
                 ></wm-chips>`;
       break;
     case "checkbox":
@@ -44452,7 +44498,8 @@ var form_field_transformer_default = {
       formName = currentNode.getAttribute("dynamicForm");
       formScope = `formScope={() => fragment?.Widgets?.${formName}}`;
     } else {
-      formName = currentNode == null ? void 0 : currentNode.getAttribute("name");
+      const itemId = currentNode == null ? void 0 : currentNode.getAttribute("item-id");
+      formName = itemId || (currentNode == null ? void 0 : currentNode.getAttribute("name"));
     }
     const formdataPrefix = currentNode == null ? void 0 : currentNode.getAttribute("formdataprefix");
     if (formdataPrefix) {
@@ -44748,13 +44795,16 @@ var form_action_transformer_default = {
       formName = formName.replace("bind:", "");
       isDynamicFormName = true;
     }
-    const actionType = element.getAttribute("type");
+    const actionType = element.getAttribute("type") || "button";
+    if (!element.getAttribute("type")) {
+      element.setAttribute("type", "button");
+    }
     const name = element.getAttribute("name");
     let action = element.getAttribute("action");
-    let btnClass = "btn-default";
     const listPrefix = "list.itemWidgets[$index]";
     const fragmentPrefix = "fragment?.Widgets";
     const widgetsPrefix = "Widgets";
+    let btnClass = "btn-default";
     if (actionType === "submit") {
       btnClass = "btn-primary";
       action = listName ? getWidgetAccessor(listPrefix, formName, "?.submit();", isDynamicFormName) + (action || "") : getWidgetAccessor(widgetsPrefix, formName, "?.submit();", isDynamicFormName) + (action || "");
@@ -44795,7 +44845,9 @@ var form_action_transformer_default = {
         }
       }).join(";");
     }
-    element.setAttribute("btnClass", btnClass);
+    if (!element.hasAttribute("class")) {
+      element.setAttribute("class", btnClass);
+    }
     element.removeAttribute("formKey");
     element.removeAttribute("action");
     element.setAttribute("name", name || key || formName);
@@ -44888,7 +44940,7 @@ var dialog_actions_transformer_default = {
       applyAttr(
         element,
         new RegExp("closeDialog(\\?\\.)?\\(\\)", "g"),
-        `Widgets?.${widgetName}?.close()`
+        `Widgets?.${widgetName}?.close?.()`
       );
     }
     return `<WmDialogActions   ${transformAttrs(element, context)}>`;
@@ -45912,6 +45964,7 @@ var chips_transformer_default = {
     if (getDisplayExpression2) {
       element.removeAttribute("displayexpression");
     }
+    getDatasourceExpr(element);
     return `<WmChips listener={fragment} ${isFormField ? " {...$formField}" : ""} ${getDisplayExpression2 ? `displayexpression=${getDisplayExpression2}` : ""} ${extractDatasetInfo(element)}  ${transformAttrs(element, context)}>`;
   },
   post: (element, context) => "</WmChips>",
@@ -46591,18 +46644,20 @@ var table_transformer_default = {
     const datasetAttr = element.getAttribute("dataset");
     const datasourceAttr = element.getAttribute("datasource");
     const binddatasetAttr = element.getAttribute("binddataset");
-    if (datasetAttr && datasetAttr.startsWith("bind:fragment.Variables.") && datasetAttr.includes(".dataSet")) {
+    if (datasetAttr && datasetAttr.includes(".dataSet")) {
       const match = datasetAttr.match(
-        /^bind:fragment\.Variables\.([^.]+)\.dataSet(?=[^A-Za-z0-9_]|$)/
+        /^bind:fragment\.((?:App\.activePage\.|App\.)?Variables)\.([^.]+)\.dataSet(?=[^A-Za-z0-9_]|$)/
       );
       if (match) {
-        const variableName = match[1];
+        const scopePath = match[1];
+        const variableName = match[2];
         context.set("tableDatasetVariableName", variableName);
         if (!datasourceAttr) {
-          element.setAttribute("datasource", `{fragment?.Variables?.${variableName}}`);
+          const datasourceExpr = `fragment.${scopePath}.${variableName}`.split(".").join("?.");
+          element.setAttribute("datasource", `{${datasourceExpr}}`);
         }
         if (!binddatasetAttr) {
-          element.setAttribute("binddataset", `Variables.${variableName}.dataSet`);
+          element.setAttribute("binddataset", `${scopePath}.${variableName}.dataSet`);
         }
       }
     }