@bolttech/form-engine-core 0.0.1-beta.1 → 0.0.1-beta.2

package/index.esm.js

@@ -1,4 +1,4 @@
-import { Subscription, Subject, combineLatest, startWith, groupBy, mergeMap, debounceTime, map } from 'rxjs';
+import { Subscription, Subject, combineLatest, startWith, filter, groupBy, mergeMap, debounceTime, map } from 'rxjs';
 import creditCardType from 'credit-card-type';
 import { isNumber as isNumber$1, isNil, isEqual, get, set } from 'lodash';
 import { getCurrencySymbol } from '@gaignoux/currency';
@@ -2265,6 +2265,7 @@ class FormField {
    *
    * @param {object} options - Configuration options for the form field.
    * @param {IComponentSchema} options.schemaComponent - The schema definition for the form field.
+   * @param {TSchemaFormConfig} options.config - The schema default configuration for debounced actions.
    * @param {string} [options.path] - The path within the form field (used internally during recursion).
    * @param {string[]} options.children - An array of children fields names.
    * @param {Function} options.validateVisibility - A function to validate the visibility of the field.
@@ -2274,6 +2275,7 @@ class FormField {
    */
   constructor({
     schemaComponent,
+    config,
     path,
     children,
     validateVisibility,
@@ -2286,6 +2288,10 @@ class FormField {
   }) {
     var _a, _b, _c, _d, _e, _f, _g;
     this.fieldStateSubscription$ = new Subscription();
+    this.config = {
+      defaultAPIdebounceTimeMS: Number(config === null || config === void 0 ? void 0 : config.defaultAPIdebounceTimeMS) ? Number(config === null || config === void 0 ? void 0 : config.defaultAPIdebounceTimeMS) : 1000,
+      defaultStateRefreshTimeMS: Number(config === null || config === void 0 ? void 0 : config.defaultStateRefreshTimeMS) ? Number(config === null || config === void 0 ? void 0 : config.defaultStateRefreshTimeMS) : 100
+    };
     this.name = schemaComponent.name;
     this.component = schemaComponent.component;
     this.path = path;
@@ -2324,6 +2330,7 @@ class FormField {
         return acc;
       }, {})
     };
+    this._errors = {};
     this._errorsString = '';
     this._valid = false;
     this.initializeObservers();
@@ -2332,6 +2339,7 @@ class FormField {
    * method to initialize all recycled Subjects and initialize Observers on field instance creation or rerender
    */
   initializeObservers() {
+    var _a;
     if (!this.valueSubject$ || this.valueSubject$.closed) {
       this.valueSubject$ = new Subject();
     }
@@ -2361,7 +2369,7 @@ class FormField {
     });
     !this.apiEventQueueSubject$.observed && this.apiEventQueueSubject$.pipe(this.debounceDistinct(({
       event
-    }) => event, 1000)).subscribe(payload => {
+    }) => event, (_a = this.config) === null || _a === void 0 ? void 0 : _a.defaultAPIdebounceTimeMS), filter(() => this.apiSubject$ && !this.apiSubject$.closed)).subscribe(payload => {
       this.apiRequest(payload);
     });
     if (!isNil(this.initialValue)) {
@@ -2659,6 +2667,19 @@ class FormField {
       [this.errorMessagePropName]: this.errorsString
     });
   }
+  /**
+   * WIP expensive function to get updated field validity on each event
+   */
+  updateValidityFlag() {
+    var _a;
+    let valid = true;
+    const schemaValidations = (_a = this.validations) === null || _a === void 0 ? void 0 : _a.config;
+    schemaValidations && Object.keys(schemaValidations).forEach(validationKey => {
+      const error = validations[validationKey](this.value, schemaValidations);
+      valid = !error && valid;
+    });
+    this._valid = valid;
+  }
   /**
    * Formats the field value using the specified formatters, if available.
    *
@@ -2802,7 +2823,7 @@ class FormField {
    * @returns {void}
    */
   subscribeState(callback) {
-    this.fieldStateSubscription$ = this.fieldState$.pipe(debounceTime(100)).subscribe({
+    this.fieldStateSubscription$ = this.fieldState$.pipe(debounceTime(this.config.defaultStateRefreshTimeMS)).subscribe({
       next: callback
     });
   }
@@ -2845,6 +2866,7 @@ class FormCore {
     this.method = entry.method || ((_c = entry.schema) === null || _c === void 0 ? void 0 : _c.method);
     this._iVars = entry.iVars || ((_d = entry.schema) === null || _d === void 0 ? void 0 : _d.iVars) || {};
     this.onSubmit = entry.onSubmit;
+    this.config = entry.config;
     this.mappers = entry.mappers;
     this.schema && FormCore.checkIndexes(this.schema.components);
     this.templateSubject$ = new Subject();
@@ -2947,7 +2969,8 @@ class FormCore {
    * @param {(payload: { field: string; data: TFormValues }) => void} callback callback function to call on data
    */
   subscribeData(callback) {
-    this.dataCallbackSubscription$ = this.dataSubject$.pipe(debounceTime(100), map(({
+    var _a, _b;
+    this.dataCallbackSubscription$ = this.dataSubject$.pipe(debounceTime(Number((_a = this.config) === null || _a === void 0 ? void 0 : _a.defaultStateRefreshTimeMS) ? Number((_b = this.config) === null || _b === void 0 ? void 0 : _b.defaultStateRefreshTimeMS) : 100), map(({
       key
     }) => ({
       field: key,
@@ -3282,7 +3305,8 @@ class FormCore {
           initialValue: (_a = this.initialValues) === null || _a === void 0 ? void 0 : _a[structElement.name],
           templateSubject$: this.templateSubject$,
           apiResponseSubject$: this.apiResponseSubject$,
-          dataSubject$: this.dataSubject$
+          dataSubject$: this.dataSubject$,
+          config: this.config
         }));
       } else {
         currField.children = ((_b = structElement === null || structElement === void 0 ? void 0 : structElement.children) === null || _b === void 0 ? void 0 : _b.map(el => el.name)) || (currField === null || currField === void 0 ? void 0 : currField.children) || [];
@@ -3393,6 +3417,7 @@ class FormCore {
     this.templateSubject$.unsubscribe();
     this.apiResponseSubject$.unsubscribe();
     this.dataSubject$.unsubscribe();
+    this.fields.forEach(field => field.destroyField());
   }
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolttech/form-engine-core",
-  "version": "0.0.1-beta.1",
+  "version": "0.0.1-beta.2",
   "module": "./index.esm.js",
   "type": "module",
   "main": "./index.esm.js",

package/src/interfaces/schema.d.ts

@@ -1,4 +1,4 @@
-import { TApiEvent, TErrorMessages, TEvent, TFormatters, TMasks, TProps, TResetValueMethods, TValidationMethods, TVisibility } from '../types/schema';
+import { TApiEvent, TErrorMessages, TEvent, TFormatters, TMasks, TProps, TResetValueMethods, TSchemaFormConfig, TValidationMethods, TVisibility } from '../types/schema';
 /**
  * @interface IComponentSchema
  * Represents the schema for a component within a form.
@@ -75,6 +75,7 @@ interface IFormSchema {
     index: string;
     action?: string;
     method?: string;
+    config?: TSchemaFormConfig;
     initialValues?: Record<string, unknown>;
     iVars?: Record<string, unknown>;
     components?: IComponentSchema[];

package/src/managers/field.d.ts

@@ -1,5 +1,5 @@
 import { Observable, Subject, Subscription } from 'rxjs';
-import { TApiConfig, TApiEvent, TApiResponse, TErrorMessages, TEvent, TFormatters, TMasks, TResetValueMethods, TValidationMethods, TVisibility } from '../types/schema';
+import { TApiConfig, TApiEvent, TApiResponse, TErrorMessages, TEvent, TFormatters, TMasks, TResetValueMethods, TSchemaFormConfig, TValidationMethods, TVisibility } from '../types/schema';
 import { IComponentSchema } from '../interfaces/schema';
 import { IState } from '../interfaces/state';
 import { TEvents, TMutationEvents, TValueChangeEvent } from '../types/event';
@@ -22,6 +22,7 @@ declare class FormField {
     valuePropName?: string;
     errorMessagePropName?: string;
     initialValue?: unknown;
+    config: Required<TSchemaFormConfig>;
     mapper: TMapper<unknown>;
     private _props;
     private _value;
@@ -67,6 +68,7 @@ declare class FormField {
      *
      * @param {object} options - Configuration options for the form field.
      * @param {IComponentSchema} options.schemaComponent - The schema definition for the form field.
+     * @param {TSchemaFormConfig} options.config - The schema default configuration for debounced actions.
      * @param {string} [options.path] - The path within the form field (used internally during recursion).
      * @param {string[]} options.children - An array of children fields names.
      * @param {Function} options.validateVisibility - A function to validate the visibility of the field.
@@ -74,8 +76,9 @@ declare class FormField {
      * @param {unknown} [options.initialValue] - The initial value of the form field.
      * @param {Subject<{ key: string }>} options.templateSubject$ - A subject for template updates.
      */
-    constructor({ schemaComponent, path, children, validateVisibility, resetValue, initialValue, templateSubject$, apiResponseSubject$, dataSubject$, mapper, }: {
+    constructor({ schemaComponent, config, path, children, validateVisibility, resetValue, initialValue, templateSubject$, apiResponseSubject$, dataSubject$, mapper, }: {
         schemaComponent: IComponentSchema;
+        config?: TSchemaFormConfig;
         path?: string;
         children: string[];
         validateVisibility: (payload: {
@@ -245,6 +248,10 @@ declare class FormField {
     setFieldValidity({ event }: {
         event: TEvents;
     }): void;
+    /**
+     * WIP expensive function to get updated field validity on each event
+     */
+    updateValidityFlag(): void;
     /**
      * Formats the field value using the specified formatters, if available.
      *

package/src/managers/form.d.ts

@@ -1,6 +1,7 @@
 import { IFormField } from './field';
 import { Subject, Subscription } from 'rxjs';
 import { IComponentSchema, IFormSchema } from '../interfaces/schema';
+import { TSchemaFormConfig } from '../types/schema';
 import { TSubscribedTemplates } from '../types/template';
 import { TEvents, TMutationEvents } from '../types/event';
 import { TFormEntry, TFormValues } from '../types/form';
@@ -29,6 +30,7 @@ declare class FormCore {
     subscribedTemplates: TSubscribedTemplates[];
     action?: string;
     method?: string;
+    config?: TSchemaFormConfig;
     mappers: TMapper<unknown>[];
     onSubmit?: (data: TFormValues) => void;
     /**

package/src/managers/index.d.ts

@@ -0,0 +1,3 @@
+export * from './form';
+export * from './field';
+export * from './formGroup';

package/src/types/schema.d.ts

@@ -739,4 +739,14 @@ type TApiResponse = {
         response: unknown;
     }>;
 };
-export { TApiConfig, TErrorMessages, TResetValues, TVisibilityConditions, TValidations, TMasks, TProps, TResetValueMethods, TFormatters, TValidationMethods, TEvent, TVisibility, TApiEvent, TApiResponse, TLengthValidation, TCreditCardMatch, TDocumentValidation, TCallbackValidation, TBetweenValidation, TMaskGeneric, TSplitterFormatterValue, TCurrencyMask, TDateOperatorsValidation, TConditionsValidationSet, TConditionsValidation, TMultipleValidation, TAvailableValidations, TDateValidation, TBetweenDatesValidation, TDateFormatsValidation, TDateInterval, };
+/**
+ * Represents the schema config structure
+ *
+ * @property {number} defaultAPIdebounceTimeMS - default API debounce time between request events.
+ * @property {number} [defaultStateRefreshTimeMS] - default state refresh between events side effects.
+ */
+type TSchemaFormConfig = {
+    defaultAPIdebounceTimeMS?: number;
+    defaultStateRefreshTimeMS?: number;
+};
+export { TApiConfig, TErrorMessages, TResetValues, TVisibilityConditions, TValidations, TMasks, TProps, TResetValueMethods, TFormatters, TValidationMethods, TEvent, TVisibility, TApiEvent, TApiResponse, TSchemaFormConfig, TLengthValidation, TCreditCardMatch, TDocumentValidation, TCallbackValidation, TBetweenValidation, TMaskGeneric, TSplitterFormatterValue, TCurrencyMask, TDateOperatorsValidation, TConditionsValidationSet, TConditionsValidation, TMultipleValidation, TAvailableValidations, TDateValidation, TBetweenDatesValidation, TDateFormatsValidation, TDateInterval, };