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

package/dist/transpiler/index.d.mts

@@ -65,4 +65,13 @@ declare function serializeVariablesToCode(result: TranspiledVariableDefinitions,
  */
 declare function transformMarkup(markup: string, options?: TransformMarkupOptions): TranspiledOutput;
 
-export { type TransformMarkupOptions, type TranspiledOutput, type TranspiledVariableDefinitions, serializeVariablesToCode, transform as transformEx, transformMarkup, _default as transformVariable, transpileVariableDefinitions };
+type CssScopeType = "page" | "partial" | "prefab";
+interface CssScopeOptions {
+    scopeType: CssScopeType;
+    name: string;
+}
+declare const buildCssScopeClass: (scopeType: CssScopeType, name: string) => string;
+declare const scopeCssUnderWmApp: (cssContent: string, scopeOptions?: CssScopeOptions) => string;
+declare const fixURLPathAndScope: (file_content: string, basePath?: string, isAppCss?: boolean, scopeOptions?: CssScopeOptions) => string;
+
+export { type CssScopeOptions, type CssScopeType, type TransformMarkupOptions, type TranspiledOutput, type TranspiledVariableDefinitions, buildCssScopeClass, fixURLPathAndScope, scopeCssUnderWmApp, serializeVariablesToCode, transform as transformEx, transformMarkup, _default as transformVariable, transpileVariableDefinitions };

package/dist/transpiler/index.mjs

@@ -39249,6 +39249,22 @@ var addOptionalChaining = (bindPath, options = {}) => {
   }
   return result;
 };
+var fixURLPath = (file_content, basePath, isAppCss) => {
+  let updatedContent = file_content.replace(
+    /url\((['"]?)resources/g,
+    `url($1${basePath || ""}/resources`
+  );
+  if (isAppCss) {
+    updatedContent = updatedContent.replace(
+      /url\((['"])(?!\/|http|data:)([^'"]+)\1\)/g,
+      (match, quote, url) => {
+        const fixedUrl = url.startsWith("/") ? url : `/${url}`;
+        return `url(${quote}${fixedUrl}${quote})`;
+      }
+    );
+  }
+  return updatedContent;
+};
 var transformAppLocale = (exp) => {
   if (exp.startsWith("fragment?.Prefab") || exp.startsWith("fragment.Prefab")) {
     exp = exp.replace("fragment?.Prefab", "fragment");
@@ -39287,6 +39303,168 @@ var modifyExpression = (exp) => {
     return addOptionalChaining(exp);
   }
 };
+var DISABLE_SCOPING_MARKER = "/*DISABLE_SCOPING*/";
+var buildCssScopeClass = (scopeType, name) => {
+  const lowerName = name.toLowerCase();
+  switch (scopeType) {
+    case "page":
+      return `app-page-${lowerName}`;
+    case "partial":
+      return `app-partial-${lowerName}`;
+    case "prefab":
+      return `app-prefab-${lowerName}`;
+  }
+};
+var removeLeadingCssBlockComments = (rule) => {
+  let idx = 0;
+  const len = rule.length;
+  let prefix = "";
+  while (idx < len) {
+    const wsStart = idx;
+    while (idx < len && /\s/.test(rule.charAt(idx))) {
+      idx++;
+    }
+    prefix += rule.slice(wsStart, idx);
+    if (idx > len - 2 || rule.charAt(idx) !== "/" || rule.charAt(idx + 1) !== "*") {
+      break;
+    }
+    const commentStart = idx;
+    idx += 2;
+    let closed = false;
+    while (idx < len - 1) {
+      if (rule.charAt(idx) === "*" && rule.charAt(idx + 1) === "/") {
+        idx += 2;
+        closed = true;
+        break;
+      }
+      idx++;
+    }
+    if (!closed) {
+      return { prefix: "", rest: rule };
+    }
+    prefix += rule.slice(commentStart, idx);
+  }
+  return { prefix, rest: rule.slice(idx) };
+};
+var scopeSingleSelector = (selector, scopeClass) => {
+  const sel = selector.trim();
+  if (!sel) {
+    return sel;
+  }
+  if (sel.startsWith(":")) {
+    return sel;
+  }
+  const wmAppIndex = sel.search(/\.wm-app\b/);
+  if (wmAppIndex !== -1) {
+    if (sel.includes(`.${scopeClass}`)) {
+      return sel;
+    }
+    return sel.replace(/\.wm-app\b/, `.wm-app .${scopeClass}`);
+  }
+  return `.wm-app .${scopeClass} ${sel}`;
+};
+var splitCssIntoRules = (cssContent) => {
+  const rules = [];
+  let currentRule = "";
+  let inComment = false;
+  let inString = false;
+  let stringChar = "";
+  let braceLevel = 0;
+  for (let i = 0; i < cssContent.length; i++) {
+    const char = cssContent[i];
+    const nextChar = cssContent[i + 1];
+    if (!inString && char === "/" && nextChar === "*") {
+      inComment = true;
+      currentRule += char;
+      continue;
+    }
+    if (inComment && char === "*" && nextChar === "/") {
+      inComment = false;
+      currentRule += char;
+      continue;
+    }
+    if (inComment) {
+      currentRule += char;
+      continue;
+    }
+    if (!inString && (char === '"' || char === "'")) {
+      inString = true;
+      stringChar = char;
+      currentRule += char;
+      continue;
+    }
+    if (inString && char === stringChar && cssContent[i - 1] !== "\\") {
+      inString = false;
+      stringChar = "";
+      currentRule += char;
+      continue;
+    }
+    if (inString) {
+      currentRule += char;
+      continue;
+    }
+    if (char === "{") {
+      braceLevel++;
+      currentRule += char;
+    } else if (char === "}") {
+      braceLevel--;
+      currentRule += char;
+      if (braceLevel === 0) {
+        rules.push(currentRule.trim());
+        currentRule = "";
+      }
+    } else {
+      currentRule += char;
+    }
+  }
+  if (currentRule.trim()) {
+    rules.push(currentRule.trim());
+  }
+  return rules;
+};
+var scopeCssUnderWmApp = (cssContent, scopeOptions) => {
+  if (!cssContent || cssContent.trim() === "") {
+    return cssContent;
+  }
+  if (!scopeOptions) {
+    return cssContent;
+  }
+  if (cssContent.trimStart().startsWith(DISABLE_SCOPING_MARKER)) {
+    return cssContent;
+  }
+  const scopeClass = buildCssScopeClass(scopeOptions.scopeType, scopeOptions.name);
+  const rules = splitCssIntoRules(cssContent);
+  const processedRules = rules.map((rule) => {
+    if (!rule) {
+      return rule;
+    }
+    const { prefix, rest } = removeLeadingCssBlockComments(rule);
+    const body = rest;
+    if (!body.trim()) {
+      return rule;
+    }
+    if (body.startsWith("@import") || body.startsWith("@charset")) {
+      return rule;
+    }
+    if (body.startsWith("@")) {
+      return rule;
+    }
+    const openBraceIndex = body.indexOf("{");
+    if (openBraceIndex === -1) {
+      return rule;
+    }
+    const selector = body.substring(0, openBraceIndex).trim();
+    const declarations = body.substring(openBraceIndex);
+    const selectors = selector.split(",").map((s) => s.trim());
+    const scopedSelectors = selectors.map((sel) => scopeSingleSelector(sel, scopeClass));
+    return `${prefix}${scopedSelectors.join(", ")} ${declarations}`;
+  });
+  return processedRules.join("\n");
+};
+var fixURLPathAndScope = (file_content, basePath, isAppCss, scopeOptions) => {
+  const urlFixed = fixURLPath(file_content, basePath, isAppCss);
+  return scopeCssUnderWmApp(urlFixed, scopeOptions);
+};
 var htmlElements = [
   "header",
   "footer",
@@ -40933,6 +41111,7 @@ var PARSER_MAP = /* @__PURE__ */ new Map([
   ["wm-progress-circle", /* @__PURE__ */ new Map([["datavalue", NUMERIC_PARSER]])],
   ["wm-video", /* @__PURE__ */ new Map([["controls", BOOLEAN_PARSER]])],
   ["wm-chips", /* @__PURE__ */ new Map([["searchable", BOOLEAN_PARSER]])],
+  ["wm-table-row", /* @__PURE__ */ new Map([["columnwidth", UNIT_PARSER]])],
   [
     "wm-table",
     /* @__PURE__ */ new Map([
@@ -41066,6 +41245,7 @@ var ALIGNMENT_MATRIX = {
   center: { justifyContent: "space-between", alignItems: "center" },
   end: { justifyContent: "space-between", alignItems: "flex-end" }
 };
+var AUTOLAYOUT_CLASS_PREFIX = "wm-";
 var CSS_PROP_PREFIX = {
   display: "d",
   "flex-direction": "fd",
@@ -41206,7 +41386,7 @@ var AUTOLAYOUT_WIDGET_TAGS = /* @__PURE__ */ new Set([
   "wm-page-content"
 ]);
 var STYLE_OVERLAPPING_LAYOUT_ATTRS = ["overflow", "zindex", "clipcontent"];
-var PREDEFINED_CLASS_NAMES = [
+var PREDEFINED_CLASS_SUFFIXES = [
   "d-flex",
   "fd-row",
   "fd-column",
@@ -41238,6 +41418,9 @@ var PREDEFINED_CLASS_NAMES = [
   "pos-sticky",
   "pos-fixed"
 ];
+var PREDEFINED_CLASS_NAMES = PREDEFINED_CLASS_SUFFIXES.map(
+  (cls) => `${AUTOLAYOUT_CLASS_PREFIX}${cls}`
+);
 
 // src/transpile/style/split-css-shorthand.ts
 function splitCssShorthandOnSpaces(value) {
@@ -41288,7 +41471,10 @@ function splitCssShorthandOnSpaces(value) {
 
 // src/transpile/widget-inline-style-processor.ts
 var isBind = (v) => !!(v && (v.startsWith("bind:") || v.startsWith("{")));
-var hasValidDir = (v) => v === "row" || v === "column";
+var hasValidDir = (v) => {
+  const d = v == null ? void 0 : v.trim();
+  return d === "row" || d === "column";
+};
 var isAuto = (v) => v === "auto";
 var normalizeGap = (v) => v != null && v !== "" && !isAuto(v) ? v : null;
 function parseDimensionValue(value, element) {
@@ -41342,7 +41528,7 @@ function sanitizeValue(value) {
 }
 function cssToClassName(property, value) {
   const prefix = CSS_PROP_PREFIX[property] || property.replace(/-/g, "");
-  return `${prefix}-${sanitizeValue(value)}`;
+  return `${AUTOLAYOUT_CLASS_PREFIX}${prefix}-${sanitizeValue(value)}`;
 }
 function stripBalancedOuterParens(expr) {
   let e = expr;
@@ -41478,7 +41664,7 @@ function computeLayoutCssProperties(props) {
   var _a;
   const css = {};
   if (hasValidDir(props.direction)) {
-    const direction = props.direction;
+    const direction = props.direction.trim();
     const hasAlignment = !!props.alignment;
     const alignment = props.alignment || "top-left";
     const wrap2 = direction === "column" ? false : (_a = props.wrap) != null ? _a : false;
@@ -41632,7 +41818,7 @@ var AutolayoutCodegen = class {
     if (tagName === "wm-list") return null;
     const parent = element.parentNode;
     const dir = ((_c = parent == null ? void 0 : parent.getAttribute) == null ? void 0 : _c.call(parent, "direction")) || null;
-    return dir && hasValidDir(dir) ? dir : null;
+    return dir && hasValidDir(dir) ? dir.trim() : null;
   }
   // Collect flex props for a single dimension, axis-aware to avoid cross-axis conflicts.
   collectSizeFlexProps(element, key, val, flexProps) {
@@ -41935,6 +42121,65 @@ function convertActionToClickHandler(actionAttr, tableName, liveTableName) {
   ${converted.join("\n  ")}
 }}`;
 }
+function isRowBoundExpression(value) {
+  if (!value || typeof value !== "string") return false;
+  const exp = value.startsWith("bind:") ? value.substring(5).trim() : value;
+  return /fragment\??\.row/.test(exp) || /\brow\./.test(exp) || /\brow\[/.test(exp);
+}
+function transformTableRowPropExpression(expression) {
+  if (!expression) return "";
+  let transformed = expression.replace(/fragment\??\.row/g, "row");
+  transformed = transformed.replace(/\brow\./g, "row?.");
+  transformed = transformed.replace(/\brow\[/g, "row?.[");
+  transformed = addOptionalChaining(transformed);
+  transformed = transformed.replace(/row\?\?\./g, "row?.");
+  transformed = transformed.replace(/(\w+)\?\.\s*\(/g, "$1(");
+  return transformed;
+}
+function transformTableRowCurrentItemExpression(expression) {
+  if (!expression) return "";
+  const raw = expression.startsWith("bind:") ? expression.substring(5).trim() : expression;
+  let transformed = raw.replace(/fragment\??\.row/g, "currentItem");
+  transformed = transformed.replace(/\brow\./g, "currentItem?.");
+  transformed = transformed.replace(/\brow\[/g, "currentItem?.[");
+  transformed = addOptionalChaining(transformed);
+  transformed = transformed.replace(/currentItem\?\?\./g, "currentItem?.");
+  transformed = transformed.replace(/(\w+)\?\.\s*\(/g, "$1(");
+  return transformed;
+}
+var TABLE_ROW_PROPS_SKIP_ATTRS = /* @__PURE__ */ new Set([
+  "name",
+  "class",
+  "className",
+  "content",
+  "widget-type",
+  "display-name",
+  "displayName",
+  "rowType",
+  "is-table-row",
+  "data-widget-id",
+  "styles",
+  "style"
+]);
+function buildTableRowProps(element) {
+  const parts = [];
+  const toRemove = [];
+  for (const name of Object.keys(element.attributes)) {
+    if (TABLE_ROW_PROPS_SKIP_ATTRS.has(name)) continue;
+    const value = element.attributes[name];
+    if (!isRowBoundExpression(value)) continue;
+    const exp = transformTableRowPropExpression(value.substring(5).trim());
+    if (name === "show") {
+      parts.push(`show: (${exp} || false)`);
+    } else {
+      parts.push(`${name}: ${exp}`);
+    }
+    toRemove.push(name);
+  }
+  toRemove.forEach((attr) => element.removeAttribute(attr));
+  if (parts.length === 0) return "";
+  return `tableRowProps={(row: any) => ({${parts.join(", ")}})}`;
+}
 function transformTableColumnClassExpression(expression) {
   if (!expression) return "";
   let transformed = expression.replace(/fragment\??\.row/g, "rowData");
@@ -43447,6 +43692,8 @@ function buildPartialMarkup(element, context, componentName) {
   }
   const watch = [];
   const typedParams = /* @__PURE__ */ new Set();
+  const rowBoundParamParts = [];
+  const isTableRow = element.hasAttribute("is-table-row");
   element.childNodes.filter((node) => isHTMLElement(node) && node.tagName === "WM-PARAM").forEach((node) => {
     const e = node;
     const name2 = e.getAttribute("name") || "";
@@ -43458,7 +43705,11 @@ function buildPartialMarkup(element, context, componentName) {
         value = `bind:${match[0]}`;
       }
     }
-    params[name2] = value;
+    if (isTableRow && isRowBoundExpression(value)) {
+      rowBoundParamParts.push(`${name2}={${transformTableRowCurrentItemExpression(value)}}`);
+    } else {
+      params[name2] = value;
+    }
     if (type && ["string", "boolean", "number"].includes(type)) {
       typedParams.add(name2);
     }
@@ -43477,6 +43728,9 @@ function buildPartialMarkup(element, context, componentName) {
     context,
     typeAwareInfer
   );
+  if (rowBoundParamParts.length > 0) {
+    paramStr += ` ${rowBoundParamParts.join(" ")}`;
+  }
   paramStr += ` content={props.content}`;
   if (context.isPartOfPrefab) {
     paramStr += " prefab={fragment.prefab}";
@@ -46186,8 +46440,7 @@ function getNearestWizardName(element) {
 }
 function prefixWizardApiReferences(root, wizardRefName) {
   const escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-  const wizardApiNames = [
-    // primary actions
+  const wizardActionApiNames = [
     "done",
     "next",
     "previous",
@@ -46199,8 +46452,9 @@ function prefixWizardApiReferences(root, wizardRefName) {
     "disableDone",
     "hasNextStep",
     "hasPreviousStep",
-    "hasNoNextStep",
-    // configurable properties
+    "hasNoNextStep"
+  ];
+  const wizardConfigApiNames = [
     "cancelable",
     "skippable",
     "nextbtnlabel",
@@ -46209,33 +46463,36 @@ function prefixWizardApiReferences(root, wizardRefName) {
     "cancelbtnlabel",
     "actionsalignment"
   ];
-  const wizardApiPart = wizardApiNames.map(escapeRe).join("|");
-  const reOptional = new RegExp(`fragment\\?\\.(${wizardApiPart})\\b`, "g");
-  const rePlain = new RegExp(`fragment\\.(${wizardApiPart})\\b`, "g");
-  const reBind = new RegExp(`bind:fragment\\.(${wizardApiPart})\\b`, "g");
+  const actionApiPart = wizardActionApiNames.map(escapeRe).join("|");
+  const configApiPart = wizardConfigApiNames.map(escapeRe).join("|");
+  const reActionOptional = new RegExp(`fragment\\?\\.(${actionApiPart})\\b`, "g");
+  const reActionPlain = new RegExp(`fragment\\.(${actionApiPart})\\b`, "g");
+  const reActionBind = new RegExp(`bind:fragment\\.(${actionApiPart})\\b`, "g");
+  const reConfigOptional = new RegExp(`fragment\\?\\.(${configApiPart})\\b`, "g");
+  const reConfigPlain = new RegExp(`fragment\\.(${configApiPart})\\b`, "g");
+  const reConfigBind = new RegExp(`bind:fragment\\.(${configApiPart})\\b`, "g");
   const rewrite = (val) => {
     if (!val) return val;
     let v = val;
-    v = v.replace(reOptional, `fragment?.Widgets?.${wizardRefName}?.$1`);
-    v = v.replace(rePlain, `fragment?.Widgets?.${wizardRefName}?.$1`);
-    v = v.replace(reBind, `bind:fragment?.Widgets?.${wizardRefName}?.$1`);
-    const basePathRe = new RegExp(
+    v = v.replace(reActionBind, "bind:actions?.$1");
+    v = v.replace(reActionOptional, "actions?.$1");
+    v = v.replace(reActionPlain, "actions.$1");
+    v = v.replace(reConfigBind, `bind:fragment?.Widgets?.${wizardRefName}?.$1`);
+    v = v.replace(reConfigOptional, `fragment?.Widgets?.${wizardRefName}?.$1`);
+    v = v.replace(reConfigPlain, `fragment?.Widgets?.${wizardRefName}?.$1`);
+    const actionsPathRe = /(actions)\.([a-zA-Z_$][\w$]*)\(/g;
+    v = v.replace(actionsPathRe, (_m, base, method2) => {
+      return `${base}?.${method2}?.(`;
+    });
+    const widgetPathRe = new RegExp(
       `(fragment\\?\\.Widgets\\?\\.${escapeRe(wizardRefName)})\\.([a-zA-Z_$][\\w$]*)\\(`,
       "g"
     );
-    v = v.replace(basePathRe, (_m, base, method2) => {
+    v = v.replace(widgetPathRe, (_m, base, method2) => {
       return `${base}?.${method2}?.(`;
     });
     const method = v.split("?.");
-    if (method && method[3] && [
-      "cancelable",
-      "skippable",
-      "nextbtnlabel",
-      "previousbtnlabel",
-      "donebtnlabel",
-      "cancelbtnlabel",
-      "actionsalignment"
-    ].includes(method[3])) {
+    if (method && method[3] && wizardConfigApiNames.includes(method[3])) {
       return v.slice(0, v.lastIndexOf("?"));
     }
     return v;
@@ -46549,7 +46806,8 @@ var table_row_transformer_default = {
       partial = partialAttr;
       element.removeAttribute("is-table-row");
     }
-    return `<WmTableRow listener={fragment} widgetType="${widgetType}" ${transformAttrs(element, context)} ${partial}`;
+    const tableRowProps = buildTableRowProps(element);
+    return `<WmTableRow listener={fragment} widgetType="${widgetType}" ${transformAttrs(element, context)} ${tableRowProps} ${partial}`;
   },
   post: (element, context) => "/>",
   imports: (element, context) => imports91.concat(getPartialImports(element, context))
@@ -46742,7 +47000,7 @@ var extractField2 = (element, context, filterElement) => {
     getAttribute(filterElement, "filterdata"),
     false
   );
-  if (widgetType === "number" && isRange) {
+  if (isRange) {
     const maxField = getFilterWidgetTemplate(
       widgetType,
       widgetName,
@@ -46780,8 +47038,9 @@ var getFilterWidgetTemplate = (widgetType, widgetName, element, filterDataVariab
   if (onTap) {
     element.removeAttribute("on-tap");
   }
-  const placeholder = getAttribute(element, "placeholder");
-  if (placeholder) {
+  const placeholderAttr = isMaxWidget ? "maxplaceholder" : "placeholder";
+  const placeholder = getAttribute(element, placeholderAttr);
+  if (placeholder && !isMaxWidget) {
     element.removeAttribute("placeholder");
   }
   const filterfieldName = getAttribute(element, "name");
@@ -47977,6 +48236,6 @@ he/he.js:
    *)
 */
 
-export { serializeVariablesToCode, bind_ex_transformer_default as transformEx, transformMarkup, variable_transformer_default as transformVariable, transpileVariableDefinitions };
+export { buildCssScopeClass, fixURLPathAndScope, scopeCssUnderWmApp, serializeVariablesToCode, bind_ex_transformer_default as transformEx, transformMarkup, variable_transformer_default as transformVariable, transpileVariableDefinitions };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map