refactor: FormValue type inference (#1737)

Exposed an utility type for FormValue so it does not have to be initialized in the constructor.

Author: rkaraivanov

src/components/checkbox/checkbox-base.ts

@@ -7,7 +7,7 @@ import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedCheckboxRequiredMixin } from '../common/mixins/forms/associated-required.js';
 import {
-  type FormValue,
+  type FormValueOf,
   createFormValueState,
   defaultBooleanTransformers,
 } from '../common/mixins/forms/form-value.js';
@@ -40,7 +40,11 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
   }
 
   protected readonly _focusRingManager = addKeyboardFocusRing(this);
-  protected override _formValue: FormValue<boolean>;
+  protected override readonly _formValue: FormValueOf<boolean> =
+    createFormValueState(this, {
+      initialValue: false,
+      transformers: defaultBooleanTransformers,
+    });
   protected _value!: string;
 
   @query('input', true)
@@ -90,15 +94,6 @@ export class IgcCheckboxBaseComponent extends FormAssociatedCheckboxRequiredMixi
   @property({ reflect: true, attribute: 'label-position' })
   public labelPosition: ToggleLabelPosition = 'after';
 
-  constructor() {
-    super();
-
-    this._formValue = createFormValueState(this, {
-      initialValue: false,
-      transformers: defaultBooleanTransformers,
-    });
-  }
-
   protected override createRenderRoot(): HTMLElement | DocumentFragment {
     const root = super.createRenderRoot();
     this._hideLabel = isEmpty(this._label);

src/components/combo/combo.ts

@@ -18,7 +18,7 @@ import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';
 import {
-  type FormValue,
+  type FormValueOf,
   createFormValueState,
 } from '../common/mixins/forms/form-value.js';
 import { partMap } from '../common/part-map.js';
@@ -136,7 +136,14 @@ export default class IgcComboComponent<
     return comboValidators;
   }
 
-  protected override _formValue: FormValue<ComboValue<T>[]>;
+  protected override readonly _formValue: FormValueOf<ComboValue<T>[]> =
+    createFormValueState<ComboValue<T>[]>(this, {
+      initialValue: [],
+      transformers: {
+        setValue: asArray,
+        setDefaultValue: asArray,
+      },
+    });
   private _data: T[] = [];
 
   private _valueKey?: Keys<T>;
@@ -468,14 +475,6 @@ export default class IgcComboComponent<
   constructor() {
     super();
 
-    this._formValue = createFormValueState<ComboValue<T>[]>(this, {
-      initialValue: [],
-      transformers: {
-        setValue: asArray,
-        setDefaultValue: asArray,
-      },
-    });
-
     this.addEventListener('blur', this._handleBlur);
 
     this.addEventListener(

src/components/common/mixins/form-associated.spec.ts

@@ -15,7 +15,7 @@ import {
   requiredValidator,
 } from '../validators.js';
 import { FormAssociatedRequiredMixin } from './forms/associated-required.js';
-import { type FormValue, createFormValueState } from './forms/form-value.js';
+import { type FormValueOf, createFormValueState } from './forms/form-value.js';
 import type {
   FormAssociatedElementInterface,
   FormRequiredInterface,
@@ -52,7 +52,8 @@ describe('Form associated mixin tests', () => {
           return [requiredValidator, minLengthValidator, maxLengthValidator];
         }
 
-        protected override _formValue: FormValue<string>;
+        protected override _formValue: FormValueOf<string> =
+          createFormValueState(this, { initialValue: '' });
 
         private _minLength!: number;
         private _maxLength!: number;
@@ -84,12 +85,6 @@ describe('Form associated mixin tests', () => {
           return this._formValue.value;
         }
 
-        constructor() {
-          super();
-
-          this._formValue = createFormValueState(this, { initialValue: '' });
-        }
-
         public override connectedCallback() {
           super.connectedCallback();
           this._updateValidity();

src/components/common/mixins/forms/form-value.ts

@@ -7,13 +7,6 @@ import type { DateRangeValue } from '../../../date-range-picker/date-range-picke
 import { asNumber } from '../../util.js';
 import type { FormValueType, IgcFormControl } from './types.js';
 
-export function createFormValueState<T>(
-  host: IgcFormControl,
-  config: FormValueConfig<T>
-): FormValue<T> {
-  return new FormValue(host, config);
-}
-
 type FormValueTransformers<T> = {
   setValue: (value: T) => T;
   getValue: (value: T) => T;
@@ -171,3 +164,12 @@ export class FormValue<T> {
     return this._transformers.getValue(this._value);
   }
 }
+
+export function createFormValueState<T>(
+  host: IgcFormControl,
+  config: FormValueConfig<T>
+): FormValue<T> {
+  return new FormValue(host, config);
+}
+
+export type FormValueOf<T> = ReturnType<typeof createFormValueState<T>>;

src/components/date-picker/date-picker.ts

@@ -31,7 +31,7 @@ import type { AbstractConstructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';
 import {
-  type FormValue,
+  type FormValueOf,
   createFormValueState,
   defaultDateTimeTransformers,
 } from '../common/mixins/forms/form-value.js';
@@ -194,7 +194,11 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
   private _displayFormat?: string;
   private _inputFormat?: string;
 
-  protected override readonly _formValue: FormValue<Date | null>;
+  protected override readonly _formValue: FormValueOf<Date | null> =
+    createFormValueState(this, {
+      initialValue: null,
+      transformers: defaultDateTimeTransformers,
+    });
 
   @query(IgcDateTimeInputComponent.tagName)
   private readonly _input!: IgcDateTimeInputComponent;
@@ -457,11 +461,6 @@ export default class IgcDatePickerComponent extends FormAssociatedRequiredMixin(
   constructor() {
     super();
 
-    this._formValue = createFormValueState<Date | null>(this, {
-      initialValue: null,
-      transformers: defaultDateTimeTransformers,
-    });
-
     this.addEventListener('focusin', this._handleFocusIn);
     this.addEventListener('focusout', this._handleFocusOut);
 

src/components/date-range-picker/date-range-picker.ts

@@ -33,7 +33,7 @@ import type { AbstractConstructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';
 import {
-  type FormValue,
+  type FormValueOf,
   createFormValueState,
   defaultDateRangeTransformers,
 } from '../common/mixins/forms/form-value.js';
@@ -213,7 +213,14 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
   private static readonly _increment = createCounter();
 
   protected readonly _inputId = `date-range-picker-${IgcDateRangePickerComponent._increment()}`;
-  protected override _formValue: FormValue<DateRangeValue | null>;
+  protected override readonly _formValue: FormValueOf<DateRangeValue | null> =
+    createFormValueState(this, {
+      initialValue: {
+        start: null,
+        end: null,
+      },
+      transformers: defaultDateRangeTransformers,
+    });
 
   private _activeDate: Date | null = null;
   private _min: Date | null = null;
@@ -573,13 +580,6 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
 
   constructor() {
     super();
-    this._formValue = createFormValueState<DateRangeValue | null>(this, {
-      initialValue: {
-        start: null,
-        end: null,
-      },
-      transformers: defaultDateRangeTransformers,
-    });
 
     this._rootClickController.update({ hideCallback: this._handleClosing });
     this.addEventListener('focusin', this._handleFocusIn);

src/components/date-time-input/date-time-input.ts

@@ -18,7 +18,7 @@ import { registerComponent } from '../common/definitions/register.js';
 import type { AbstractConstructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import {
-  type FormValue,
+  type FormValueOf,
   createFormValueState,
   defaultDateTimeTransformers,
 } from '../common/mixins/forms/form-value.js';
@@ -87,7 +87,11 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
     return dateTimeInputValidators;
   }
 
-  protected override _formValue: FormValue<Date | null>;
+  protected override readonly _formValue: FormValueOf<Date | null> =
+    createFormValueState(this, {
+      initialValue: null,
+      transformers: defaultDateTimeTransformers,
+    });
 
   protected _defaultMask!: string;
   private _oldValue: Date | null = null;
@@ -282,11 +286,6 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
   constructor() {
     super();
 
-    this._formValue = createFormValueState(this, {
-      initialValue: null,
-      transformers: defaultDateTimeTransformers,
-    });
-
     addKeybindings(this, {
       skip: () => this.readOnly,
       bindingDefaults: { preventDefault: true, triggers: ['keydownRepeat'] },

src/components/file-input/file-input.ts

@@ -6,7 +6,7 @@ import { themes } from '../../theming/theming-decorator.js';
 import IgcButtonComponent from '../button/button.js';
 import { registerComponent } from '../common/definitions/register.js';
 import {
-  type FormValue,
+  type FormValueOf,
   createFormValueState,
   defaultFileListTransformer,
 } from '../common/mixins/forms/form-value.js';
@@ -62,7 +62,11 @@ export default class IgcFileInputComponent extends IgcInputBaseComponent {
     return fileValidators;
   }
 
-  protected override _formValue: FormValue<FileList | null>;
+  protected override readonly _formValue: FormValueOf<FileList | null> =
+    createFormValueState(this, {
+      initialValue: null,
+      transformers: defaultFileListTransformer,
+    });
 
   @state()
   private _hasActivation = false;
@@ -129,14 +133,6 @@ export default class IgcFileInputComponent extends IgcInputBaseComponent {
     return this.input?.files ?? null;
   }
 
-  constructor() {
-    super();
-    this._formValue = createFormValueState(this, {
-      initialValue: null,
-      transformers: defaultFileListTransformer,
-    });
-  }
-
   protected override _restoreDefaultValue(): void {
     this.input.value = '';
     super._restoreDefaultValue();

src/components/input/input.ts

@@ -5,7 +5,7 @@ import { live } from 'lit/directives/live.js';
 
 import { registerComponent } from '../common/definitions/register.js';
 import {
-  type FormValue,
+  type FormValueOf,
   createFormValueState,
 } from '../common/mixins/forms/form-value.js';
 import { partMap } from '../common/part-map.js';
@@ -50,7 +50,8 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
     registerComponent(IgcInputComponent, IgcValidationContainerComponent);
   }
 
-  protected override _formValue: FormValue<string>;
+  protected override readonly _formValue: FormValueOf<string> =
+    createFormValueState(this, { initialValue: '' });
 
   protected override get __validators() {
     return this.type !== 'number' ? stringValidators : numberValidators;
@@ -207,11 +208,6 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
   @property({ type: Number })
   public override tabIndex = 0;
 
-  constructor() {
-    super();
-    this._formValue = createFormValueState(this, { initialValue: '' });
-  }
-
   /* blazorSuppress */
   /** Replaces the selected text in the input. */
   public override setRangeText(

src/components/mask-input/mask-input.ts

@@ -6,7 +6,7 @@ import { live } from 'lit/directives/live.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
 import {
-  type FormValue,
+  type FormValueOf,
   createFormValueState,
 } from '../common/mixins/forms/form-value.js';
 import { partMap } from '../common/part-map.js';
@@ -55,7 +55,14 @@ export default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
     return maskValidators;
   }
 
-  protected override _formValue: FormValue<string>;
+  protected override readonly _formValue: FormValueOf<string> =
+    createFormValueState(this, {
+      initialValue: '',
+      transformers: {
+        setFormValue: (value) =>
+          this._isRawMode ? value || null : this.maskedValue || null,
+      },
+    });
 
   protected get _isRawMode() {
     return this.valueMode === 'raw';
@@ -114,18 +121,6 @@ export default class IgcMaskInputComponent extends IgcMaskInputBaseComponent {
     }
   }
 
-  constructor() {
-    super();
-
-    this._formValue = createFormValueState(this, {
-      initialValue: '',
-      transformers: {
-        setFormValue: (value) =>
-          this._isRawMode ? value || null : this.maskedValue || null,
-      },
-    });
-  }
-
   @watch('prompt')
   protected promptChange() {
     this.parser.prompt = this.prompt;