@bolttech/form-engine-core 1.0.8 → 1.0.10

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as rxjs from 'rxjs';
-import { Subject, Subscription, BehaviorSubject } from 'rxjs';
+import { Subject, BehaviorSubject, Subscription } from 'rxjs';
 import { TCurrencyLocalCode, TCurrencyCode } from '@gaignoux/currency';
 import { OutgoingHttpHeaders } from 'http2';
 
@@ -330,7 +330,7 @@ type TLengthValidation = {
  * const callbackValidation: TCallbackValidation = (value) => typeof value === 'string';
  * ```
  */
-type TCallbackValidation = (value: unknown, formValues: TFormValues<unknown>) => boolean;
+type TCallbackValidation = (value: unknown, formValues: Pick<TFormValues<unknown>, 'values' | 'metadata'>) => boolean;
 /**
  * @type TBetweenValidation
  * Represents validation rules that check if a value is between a range.
@@ -1314,6 +1314,16 @@ declare class SafeSubject<T> extends Subject<T> {
     constructor(isMounted: () => boolean);
     next(value: T): void;
 }
+/**
+ * Custom RXJS BehaviourSubject to gracefully handle errors on unsubscribed Subjects
+ * since its fire and forget, no mount status needed to check if its available or not
+ */
+declare class SafeBehaviourSubject<T> extends BehaviorSubject<T> {
+    defaultValue: T;
+    constructor(value: T);
+    next(value: T): void;
+    get value(): T;
+}
 
 type TTemplateAvaliableScopes = (typeof TEMPLATE_AVALIABLE_SCOPES)[number];
 /**
@@ -1727,7 +1737,7 @@ declare class FormCore {
     dataSubject$: Subject<TFormDataPayload>;
     formValidSubject$: Subject<TFormValidationPayload>;
     fieldValidNotification$: Subject<TFieldValidationPayload>;
-    formValuesStateSubject$: BehaviorSubject<TFormValues<unknown>>;
+    formValuesStateSubject$: SafeBehaviourSubject<TFormValues<unknown>>;
     subscribedTemplates: TSubscribedTemplates[];
     action?: string;
     method?: string;
@@ -1750,6 +1760,7 @@ declare class FormCore {
     stopEventsOnSubmit: boolean;
     submitted: boolean;
     getFormValues: () => TFormValues<unknown>;
+    isolatedFormInstance: boolean;
     /**
      * Creates an instance of FormCore.
      *

package/index.esm.js

@@ -1,4 +1,4 @@
-import { Subject, Subscription, groupBy, mergeMap, debounceTime, filter, combineLatest, startWith, BehaviorSubject, map, distinctUntilKeyChanged } from 'rxjs';
+import { BehaviorSubject, Subject, Subscription, groupBy, mergeMap, debounceTime, filter, combineLatest, startWith, map, distinctUntilKeyChanged } from 'rxjs';
 import creditCardType from 'credit-card-type';
 import isNumber$1 from 'lodash/isNumber';
 import { getCurrencySymbol } from '@gaignoux/currency';
@@ -1594,6 +1594,7 @@ const repeated = (value, validations) => {
  *
  * @param value - The value to be validated.
  * @param validations - An object containing validation methods, including a custom callback function.
+ * @param formValues - An object containing the form state, NOTE: validations might be dirty here
  * @returns `true` if the custom callback validation function returns `true`, otherwise `false`.
  *
  * @example
@@ -1612,9 +1613,20 @@ const repeated = (value, validations) => {
  * };
  * ```
  */
-const callback = (value, validations, formValues) => {
+const callback = (value, validations, {
+  values = [],
+  metadata = []
+} = {
+  values: [],
+  metadata: [],
+  erroredFields: [],
+  isValid: true
+}) => {
   if (!validations.callback || !((validations === null || validations === void 0 ? void 0 : validations.callback) instanceof Function)) return false;
-  return validations.callback(value, formValues);
+  return validations.callback(value, {
+    values,
+    metadata
+  });
 };
 
 /**
@@ -2450,6 +2462,28 @@ class SafeSubject extends Subject {
     }
   }
 }
+/**
+ * Custom RXJS BehaviourSubject to gracefully handle errors on unsubscribed Subjects
+ * since its fire and forget, no mount status needed to check if its available or not
+ */
+class SafeBehaviourSubject extends BehaviorSubject {
+  constructor(value) {
+    super(value);
+    this.defaultValue = value;
+  }
+  next(value) {
+    if (!this.closed) {
+      super.next(value);
+    }
+  }
+  get value() {
+    if (!this.closed) {
+      return super.value;
+    } else {
+      return this.defaultValue;
+    }
+  }
+}
 
 /**
  * @internal
@@ -2913,14 +2947,20 @@ class FormField {
     valueSubscription,
     propsSubscription
   }) {
+    /*
+      NOTE: using emitEvents here will make ON_FIELD_MOUNT emit twice
+      mount logic is managed on form.ts mountActions on first render
+     */
     this.mounted = true;
     this.subscribeValue(valueSubscription);
     this.subscribeState(propsSubscription);
     this.valueSubject$.next(this.stateValue);
     this.propsSubject$.next(this.props);
     this.visibilitySubject$.next(this.visibility);
-    this.emitEvents({
-      event: 'ON_FIELD_MOUNT'
+    this.fieldEventSubject$.next({
+      event: 'ON_FIELD_MOUNT',
+      fieldName: this.name,
+      fieldInstance: this
     });
   }
   /**
@@ -3255,6 +3295,7 @@ class FormCore {
     this._valid = false;
     this.stopEventsOnSubmit = false;
     this.submitted = false;
+    this.isolatedFormInstance = false;
     this.index = entry.index;
     this.schema = entry.schema;
     this.fields = new Map();
@@ -3268,7 +3309,10 @@ class FormCore {
     (_h = entry.mappers) === null || _h === void 0 ? void 0 : _h.map(mapper => {
       this.mappers.set(mapper.componentName, mapper);
     });
-    if ((!entry.submitSubject$ || !entry.dataSubject$ || !entry.formValidSubject$) && this.config.defaultLogVerbose) console.warn(`some formGroup events are not properly instanciated, any onData, onValid, onSubmit events managed by formGroup won't trigger on form: ${this.index}`);
+    if (!entry.submitSubject$ || !entry.dataSubject$ || !entry.formValidSubject$) {
+      this.isolatedFormInstance = true;
+      if (this.config.defaultLogVerbose) console.warn(`some formGroup events are not properly instanciated, any onData, onValid, onSubmit events managed by formGroup won't trigger on form: ${this.index}`);
+    }
     if (this.schema) {
       FormCore.checkIndexes(this.schema.components);
     }
@@ -3279,7 +3323,7 @@ class FormCore {
     this.submitSubject$ = entry.submitSubject$ ? entry.submitSubject$ : new Subject();
     this.dataSubject$ = entry.dataSubject$ ? entry.dataSubject$ : new Subject();
     this.formValidSubject$ = entry.formValidSubject$ ? entry.formValidSubject$ : new Subject();
-    this.formValuesStateSubject$ = new BehaviorSubject({
+    this.formValuesStateSubject$ = new SafeBehaviourSubject({
       erroredFields: [],
       isValid: true,
       metadata: [],
@@ -3291,9 +3335,19 @@ class FormCore {
     this.fieldValidNotification$.subscribe(() => {
       this.validateForm();
     });
+    /*
+      @TODO check if this emissions can be merged
+      every value update needs to occur after and before validations on field emitValue change
+      so both callback validation and onData values are synced and fields and validations are correct
+      
+      check field.ts emitValue and emitEvents
+    */
     this.fieldEventSubject$.subscribe(() => {
       this.formValuesStateSubject$.next(this.getFormState());
     });
+    this.dataSubject$.subscribe(() => {
+      this.formValuesStateSubject$.next(this.getFormState());
+    });
     this.mountSubject$.subscribe(this.mountActions.bind(this));
     this.initialValues = entry.initialValues || ((_j = entry.schema) === null || _j === void 0 ? void 0 : _j.initialValues);
     this.iVars = entry.iVars || ((_k = entry.schema) === null || _k === void 0 ? void 0 : _k.iVars) || {};
@@ -4241,13 +4295,15 @@ class FormCore {
   destroy() {
     this.templateSubject$.unsubscribe();
     this.templateSubscription$.unsubscribe();
-    this.submitSubject$.unsubscribe();
     this.mountSubject$.unsubscribe();
     this.fieldEventSubject$.unsubscribe();
-    this.dataSubject$.unsubscribe();
-    this.formValidSubject$.unsubscribe();
     this.fieldValidNotification$.unsubscribe();
     this.formValuesStateSubject$.unsubscribe();
+    if (this.isolatedFormInstance) {
+      this.submitSubject$.unsubscribe();
+      this.dataSubject$.unsubscribe();
+      this.formValidSubject$.unsubscribe();
+    }
     this.fields.forEach(field => field.destroyField());
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolttech/form-engine-core",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "dependencies": {
     "@gaignoux/currency": "^1.1.0",
     "credit-card-type": "^10.0.0",