@syncfusion/ej2-react-form-renderer 0.1.0-beta → 0.1.2-beta

package/src/expressions/ExpressionParser.js

@@ -0,0 +1,270 @@
+/**
+ * ExpressionParser - Parse and compile expressions
+ *
+ * Converts string expressions into safe, compiled functions
+ * Supports field references, operators, functions, and conditionals
+ *
+ * @spec Expression_Engine.md
+ */
+export class ExpressionParser {
+    supportedFunctions = [
+        'SUM', 'AVG', 'MIN', 'MAX', 'COUNT',
+        'ROUND', 'FLOOR', 'CEIL', 'ABS', 'SQRT',
+        'UPPER', 'LOWER', 'CONCAT', 'LENGTH', 'TRIM', 'SUBSTRING',
+        'TODAY', 'AGE', 'DATEFORMAT', 'DATEDIFF', 'ADDDAYS', 'SUBDAYS'
+    ];
+    availableFields = new Map();
+    /**
+     * Initialize parser with available fields for type validation
+     */
+    setAvailableFields(fields) {
+        this.availableFields.clear();
+        fields.forEach(field => {
+            this.availableFields.set(field.name, field);
+        });
+    }
+    validateFieldOperations(expression) {
+        const errors = [];
+        // Skip if no fields available
+        if (this.availableFields.size === 0) {
+            return errors;
+        }
+        // Invalid operators for string fields (allow only + for concatenation)
+        const stringInvalidOps = ['-', '*', '/', '%', '^'];
+        // All operators invalid for date fields
+        const dateInvalidOps = ['-', '*', '/', '%', '^', '+'];
+        // Track reported operator positions to avoid duplicates
+        const reportedOperators = new Set();
+        // Extract all field references and their surrounding operators
+        const fieldRefPattern = /(\{[^}]+\})/g;
+        let match;
+        while ((match = fieldRefPattern.exec(expression)) !== null) {
+            const fieldRef = match[0];
+            const fieldName = fieldRef.slice(1, -1); // Remove { }
+            const field = this.availableFields.get(fieldName);
+            if (!field)
+                continue; // Field not found in available fields, skip validation
+            const fieldIndex = match.index;
+            const fieldEndIndex = fieldIndex + fieldRef.length;
+            // Get context around field reference (including spaces)
+            const textBefore = expression.substring(Math.max(0, fieldIndex - 10), fieldIndex);
+            const textAfter = expression.substring(fieldEndIndex, Math.min(expression.length, fieldEndIndex + 10));
+            // Extract the operator if present (skip spaces)
+            const operatorBefore = textBefore.trimEnd().slice(-1);
+            const operatorAfter = textAfter.trimStart().charAt(0);
+            // Calculate actual position of operators in the original expression
+            const operatorBeforePos = fieldIndex - (textBefore.length - textBefore.trimEnd().length) - 1;
+            const operatorAfterPos = fieldEndIndex + (textAfter.length - textAfter.trimStart().length);
+            // For STRING fields: reject all operators except +
+            if (field.type === 'string' && !field.format) {
+                if (operatorBefore && stringInvalidOps.includes(operatorBefore)) {
+                    const key = `${operatorBeforePos}:${operatorBefore}`;
+                    if (!reportedOperators.has(key)) {
+                        errors.push(`Cannot perform '${operatorBefore}' operation on string field '{${fieldName}}'`);
+                        reportedOperators.add(key);
+                    }
+                }
+                if (operatorAfter && stringInvalidOps.includes(operatorAfter)) {
+                    const key = `${operatorAfterPos}:${operatorAfter}`;
+                    if (!reportedOperators.has(key)) {
+                        errors.push(`Cannot perform '${operatorAfter}' operation on string field '{${fieldName}}'`);
+                        reportedOperators.add(key);
+                    }
+                }
+            }
+            // For DATE fields: reject ALL operators including +
+            if (field.format === 'date' || field.format === 'date-time' || field.format === 'time') {
+                if (operatorBefore && dateInvalidOps.includes(operatorBefore)) {
+                    const key = `${operatorBeforePos}:${operatorBefore}`;
+                    if (!reportedOperators.has(key)) {
+                        errors.push(`Cannot perform '${operatorBefore}' operation on date field '{${fieldName}}'`);
+                        reportedOperators.add(key);
+                    }
+                }
+                if (operatorAfter && dateInvalidOps.includes(operatorAfter)) {
+                    const key = `${operatorAfterPos}:${operatorAfter}`;
+                    if (!reportedOperators.has(key)) {
+                        errors.push(`Cannot perform '${operatorAfter}' operation on date field '{${fieldName}}'`);
+                        reportedOperators.add(key);
+                    }
+                }
+            }
+        }
+        return errors;
+    }
+    /**
+     * Validate expression syntax
+     */
+    validate(expression) {
+        const errors = [];
+        if (!expression || expression.trim() === '') {
+            return { valid: true, errors: [] };
+        }
+        // Check for unbalanced braces
+        const openBraces = (expression.match(/\{/g) || []).length;
+        const closeBraces = (expression.match(/\}/g) || []).length;
+        if (openBraces !== closeBraces) {
+            errors.push('Unbalanced braces in expression');
+        }
+        // Check for unbalanced parentheses
+        const openParens = (expression.match(/\(/g) || []).length;
+        const closeParens = (expression.match(/\)/g) || []).length;
+        if (openParens !== closeParens) {
+            errors.push('Unbalanced parentheses in expression');
+        }
+        // Check for invalid function calls
+        const funcPattern = /(\w+)\s*\(/g;
+        let match;
+        while ((match = funcPattern.exec(expression)) !== null) {
+            const funcName = match[1].toUpperCase();
+            // Only validate uppercase-named functions
+            if (funcName === funcName.toUpperCase() && !this.supportedFunctions.includes(funcName)) {
+                errors.push(`Unknown function: ${funcName}`);
+            }
+        }
+        // Validate field operations based on field types
+        const fieldOpErrors = this.validateFieldOperations(expression);
+        errors.push(...fieldOpErrors);
+        return {
+            valid: errors.length === 0,
+            errors
+        };
+    }
+    /**
+     * Compile expression to executable function
+     */
+    compile(expression, options = {}) {
+        try {
+            // Set available fields for validation if provided
+            if (options.availableFields && Array.isArray(options.availableFields)) {
+                this.setAvailableFields(options.availableFields);
+            }
+            // Validate expression before compiling
+            const validation = this.validate(expression);
+            if (!validation.valid) {
+                console.error('Expression validation errors:', validation.errors, { expression });
+                return () => null;
+            }
+            // Replace field references with context lookups
+            let compiled = expression;
+            // Handle field references FIRST (this includes refs inside ${...})
+            compiled = this.compileFieldReferences(compiled);
+            // Handle bare function calls SECOND (e.g., SUM([...]) without braces)
+            compiled = this.compileBareFunctionCalls(compiled);
+            // Handle math expressions THIRD (now ${} and {} contain already-replaced refs)
+            compiled = this.compileMatrixExpressions(compiled);
+            // Create function that safely evaluates the expression
+            return (context) => {
+                try {
+                    // This uses Function constructor with controlled context binding
+                    // which is safer than eval() but still allows expressions
+                    // Note: compiled expression already uses context['field'] syntax
+                    const func = new Function('context', `
+            try {
+              return ${compiled};
+            } catch (e) {
+              return null;
+            }
+          `);
+                    return func(context);
+                }
+                catch (e) {
+                    console.error('Expression execution error:', e, { expression, compiled });
+                    return null;
+                }
+            };
+        }
+        catch (error) {
+            console.error('Expression compilation error:', error, { expression });
+            return () => null;
+        }
+    }
+    // Private helpers
+    compileMatrixExpressions(expression) {
+        let compiled = expression;
+        const keywords = ['and', 'or', 'in', 'new', 'typeof', 'instanceof', 'delete', 'void', 'this', 'super', 'async', 'await'];
+        const constants = ['PI', 'TRUE', 'FALSE', 'NULL', 'UNDEFINED', 'Math'];
+        const functions = [
+            'SUM', 'AVG', 'MIN', 'MAX', 'COUNT',
+            'ROUND', 'FLOOR', 'CEIL', 'ABS', 'SQRT',
+            'UPPER', 'LOWER', 'CONCAT', 'LENGTH', 'TRIM', 'SUBSTRING',
+            'TODAY', 'AGE', 'DATEFORMAT', 'DATEDIFF', 'ADDDAYS', 'SUBDAYS'
+        ];
+        // Create fresh regex each time to avoid lastIndex issues with g flag
+        const mathExprPattern = /\$?\{([^}]+)\}/g;
+        // Process ${...} and {...} blocks: replace bare identifiers with context lookups
+        compiled = compiled.replace(mathExprPattern, (_match, content) => {
+            let transformed = content;
+            // STEP 1: Handle function calls first
+            // Match function names followed by ( and prefix with context.
+            // Use negative lookbehind to avoid double-replacing (e.g., context.SUM)
+            functions.forEach(fn => {
+                const funcCallRegex = new RegExp(`(?<!context\\.)\\b${fn}\\b(?=\\s*\\()`, 'g');
+                transformed = transformed.replace(funcCallRegex, `context.${fn}`);
+            });
+            constants.forEach(constant => {
+                const constantRegex = new RegExp(`\\b${constant}\\b`, 'g');
+                transformed = transformed.replace(constantRegex, `context.${constant}`);
+            });
+            // STEP 2: Replace other bare identifiers with context lookups
+            // Skip: operators, keywords, constants, and property/method access
+            // First, protect string literals by temporarily replacing them
+            const strings = [];
+            let stringProtected = transformed;
+            stringProtected = stringProtected.replace(/(['"`])(?:(?=(\\?))\2.)*?\1/g, (match) => {
+                strings.push(match);
+                return `__STRING_${strings.length - 1}__`;
+            });
+            // Now replace identifiers, but they won't match inside strings
+            stringProtected = stringProtected.replace(/(?<!context\[')\b([a-zA-Z_][a-zA-Z0-9_]*)\b(?!\s*[(\.])/g, (word) => {
+                // Skip keywords and constants
+                if (keywords.includes(word.toLowerCase()) || constants.includes(word.toUpperCase())) {
+                    return word;
+                }
+                // Skip function names (already handled in step 1)
+                if (functions.includes(word.toUpperCase())) {
+                    return word;
+                }
+                // Replace identifier with context access (but only if not already context['...'])
+                if (!word.startsWith('context')) {
+                    return `context['${word}']`;
+                }
+                return word;
+            });
+            // Return as parenthesized expression
+            return `(${transformed})`;
+        });
+        return compiled;
+    }
+    compileBareFunctionCalls(expression) {
+        let compiled = expression;
+        const functions = [
+            'SUM', 'AVG', 'MIN', 'MAX', 'COUNT',
+            'ROUND', 'FLOOR', 'CEIL', 'ABS', 'SQRT',
+            'UPPER', 'LOWER', 'CONCAT', 'LENGTH', 'TRIM', 'SUBSTRING',
+            'TODAY', 'AGE', 'DATEFORMAT', 'DATEDIFF', 'ADDDAYS', 'SUBDAYS'
+        ];
+        // Handle bare function calls like SUM([...]) that are not inside ${...} or {...}
+        // Use negative lookbehind to avoid matching if already preceded by context.
+        functions.forEach(fn => {
+            const funcCallRegex = new RegExp(`(?<!context\\.)\\b${fn}\\b(?=\\s*\\()`, 'g');
+            compiled = compiled.replace(funcCallRegex, `context.${fn}`);
+        });
+        return compiled;
+    }
+    compileFieldReferences(expression) {
+        let compiled = expression;
+        // Create fresh regex each time to avoid lastIndex issues with g flag
+        const fieldRefPattern = /\{([^{}]+)\}/g;
+        // Replace {fieldName} with context['fieldName'] or field access
+        compiled = compiled.replace(fieldRefPattern, (match, ref) => {
+            // Handle escaped braces
+            if (ref.startsWith('\\') && ref.endsWith('\\')) {
+                return match; // Keep as is
+            }
+            // Handle nested paths like {customer.name}
+            return `context['${ref.replace(/\./g, '\'].[')}']`;
+        });
+        return compiled;
+    }
+}

package/src/json-converter.d.ts

@@ -1,19 +1,28 @@
 import type { FormSchema, FormComponent } from '../FormBuilder/types/FormSchema';
 export declare const generateId: (type: string) => string;
-export interface SplitSchema {
-    dataSchema: DataSchema;
-    uiSchema: UISchema;
+export declare const generateName: (type: string) => string;
+export interface UnifiedSchema {
+    version: string;
+    properties: Record<string, UnifiedField>;
+    theme?: string;
+    layout: LayoutNode[];
+    settings?: any;
+}
+export interface UnifiedField extends DataField, UIField {
 }
 export interface DataSchema {
     version: string;
     properties: Record<string, DataField>;
+    settings?: any;
 }
 export interface DataField {
     id: string;
     type: 'string' | 'number' | 'boolean' | 'array' | 'any' | 'button' | 'message' | 'sign' | 'image' | 'file' | 'color' | 'grid';
+    name: string;
     label?: string;
     format?: 'date' | 'date-time' | 'time' | 'email' | 'url';
     defaultValue?: any;
+    expressionValue?: string;
     content?: string;
     buttonType?: string;
     textboxType?: string;
@@ -38,6 +47,10 @@ export interface UIField {
     _configured?: boolean;
     [key: string]: any;
 }
+export interface SplitSchema {
+    dataSchema: DataSchema;
+    uiSchema: UISchema;
+}
 export type LayoutNode = FieldNode | TableNode | PanelNode | TabsNode | CardNode;
 export interface FieldNode {
     type: 'field';
@@ -46,6 +59,7 @@ export interface FieldNode {
 export interface TableNode {
     type: 'table';
     id: string;
+    name: string;
     label?: string;
     cssClass?: string;
     hideBorders?: boolean;
@@ -55,6 +69,7 @@ export interface TableNode {
     columnWidths?: {
         widths: (number | null)[];
     };
+    conditions?: any;
 }
 export interface TableCell {
     row: number;
@@ -64,19 +79,23 @@ export interface TableCell {
 export interface PanelNode {
     type: 'panel';
     id: string;
+    name: string;
     label?: string;
     cssClass?: string;
     hideBorders?: boolean;
     hideLabel?: boolean;
     children: LayoutNode[];
+    conditions?: any;
 }
 export interface TabsNode {
     type: 'tabs';
     id: string;
+    name: string;
     cssClass?: string;
     label?: string;
     tabOptions?: string[];
     tabs: TabItem[];
+    conditions?: any;
 }
 export interface TabItem {
     header: string;
@@ -85,6 +104,7 @@ export interface TabItem {
 export interface CardNode {
     type: 'card';
     id: string;
+    name: string;
     label?: string;
     cssClass?: string;
     hideLabel?: boolean;
@@ -94,6 +114,7 @@ export interface CardNode {
     actionButtonLabel?: string;
     actionButtonType?: 'button' | 'submit';
     children: LayoutNode[];
+    conditions?: any;
 }
 /**
  * Convert label to camelCase identifier
@@ -108,12 +129,16 @@ export declare function labelToFieldKey(label: string, fallbackId?: string): str
  * Ensure field key is unique by appending a number if needed
  */
 export declare function makeUniqueFieldKey(baseKey: string, existingKeys: Set<string>, originalId?: string): string;
-export declare function splitSchema(heartSchema: FormSchema): SplitSchema;
+export declare const UI_TYPE_TO_SEMANTIC_TYPE: Record<string, {
+    type: DataField['type'];
+    format?: string;
+} | null>;
+export declare function splitSchema(heartSchema: FormSchema): UnifiedSchema;
 /**
- * Merge split schemas back into heart schema
- * Supports both simple merge and fuzzy matching for re-import scenarios
+ * Merge unified schema back into heart schema
+ * Reconstructs FormComponent array from unified properties and layout
  */
-export declare function mergeSchema(split: SplitSchema, existingUISchema?: UISchema): FormSchema;
+export declare function mergeSchema(unified: UnifiedSchema): FormSchema;
 /**
  * Infer widget type from semantic data type
  */
@@ -139,32 +164,8 @@ export declare function mergeWithIDRemapping(newDataSchema: DataSchema, existing
  * Extract all field IDs from layout tree
  */
 export declare function extractFieldIdsFromLayout(layout: LayoutNode[]): Set<string>;
-/**
- * Find unmatched fields (in data schema but not in layout)
- */
-export declare function findUnmatchedFields(dataSchema: DataSchema, layout: LayoutNode[]): string[];
 /**
  * Convert parser output (FormComponent[]) to DataSchema format
  * This allows parser results to be merged with existing UI schemas
  */
 export declare function convertComponentsToDataSchema(components: FormComponent[]): DataSchema;
-/**
- * Convert parser output to a simple linear layout
- * Used when no existing UI schema is present
- */
-export declare function convertComponentsToUISchema(components: FormComponent[]): UISchema;
-/**
- * Generate default UI properties for each data field
- * Used by renderers when only data schema is provided
- */
-export declare function generateUIPropertiesFromData(dataSchema: DataSchema): Record<string, UIField>;
-/**
- * Generate sequential layout from data schema
- * Used by renderers when only data schema is provided
- */
-export declare function generateLayoutFromData(dataSchema: DataSchema): FieldNode[];
-/**
- * Generate minimal data schema from UI schema
- * Used by renderers when only UI schema is provided
- */
-export declare function generateDataSchemaFromUI(uiSchema: UISchema): DataSchema;