Typescript fixes

Author: tanepiper

packages/formula/src/lib/form/aria.mts

@@ -52,7 +52,7 @@ export function setAriaRole(el: FormElement, elements: FormElement[]): void {
           default:
             return `input-${el.type}`;
         }
-      })()
+      })(),
     );
   }
 }
@@ -72,9 +72,9 @@ export function setAriaStates(el: FormElement): void {
 export function setAriaValue(element: FormElement, elGroup: FormElement[]): void {
   if (element.type === 'radio') {
     elGroup.forEach((el) => el.removeAttribute('aria-checked'));
-    element.setAttribute('aria-checked', element.checked ? 'true' : 'false');
+    element.setAttribute('aria-checked', (element as HTMLInputElement).checked ? 'true' : 'false');
   } else if (element.type === 'checkbox') {
-    element.setAttribute('aria-checked', element.checked ? 'true' : 'false');
+    element.setAttribute('aria-checked', (element as HTMLInputElement).checked ? 'true' : 'false');
   }
 }
 

packages/formula/src/lib/form/errors.mts

@@ -9,11 +9,11 @@ interface ValidationCheckOptions {
 /**
  * Extracts validity errors from the element and merges with custom errors.
  */
-function extractErrors(el: FormElement, custom?: Record<string, boolean>): Record<string, boolean> {
-  const output: Record<string, boolean> = {};
+function extractErrors(el: FormElement, custom?: Record<string, string>): Record<string, string> {
+  const output: Record<string, string> = {};
   for (const key in el.validity) {
     if (key !== 'valid' && el.validity[key as keyof ValidityState]) {
-      output[key] = true;
+      output[key] = el.validationMessage || key;
     }
   }
   return { ...output, ...custom };
@@ -22,23 +22,17 @@ function extractErrors(el: FormElement, custom?: Record<string, boolean>): Recor
 /**
  * Gets the result of any custom validations available on the fields.
  */
-function getCustomValidations(
-  value: unknown,
-  values: Record<string, unknown>,
-  validations: Record<string, ValidatorFn> = {}
-): [Record<string, string>, Record<string, boolean>] {
-  const messages: Record<string, string> = {};
-  const errors: Record<string, boolean> = {};
+function getCustomValidations(value: unknown, values: Record<string, unknown>, validations: Record<string, ValidatorFn> = {}): Record<string, string> {
+  const errors: Record<string, string> = {};
 
   Object.entries(validations).forEach(([key, validation]) => {
     const message = validation(value, values);
     if (message !== null) {
-      messages[key] = message;
-      errors[key] = true;
+      errors[key] = message;
     }
   });
 
-  return [messages, errors];
+  return errors;
 }
 
 /**
@@ -48,7 +42,7 @@ export function createValidationChecker(
   inputGroup: string,
   elementGroup: FormElement[],
   values: Record<string, unknown>,
-  options?: ValidationCheckOptions
+  options?: ValidationCheckOptions,
 ): (el: FormElement, elValue: unknown) => FieldValidity {
   return (el: FormElement, elValue: unknown): FieldValidity => {
     // Reset the validity
@@ -78,26 +72,20 @@ export function createValidationChecker(
     };
 
     // Check for any custom validations
-    const [messages, customErrors] = getCustomValidations(
-      elValue,
-      values,
-      options?.validators?.[inputGroup]
-    );
+    const customErrors = getCustomValidations(elValue, values, options?.validators?.[inputGroup]);
 
     const errors = extractErrors(el, customErrors);
     const errorKeys = Object.keys(errors);
 
     if (el.checkValidity()) {
       if (errorKeys.length > 0) {
-        el.setCustomValidity(messages[errorKeys[0]]);
+        el.setCustomValidity(errors[errorKeys[0]]);
       }
     } else {
       if (customMessages[errorKeys[0]]) {
         el.setCustomValidity(customMessages[errorKeys[0]]);
       }
     }
-
-    // Recheck validity and show any messages
     const valid = el.checkValidity();
     if (!valid) {
       el.setAttribute('data-formula-invalid', 'true');

packages/formula/src/lib/form/event.mts

@@ -60,7 +60,7 @@ export function valueUpdate(
   }
 
   stores.errors.set({ ...stores.errors.get(), [name]: validity });
-  stores.formValid.set(Object.values(stores.errors.get()).every((v) => v.valid));
+  stores.formValid.set(Object.values(stores.errors.get()).every((v: FieldValidity) => v.valid));
 
   if (options?.formValidators) {
     formValidation(options.formValidators, stores);
@@ -79,15 +79,15 @@ export function valueUpdate(
  * Creates an event handler for the passed element with its data handler
  */
 function createHandlerForData(
-  extractor: (el: FormElement) => FieldExtractResult,
+  extractor: (el: FormElement, isInit: boolean, isReset: boolean) => FieldExtractResult,
   stores: FormulaStores,
   options: EventOptions | undefined,
   hiddenFields: Map<string, FormElement[]>,
   enrich?: (value: unknown) => Record<string, unknown>
 ): (event: Event) => void {
   return (event: Event) => {
     const el = (event?.currentTarget ?? event?.target) as FormElement;
-    const extracted = extractor(el);
+    const extracted = extractor(el, false, false);
     if (typeof options?.preChanges === 'function') {
       options.preChanges(extracted);
     }

packages/formula/src/lib/form/extract.mts

@@ -42,7 +42,7 @@ function setElementValue(
     const valueArray = Array.isArray(value) ? value : [];
     elementGroup.forEach((el, i) => {
       if (el.type === 'checkbox') {
-        el.checked = valueArray.includes(el.value);
+        (el as HTMLInputElement).checked = valueArray.includes(el.value);
       } else {
         el.value = String(valueArray[i] ?? '');
       }
@@ -54,11 +54,11 @@ function setElementValue(
         el.selected = valueArray.includes(el.value);
       });
     } else if (element.type === 'checkbox') {
-      element.checked = Boolean(value);
+      (element as HTMLInputElement).checked = Boolean(value);
     } else if (element.type === 'radio') {
-      elementGroup.forEach((el) => (el.checked = value === el.value));
+      elementGroup.forEach((el) => ((el as HTMLInputElement).checked = value === el.value));
     } else if (element.type === 'file') {
-      element.files = value instanceof FileList ? value : null;
+      (element as HTMLInputElement).files = value instanceof FileList ? value : null;
     } else {
       element.value = String(value ?? '');
     }
@@ -89,14 +89,14 @@ function getElementValues(
             })();
         break;
       case 'checkbox':
-        elValue = isMultiValue ? elementGroup.filter((e) => e.checked).map((e) => e.value) : element.checked;
+        elValue = isMultiValue ? elementGroup.filter((e) => (e as HTMLInputElement).checked).map((e) => e.value) : (element as HTMLInputElement).checked;
         break;
       case 'radio':
-        const foundElement = elementGroup.find((el) => el.checked);
+        const foundElement = elementGroup.find((el) => (el as HTMLInputElement).checked);
         elValue = foundElement ? foundElement.value : null;
         break;
       case 'file':
-        elValue = element.files;
+        elValue = (element as HTMLInputElement).files;
         break;
       default:
         elValue = isMultiValue ? elementGroup.map((v) => v.value) : element.value || null;
@@ -120,7 +120,7 @@ export function createFieldExtract(
 
   let isMultiValue = false;
   if (elementGroup[0].type !== 'radio') {
-    isMultiValue = !elementGroup[0].multiple && elementGroup.length > 1;
+    isMultiValue = !(elementGroup[0] as HTMLSelectElement).multiple && elementGroup.length > 1;
   }
 
   /**

packages/formula/tsconfig.json

@@ -3,6 +3,7 @@
   "include": ["src/**/*", "index.mjs"],
   "exclude": ["node_modules", "test-app", "tests", "src/**/*.spec.mjs"],
   "compilerOptions": {
+    "target": "esnext",
     "baseUrl": ".",
     "checkJs": false,
     "allowJs": true,