@bolttech/form-engine-core 0.0.1-beta.15 → 0.0.1-beta.17

package/index.esm.js

@@ -1,6 +1,6 @@
 import { Subject, Subscription, 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 { isNumber as isNumber$1, isEqual, get, isNil, set } from 'lodash';
 import { getCurrencySymbol } from '@gaignoux/currency';
 
 var TMutationEnum;
@@ -44,6 +44,12 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+const DEFAULT_API_DEBOUNCE_TIME = 1000;
+const DEFAULT_STATE_REFRESH_TIME = 100;
+const TEMPLATE_REGEX_DELIMITATOR = /\${(.*?)}/g;
+const TEMPLATE_REGEX_OPERATOR_SPLITTER = /\s*(\|\||&&|!)\s*/g;
+const TEMPLATE_REGEX_OPERATOR_MATCHER = /^\|\||&&|!$/;
+
 /**
  * Makes an HTTP request using XMLHttpRequest.
  *
@@ -96,15 +102,17 @@ function makeRequest(method, url, headers, body) {
  * ```
  */
 function extractFieldKeys(expression) {
-  const regex = /\${(.*?)}/g;
+  const regex = TEMPLATE_REGEX_DELIMITATOR;
   const extractedValues = [];
   let match;
   while ((match = regex.exec(expression)) !== null) {
     extractedValues.push(match[1]);
   }
+  const operatorRegex = TEMPLATE_REGEX_OPERATOR_SPLITTER;
+  const splittedString = extractedValues.map(el => el.split(operatorRegex).filter(item => !operatorRegex.test(item))).flat().filter(el => el.split('.').length > 1);
   return {
-    originFieldKeys: Array.from(new Set(extractedValues.map(el => el.split('.')[0]))),
-    originPropertyKeys: Array.from(new Set(extractedValues.map(el => el.split('.')[1])))
+    originFieldKeys: Array.from(new Set(splittedString.map(el => el.split('.')[0]))),
+    originPropertyKeys: Array.from(new Set(splittedString.map(el => el.split('.')[1])))
   };
 }
 /**
@@ -142,7 +150,7 @@ function traverseObject(obj, path) {
           if (typeof item === 'object') {
             result.push(...traverseObject(item, `${path ? `${path}.` : ``}${key}.${index}`));
           } else if (typeof item === 'string') {
-            if (String(item).includes('$')) {
+            if (String(item).includes('${')) {
               // const extractedPath = item.replace(/\$|{|}/g, '').split('.');
               const extractedOriginPath = `${path ? `${path}.` : ``}${key}`.split('.');
               result.push(Object.assign(Object.assign({
@@ -158,7 +166,7 @@ function traverseObject(obj, path) {
       } else if (typeof value === 'object') {
         result.push(...traverseObject(value, `${path ? `${path}.` : ``}${key}`));
       } else if (typeof value === 'string') {
-        if (value.includes('$')) {
+        if (value.includes('${')) {
           // const extractedPath = value.replace(/\$|{|}/g, '').split('.');
           const destinationPath = `${path ? `${path}.` : ``}${key}`.split('.');
           result.push(Object.assign(Object.assign({
@@ -2249,9 +2257,6 @@ const validations = {
   validDate
 };
 
-const DEFAULT_API_DEBOUNCE_TIME = 1000;
-const DEFAULT_STATE_REFRESH_TIME = 100;
-
 /**
  * Custom RXJS Subject to gracefully handle errors on unsubscribed Subjects
  * that were unmounted due to adapter external handling such as visibility
@@ -2298,7 +2303,7 @@ class FormField {
     dataSubject$,
     mapper
   }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g;
     this.fieldStateSubscription$ = new Subscription();
     this.originalSchema = schemaComponent;
     this.config = {
@@ -2326,10 +2331,6 @@ class FormField {
     this.fieldEventSubject$ = fieldEventSubject$;
     this.dataSubject$ = dataSubject$;
     this._props = schemaComponent.props || {};
-    this._value = '';
-    this._stateValue = ((_c = this.mapper.events) === null || _c === void 0 ? void 0 : _c.setValue) ? {
-      [this.mapper.events.setValue]: ''
-    } : {};
     this._metadata = '';
     this.errorsString = '';
     this.errorsList = [];
@@ -2337,9 +2338,9 @@ class FormField {
     this._visibility = true;
     this._api = {
       default: {
-        response: ((_f = (_e = (_d = this.apiSchema) === null || _d === void 0 ? void 0 : _d.defaultConfig) === null || _e === void 0 ? void 0 : _e.config) === null || _f === void 0 ? void 0 : _f.fallbackValue) || ''
+        response: ((_e = (_d = (_c = this.apiSchema) === null || _c === void 0 ? void 0 : _c.defaultConfig) === null || _d === void 0 ? void 0 : _d.config) === null || _e === void 0 ? void 0 : _e.fallbackValue) || ''
       },
-      named: ((_g = this.apiSchema) === null || _g === void 0 ? void 0 : _g.configs) && Object.keys((_h = this.apiSchema) === null || _h === void 0 ? void 0 : _h.configs).reduce((acc, curr) => {
+      named: ((_f = this.apiSchema) === null || _f === void 0 ? void 0 : _f.configs) && Object.keys((_g = this.apiSchema) === null || _g === void 0 ? void 0 : _g.configs).reduce((acc, curr) => {
         var _a, _b;
         acc[curr] = {
           response: ((_b = (_a = this.apiSchema) === null || _a === void 0 ? void 0 : _a.configs) === null || _b === void 0 ? void 0 : _b[curr].config.fallbackValue) || ''
@@ -2351,6 +2352,7 @@ class FormField {
     this._valid = false;
     this._mounted = true;
     this.initializeObservers();
+    this.value = this.initialValue || '';
   }
   /**
    * method to initialize all recycled Subjects and initialize Observers on field instance creation or rerender
@@ -2390,12 +2392,6 @@ class FormField {
     }) => 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;
-      this.setFieldValidity({
-        event: 'ON_FORM_SUBMIT'
-      });
-    }
   }
   /**
    * Retrieves the properties associated with the form field.
@@ -2498,6 +2494,23 @@ class FormField {
   set visibility(visible) {
     if (typeof visible === 'undefined' || visible === this.visibility) return;
     this._visibility = visible;
+    /**
+     * I was sure I would not require to gambiarra, but..
+     * in order to ignore an hidden value on a form submit
+     * or revalidate it when it comes back to visibility
+     * I needed to...
+     * I don't recommend setting private properties like this
+     * this will force the field to be valid when it's hidden
+     * and trigger the validation when it's visible
+     */
+    if (!this.visibility) {
+      this.value = '';
+      this._valid = true;
+    } else {
+      this.setFieldValidity({
+        event: 'ON_FIELD_MOUNT'
+      });
+    }
     this.visibilitySubject$.next(this.visibility);
     this.templateSubject$.next({
       key: this.name,
@@ -2853,7 +2866,6 @@ class FormCore {
    * @param {string} [entry.action] - The action attribute of the form.
    * @param {string} [entry.method] - The method attribute of the form.
    * @param {IFormSchema.iVars} [entry.iVars] - The internal variables of the form.
-   * @param {(data: TFormValues) => void} [entry.onSubmit] - A callback function to handle form submission.
    * @param {((payload: {field: string;data: TFormValues;}) => void) | undefined} [entry.onData] - A callback function to handle data emission.
    */
   constructor(entry) {
@@ -2865,7 +2877,6 @@ class FormCore {
     this.action = entry.action || ((_b = entry.schema) === null || _b === void 0 ? void 0 : _b.action);
     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 = {
       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
@@ -2878,7 +2889,6 @@ class FormCore {
     this.submitSubject$ = new Subject();
     this.fieldEventSubject$ = new Subject();
     this.dataSubject$ = new Subject();
-    this.dataCallbackSubscription$ = new Subscription();
     this.subscribedTemplates = [];
     this.schema && this.serializeStructure(this.schema.components);
     this.schema && this.subscribeTemplates();
@@ -2887,7 +2897,6 @@ class FormCore {
       key: IVARPROPNAME,
       event: 'ON_IVARS'
     });
-    entry.onData && this.subscribeData(entry.onData);
     /*
       mount events needs to occur on form level, only when all the fields are instantiated
       is it possible to apply all the side effects that occur globally, same effect occur
@@ -2962,20 +2971,6 @@ class FormCore {
       traverseObject(template, key).forEach(element => this.subscribedTemplates.push(element));
     });
   }
-  /**
-   *
-   * @param {(payload: { field: string; data: TFormValues }) => void} callback callback function to call on data
-   */
-  subscribeData(callback) {
-    this.dataCallbackSubscription$ = this.dataSubject$.pipe(debounceTime(this.config.defaultStateRefreshTimeMS), map(({
-      key
-    }) => ({
-      field: key,
-      data: this.getFormValues()
-    }))).subscribe({
-      next: callback
-    });
-  }
   /**
    * Gets the value of a property from a field.
    *
@@ -3062,17 +3057,17 @@ class FormCore {
    * @returns {string[]} An array of extracted parameters.
    */
   extractParams(expression) {
-    const regex = /\${(.*?)}/g;
+    const regex = TEMPLATE_REGEX_DELIMITATOR;
     const extractedValues = [];
     let match;
     while (!isNil(match = regex.exec(expression))) {
       extractedValues.push(match[1]);
     }
-    const operatorRegex = /\s*(\|\||&&|!)\s*/g;
+    const operatorRegex = TEMPLATE_REGEX_OPERATOR_SPLITTER;
     const splittedString = extractedValues.map(el => el.split(operatorRegex));
     const result = splittedString.map(splittedStringVal => {
       return splittedStringVal.filter(Boolean).reduce((acc, curr) => {
-        if (curr.match(/^\|\||&&|!$/)) {
+        if (curr.match(TEMPLATE_REGEX_OPERATOR_MATCHER)) {
           return `${acc}${curr}`;
         }
         let value;
@@ -3134,7 +3129,7 @@ class FormCore {
    * @returns {string} The expression string with the replacements made.
    */
   replaceExpression(expression, values) {
-    const regex = /\${(.*?)}/g;
+    const regex = TEMPLATE_REGEX_DELIMITATOR;
     return expression.replace(regex, () => String(values.shift()) || '');
   }
   /**
@@ -3211,16 +3206,10 @@ class FormCore {
         const error = validations[validationKey](field.value, structElement.validations);
         if (Array.isArray(structElement.fields)) {
           structElement.fields.forEach(fieldKey => {
-            if (!this.fields.has(fieldKey)) console.warn(`failed to update visibility onto field ${fieldKey}`);else {
-              this.fields.get(fieldKey).visibility = !error;
-              if (error) this.fields.get(fieldKey).value = '';
-            }
+            if (!this.fields.has(fieldKey)) console.warn(`failed to update visibility onto field ${fieldKey}`);else this.fields.get(fieldKey).visibility = !error;
           });
         } else if (structElement.fields) {
-          if (!this.fields.has(structElement.fields)) console.warn(`failed to update visibility onto field ${structElement.fields}`);else {
-            this.fields.get(structElement.fields).visibility = !error;
-            if (error) this.fields.get(structElement.fields).value = '';
-          }
+          if (!this.fields.has(structElement.fields)) console.warn(`failed to update visibility onto field ${structElement.fields}`);else this.fields.get(structElement.fields).visibility = !error;
         }
       });
     });
@@ -3441,6 +3430,27 @@ class FormCore {
     });
     return sub;
   }
+  /**
+   *
+   * @param {(payload: { field: string; data: TFormValues }) => void} callback callback function to call on data
+   */
+  subscribeData(callback) {
+    const sub = this.dataSubject$.pipe(groupBy(payload => payload.event), mergeMap(group$ => group$.pipe(debounceTime(this.config.defaultStateRefreshTimeMS))), map(({
+      key
+    }) => ({
+      field: key,
+      data: this.getFormValues()
+    }))).subscribe({
+      next: callback
+    });
+    return sub;
+  }
+  subscribeOnSubmit(callback) {
+    const sub = this.submitSubject$.pipe(map(() => this.getFormValues())).subscribe({
+      next: callback
+    });
+    return sub;
+  }
   /**
    * Submits the form by triggering form field events and invoking the onSubmit callback.
    */
@@ -3453,7 +3463,6 @@ class FormCore {
     if (!this.isValid) return;
     const values = this.getFormValues();
     this.submitSubject$.next(values);
-    this.onSubmit && this.onSubmit(values);
   }
   destroy() {
     this.submitSubject$.unsubscribe();
@@ -3604,22 +3613,49 @@ class FormGroup {
    * @param {string[]} indexes form indexes to be submitted
    * @returns
    */
-  submitMultipleFormsByIndex(indexes) {
+  submitMultipleFormsByIndex(indexes, callback) {
     let isValid = true;
     let values = {};
     let erroredFields = [];
     indexes.forEach(index => {
-      var _a;
-      const res = (_a = this.forms.get(index)) === null || _a === void 0 ? void 0 : _a.getFormValues();
+      var _a, _b;
+      (_a = this.forms.get(index)) === null || _a === void 0 ? void 0 : _a.submit();
+      const res = (_b = this.forms.get(index)) === null || _b === void 0 ? void 0 : _b.getFormValues();
       isValid = isValid && ((res === null || res === void 0 ? void 0 : res.isValid) || false);
       values = Object.assign(Object.assign({}, values), (res === null || res === void 0 ? void 0 : res.values) || {});
       erroredFields = [...erroredFields, ...((res === null || res === void 0 ? void 0 : res.erroredFields) || [])];
     });
-    return {
+    isValid && callback && callback({
       erroredFields,
       isValid,
       values
-    };
+    });
+  }
+  onDataSubscription({
+    ids,
+    callback
+  }) {
+    const subs = ids.reduce((acc, formId) => {
+      var _a;
+      // @TODO add config on debounceTime on this events
+      const sub = (_a = this.forms.get(formId)) === null || _a === void 0 ? void 0 : _a.dataSubject$.pipe(groupBy(payload => `${formId}.${payload.event}`), mergeMap(group$ => group$.pipe(debounceTime(100))), map(({
+        key
+      }) => {
+        var _a;
+        return {
+          formField: key,
+          values: (_a = this.forms.get(formId)) === null || _a === void 0 ? void 0 : _a.getFormValues()
+        };
+      }));
+      if (sub) {
+        acc[formId] = sub;
+      } else {
+        console.warn(`failed to register form id ${formId}`);
+      }
+      return acc;
+    }, {});
+    const sub = combineLatest(subs).subscribe(callback);
+    return sub;
   }
 }
 

package/package.json

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

package/src/constants/constants.d.ts

@@ -1,3 +1,6 @@
 declare const DEFAULT_API_DEBOUNCE_TIME = 1000;
 declare const DEFAULT_STATE_REFRESH_TIME = 100;
-export { DEFAULT_API_DEBOUNCE_TIME, DEFAULT_STATE_REFRESH_TIME };
+declare const TEMPLATE_REGEX_DELIMITATOR: RegExp;
+declare const TEMPLATE_REGEX_OPERATOR_SPLITTER: RegExp;
+declare const TEMPLATE_REGEX_OPERATOR_MATCHER: RegExp;
+export { DEFAULT_API_DEBOUNCE_TIME, DEFAULT_STATE_REFRESH_TIME, TEMPLATE_REGEX_DELIMITATOR, TEMPLATE_REGEX_OPERATOR_SPLITTER, TEMPLATE_REGEX_OPERATOR_MATCHER };

package/src/managers/form.d.ts

@@ -24,13 +24,11 @@ declare class FormCore {
         key: string;
         event: TEvents;
     }>;
-    dataCallbackSubscription$: Subscription;
     subscribedTemplates: TSubscribedTemplates[];
     action?: string;
     method?: string;
     config: Required<TSchemaFormConfig>;
     mappers: Map<string, TMapper<unknown>>;
-    onSubmit?: (data: TFormValues<Record<string, unknown>>) => void;
     /**
      * Creates an instance of FormCore.
      *
@@ -40,7 +38,6 @@ declare class FormCore {
      * @param {string} [entry.action] - The action attribute of the form.
      * @param {string} [entry.method] - The method attribute of the form.
      * @param {IFormSchema.iVars} [entry.iVars] - The internal variables of the form.
-     * @param {(data: TFormValues) => void} [entry.onSubmit] - A callback function to handle form submission.
      * @param {((payload: {field: string;data: TFormValues;}) => void) | undefined} [entry.onData] - A callback function to handle data emission.
      */
     constructor(entry: TFormEntry & Omit<IFormSchema, 'components'>);
@@ -66,14 +63,6 @@ declare class FormCore {
      * Subscribes to templates for dynamic updates.
      */
     subscribeTemplates(): void;
-    /**
-     *
-     * @param {(payload: { field: string; data: TFormValues }) => void} callback callback function to call on data
-     */
-    subscribeData(callback: (payload: {
-        field: string;
-        data: TFormValues<Record<string, unknown>>;
-    }) => void): void;
     /**
      * Gets the value of a property from a field.
      *
@@ -220,6 +209,15 @@ declare class FormCore {
     subscribeFieldEvent({ callback, }: {
         callback: (payload: TFieldEvent) => void;
     }): Subscription;
+    /**
+     *
+     * @param {(payload: { field: string; data: TFormValues }) => void} callback callback function to call on data
+     */
+    subscribeData(callback: (payload: {
+        field: string;
+        data: TFormValues<Record<string, unknown>>;
+    }) => void): Subscription;
+    subscribeOnSubmit(callback: (payload: TFormValues<Record<string, unknown>>) => void): Subscription;
     /**
      * Submits the form by triggering form field events and invoking the onSubmit callback.
      */

package/src/managers/formGroup.d.ts

@@ -79,7 +79,15 @@ declare class FormGroup {
      * @param {string[]} indexes form indexes to be submitted
      * @returns
      */
-    submitMultipleFormsByIndex<T>(indexes: string[]): TFormValues<T>;
+    submitMultipleFormsByIndex<T>(indexes: string[], callback?: (payload: TFormValues<T>) => void): void;
+    onDataSubscription({ ids, callback, }: {
+        ids: string[];
+        callback: (payload: Record<string, {
+            formId: string;
+            formField: string;
+            values?: TFormValues<Record<string, unknown>>;
+        }>) => void;
+    }): import("rxjs").Subscription;
 }
 type TFormGroup = FormGroup;
 export { TFormGroup, FormGroup };

package/src/types/form.d.ts

@@ -41,11 +41,6 @@ type TFormValues<T> = {
  */
 type TFormEntry = Omit<IFormSchema, 'components'> & {
     schema?: IFormSchema;
-    onSubmit?: <T>(data: TFormValues<T>) => void;
-    onData?: <T>(payload: {
-        field: string;
-        data: TFormValues<T>;
-    }) => void;
     mappers?: TMapper<unknown>[];
 };
 export { TFormValues, TFormEntry };