@wavemaker-ai/react-codegen 1.0.0-rc.326 → 1.0.0-rc.328

package/dist/transpiler/index.mjs

@@ -4567,9 +4567,9 @@ var require_lodash = __commonJS({
         }
         var camelCase = createCompounder(function(result2, word, index) {
           word = word.toLowerCase();
-          return result2 + (index ? capitalize5(word) : word);
+          return result2 + (index ? capitalize4(word) : word);
         });
-        function capitalize5(string) {
+        function capitalize4(string) {
           return upperFirst2(toString(string).toLowerCase());
         }
         function deburr(string) {
@@ -5178,7 +5178,7 @@ var require_lodash = __commonJS({
         lodash.add = add;
         lodash.attempt = attempt;
         lodash.camelCase = camelCase;
-        lodash.capitalize = capitalize5;
+        lodash.capitalize = capitalize4;
         lodash.ceil = ceil;
         lodash.clamp = clamp;
         lodash.clone = clone2;
@@ -38981,6 +38981,7 @@ var NodeType = import_dist.default.NodeType;
 var esm_default = import_dist.default;
 
 // src/utils.browser.ts
+var appLocaleRegex = /(fragment\.)?(?:App\.)?appLocale(?:\.messages)?(?:\[(['"])([^'"]+)\2\]|\.([a-zA-Z0-9_]+))/g;
 function isValid(expr) {
   try {
     (0, import_parser.parse)(expr, { sourceType: "module", plugins: ["optionalChaining"] });
@@ -39270,7 +39271,6 @@ var transformAppLocale = (exp) => {
     exp = exp.replace("fragment?.Prefab", "fragment");
     exp = exp.replace("fragment.Prefab", "fragment");
   }
-  const appLocaleRegex = /(fragment\.)?appLocale(?:\.messages)?(?:\[(['"])([^'"]+)\2\]|\.([a-zA-Z0-9_]+))/g;
   const replacer = (fullMatch, fragmentPrefix, quoteType, keyFromBrackets, keyFromDot) => {
     const key = keyFromBrackets || keyFromDot;
     if (key) {
@@ -39505,8 +39505,30 @@ var htmlElements = [
 // src/transpile/bind.ex.transformer.ts
 var FORMAT_CONTEXT = "{formatContext:''}";
 var FORMAT_CONTEXT_REGEX = /\{formatContext:''\}/g;
-var FRAGMENT_SCOPED_NAMES = ["appLocale", "Variables"];
+var FRAGMENT_SCOPED_NAMES = ["appLocale", "Variables", "App"];
 var LIST_SCOPE_VARS = /* @__PURE__ */ new Set(["currentItemWidgets"]);
+var JS_GLOBALS = /* @__PURE__ */ new Set([
+  "Number",
+  "String",
+  "Boolean",
+  "Array",
+  "Object",
+  "Date",
+  "Math",
+  "JSON",
+  "RegExp",
+  "Promise",
+  "Symbol",
+  "BigInt",
+  "parseInt",
+  "parseFloat",
+  "isNaN",
+  "isFinite",
+  "encodeURIComponent",
+  "decodeURIComponent",
+  "encodeURI",
+  "decodeURI"
+]);
 var ExpressionTransformer = class {
   constructor(ctx = "this", mode = "attr") {
     this.ctx = ctx;
@@ -39536,14 +39558,14 @@ 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)) {
+    if (ast.receiver instanceof ImplicitReceiver && (LIST_SCOPE_VARS.has(ast.name) || JS_GLOBALS.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)) {
+    if (ast.receiver instanceof ImplicitReceiver && (LIST_SCOPE_VARS.has(ast.name) || JS_GLOBALS.has(ast.name))) {
       return ast.name;
     }
     const r = this.build(ast.receiver);
@@ -39591,16 +39613,23 @@ var ExpressionTransformer = class {
     const rhs = this.build(ast.value);
     return `${lhs} = ${rhs}`;
   }
-  processMethodCall(ast) {
+  buildCallArgs(args) {
     const _args = [];
-    for (const arg of ast.args) {
+    for (const arg of args) {
       let argExp = this.build(arg);
-      const fragmentScoped = typeof argExp === "string" && FRAGMENT_SCOPED_NAMES.some((name) => argExp.includes(name));
+      const fragmentScoped = typeof argExp === "string" && FRAGMENT_SCOPED_NAMES.some((name) => name !== this.ctx && argExp.includes(name));
       if (this.mode === "event" && !fragmentScoped && argExp.replace) {
         argExp = argExp.replace(`${this.ctx}.`, "");
       }
       _args.push(argExp);
     }
+    return _args;
+  }
+  processMethodCall(ast) {
+    const _args = this.buildCallArgs(ast.args);
+    if (ast.receiver instanceof ImplicitReceiver && JS_GLOBALS.has(ast.name)) {
+      return `${ast.name}(${_args.join(",")})`;
+    }
     const fn2 = this.build(ast.receiver);
     if (_args.includes("currentItemWidgets")) {
       _args.forEach((arg, index) => {
@@ -39612,14 +39641,9 @@ var ExpressionTransformer = class {
     return `${fn2}?.${ast.name}?.(${_args.join(",")})`;
   }
   processSafeMethodCall(ast) {
-    const _args = [];
-    for (const arg of ast.args) {
-      let argExp = this.build(arg);
-      const fragmentScoped = typeof argExp === "string" && FRAGMENT_SCOPED_NAMES.some((name) => argExp.includes(name));
-      if (this.mode === "event" && !fragmentScoped && argExp.replace) {
-        argExp = argExp.replace(`${this.ctx}.`, "");
-      }
-      _args.push(argExp);
+    const _args = this.buildCallArgs(ast.args);
+    if (ast.receiver instanceof ImplicitReceiver && JS_GLOBALS.has(ast.name)) {
+      return `${ast.name}(${_args.join(",")})`;
     }
     const fn2 = this.build(ast.receiver);
     return `${fn2}?.${ast.name}?.(${_args.join(",")})`;
@@ -40840,7 +40864,10 @@ var style_transformer_default = (element, isStyleProperty) => {
   StyleProps.forEach((parser, k) => {
     if (!!element.hasAttribute(k) && isStyleProperty && isStyleProperty(k)) {
       const value = element.getAttribute(k);
-      element.removeAttribute(k);
+      const isFillDimension = (k === "width" || k === "height") && value === "fill";
+      if (!isFillDimension) {
+        element.removeAttribute(k);
+      }
       if (value) {
         if (value.startsWith("bind:")) {
           if (k === "backgroundimage" && value.startsWith('bind:"') && value.endsWith('"')) {
@@ -41905,7 +41932,9 @@ var AutolayoutCodegen = class {
       }
       this.collectSizeFlexProps(element, dimKey, raw, flexProps);
       classNames.push(...this.registerSizeClass(element, dimKey, raw));
-      element.removeAttribute(dimKey);
+      if (raw !== "fill") {
+        element.removeAttribute(dimKey);
+      }
     }
     for (const [prop, value] of Object.entries(flexProps)) {
       classNames.push(this.registerClass(prop, value));
@@ -43017,7 +43046,7 @@ var _Transpiler = class _Transpiler {
       if (name === "conditionalclass") {
         return "";
       }
-    } else if (name === "width" || name === "height") {
+    } else if ((name === "width" || name === "height") && value != "fill") {
       `${value.substring(5)}`;
       value = `{${value}}`;
     } else {
@@ -44549,6 +44578,7 @@ var getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
   const timeconfirmationtitle = isDateTimeTag && element.getAttribute("timeconfirmationtitle") ? `timeconfirmationtitle="${(_f = element.getAttribute("timeconfirmationtitle")) == null ? void 0 : _f.replace(/"/g, """)}"` : "";
   const timecanceltitle = isDateTimeTag && element.getAttribute("timecanceltitle") ? `timecanceltitle="${(_g = element.getAttribute("timecanceltitle")) == null ? void 0 : _g.replace(/"/g, """)}"` : "";
   const outputformat = element.getAttribute("outputformat") ? `outputformat="${(_h = element.getAttribute("outputformat")) == null ? void 0 : _h.replace(/"/g, """)}"` : ``;
+  const hyphenatedToComponentName = (str) => str.split("-").map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)).join("") || "";
   switch (widgetType) {
     case "text":
     case "password":
@@ -44733,6 +44763,13 @@ var getWidgetMarkup = (widgetType, widgetName, commonFields, element) => {
                 ${floatinglabel}>
               </wm-colorpicker>`;
       break;
+    default:
+      if (widgetType.toLowerCase().includes("wmx")) {
+        const fromAttr = widgetType == null ? void 0 : widgetType.split("-").at(-1);
+        const componentName = hyphenatedToComponentName((fromAttr || "customwidget").trim()) || "Customwidget";
+        tmpl = `<wmx-component componentname="${componentName}" ${commonFields} ${displayExp}></wmx-component>`;
+      }
+      break;
   }
   return tmpl;
 };
@@ -44768,7 +44805,8 @@ var form_field_transformer_default = {
         element.setAttribute("key", strippedKey);
       }
     }
-    if (DATASET_WIDGETS.includes(widgetType)) {
+    const usesDatasetBindings = DATASET_WIDGETS.includes(widgetType) || widgetType.toLowerCase().includes("wmx");
+    if (usesDatasetBindings) {
       if (element.attrs["primary-key"]) {
         element.setAttribute("primaryKey", element.attrs["primary-key"]);
       }
@@ -45140,22 +45178,27 @@ var imports36 = [
 var dialog_transformer_default = {
   pre: (element, context) => {
     element.getAttribute("name");
-    const content = new HTMLElement(
-      "wm-dialogbody",
-      {},
-      null,
-      element,
-      [0, 41]
-    );
-    content.nodeType = NodeType.ELEMENT_NODE;
-    const actionsIndex = element.childNodes.findIndex(
-      (e) => isHTMLElement(e) && e.tagName.toLowerCase() === "wm-dialogactions"
+    const hasExplicitBody = element.childNodes.some(
+      (e) => isHTMLElement(e) && ["wm-dialogcontent", "wm-dialogbody"].includes(e.tagName.toLowerCase())
     );
-    content.childNodes = element.childNodes;
-    element.childNodes = [content];
-    if (actionsIndex >= 0) {
-      const actions = content.childNodes.splice(actionsIndex, 1);
-      actions && element.childNodes.push(actions[0]);
+    if (!hasExplicitBody) {
+      const content = new HTMLElement(
+        "wm-dialogbody",
+        {},
+        null,
+        element,
+        [0, 41]
+      );
+      content.nodeType = NodeType.ELEMENT_NODE;
+      const actionsIndex = element.childNodes.findIndex(
+        (e) => isHTMLElement(e) && e.tagName.toLowerCase() === "wm-dialogactions"
+      );
+      content.childNodes = element.childNodes;
+      element.childNodes = [content];
+      if (actionsIndex >= 0) {
+        const actions = content.childNodes.splice(actionsIndex, 1);
+        actions && element.childNodes.push(actions[0]);
+      }
     }
     return `<WmDialog listener={fragment} ${transformAttrs(element, context)}>`;
   },
@@ -46385,7 +46428,7 @@ function getNearestWizardType(element) {
   while (current) {
     current = current.parentNode;
     if (!current) break;
-    if (((_a = current.tagName) == null ? void 0 : _a.toLowerCase()) === "wm-wizard") {
+    if (((_a = current == null ? void 0 : current.tagName) == null ? void 0 : _a.toLowerCase()) === "wm-wizard") {
       const type = current.getAttribute("type");
       if (type) {
         return type;
@@ -46430,7 +46473,7 @@ var imports87 = [
 function getNearestWizardName(element) {
   var _a;
   let current = element.parentNode || null;
-  if (((_a = current.tagName) == null ? void 0 : _a.toLowerCase()) === "wm-wizard") {
+  if (((_a = current == null ? void 0 : current.tagName) == null ? void 0 : _a.toLowerCase()) === "wm-wizard") {
     const n = current.getAttribute("name");
     if (n) {
       return n;
@@ -47275,6 +47318,14 @@ var getWidgetMarkup2 = (widgetType, widgetName, commonFields, element) => {
                 ${floatinglabel}>
               </wm-colorpicker>`;
       break;
+    default:
+      if (widgetType.toLowerCase().includes("wmx")) {
+        const fromAttr = widgetType == null ? void 0 : widgetType.split("-").at(-1);
+        const hyphenatedToComponentName = (str) => str.split("-").map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1)).join("") || "";
+        const componentName = hyphenatedToComponentName((fromAttr || "customwidget").trim()) || "Customwidget";
+        tmpl = `<wmx-component componentname="${componentName}" ${commonFields} ${displayExp}></wmx-component>`;
+      }
+      break;
   }
   return tmpl;
 };
@@ -47295,7 +47346,7 @@ var live_filter_field_transformer_default = {
     } else {
       filterName = currentNode.getAttribute("name");
     }
-    if (DATASET_WIDGETS.includes(widgetType)) {
+    if (DATASET_WIDGETS.includes(widgetType) || widgetType.toLowerCase().includes("wmx")) {
       if (element.attrs["primary-key"]) {
         element.setAttribute("primaryKey", element.attrs["primary-key"]);
       }
@@ -47415,27 +47466,21 @@ var linear_layout_item_default = {
 };
 
 // src/transpile/components/wmx-component/wmx-component.transformer.ts
-var capitalize4 = (str) => {
-  return str ? str.split("-").map((s) => s.charAt(0).toUpperCase() + s.substring(1)).join("") : str;
-};
 var wmx_component_transformer_default = {
   pre: (element, context) => {
-    const componentName = capitalize4(element.getAttribute("componentname"));
-    return `<Wmx${componentName} ${transformAttrs(element, context, inferTypeAndParseProperty)}>`;
-  },
-  post: (element, context) => {
-    const componentName = capitalize4(element.getAttribute("componentname"));
-    return `</Wmx${componentName}>`;
-  },
-  imports: (element, context) => {
-    const componentName = capitalize4(element.getAttribute("componentname"));
-    return [
-      {
-        name: `{Wmx${componentName}}`,
-        from: `@wavemaker-ai/wmx-components`
-      }
-    ];
+    const isFormField = element.getAttribute("formfield") === "true";
+    if (isFormField) {
+      element.removeAttribute("formfield");
+    }
+    return `<WmxRenderer listener={fragment} ${transformAttrs(element, context, inferTypeAndParseProperty)} ${isFormField ? " {...$formField}" : ""}/>`;
   },
+  post: () => "",
+  imports: () => [
+    {
+      name: `WmxRenderer`,
+      from: `@wavemaker-ai/react-runtime/components/wmx/WmxRenderer`
+    }
+  ],
   wmxcomponents: (element, context) => [
     element.getAttribute("componentname")
   ]
@@ -47523,6 +47568,7 @@ var transform_register_default = () => {
   registerTransformer("wm-dialog", dialog_transformer_default);
   registerTransformer("wm-dialogactions", dialog_actions_transformer_default);
   registerTransformer("wm-dialogbody", dialog_body_transformer_default);
+  registerTransformer("wm-dialogcontent", dialog_body_transformer_default);
   registerTransformer("wm-logindialog", login_dialog_transformer_default);
   registerTransformer("wm-list", list_transformer_default);
   registerTransformer("wm-listtemplate", list_template_transformer_default);