@bgroup/wise-form 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bgroup/wise-form",
-    "version": "1.0.5",
+    "version": "1.0.6",
     "description": "Wise Form - A reactive form library",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",

package/src/form/view/index.tsx

@@ -2,10 +2,20 @@ import React from 'react';
 import { useModel } from './hooks/use-model';
 import { WiseFormContext } from './context';
 import { useTypes } from './hooks/use-types';
+import type { FormModel } from '@bgroup/wise-form/models';
 
 import { IWiseFormSpecs } from '../interfaces/wise-form-specs';
 import { Containers } from './components/containers';
 
+/**
+ * Interfaz extendida para FormModel que puede tener el método onSubmit
+ * Esto permite que las implementaciones extendidas de FormModel (como en frontend)
+ * puedan usar el método onSubmit sin errores de tipado
+ */
+interface IFormModelWithSubmit extends FormModel {
+	onSubmit?: (event: Event | React.FormEvent) => Promise<{ status: boolean; error?: Error }> | void;
+}
+
 export function WiseForm({ children, settings, types, model }: IWiseFormSpecs): JSX.Element {
 	const { ready, model: instance, type, styles, items } = useModel(settings, model);
 	const formTypes = useTypes(types);
@@ -30,10 +40,14 @@ export function WiseForm({ children, settings, types, model }: IWiseFormSpecs):
 
 	const onSubmit = (event: React.FormEvent) => {
 		event.preventDefault();
-		// Form submission can be handled via callbacks or custom handlers
-		if (instance.callbacks?.onSubmit) {
-			instance.callbacks.onSubmit({ form: instance, event });
+
+		// Verificar si la instancia tiene el método onSubmit (implementación extendida)
+		const modelWithSubmit = instance as IFormModelWithSubmit;
+		if (typeof modelWithSubmit.onSubmit === 'function') {
+			modelWithSubmit.onSubmit(event);
+			return;
 		}
+
 	};
 
 	const value = {

package/src/formulas/variants/array-formula.ts

@@ -97,7 +97,12 @@ export class FormulaArray {
 
     async calculate() {
         const formulaField = this.#plugin.form.getField(this.name);
-        if (!formulaField) return;
+        if (!formulaField) {
+            console.warn(
+                `[WiseForm.FormulaArray] Formula field "${this.name}" not found. Check that the field exists in the form configuration.`
+            );
+            return;
+        }
         const value = formulaField[this.#specs.propertyValue || 'entries']
         if (!value || !Array.isArray(value) || !value.length) {
             formulaField.set({ [this.#specs.propertyValue]: [] });

package/src/models/base.ts

@@ -100,28 +100,54 @@ export class BaseWiseModel extends ReactiveModel<IBaseWiseModel> {
 	/**
 	 * Retrieves a field or nested wrapper by name. Supports dot notation for accessing deeply nested fields.
 	 * @param {string} name - The name of the field or nested wrapper to retrieve.
+	 * @param {Set<BaseWiseModel | WrappedFormModel>} visited - Set of already visited models to prevent infinite recursion.
 	 * @returns {FormField | WrappedFormModel | undefined} The requested instance, or undefined if not found.
 	 */
-	getField(name: string) {
-		if (!name) return console.warn('You need to provide a name to get a field in form ', this.#settings.name);
+	getField(name: string, visited: Set<BaseWiseModel | WrappedFormModel> = new Set()) {
+		if (!name) {
+			console.warn('[WiseForm.getField] Empty field name provided in form', this.#settings.name);
+			return;
+		}
+
+		// Protección contra recursión circular
+		if (visited.has(this)) {
+			console.error(
+				`[WiseForm.getField] Circular reference detected in form "${this.#settings.name}" while searching for field "${name}". This usually indicates a configuration issue with nested wrappers.`
+			);
+			console.log(
+				`[WiseForm.getField] PROTECTION ACTIVE: Circular reference prevented. Form: "${this.#settings.name}", Field: "${name}", Visited models count: ${visited.size}`
+			);
+			return undefined;
+		}
+		visited.add(this);
 
 		if (!name.includes('.')) {
 			let field = this.#fields.get(name);
 
 			if (!field) {
 				this.#wrappers.forEach(item => {
-					const foundField = item.getField(name);
-					if (foundField) field = foundField;
+					if (!visited.has(item)) {
+						const foundField = item.getField(name, visited);
+						if (foundField) field = foundField;
+					}
 				});
 			}
 			return field;
 		}
 
+		// Dot notation path
 		const [wrapperName, ...others] = name.split('.');
 		const currentWrapper = this.#wrappers.get(wrapperName);
 
+		if (!currentWrapper) {
+			console.warn(
+				`[WiseForm.getField] Wrapper "${wrapperName}" not found in form "${this.#settings.name}" while searching for "${name}". Available wrappers: ${Array.from(this.#wrappers.keys()).join(', ') || 'none'}`
+			);
+			return undefined;
+		}
+
 		const otherWrapper = others.join('.');
-		return currentWrapper.getField(otherWrapper);
+		return currentWrapper.getField(otherWrapper, visited);
 	}
 
 	/**

package/src/models/callback-manager.ts

@@ -2,101 +2,179 @@ import type { FormField } from './field';
 import type { FormModel } from './model';
 import { CallbackFunction, ICallbackProps } from './types/callbacks';
 
+/**
+ * Maximum number of recursive executions allowed for a callback before preventing further execution.
+ * This can be overridden if specific use cases require a higher limit.
+ */
+export const MAX_CALLBACK_RECURSION_DEPTH = 3;
+
+/**
+ * Map to track callback execution depth per unique execution context.
+ * Key format: "callbackName:fieldName:dependencyName" or "callbackName:fieldName" if no dependency
+ */
+const callbackExecutionDepth = new Map<string, number>();
+
+/**
+ * Set to track callbacks currently executing (prevents concurrent executions of the same callback)
+ */
+const currentlyExecutingCallbacks = new Set<string>();
+
 export class CallbackManager {
-    #field: FormField;
-    #model: FormModel;
-    #callbacks: CallbackFunction[] = [];
-    #listeners = [];
-    constructor(model, field) {
-        this.#field = field;
-        this.#model = model;
-        this.#callbacks = model.callbacks;
-        this.initialize();
+  #field: FormField;
+  #model: FormModel;
+  #callbacks: CallbackFunction[] = [];
+  #listeners = [];
+  constructor(model, field) {
+    this.#field = field;
+    this.#model = model;
+    this.#callbacks = model.callbacks;
+    this.initialize();
+  }
+
+  initialize() {
+    const instance = this.#field;
+    const checkField = async settings => {
+      const dependency = this.#model.getField(this.#model.getFieldName(settings.field));
+      await dependency.isReady;
+      const required = ['field', 'callback'];
+      required.forEach(prop => {
+        if (!settings[prop]) throw new Error(`${settings?.field} is missing ${prop}`);
+      });
+
+      if (!dependency) throw new Error(`${settings?.field} is not a registered field`);
+
+      if (!this.#callbacks[settings.callback]) {
+        throw new Error(`${settings.callback} is not  a registered callback ${settings.name}`);
+      }
+
+      // saved in listener array to be able to remove the listener if is required.
+      const event = settings.event || 'value.change';
+      const caller = () => this.executeCallback(settings);
+      this.#listeners.push(caller);
+      dependency.on(event, caller);
+
+      //callback({ dependency, settings, field: instance, form: this });
+    };
+
+    instance?.specs?.dependentOn.forEach(checkField);
+  }
+
+  /**
+   * Generates a unique execution key for tracking callback recursion.
+   * Format: "callbackName:fieldName:dependencyName"
+   */
+  #getExecutionKey(callbackName: string, fieldName: string, dependencyName?: string): string {
+    const fieldNameStr = fieldName || 'unknown';
+    const dependencyNameStr = dependencyName || 'unknown';
+    return `${callbackName}:${fieldNameStr}:${dependencyNameStr}`;
+  }
+
+  executeCallback = async settings => {
+    if (!settings) {
+      console.warn('the field does not have dependentOn settings');
+      return;
     }
 
-    initialize() {
-        const instance = this.#field;
-        const checkField = async (settings) => {
-            const dependency = this.#model.getField(
-                this.#model.getFieldName(settings.field)
-            );
-            await dependency.isReady;
-            const required = ['field', 'callback'];
-            required.forEach((prop) => {
-                if (!settings[prop])
-                    throw new Error(`${settings?.field} is missing ${prop}`);
-            });
-
-            if (!dependency)
-                throw new Error(`${settings?.field} is not a registered field`);
-
-            if (!this.#callbacks[settings.callback]) {
-                throw new Error(
-                    `${settings.callback} is not  a registered callback ${settings.name}`
-                );
-            }
-
-            // saved in listener array to be able to remove the listener if is required.
-            const event = settings.event || 'value.change';
-            const caller = () => this.executeCallback(settings);
-            this.#listeners.push(caller);
-            dependency.on(event, caller);
-
-            //callback({ dependency, settings, field: instance, form: this });
-        };
-
-        instance?.specs?.dependentOn.forEach(checkField);
+    const callbackName = settings.callback;
+    if (!callbackName) {
+      console.warn('[CallbackManager] executeCallback called without callback name in settings');
+      return;
     }
 
-    executeCallback = async (settings) => {
-        const params: ICallbackProps = {
-            ...settings,
-            form: this.#model,
-            field: this.#field,
-           
-            settings,
-        };
-        if (!settings) {
-            console.warn('the field does not have dependentOn settings');
-        }
-        const callback: CallbackFunction = this.#callbacks[settings.callback];
-
-        const dependency = this.#model.getField(
-            this.#model.getFieldName(settings.field)
-        );
-        await dependency.isReady;
-        const fields = { [dependency.name]: dependency };
-        if (settings.hasOwnProperty('fields')) {
-            for (const field of settings.fields) {
-                const instance = this.#model.getField(
-                    this.#model.getFieldName(field)
-                );
-                if (instance) await instance.isReady;
-                const propName =
-                    typeof field === 'string' ? field : field.alias;
-                fields[propName] = instance;
-            }
-
-            params.fields = fields;
-        }
-        params.dependency = dependency;
-
-        //global wiseForm params
-        if (settings.hasOwnProperty('params')) {
-            const specs = {};
-            settings.params.forEach((param) => {
-                if (!this.#model?.getParams(param)) {
-                    console.warn(
-                        `param ${param} is not registered in the form`
-                    );
-                    return;
-                }
-
-                specs[param] = this.#model.getParams(param);
-            });
-            params.specs = specs;
+    const fieldName = (this.#field as { name?: string })?.name || 'unknown';
+    const dependencyFieldName = typeof settings.field === 'string' ? settings.field : settings.field?.field || 'unknown';
+
+    const executionKey = this.#getExecutionKey(callbackName, fieldName, dependencyFieldName);
+
+    // Check if already executing (prevent concurrent executions)
+    if (currentlyExecutingCallbacks.has(executionKey)) {
+      console.warn(
+        `[CallbackManager] Callback "${callbackName}" is already executing for field "${fieldName}" with dependency "${dependencyFieldName}". Skipping concurrent execution.`
+      );
+      return;
+    }
+
+    // Check recursion depth
+    const currentDepth = callbackExecutionDepth.get(executionKey) || 0;
+    const maxDepth = settings.maxRecursionDepth !== undefined ? settings.maxRecursionDepth : MAX_CALLBACK_RECURSION_DEPTH;
+
+    if (currentDepth >= maxDepth) {
+      console.error(
+        `[CallbackManager] RECURSION DETECTED: Callback "${callbackName}" exceeded maximum recursion depth of ${maxDepth}`,
+        `\n  Field: ${fieldName}`,
+        `\n  Dependency: ${dependencyFieldName}`,
+        `\n  Current depth: ${currentDepth + 1}`,
+        `\n  Execution key: ${executionKey}`,
+        `\n  This indicates a circular dependency in callbacks. Please review the form configuration.`
+      );
+      return;
+    }
+
+    // Mark as currently executing and increment depth
+    currentlyExecutingCallbacks.add(executionKey);
+    callbackExecutionDepth.set(executionKey, currentDepth + 1);
+
+    try {
+      const params: ICallbackProps = {
+        ...settings,
+        form: this.#model,
+        field: this.#field,
+        settings,
+      };
+
+      const callback: CallbackFunction = this.#callbacks[callbackName];
+
+      if (!callback) {
+        console.error(`[CallbackManager] Callback "${callbackName}" not found in registered callbacks`);
+        return;
+      }
+
+      const dependency = this.#model.getField(this.#model.getFieldName(settings.field));
+      await dependency.isReady;
+      const fields = { [dependency.name]: dependency };
+      if (settings.hasOwnProperty('fields')) {
+        for (const field of settings.fields) {
+          const instance = this.#model.getField(this.#model.getFieldName(field));
+          if (instance) await instance.isReady;
+          const propName = typeof field === 'string' ? field : field.alias;
+          fields[propName] = instance;
         }
-        callback(params);
-    };
-}
 
+        params.fields = fields;
+      }
+      params.dependency = dependency;
+
+      //global wiseForm params
+      if (settings.hasOwnProperty('params')) {
+        const specs = {};
+        settings.params.forEach(param => {
+          if (!this.#model?.getParams(param)) {
+            console.warn(`param ${param} is not registered in the form`);
+            return;
+          }
+
+          specs[param] = this.#model.getParams(param);
+        });
+        params.specs = specs;
+      }
+
+      // Execute the callback (handle both sync and async callbacks)
+      const result = callback(params) as any;
+      if (result && typeof result.then === 'function') {
+        await result;
+      }
+    } catch (error) {
+      console.error(`[CallbackManager] Error executing callback "${callbackName}":`, error);
+    } finally {
+      // Clean up execution tracking
+      currentlyExecutingCallbacks.delete(executionKey);
+
+      const finalDepth = callbackExecutionDepth.get(executionKey) || 0;
+      if (finalDepth <= 1) {
+        callbackExecutionDepth.delete(executionKey);
+      } else {
+        callbackExecutionDepth.set(executionKey, finalDepth - 1);
+      }
+    }
+  };
+}

package/src/models/wrapper.ts

@@ -131,32 +131,57 @@ class WrappedFormModel extends BaseWiseModel {
     /**
      * Retrieves a field or nested wrapper by name. Supports dot notation for accessing deeply nested fields.
      * @param {string} name - The name of the field or nested wrapper to retrieve.
+     * @param {Set<BaseWiseModel | WrappedFormModel>} visited - Set of already visited wrappers to prevent infinite recursion.
      * @returns {FormField | WrappedFormModel | undefined} The requested instance, or undefined if not found.
      */
-    getField(name: string) {
-        if (!name)
-            return console.warn(
-                'You need to provide a name to get a field in form ',
+    getField(name: string, visited: Set<BaseWiseModel | WrappedFormModel> = new Set()) {
+        if (!name) {
+            console.warn(
+                '[WiseForm.getField] Empty field name provided in wrapper',
                 this.settings.name
             );
+            return;
+        }
+
+        // Protección contra recursión circular
+        if (visited.has(this)) {
+            console.error(
+                `[WiseForm.getField] Circular reference detected in wrapper "${this.settings.name}" while searching for field "${name}". This usually indicates a configuration issue with nested wrappers.`
+            );
+            console.log(
+                `[WiseForm.getField] PROTECTION ACTIVE: Circular reference prevented. Wrapper: "${this.settings.name}", Field: "${name}", Visited wrappers count: ${visited.size}`
+            );
+            return undefined;
+        }
+        visited.add(this);
 
         if (!name.includes('.')) {
             let field = this.fields.get(name);
 
             if (!field) {
                 this.wrappers.forEach((item) => {
-                    const foundField = item.getField(name);
-                    if (foundField) field = foundField;
+                    if (!visited.has(item)) {
+                        const foundField = item.getField(name, visited);
+                        if (foundField) field = foundField;
+                    }
                 });
             }
             return field;
         }
 
+        // Dot notation path
         const [wrapperName, ...others] = name.split('.');
         const currentWrapper = this.wrappers.get(wrapperName);
 
+        if (!currentWrapper) {
+            console.warn(
+                `[WiseForm.getField] Wrapper "${wrapperName}" not found in "${this.settings.name}" while searching for "${name}". Available wrappers: ${Array.from(this.wrappers.keys()).join(', ') || 'none'}`
+            );
+            return undefined;
+        }
+
         const otherWrapper = others.join('.');
-        return currentWrapper.getField(otherWrapper);
+        return currentWrapper.getField(otherWrapper, visited);
     }
 
     /**