@bolttech/form-engine-core 0.0.1-beta.10 → 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();
@@ -2846,7 +2865,8 @@ 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, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    this.mappers = new Map();
     this.schema = entry.schema;
     this.fields = new Map();
     this.initialValues = entry.initialValues || ((_a = entry.schema) === null || _a === void 0 ? void 0 : _a.initialValues);
@@ -2858,7 +2878,9 @@ class FormCore {
       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;
+    (_j = entry.mappers) === null || _j === void 0 ? void 0 : _j.map(mapper => {
+      this.mappers.set(mapper.componentName, mapper);
+    });
     this.schema && FormCore.checkIndexes(this.schema.components);
     this.templateSubject$ = new Subject();
     this.submitSubject$ = new Subject();
@@ -3091,6 +3113,11 @@ class FormCore {
           case 'object':
             if (currValue === null) {
               value = null;
+              break;
+            }
+            if (currValue instanceof Date) {
+              value = `new Date(\`${currValue}\`)`;
+              break;
             }
             value = JSON.stringify(currValue);
             break;
@@ -3118,7 +3145,7 @@ class FormCore {
    */
   replaceExpression(expression, values) {
     const regex = /\${(.*?)}/g;
-    return expression.replace(regex, () => values.shift() || '');
+    return expression.replace(regex, () => String(values.shift()) || '');
   }
   /**
    * Checks if an expression string contains string concatenation within a marked expression.
@@ -3252,7 +3279,7 @@ class FormCore {
     if (this.fields.has(fieldSchema.name)) {
       throw new Error(`field name ${fieldSchema.name} already defined`);
     }
-    const mapper = mapperElement || ((_a = this.mappers) === null || _a === void 0 ? void 0 : _a.find(mapEl => mapEl.componentName === fieldSchema.component));
+    const mapper = mapperElement || ((_a = this.mappers) === null || _a === void 0 ? void 0 : _a.get(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,
@@ -3299,7 +3326,12 @@ class FormCore {
       var _a, _b, _c;
       const currField = this.fields.get(structElement.name);
       if (!currField) {
-        const mapper = (_a = this.mappers) === null || _a === void 0 ? void 0 : _a.find(mapEl => mapEl.componentName === structElement.component);
+        let mapper;
+        if (structElement === null || structElement === void 0 ? void 0 : structElement.mapper) {
+          mapper = structElement === null || structElement === void 0 ? void 0 : structElement.mapper;
+        } else {
+          mapper = (_a = this.mappers) === null || _a === void 0 ? void 0 : _a.get(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,
@@ -3317,10 +3349,11 @@ class FormCore {
       } else {
         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.originalSchema = structElement;
         currField.templateSubject$ = this.templateSubject$;
       }
       if (structElement.children) {
-        return this.serializeStructure(structElement.children, `${path ? `${path}.` : ``}${structElement.name}`);
+        this.serializeStructure(structElement.children, `${path ? `${path}.` : ``}${structElement.name}`);
       }
     });
   }
@@ -3444,15 +3477,22 @@ class FormCore {
  */
 FormCore.checkIndexes = (struct, indexes = []) => {
   if (!struct) return indexes;
-  for (let i = 0; i < struct.length; i++) {
-    const structElement = struct[i];
-    if (structElement.name === IVARPROPNAME) {
-      throw new Error(`reserved ${IVARPROPNAME} name for field names`);
-    }
-    indexes.push(structElement.name);
-    if (structElement.children) {
-      return FormCore.checkIndexes(structElement.children, indexes);
+  const helper = (struct, indexes) => {
+    for (let i = 0; i < struct.length; i++) {
+      const structElement = struct[i];
+      if (structElement.name === IVARPROPNAME) {
+        throw new Error(`reserved ${IVARPROPNAME} name for field names`);
+      }
+      indexes.push(structElement.name);
+      if (structElement.children) {
+        helper(structElement.children, indexes);
+      }
     }
+  };
+  helper(struct, indexes);
+  const duppedIndexes = indexes.filter((item, index) => indexes.indexOf(item) !== index);
+  if (duppedIndexes.length > 0) {
+    throw new Error(`duplicated indexes found on schema: ${JSON.stringify(duppedIndexes)}`);
   }
   return indexes;
 };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@bolttech/form-engine-core",
-  "version": "0.0.1-beta.10",
+  "version": "0.0.1-beta.12",
   "module": "./index.esm.js",
   "type": "module",
   "main": "./index.esm.js",
   "dependencies": {
     "@gaignoux/currency": "1.1.0",
-    "credit-card-type": "10.0.0",
+    "credit-card-type": "10.0.1",
     "lodash": "4.17.21",
     "rxjs": "7.8.1"
   },

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/interfaces/schema.d.ts

@@ -1,3 +1,4 @@
+import { TMapper } from '../types/mapper';
 import { TApiEvent, TErrorMessages, TEvent, TFormatters, TMasks, TProps, TResetValueMethods, TSchemaFormConfig, TValidationMethods, TVisibility } from '../types/schema';
 /**
  * @interface IComponentSchema
@@ -48,6 +49,11 @@ interface IComponentSchema {
     masks?: TMasks;
     children?: IComponentSchema[];
 }
+interface IComponentSchemaAsFormField<T> extends IComponentSchema {
+    mapper?: TMapper<T>;
+    order?: number;
+    children?: IComponentSchemaAsFormField<T>[];
+}
 /**
  * @interface IFormSchema
  * Represents the schema for a form.
@@ -83,4 +89,4 @@ interface IFormSchema {
     iVars?: Record<string, unknown>;
     components?: IComponentSchema[];
 }
-export { IFormSchema, IComponentSchema };
+export { IFormSchema, IComponentSchema, IComponentSchemaAsFormField };

package/src/managers/field.d.ts

@@ -1,9 +1,10 @@
 import { Observable, Subject, Subscription } from 'rxjs';
 import { TApiConfig, TApiEvent, TApiResponse, TErrorMessages, TEvent, TFormatters, TMasks, TResetValueMethods, TSchemaFormConfig, TValidationMethods, TVisibility } from '../types/schema';
-import { IComponentSchema } from '../interfaces/schema';
+import { IComponentSchema, IComponentSchemaAsFormField } from '../interfaces/schema';
 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.
  */
@@ -13,7 +14,7 @@ declare class FormField {
     component: string;
     path?: string;
     children?: string[];
-    originalSchema: IComponentSchema;
+    originalSchema: IComponentSchemaAsFormField<unknown>;
     validations?: TEvent<TValidationMethods>;
     visibilityConditions?: TVisibility[];
     resetValues?: TResetValueMethods[];
@@ -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>;

package/src/managers/form.d.ts

@@ -1,6 +1,6 @@
 import { IFormField } from './field';
 import { Subject, Subscription } from 'rxjs';
-import { IComponentSchema, IFormSchema } from '../interfaces/schema';
+import { IComponentSchema, IComponentSchemaAsFormField, IFormSchema } from '../interfaces/schema';
 import { TSchemaFormConfig } from '../types/schema';
 import { TSubscribedTemplates } from '../types/template';
 import { TEvents, TFieldEvent, TMutationEvents } from '../types/event';
@@ -29,7 +29,7 @@ declare class FormCore {
     action?: string;
     method?: string;
     config: Required<TSchemaFormConfig>;
-    mappers?: TMapper<unknown>[];
+    mappers: Map<string, TMapper<unknown>>;
     onSubmit?: (data: TFormValues<Record<string, unknown>>) => void;
     /**
      * Creates an instance of FormCore.
@@ -113,7 +113,7 @@ declare class FormCore {
      * @param {string} expression - The expression containing parameters.
      * @returns {string[]} An array of extracted parameters.
      */
-    extractParams(expression: string): string[];
+    extractParams(expression: string): unknown[];
     /**
      * Replaces expressions marked by ${...} in the expression string with the provided values.
      *
@@ -121,7 +121,7 @@ declare class FormCore {
      * @param {string[]} values - The values to be inserted into the marked expressions.
      * @returns {string} The expression string with the replacements made.
      */
-    replaceExpression(expression: string, values: string[]): string;
+    replaceExpression(expression: string, values: unknown[]): string;
     /**
      * Checks if an expression string contains string concatenation within a marked expression.
      *
@@ -190,13 +190,13 @@ declare class FormCore {
      * @param {IComponentSchema[]} [struct] - The schema structure to serialize.
      * @param {string} [path] - The path of the parent component.
      */
-    serializeStructure(struct?: IComponentSchema[], path?: string): void;
+    serializeStructure(struct?: IComponentSchemaAsFormField<unknown>[], path?: string): void;
     /**
      * Refreshes form fields based on changes in the schema structure.
      *
      * @param {IComponentSchema[]} struct - The updated schema structure.
      */
-    refreshFields(struct: IComponentSchema[]): void;
+    refreshFields(struct: IComponentSchemaAsFormField<unknown>[]): void;
     /**
      * Gets a form field by its key.
      *