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

package/index.esm.js

@@ -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])))
   };
 }
 /**
@@ -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
@@ -2861,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) {
@@ -2873,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
@@ -2886,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();
@@ -2895,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
@@ -2970,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.
    *
@@ -3070,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;
@@ -3142,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()) || '');
   }
   /**
@@ -3443,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.
    */
@@ -3455,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();
@@ -3606,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.16",
+  "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 };