chore: proper lint

Author: calebdwilliams

.eslintignore

@@ -12,4 +12,7 @@ _site/
 _site-dev
 docs/_merged_assets/
 docs/_merged_data/
-docs/_merged_includes/
+docs/_merged_includes/
+**/tests/*
+*.js
+*.d.ts

.eslintrc.js

@@ -2,10 +2,15 @@ module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
   plugins: ['simple-import-sort', '@typescript-eslint'],
-  extends: [ require.resolve('@open-wc/eslint-config'), require.resolve('eslint-config-prettier')],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended'
+  ],
   rules: {
     'lit/no-useless-template-literals': 'off',
     'consistent-return': 'off',
-    'max-classes-per-file': 'off'
+    'max-classes-per-file': 'off',
+    'no-prototype-builtins': 'off'
   }
 };

packages/form-control/src/FormControlMixin.ts

@@ -1,7 +1,9 @@
 import { IElementInternals } from 'element-internals-polyfill';
 import { Constructor, FormControlInterface, FormValue, IControlHost, Validator } from './types';
 
-export function FormControlMixin<T extends Constructor<HTMLElement & IControlHost>>(SuperClass: T) {
+export function FormControlMixin<
+  TBase extends Constructor<HTMLElement & IControlHost> & { observedAttributes: string[] }
+>(SuperClass: TBase) {
   class FormControl extends SuperClass {
     /** Wires up control instances to be form associated */
     static get formAssociated() {
@@ -30,12 +32,11 @@ export function FormControlMixin<T extends Constructor<HTMLElement & IControlHos
     static get observedAttributes(): string[] {
       const validatorAttributes = this.validators.map((validator) => validator.attribute);
 
-      /** @ts-ignore This exits */
       const observedAttributes = super.observedAttributes || [];
 
       /** Make sure there are no duplicates inside the attributes list */
       const attributeSet = new Set([...observedAttributes, ...validatorAttributes]);
-      return [...attributeSet];
+      return [...attributeSet] as string[];
     }
 
     /**
@@ -130,6 +131,7 @@ export function FormControlMixin<T extends Constructor<HTMLElement & IControlHos
       return this.internals.validity;
     }
 
+    /* eslint-disable  @typescript-eslint/no-explicit-any */
     constructor(...args: any[]) {
       super(...args);
       this.addEventListener('focus', this.#onFocus);
@@ -159,7 +161,9 @@ export function FormControlMixin<T extends Constructor<HTMLElement & IControlHos
       /** Initialize the form control and perform initial validation */
       this.#initFormControl();
       this.#validate(this.value);
-      this.validationMessageCallback('');
+      if (this.validationMessageCallback) {
+        this.validationMessageCallback('');
+      }
     }
 
     disconnectedCallback() {
@@ -181,12 +185,6 @@ export function FormControlMixin<T extends Constructor<HTMLElement & IControlHos
       /** Closed over variable to track value changes */
       let value: FormValue = this.value || '';
 
-      /** Value getter reference within the closure */
-      let set: ((v: FormValue) => void) | undefined;
-
-      /** Value setter reference within the closure */
-      let get: ((v: FormValue) => void) | undefined;
-
       /** Look to see if '`checked'` is on the control's prototype */
       const hasChecked = this.#isCheckedElement;
 
@@ -210,15 +208,15 @@ export function FormControlMixin<T extends Constructor<HTMLElement & IControlHos
       }
 
       /** Make sure to defer to the parent */
-      set = descriptor && descriptor.set;
-      get = descriptor && descriptor.get;
+      const set = descriptor && descriptor.set;
+      const get = descriptor && descriptor.get;
 
       /** Define the FormControl's value property */
       Object.defineProperty(this, 'value', {
         get() {
           /** If a getter already exists, make sure to call it */
           if (get) {
-            return get.call(this, null);
+            return get.call(this);
           }
           return value;
         },
@@ -312,7 +310,7 @@ export function FormControlMixin<T extends Constructor<HTMLElement & IControlHos
      * in cases where `checked` is present upon initialization, this will be
      * effectively `this.checked && this.value`.
      */
-    valueChangedCallback(value: FormValue): void {}
+    declare valueChangedCallback: (value: FormValue) => void;
 
     /**
      * Resets a form control to its initial state
@@ -375,7 +373,9 @@ export function FormControlMixin<T extends Constructor<HTMLElement & IControlHos
         this.#forceError = true;
       }
       const showError = this.#shouldShowError();
-      this.validationMessageCallback(showError ? this.validationMessage : '');
+      if (this.validationMessageCallback) {
+        this.validationMessageCallback(showError ? this.validationMessage : '');
+      }
     };
 
     /**
@@ -400,7 +400,9 @@ export function FormControlMixin<T extends Constructor<HTMLElement & IControlHos
       }
       this.#validate(value);
       const showError = this.#shouldShowError();
-      this.validationMessageCallback(showError ? this.validationMessage : '');
+      if (this.validationMessageCallback) {
+        this.validationMessageCallback(showError ? this.validationMessage : '');
+      }
     }
 
     /**
@@ -443,7 +445,7 @@ export function FormControlMixin<T extends Constructor<HTMLElement & IControlHos
            * if a control has a ValidityCallback, it can override the error
            * message for a given validity key.
            */
-          if (this.validityCallback(key)) {
+          if (this.validityCallback && this.validityCallback(key)) {
             messageResult = this.validityCallback(key) as string;
           } else if (message instanceof Function) {
             messageResult = message(this, value);
@@ -508,14 +510,14 @@ export function FormControlMixin<T extends Constructor<HTMLElement & IControlHos
      * The returned value will be used as the validationMessage for the given key.
      * @param validationKey {string} - The key that has returned invalid
      */
-    validityCallback(validationKey: string): string | void {}
+    declare validityCallback: (validationKey: string) => string | void;
 
     /**
      * Called when the control's validationMessage should be changed
      * @param message { string } - The new validation message
      */
-    validationMessageCallback(message: string): void {}
+    declare validationMessageCallback: (message: string) => void;
   }
 
-  return FormControl as Constructor<FormControlInterface> & T;
+  return FormControl as Constructor<FormControlInterface> & TBase;
 }

packages/form-control/src/types.ts

@@ -1,7 +1,8 @@
 import { IElementInternals } from 'element-internals-polyfill';
 
 /** Generic constructor type */
-export type Constructor<T = {}> = new (...args: any[]) => T;
+/* eslint-disable  @typescript-eslint/no-explicit-any */
+export type Constructor<T = Record<string, unknown>> = new (...args: any[]) => T;
 
 /** Union type for form values */
 export type FormValue = File|FormData|string|null;
@@ -10,7 +11,7 @@ export type FormValue = File|FormData|string|null;
 export interface FormControlInterface {
   checked?: boolean;
   validationTarget?: HTMLElement | null;
-  value: any;
+  value: FormValue;
   readonly form: HTMLFormElement;
   readonly internals: IElementInternals;
   readonly showError: boolean;
@@ -20,7 +21,7 @@ export interface FormControlInterface {
   checkValidity(): boolean;
   formResetCallback(): void;
   resetFormControl(): void;
-  valueChangedCallback(value: any): void;
+  valueChangedCallback(value: FormValue): void;
   validityCallback(validationKey: string): string | void;
   validationMessageCallback(message: string): void;
 }
@@ -64,22 +65,22 @@ export interface Validator {
    * ValidityState key as an argument and must return a validationMessage
    * for the given instance.
    */
-  message: string | ((instance: any, value: any) => string);
+  message: string | ((instance: any, value: FormValue) => string);
 
   /**
    * Callback for a given validator. Takes the FormControl instance
    * and the form control value as arguments and returns a
    * boolean to evaluate for that Validator.
    * @param instance {FormControlInterface} - The FormControl instance
-   * @param value {any} - The form control value
+   * @param value {FormValue} - The form control value
    * @returns {boolean} - The validity of a given Validator
    */
-  callback(instance: HTMLElement, value: any): boolean;
+  callback(instance: HTMLElement, value: FormValue): boolean;
 }
 
 /** Generic type to allow usage of HTMLElement lifecycle methods */
 export interface IControlHost {
-  attributeChangedCallback?(name: string, oldValue: any, newValue: any): void;
+  attributeChangedCallback?(name: string, oldValue: string, newValue: string): void;
   connectedCallback?(): void;
   disconnectedCallback?(): void;
   checked?: boolean;

packages/form-control/src/validators.ts

@@ -1,11 +1,11 @@
 import { Validator } from './index';
-import { FormControlInterface } from './types';
+import { FormControlInterface, FormValue } from './types';
 
 export const requiredValidator: Validator = {
   attribute: 'required',
   key: 'valueMissing',
   message: 'Please fill out this field',
-  callback(instance: HTMLElement & { required: boolean }, value: any): boolean {
+  callback(instance: HTMLElement & { required: boolean }, value: FormValue): boolean {
     let valid = true;
 
     if ((instance.hasAttribute('required') || instance.required) && !value) {
@@ -30,9 +30,10 @@ export const minLengthValidator: Validator = {
   attribute: 'minlength',
   key: 'rangeUnderflow',
   message(instance: FormControlInterface & { minLength: number }): string {
-    return `Please use at least ${instance.minLength} characters (you are currently using ${instance.value.length} characters).`;
+    const value = instance.value as string || '';
+    return `Please use at least ${instance.minLength} characters (you are currently using ${value.length} characters).`;
   },
-  callback(instance: HTMLElement & { minLength: number }, value): boolean {
+  callback(instance: HTMLElement & { minLength: number }, value: string): boolean {
     /** If no value is provided, this validator should return true */
     if (!value) {
       return true;
@@ -49,10 +50,16 @@ export const minLengthValidator: Validator = {
 export const maxLengthValidator: Validator = {
   attribute: 'maxlength',
   key: 'rangeOverflow',
-  message(instance: FormControlInterface & { maxLength: number }): string {
-    return `Please use no more than ${instance.maxLength} characters (you are currently using ${instance.value.length} characters).`;
+  message(
+    instance: FormControlInterface & { maxLength: number }
+  ): string {
+    const value = instance.value as string || '';
+    return `Please use no more than ${instance.maxLength} characters (you are currently using ${value.length} characters).`;
   },
-  callback(instance: HTMLElement & { maxLength: number }, value: any): boolean {
+  callback(
+    instance: HTMLElement & { maxLength: number },
+    value: string
+  ): boolean {
     /** If maxLength isn't set, this is valid */
     if (!instance.maxLength) {
       return true;
@@ -70,7 +77,7 @@ export const patternValidator: Validator = {
   attribute: 'pattern',
   key: 'patternMismatch',
   message: 'Please match the requested format',
-  callback(instance: HTMLElement & { pattern: string }, value): boolean {
+  callback(instance: HTMLElement & { pattern: string }, value: string): boolean {
     /** If no value is provided, this validator should return true */
     if (!value || !instance.pattern) {
       return true;

packages/form-helpers/src/index.ts

@@ -58,11 +58,11 @@ export const formValues = (form: HTMLFormElement): Record<string, FormValue> =>
  * in declaratively in HTML.
  *
  * @param form {HTMLFormElement} - The form to grab values from
- * @returns {Object<any, any>} - An object representation of the form
+ * @returns {Object<string, FormValue>} - An object representation of the form
  */
 export const parseFormAsObject = (form: HTMLFormElement): Record<string, FormValue> => {
   const data = formValues(form);
-  const output: Record<any, any> = {};
+  const output: Record<string, FormValue> = {};
 
   Object.entries(data).forEach(([key, value]) => {
     /** If the key has a '.', parse it as an object */
@@ -73,8 +73,8 @@ export const parseFormAsObject = (form: HTMLFormElement): Record<string, FormVal
 
       while (path.length) {
         const key = path.shift();
-        pointer[key as string] = pointer[key as string] || {};
-        pointer = pointer[key as string];
+        pointer[key as string] = pointer[key as string] || ({} as FormValue);
+        pointer = pointer[key as string] as unknown as Record<string, FormValue>;
       }
 
       pointer[destination as string] = value;

packages/form-helpers/tests/submit.test.ts

@@ -7,7 +7,7 @@ const submitCallbackPrevented = (event: Event) => {
   event.preventDefault();
   submitted = true;
 };
-const submitCallback = (event: Event) => {
+const submitCallback = () => {
   submitted = true;
 };
 
@@ -19,7 +19,7 @@ describe('The submit form helper', () => {
     form = await fixture<HTMLFormElement>(html`<form @submit="${submitCallback}">
       <input>
     </form>`);
-    formSubmitStub = sinon.stub(form, 'submit').callsFake(() => {});
+    formSubmitStub = sinon.stub(form, 'submit').callsFake(() => { return false; });
     submitted = false;
   });
 
@@ -32,7 +32,6 @@ describe('The submit form helper', () => {
     submit(form);
     await aTimeout(0);
     expect(submitted).to.be.true;
-    // form.submit() is called
     expect(formSubmitStub.callCount).to.equal(1);
   });
 
@@ -56,7 +55,7 @@ describe('The submit form helper', () => {
       <input>
     </form>`);
 
-    formSubmitStub = sinon.stub(form, 'submit').callsFake(() => {});
+    formSubmitStub = sinon.stub(form, 'submit').callsFake(() => { return false; });
 
     submit(form);