@bolttech/form-engine-core 0.0.1-beta.11 → 0.0.1-beta.12

package/index.esm.js

@@ -1,4 +1,4 @@
-import { Subscription, Subject, combineLatest, startWith, groupBy, mergeMap, debounceTime, filter, map } from 'rxjs';
+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 { getCurrencySymbol } from '@gaignoux/currency';
@@ -2252,6 +2252,22 @@ const validations = {
 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
+ */
+class SafeSubject extends Subject {
+  constructor(isMounted) {
+    super();
+    this.isMounted = isMounted;
+  }
+  next(value) {
+    if (this.isMounted()) {
+      super.next(value);
+    }
+  }
+}
+
 /**
  * Represents a form field with observables for managing form state, validations, and API requests.
  */
@@ -2333,6 +2349,7 @@ class FormField {
     };
     this._errors = {};
     this._valid = false;
+    this._mounted = true;
     this.initializeObservers();
   }
   /**
@@ -2341,25 +2358,25 @@ class FormField {
   initializeObservers() {
     var _a;
     if (!this.valueSubject$ || this.valueSubject$.closed) {
-      this.valueSubject$ = new Subject();
+      this.valueSubject$ = new SafeSubject(() => this._mounted);
     }
     if (!this.errorSubject$ || this.errorSubject$.closed) {
-      this.errorSubject$ = new Subject();
+      this.errorSubject$ = new SafeSubject(() => this._mounted);
     }
     if (!this.visibilitySubject$ || this.visibilitySubject$.closed) {
-      this.visibilitySubject$ = new Subject();
+      this.visibilitySubject$ = new SafeSubject(() => this._mounted);
     }
     if (!this.apiSubject$ || this.apiSubject$.closed) {
-      this.apiSubject$ = new Subject();
+      this.apiSubject$ = new SafeSubject(() => this._mounted);
     }
     if (!this.propsSubject$ || this.propsSubject$.closed) {
-      this.propsSubject$ = new Subject();
+      this.propsSubject$ = new SafeSubject(() => this._mounted);
     }
     if (!this.fieldStateSubscription$ || this.fieldStateSubscription$.closed) {
       this.fieldStateSubscription$ = new Subscription();
     }
     if (!this.apiEventQueueSubject$ || this.apiEventQueueSubject$.closed) {
-      this.apiEventQueueSubject$ = new Subject();
+      this.apiEventQueueSubject$ = new SafeSubject(() => this._mounted);
     }
     this.fieldState$ = combineLatest({
       visibility: this.visibilitySubject$.pipe(startWith(this._visibility)),
@@ -2563,6 +2580,7 @@ class FormField {
     this.initializeObservers();
     this.subscribeValue(valueSubscription);
     this.subscribeState(propsSubscription);
+    this._mounted = true;
   }
   /**
    * Sets the value of the form field and emits associated events.
@@ -2796,6 +2814,7 @@ class FormField {
    * @returns {void}
    */
   destroyField() {
+    this._mounted = false;
     this.valueSubject$.unsubscribe();
     this.visibilitySubject$.unsubscribe();
     this.fieldStateSubscription$.unsubscribe();

package/package.json

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

package/src/helpers/SafeSubject.d.ts

@@ -0,0 +1,11 @@
+import { Subject } from 'rxjs';
+/**
+ * Custom RXJS Subject to gracefully handle errors on unsubscribed Subjects
+ * that were unmounted due to adapter external handling such as visibility
+ */
+declare class SafeSubject<T> extends Subject<T> {
+    private isMounted;
+    constructor(isMounted: () => boolean);
+    next(value: T): void;
+}
+export { SafeSubject };

package/src/managers/field.d.ts

@@ -4,6 +4,7 @@ import { IComponentSchema, IComponentSchemaAsFormField } from '../interfaces/sch
 import { IState } from '../interfaces/state';
 import { TEvents, TFieldEvent, TMutationEvents, TValueChangeEvent } from '../types/event';
 import { TMapper } from '../types/mapper';
+import { SafeSubject } from '../helpers/SafeSubject';
 /**
  * Represents a form field with observables for managing form state, validations, and API requests.
  */
@@ -35,13 +36,14 @@ declare class FormField {
     private _errors;
     private _api;
     private _valid;
-    propsSubject$: Subject<Record<string, unknown>>;
-    errorSubject$: Subject<Record<string, unknown>>;
-    valueSubject$: Subject<Record<string, unknown>>;
-    visibilitySubject$: Subject<boolean>;
-    apiSubject$: Subject<TApiResponse>;
+    private _mounted;
+    propsSubject$: SafeSubject<Record<string, unknown>>;
+    errorSubject$: SafeSubject<Record<string, unknown>>;
+    valueSubject$: SafeSubject<Record<string, unknown>>;
+    visibilitySubject$: SafeSubject<boolean>;
+    apiSubject$: SafeSubject<TApiResponse>;
     fieldEventSubject$: Subject<TFieldEvent>;
-    apiEventQueueSubject$: Subject<{
+    apiEventQueueSubject$: SafeSubject<{
         event: TEvents;
     }>;
     fieldState$: Observable<IState>;