@wavemaker-ai/react-codegen 1.0.0-rc.317 → 1.0.0-rc.319

package/dist/transpiler/index.mjs

@@ -40827,7 +40827,6 @@ var PARSER_MAP = /* @__PURE__ */ new Map([
       ["modal", BOOLEAN_PARSER],
       ["multiple", BOOLEAN_PARSER],
       ["trailingzero", BOOLEAN_PARSER],
-      ["multilineskeleton", BOOLEAN_PARSER],
       ["muted", BOOLEAN_PARSER],
       ["pagesize", NUMERIC_PARSER],
       ["primaryKey", BOOLEAN_PARSER],
@@ -40841,7 +40840,7 @@ var PARSER_MAP = /* @__PURE__ */ new Map([
       ["scrollable", BOOLEAN_PARSER],
       ["show", BOOLEAN_PARSER],
       ["showindevice", SHOW_IN_DEVICE_PARSER],
-      ["showskeleton", BOOLEAN_PARSER],
+      ["showSkeleton", BOOLEAN_PARSER],
       ["showclear", BOOLEAN_PARSER],
       ["searchbutton", BOOLEAN_PARSER],
       ["selectionlimit", NUMERIC_PARSER],
@@ -40862,8 +40861,6 @@ var PARSER_MAP = /* @__PURE__ */ new Map([
       ["showvalues", BOOLEAN_PARSER],
       ["showyaxis", BOOLEAN_PARSER],
       ["showxaxis", BOOLEAN_PARSER],
-      ["skeletonwidth", NUMERIC_PARSER],
-      ["skeletonheight", NUMERIC_PARSER],
       ["wrap", BOOLEAN_PARSER],
       ["thickness", NUMERIC_PARSER],
       ["iconheight", UNIT_PARSER],
@@ -40881,11 +40878,7 @@ var PARSER_MAP = /* @__PURE__ */ new Map([
       ["shownext", BOOLEAN_PARSER],
       ["showdone", BOOLEAN_PARSER],
       ["nooflines", NUMERIC_PARSER],
-      ["showskeletonchildren", BOOLEAN_PARSER],
-      ["numberofskeletonitems", NUMERIC_PARSER],
       ["radiosetscroll", BOOLEAN_PARSER],
-      ["skeletonanimationresource", STRING_PARSER],
-      ["skeletonanimationspeed", NUMERIC_PARSER],
       ["enablegestures", BOOLEAN_PARSER],
       ["dateheadertitle", STRING_PARSER],
       ["dateconfirmationtitle", STRING_PARSER],
@@ -40945,9 +40938,14 @@ var PARSER_MAP = /* @__PURE__ */ new Map([
       ["exportdatasize", NUMERIC_PARSER],
       ["filteronkeypress", BOOLEAN_PARSER],
       ["showviewlessbutton", BOOLEAN_PARSER],
-      ["isrowselectable", BOOLEAN_PARSER]
+      ["isrowselectable", BOOLEAN_PARSER],
+      ["skeletonRows", NUMERIC_PARSER],
+      ["skeletonColumns", NUMERIC_PARSER]
     ])
   ],
+  ["wm-tabs", /* @__PURE__ */ new Map([["skeletonRows", NUMERIC_PARSER]])],
+  ["wm-wizard", /* @__PURE__ */ new Map([["skeletonRows", NUMERIC_PARSER]])],
+  ["wm-accordion", /* @__PURE__ */ new Map([["skeletonRows", NUMERIC_PARSER]])],
   [
     "wm-table-column",
     /* @__PURE__ */ new Map([
@@ -41677,13 +41675,18 @@ var AutolayoutCodegen = class {
       if (m) innerPath = m[2].trim();
     }
     if (!innerPath.startsWith("/") && !innerPath.startsWith("http://") && !innerPath.startsWith("https://") && !innerPath.startsWith("data:")) {
-      innerPath = `/${innerPath}`;
+      const noLeadingSlash = innerPath.startsWith("/") ? innerPath.slice(1) : innerPath;
+      if (noLeadingSlash.toLowerCase().startsWith("resources/")) {
+        innerPath = noLeadingSlash;
+      } else if (!innerPath.startsWith("/")) {
+        innerPath = `/${innerPath}`;
+      }
     }
     return `url(${innerPath})`;
   }
   // Converts static style attributes to CSS utility classes and removes them from element
   processStaticStyleProps(element) {
-    var _a;
+    var _a, _b;
     const classNames = [];
     const bgImageRaw = element.getAttribute("backgroundimage");
     if (bgImageRaw && !isBind(bgImageRaw)) {
@@ -41700,7 +41703,7 @@ var AutolayoutCodegen = class {
     for (const dimKey of ["width", "height"]) {
       const raw = element.getAttribute(dimKey);
       if (!raw || isBind(raw)) continue;
-      if (!this.getEffectiveParentDirection(element) && ((_a = element.tagName) == null ? void 0 : _a.toLowerCase()) === "wm-container") {
+      if (!this.getEffectiveParentDirection(element) && (((_a = element.tagName) == null ? void 0 : _a.toLowerCase()) === "wm-container" || ((_b = element.tagName) == null ? void 0 : _b.toLowerCase()) === "wm-list")) {
         element.setAttribute(dimKey === "width" ? "layoutWidth" : "layoutHeight", raw);
       }
       this.collectSizeFlexProps(element, dimKey, raw, flexProps);
@@ -41958,8 +41961,62 @@ function getFormatCellExpression(element, context) {
   return transformed;
 }
 
+// src/transpile/class-expression.util.ts
+function transformClassWithMustacheExpressions(classes, options = {}) {
+  if (!classes || !classes.includes("{{") || !classes.includes("}}")) {
+    return null;
+  }
+  const parts = [];
+  const regex = /\{\{([\s\S]*?)\}\}/g;
+  let lastIndex = 0;
+  let match;
+  while ((match = regex.exec(classes)) !== null) {
+    const staticBefore = classes.substring(lastIndex, match.index).trim();
+    if (staticBefore) {
+      parts.push(`'${staticBefore}'`);
+    }
+    let expr = match[1].trim();
+    if (options.isInsideTableColumn) {
+      expr = transformTableColumnClassExpression(expr);
+    } else {
+      expr = modifyExpression(expr);
+    }
+    if (expr) {
+      parts.push(`(${expr})`);
+    }
+    lastIndex = match.index + match[0].length;
+  }
+  const staticAfter = classes.substring(lastIndex).trim();
+  if (staticAfter) {
+    parts.push(`'${staticAfter}'`);
+  }
+  if (parts.length === 0) {
+    return null;
+  }
+  return `{${parts.join(" + ' ' + ")}}`;
+}
+
 // src/transpile/transpile.ts
 var generateRandomString = (length = 10) => Math.random().toString(20).substr(2, length);
+var CATEGORIES_WITHOUT_LOADING = /* @__PURE__ */ new Set([
+  "wm.Variable",
+  "wm.NavigationAction",
+  "wm.TimerAction",
+  "wm.NotificationAction",
+  "wm.LoginAction",
+  "wm.LogoutAction"
+]);
+function extractVariableNamesFromElement(e) {
+  const vars = /* @__PURE__ */ 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);
+}
 var EVENT_NAME_MAP = {
   "on-dblclick": "on-doubleClick",
   "on-mouseenter": "on-mouseEnter",
@@ -42226,6 +42283,14 @@ var _Transpiler = class _Transpiler {
   }
   preTranspile(e) {
     e == null ? void 0 : e.removeAttribute("variant");
+    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:")) {
@@ -42287,6 +42352,7 @@ var _Transpiler = class _Transpiler {
     });
   }
   transformStyles(e, context) {
+    var _a, _b;
     let rawStylesObj = {};
     const rawStyles = e.getAttribute("styles");
     if (rawStyles && !rawStyles.startsWith("bind:") && !rawStyles.startsWith("{")) {
@@ -42354,7 +42420,13 @@ var _Transpiler = class _Transpiler {
     }
     let conditionalClasses = e.getAttribute("conditionalclass") || e.getAttribute("ngclass");
     if (classes.startsWith("bind:")) {
-      classes = `{${classes.substring(5)}}`;
+      if ((_a = context == null ? void 0 : context.get) == null ? void 0 : _a.call(context, "isInsideTableColumn")) {
+        let exp = classes.substring(5).replace("fragment.Page", "fragment");
+        exp = transformTableColumnClassExpression(exp);
+        classes = `{${exp}}`;
+      } else {
+        classes = `{${classes.substring(5)}}`;
+      }
     }
     if (conditionalClasses) {
       conditionalClasses = conditionalClasses.startsWith("bind:") ? `${conditionalClasses.substring(5)}` : conditionalClasses;
@@ -42381,6 +42453,11 @@ var _Transpiler = class _Transpiler {
       } else {
         classes = `{${conditionalClasses}}`;
       }
+    } else if (classes.includes("{{") && classes.includes("}}")) {
+      const mustacheClass = transformClassWithMustacheExpressions(classes, {
+        isInsideTableColumn: !!((_b = context == null ? void 0 : context.get) == null ? void 0 : _b.call(context, "isInsideTableColumn"))
+      });
+      classes = mustacheClass != null ? mustacheClass : `'${classes}'`;
     } else if (!!classes && !classes.startsWith("{")) {
       classes = `'${classes}'`;
     }
@@ -42687,7 +42764,7 @@ var _Transpiler = class _Transpiler {
     return (0, import_lodash5.isNil)(value) || (0, import_lodash5.isEmpty)(value) ? "" : `${name}=${value}`;
   }
   transformAttrs(e, context, tx) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const autolayout = (_a = context.data) == null ? void 0 : _a.autolayoutCodegen;
     const autoLayoutResult = (_b = autolayout == null ? void 0 : autolayout.processElement(e)) != null ? _b : null;
     e.setAttribute("data-widget-id", generateWidgetId());
@@ -42724,7 +42801,6 @@ var _Transpiler = class _Transpiler {
       );
       if (foundInputs.length && floatingLabel) {
         foundInputs[0].setAttribute("floatinglabel", labelCaption);
-        labelNode && labelNode.remove();
       }
       if (isRequired) {
         labelNode && labelNode.setAttribute("required", "true");
@@ -42740,6 +42816,13 @@ var _Transpiler = class _Transpiler {
       const layoutClassNameValue = autolayout.buildLayoutClassNameAttr(autoLayoutResult);
       str += ` layoutClassName=${layoutClassNameValue}`;
     }
+    const loadableVars = (_d = context.data) == null ? 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) {
@@ -42768,6 +42851,14 @@ var _Transpiler = class _Transpiler {
     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
@@ -42792,11 +42883,15 @@ var transpileMarkup = (markup, isPartOfPrefab, splitCode, variables, preview, in
     imports: []
   };
   const twoWayBindingVariables = /* @__PURE__ */ new Set();
+  const loadableVariables = /* @__PURE__ */ new Set();
   if (variables) {
     Object.values(variables).forEach((v) => {
       if (v.category === "wm.Variable" && v.twoWayBinding === true && v.name) {
         twoWayBindingVariables.add(v.name);
       }
+      if (v.name && !CATEGORIES_WITHOUT_LOADING.has(v.category)) {
+        loadableVariables.add(v.name);
+      }
     });
   }
   const autolayoutCodegen = new AutolayoutCodegen();
@@ -42807,6 +42902,7 @@ var transpileMarkup = (markup, isPartOfPrefab, splitCode, variables, preview, in
     props: [],
     data: {
       twoWayBindingVariables,
+      loadableVariables,
       autolayoutCodegen,
       preview: preview === true,
       ...insideTableColumn ? { isInsideTableColumn: true } : {}
@@ -44106,7 +44202,7 @@ var getFormWidgetTemplate = (widgetType, widgetName, element, formDataVariable)
   }
   var commonFields = `name="${formfieldName}_formWidget"
                       formfield="true"
-                      datavalue="bind:$formField.datavalue || $formField.defaultvalue"
+                      datavalue="bind:$formField.datavalue ?? $formField.defaultvalue"
                       conditionalclass=""
                       ${placeholder ? 'placeholder="' + placeholder + '"' : ""}
                       ${onFocus ? "on-focus=" + onFocus : ""}
@@ -46635,7 +46731,7 @@ var getFilterWidgetTemplate = (widgetType, widgetName, element, filterDataVariab
   }
   const filterfieldName = getAttribute(element, "name");
   const widgetNameSuffix = isMaxWidget ? "_maxWidget" : "";
-  const datavalueBinding = isMaxWidget ? "bind:$formField.maxDataValue || $formField.maxdefaultvalue" : "bind:$formField.datavalue || $formField.defaultvalue";
+  const datavalueBinding = isMaxWidget ? "bind:$formField.maxDataValue ?? $formField.maxdefaultvalue" : "bind:$formField.datavalue ?? $formField.defaultvalue";
   const isMaxWidgetProp = isMaxWidget ? "isMaxWidget={true}" : "";
   var commonFields = `name="${filterfieldName}_formWidget${widgetNameSuffix}"
                       formfield="true"