@bolttech/form-engine-core 0.0.1-beta.5 → 0.0.1-beta.7

package/index.esm.js

@@ -1,4 +1,4 @@
-import { Subscription, Subject, combineLatest, startWith, filter, groupBy, mergeMap, debounceTime, map } from 'rxjs';
+import { Subscription, Subject, combineLatest, startWith, groupBy, mergeMap, debounceTime, filter, 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';
@@ -2256,6 +2256,9 @@ const validations = {
   validDate
 };
 
+const DEFAULT_API_DEBOUNCE_TIME = 1000;
+const DEFAULT_STATE_REFRESH_TIME = 100;
+
 /**
  * Represents a form field with observables for managing form state, validations, and API requests.
  */
@@ -2288,9 +2291,10 @@ class FormField {
   }) {
     var _a, _b, _c, _d, _e, _f, _g;
     this.fieldStateSubscription$ = new Subscription();
+    this.originalSchema = schemaComponent;
     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
+      defaultAPIdebounceTimeMS: Number(config === null || config === void 0 ? void 0 : config.defaultAPIdebounceTimeMS) ? Number(config === null || config === void 0 ? void 0 : config.defaultAPIdebounceTimeMS) : DEFAULT_API_DEBOUNCE_TIME,
+      defaultStateRefreshTimeMS: Number(config === null || config === void 0 ? void 0 : config.defaultStateRefreshTimeMS) ? Number(config === null || config === void 0 ? void 0 : config.defaultStateRefreshTimeMS) : DEFAULT_STATE_REFRESH_TIME
     };
     this.name = schemaComponent.name;
     this.component = schemaComponent.component;
@@ -2339,7 +2343,6 @@ 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();
     }
@@ -2367,28 +2370,15 @@ class FormField {
       apiResponse: this.apiSubject$.pipe(startWith(this._api)),
       props: this.propsSubject$.pipe(startWith(this._props))
     });
-    !this.apiEventQueueSubject$.observed && this.apiEventQueueSubject$.pipe(this.debounceDistinct(({
+    !this.apiEventQueueSubject$.observed && this.apiEventQueueSubject$.pipe(groupBy(({
       event
-    }) => event, (_a = this.config) === null || _a === void 0 ? void 0 : _a.defaultAPIdebounceTimeMS), filter(() => this.apiSubject$ && !this.apiSubject$.closed)).subscribe(payload => {
+    }) => event), mergeMap(group$ => group$.pipe(debounceTime(this.config.defaultAPIdebounceTimeMS))), filter(() => this.apiSubject$ && !this.apiSubject$.closed)).subscribe(payload => {
       this.apiRequest(payload);
     });
     if (!isNil(this.initialValue)) {
       this.value = this.initialValue;
     }
   }
-  /**
-   * Observable function to emit api events debounced and distinct for each event type,
-   * avoiding previous events being cancelled by new events if they occur inside the debounce time interval
-   *
-   * @param {(event: { event: TEvents }) => TEvents} keyExtractor function that will pass the event key to the groupBy operator
-   * @param {number} debounceTimeMs time to wait for each individual event emmited
-   * @returns
-   */
-  debounceDistinct(keyExtractor, debounceTimeMs) {
-    return source$ => source$.pipe(groupBy(keyExtractor), mergeMap(group$ => group$.pipe(debounceTime(debounceTimeMs), map(() => ({
-      event: group$.key
-    })))));
-  }
   /**
    * Retrieves the properties associated with the form field.
    *
@@ -2470,14 +2460,6 @@ class FormField {
       this._stateValue = this.maskValue(this.formatValue(val));
       this._metadata = val;
     }
-    /*
-      update prop value attribute to sync with templating
-      currently doesn't need prop Subject emission since it's synced with value
-      to avoid excessive prop subject emissions on each keystroke
-    */
-    if (this.valuePropName) this._props = Object.assign(Object.assign({}, this.props), {
-      [this.valuePropName]: this.value
-    });
     this.valueSubject$.next(this._stateValue);
     this.templateSubject$.next({
       key: this.name,
@@ -2863,7 +2845,7 @@ class FormCore {
    * @param {((payload: {field: string;data: TFormValues;}) => void) | undefined} [entry.onData] - A callback function to handle data emission.
    */
   constructor(entry) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     this.schema = entry.schema;
     this.fields = new Map();
     this.initialValues = entry.initialValues || ((_a = entry.schema) === null || _a === void 0 ? void 0 : _a.initialValues);
@@ -2871,7 +2853,10 @@ 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.config = {
+      defaultAPIdebounceTimeMS: Number((_e = entry.config) === null || _e === void 0 ? void 0 : _e.defaultAPIdebounceTimeMS) ? Number((_f = entry.config) === null || _f === void 0 ? void 0 : _f.defaultAPIdebounceTimeMS) : DEFAULT_API_DEBOUNCE_TIME,
+      defaultStateRefreshTimeMS: Number((_g = entry.config) === null || _g === void 0 ? void 0 : _g.defaultStateRefreshTimeMS) ? Number((_h = entry.config) === null || _h === void 0 ? void 0 : _h.defaultStateRefreshTimeMS) : DEFAULT_STATE_REFRESH_TIME
+    };
     this.mappers = entry.mappers;
     this.schema && FormCore.checkIndexes(this.schema.components);
     this.templateSubject$ = new Subject();
@@ -2887,7 +2872,6 @@ class FormCore {
       key: IVARPROPNAME,
       event: 'ON_IVARS'
     });
-    // this.fieldEventsSubject$.subscribe(this.refreshApi.bind(this));
     entry.onData && this.subscribeData(entry.onData);
     /*
       mount events needs to occur on form level, only when all the fields are instantiated
@@ -2939,20 +2923,18 @@ class FormCore {
    * Subscribes to templates for dynamic updates.
    */
   subscribeTemplates() {
-    /*
-      @TODO fix removal of templates of removed fields, they are kept
-      tried: this.subscribedTemplates = [] and only stores the last one..
-    */
+    this.subscribedTemplates = [];
     this.fields.forEach(({
-      component,
-      props,
-      name,
-      validations,
-      visibilityConditions,
-      resetValues,
-      errorMessages,
-      apiSchema,
-      metadata
+      originalSchema: {
+        component,
+        props,
+        name,
+        validations,
+        visibilityConditions,
+        resetValues,
+        errorMessages,
+        api
+      }
     }, key) => {
       const template = {
         component,
@@ -2962,20 +2944,17 @@ class FormCore {
         visibilityConditions,
         resetValues,
         errorMessages,
-        apiSchema,
-        metadata
+        apiSchema: api
       };
       traverseObject(template, key).forEach(element => this.subscribedTemplates.push(element));
     });
-    // console.log(subscribedProps);
   }
   /**
    *
    * @param {(payload: { field: string; data: TFormValues }) => void} callback callback function to call on data
    */
   subscribeData(callback) {
-    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(({
+    this.dataCallbackSubscription$ = this.dataSubject$.pipe(debounceTime(this.config.defaultStateRefreshTimeMS), map(({
       key
     }) => ({
       field: key,
@@ -3002,8 +2981,12 @@ class FormCore {
       const value = get(this.iVars, [property, ...path]);
       return value;
     }
-    if (!this.fields.has(key)) return console.warn(`failed to get value from ${key}`);
-    return path.length > 0 ? get(this.fields.get(key)[property], path) : this.fields.get(key)[property];
+    const field = this.fields.get(key);
+    if (!field) return console.warn(`failed to get value from ${key}`);
+    if (property === 'props' && path[0] === field.valuePropName) {
+      return field.stateValue;
+    }
+    return path.length > 0 ? get(field[property], path) : field[property];
   }
   /**
    * Sets the value of a property in a field.
@@ -3036,7 +3019,6 @@ class FormCore {
         now using key !== originKey, check if any recursion error occurs
       **/
       if (property === 'props' && path[0] === field.valuePropName && key !== originKey) {
-        // field.value = value;
         field.emitValue({
           event: 'ON_FIELD_CHANGE',
           value
@@ -3076,7 +3058,6 @@ class FormCore {
     const operatorRegex = /\s*(\|\||&&|!)\s*/g;
     const splittedString = extractedValues.map(el => el.split(operatorRegex));
     const result = splittedString.map(splittedStringVal => {
-      // console.log(splittedStringVal)
       return splittedStringVal.filter(Boolean).reduce((acc, curr) => {
         if (curr.match(/^\|\||&&|!$/)) {
           return `${acc}${curr}`;
@@ -3120,7 +3101,6 @@ class FormCore {
     });
     return result.map(el => {
       try {
-        // console.log(el);
         return new Function(`return ${el}`)();
       } catch (e) {
         console.log(e);
@@ -3193,34 +3173,6 @@ class FormCore {
       }
     });
   }
-  /**
-   * Refreshes api observed fields.
-   *
-   * @param {object} options - Options for refreshing api.
-   * @param {string} options.key - The key of the field triggering the update.
-   */
-  refreshApi({
-    key
-  }) {
-    /*
-      global api notifications needs to have field dependency array
-      in order to be reliable, disabled for now
-    */
-    return key;
-    // const emmittedFields: string[] = [];
-    // this.subscribedTemplates.forEach((template) => {
-    //   if (
-    //     template.originFieldKeys.includes(key) &&
-    //     template.originPropertyKeys.includes('api') &&
-    //     !emmittedFields.includes(template.destinationKey)
-    //   ) {
-    //     emmittedFields.push(template.destinationKey);
-    //     this.fields
-    //       .get(template.destinationKey)
-    //       ?.emitEvents({ event: 'ON_API_RESPONSE' });
-    //   }
-    // });
-  }
   /**
    * Validates visibility conditions for a given event and updates field visibility accordingly.
    *
@@ -3291,20 +3243,23 @@ class FormCore {
    *
    * @param fieldSchema
    */
-  addField(fieldSchema, mapper) {
-    var _a;
+  addField({
+    fieldSchema,
+    mapperElement
+  }) {
+    var _a, _b, _c;
     if (this.fields.has(fieldSchema.name)) {
       throw new Error(`field name ${fieldSchema.name} already defined`);
     }
-    const mapperConfig = mapper || this.mappers.find(mapEl => mapEl.componentName === fieldSchema.component);
-    if (!mapperConfig) throw new Error(`mapper not found for ${fieldSchema.component}, add it to the mappers configuration`);
+    const mapper = mapperElement || ((_a = this.mappers) === null || _a === void 0 ? void 0 : _a.find(mapEl => mapEl.componentName === fieldSchema.component));
+    if (!mapper) throw new Error(`mapper not found for ${fieldSchema.component}, add it to the mappers configuration`);
     this.fields.set(fieldSchema.name, new FormField({
       schemaComponent: fieldSchema,
-      mapper: mapperConfig,
+      mapper,
       children: fieldSchema.children ? fieldSchema.children.map(el => el.name) : [],
       validateVisibility: this.validateVisibility.bind(this),
       resetValue: this.resetValue.bind(this),
-      initialValue: (_a = this.initialValues) === null || _a === void 0 ? void 0 : _a[fieldSchema.name],
+      initialValue: (_b = this.initialValues) === null || _b === void 0 ? void 0 : _b[fieldSchema.name],
       templateSubject$: this.templateSubject$,
       fieldEventSubject$: this.fieldEventSubject$,
       dataSubject$: this.dataSubject$,
@@ -3315,6 +3270,21 @@ class FormCore {
       event: 'ON_FIELDS',
       key: fieldSchema.name
     });
+    (_c = this.fields.get(fieldSchema.name)) === null || _c === void 0 ? void 0 : _c.emitEvents({
+      event: 'ON_FIELD_MOUNT'
+    });
+  }
+  removeField({
+    key
+  }) {
+    var _a;
+    (_a = this.fields.get(key)) === null || _a === void 0 ? void 0 : _a.destroyField();
+    this.fields.delete(key);
+    this.subscribeTemplates();
+    this.templateSubject$.next({
+      key,
+      event: 'ON_FIELDS'
+    });
   }
   /**
    * Serializes the schema structure to create form fields.
@@ -3325,10 +3295,10 @@ class FormCore {
   serializeStructure(struct, path) {
     if (!struct) return;
     struct.forEach(structElement => {
-      var _a, _b;
+      var _a, _b, _c;
       const currField = this.fields.get(structElement.name);
       if (!currField) {
-        const mapper = this.mappers.find(mapEl => mapEl.componentName === structElement.component);
+        const mapper = (_a = this.mappers) === null || _a === void 0 ? void 0 : _a.find(mapEl => mapEl.componentName === structElement.component);
         if (!mapper) throw new Error(`mapper not found for ${structElement.component}, add it to the mappers configuration`);
         this.fields.set(structElement.name, new FormField({
           schemaComponent: structElement,
@@ -3337,14 +3307,14 @@ class FormCore {
           children: structElement.children ? structElement.children.map(el => el.name) : [],
           validateVisibility: this.validateVisibility.bind(this),
           resetValue: this.resetValue.bind(this),
-          initialValue: (_a = this.initialValues) === null || _a === void 0 ? void 0 : _a[structElement.name],
+          initialValue: (_b = this.initialValues) === null || _b === void 0 ? void 0 : _b[structElement.name],
           templateSubject$: this.templateSubject$,
           fieldEventSubject$: this.fieldEventSubject$,
           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) || [];
+        currField.children = ((_c = structElement === null || structElement === void 0 ? void 0 : structElement.children) === null || _c === void 0 ? void 0 : _c.map(el => el.name)) || (currField === null || currField === void 0 ? void 0 : currField.children) || [];
         currField.path = path;
         currField.templateSubject$ = this.templateSubject$;
       }
@@ -3434,10 +3404,9 @@ class FormCore {
     };
   }
   subscribeFieldEvent({
-    event,
     callback
   }) {
-    const sub = this.fieldEventSubject$.pipe(filter(payload => payload.event === event)).subscribe({
+    const sub = this.fieldEventSubject$.pipe(groupBy(payload => payload.event), mergeMap(group$ => group$.pipe(debounceTime(this.config.defaultStateRefreshTimeMS)))).subscribe({
       next: callback
     });
     return sub;

package/package.json

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

package/src/constants/constants.d.ts

@@ -0,0 +1,3 @@
+declare const DEFAULT_API_DEBOUNCE_TIME = 1000;
+declare const DEFAULT_STATE_REFRESH_TIME = 100;
+export { DEFAULT_API_DEBOUNCE_TIME, DEFAULT_STATE_REFRESH_TIME };

package/src/managers/field.d.ts

@@ -12,6 +12,7 @@ declare class FormField {
     component: string;
     path?: string;
     children?: string[];
+    originalSchema: IComponentSchema;
     validations?: TEvent<TValidationMethods>;
     visibilityConditions?: TVisibility[];
     resetValues?: TResetValueMethods[];
@@ -103,21 +104,6 @@ declare class FormField {
      * method to initialize all recycled Subjects and initialize Observers on field instance creation or rerender
      */
     initializeObservers(): void;
-    /**
-     * Observable function to emit api events debounced and distinct for each event type,
-     * avoiding previous events being cancelled by new events if they occur inside the debounce time interval
-     *
-     * @param {(event: { event: TEvents }) => TEvents} keyExtractor function that will pass the event key to the groupBy operator
-     * @param {number} debounceTimeMs time to wait for each individual event emmited
-     * @returns
-     */
-    debounceDistinct(keyExtractor: (event: {
-        event: TEvents;
-    }) => TEvents, debounceTimeMs: number): (source$: Observable<{
-        event: TEvents;
-    }>) => Observable<{
-        event: TEvents;
-    }>;
     /**
      * Retrieves the properties associated with the form field.
      *

package/src/managers/form.d.ts

@@ -28,8 +28,8 @@ declare class FormCore {
     subscribedTemplates: TSubscribedTemplates[];
     action?: string;
     method?: string;
-    config?: TSchemaFormConfig;
-    mappers: TMapper<unknown>[];
+    config: Required<TSchemaFormConfig>;
+    mappers?: TMapper<unknown>[];
     onSubmit?: (data: TFormValues) => void;
     /**
      * Creates an instance of FormCore.
@@ -140,15 +140,6 @@ declare class FormCore {
         key: string;
         event: TMutationEvents;
     }): void;
-    /**
-     * Refreshes api observed fields.
-     *
-     * @param {object} options - Options for refreshing api.
-     * @param {string} options.key - The key of the field triggering the update.
-     */
-    refreshApi({ key }: {
-        key: string;
-    }): string;
     /**
      * Validates and collects the names of form fields in the provided schema structure.
      *
@@ -186,7 +177,13 @@ declare class FormCore {
      *
      * @param fieldSchema
      */
-    addField(fieldSchema: IComponentSchema, mapper?: TMapper<unknown>): void;
+    addField({ fieldSchema, mapperElement, }: {
+        fieldSchema: IComponentSchema;
+        mapperElement?: TMapper<unknown>;
+    }): void;
+    removeField({ key }: {
+        key: string;
+    }): void;
     /**
      * Serializes the schema structure to create form fields.
      *
@@ -220,8 +217,7 @@ declare class FormCore {
      * @returns {TFormValues} The current form values.
      */
     getFormValues(): TFormValues;
-    subscribeFieldEvent({ event, callback, }: {
-        event: TEvents;
+    subscribeFieldEvent({ callback, }: {
         callback: (payload: TFieldEvent) => void;
     }): Subscription;
     /**

package/src/managers/formGroup.d.ts

@@ -18,7 +18,7 @@ declare class FormGroup {
      */
     createFormWithIndex({ index, mappers, }: {
         index: string;
-        mappers: TMapper<unknown>[];
+        mappers?: TMapper<unknown>[];
     }): void;
     /**
      * Adds a form instance to the form group.

package/src/types/form.d.ts

@@ -46,6 +46,6 @@ type TFormEntry = Omit<IFormSchema, 'components'> & {
         field: string;
         data: TFormValues;
     }) => void;
-    mappers: TMapper<unknown>[];
+    mappers?: TMapper<unknown>[];
 };
 export { TFormValues, TFormEntry };