fix(eslint-config): add more formatting rules (#2441)

* fix(eslint-config): add more formatting rules

* style: lint typescript/javascript files

Author: bennypowers

.changeset/eslint-config-more-rules.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/eslint-config-elements": patch
+---
+Added more formatting rules (infix spacing and type annotation spacing).

core/pfe-core/controllers/cascade-controller.ts

@@ -5,7 +5,7 @@ import { debounce } from '../functions/debounce.js';
 import { Logger } from './logger.js';
 
 export interface Options<E extends ReactiveElement> {
-  properties: Partial<Record<keyof E, string|string[]>>;
+  properties: Partial<Record<keyof E, string | string[]>>;
   prefix?: string;
 }
 
@@ -49,7 +49,7 @@ export class CascadeController<E extends ReactiveElement> implements ReactiveCon
    * Handles the cascading of properties to nested components when new elements are added
    * Attribute updates/additions are handled by the attribute callback
    */
-  cascadeProperties(nodeList: HTMLCollection|NodeList = this.host.children) {
+  cascadeProperties(nodeList: HTMLCollection | NodeList = this.host.children) {
     if (this.host.isConnected) {
       const selectors = this.cache.keys();
 
@@ -84,7 +84,7 @@ export class CascadeController<E extends ReactiveElement> implements ReactiveCon
    * falling back to the lowercased property name, and caches the attribute name
    * with it's designated child selectors for value-propagation on change
    */
-  initProp(propName: string, cascade: string|string[]) {
+  initProp(propName: string, cascade: string | string[]) {
     for (const nodeItem of [cascade].flat(Infinity).filter(Boolean) as string[]) {
       const { attribute } = this.class.getPropertyOptions(propName);
 

core/pfe-core/controllers/floating-dom-controller.ts

@@ -14,7 +14,7 @@ import {
   flip as flipMiddleware,
 } from '@floating-ui/dom';
 
-type Lazy<T> = T|(() => T|null|undefined);
+type Lazy<T> = T | (() => T | null | undefined);
 
 interface FloatingDOMControllerOptions {
   content: Lazy<HTMLElement>;
@@ -30,8 +30,8 @@ interface ShowOptions {
   placement?: Placement;
 }
 
-export type Anchor = ''|'top'|'left'|'bottom'|'right';
-export type Alignment = 'center'|'start'|'end';
+export type Anchor = '' | 'top' | 'left' | 'bottom' | 'right';
+export type Alignment = 'center' | 'start' | 'end';
 
 /**
  * Controls floating DOM within a web component, e.g. tooltips and popovers

core/pfe-core/controllers/light-dom-controller.ts

@@ -3,7 +3,7 @@ import type { ReactiveController, ReactiveElement } from 'lit';
 import { Logger } from './logger.js';
 
 export interface Options {
-  observe?: boolean|MutationObserverInit;
+  observe?: boolean | MutationObserverInit;
   emptyWarning?: string;
 }
 

core/pfe-core/controllers/roving-tabindex-controller.ts

@@ -161,7 +161,7 @@ export class RovingTabindexController implements ReactiveController {
   /**
    * sets tabindex of item based on whether or not it is active
    */
-  updateActiveItem(item?: HTMLElement):void {
+  updateActiveItem(item?: HTMLElement): void {
     if (item) {
       if (!!this.#activeItem && item !== this.#activeItem) {
         this.#activeItem.tabIndex = -1;
@@ -174,7 +174,7 @@ export class RovingTabindexController implements ReactiveController {
   /**
    * focuses on an item and sets it as active
    */
-  focusOnItem(item?: HTMLElement):void {
+  focusOnItem(item?: HTMLElement): void {
     this.updateActiveItem(item || this.firstItem);
     this.#activeItem?.focus();
   }

core/pfe-core/controllers/scroll-spy-controller.ts

@@ -22,7 +22,7 @@ export interface ScrollSpyControllerOptions extends IntersectionObserverInit {
    * function to call on link children to get their URL hash (i.e. id to scroll to)
    * @default el => el.getAttribute('href');
    */
-  getHash?: (el: Element) => string|null;
+  getHash?: (el: Element) => string | null;
 }
 
 export class ScrollSpyController implements ReactiveController {
@@ -42,10 +42,10 @@ export class ScrollSpyController implements ReactiveController {
 
   #root: ScrollSpyControllerOptions['root'];
   #rootMargin?: string;
-  #threshold: number|number[];
+  #threshold: number | number[];
 
   #rootNode: Node;
-  #getHash: (el: Element) => string|null;
+  #getHash: (el: Element) => string | null;
 
   get #linkChildren(): Element[] {
     return Array.from(this.host.querySelectorAll(this.#tagNames.join(',')))
@@ -122,7 +122,7 @@ export class ScrollSpyController implements ReactiveController {
     }
   }
 
-  #setActive(link?: EventTarget|null) {
+  #setActive(link?: EventTarget | null) {
     for (const child of this.#linkChildren) {
       child.toggleAttribute(this.#activeAttribute, child === link);
     }
@@ -154,7 +154,7 @@ export class ScrollSpyController implements ReactiveController {
   }
 
   /** Explicitly set the active item */
-  public async setActive(link: EventTarget|null) {
+  public async setActive(link: EventTarget | null) {
     this.#force = true;
     this.#setActive(link);
     let sawActive = false;

core/pfe-core/controllers/slot-controller.ts

@@ -6,18 +6,18 @@ import { Logger } from './logger.js';
 interface AnonymousSlot {
   hasContent: boolean;
   elements: Element[];
-  slot: HTMLSlotElement|null;
+  slot: HTMLSlotElement | null;
 }
 
 interface NamedSlot extends AnonymousSlot {
   name: string;
   initialized: true;
 }
 
-export type Slot = NamedSlot|AnonymousSlot;
+export type Slot = NamedSlot | AnonymousSlot;
 
 export interface SlotsConfig {
-  slots: (string|null)[];
+  slots: (string | null)[];
   /**
    * Object mapping new slot name keys to deprecated slot name values
    * @example `pf-modal--header` is deprecated in favour of `header`
@@ -33,7 +33,7 @@ export interface SlotsConfig {
   deprecations?: Record<string, string>;
 }
 
-function isObjectConfigSpread(config: ([SlotsConfig]|(string|null)[])): config is [SlotsConfig] {
+function isObjectConfigSpread(config: ([SlotsConfig] | (string | null)[])): config is [SlotsConfig] {
   return config.length === 1 && typeof config[0] === 'object' && config[0] !== null;
 }
 
@@ -42,27 +42,27 @@ function isObjectConfigSpread(config: ([SlotsConfig]|(string|null)[])): config i
  * for the default slot, look for direct children not assigned to a slot
  */
 const isSlot =
-  <T extends Element = Element>(n: string|typeof SlotController.anonymous) =>
+  <T extends Element = Element>(n: string | typeof SlotController.anonymous) =>
     (child: Element): child is T =>
         n === SlotController.anonymous ? !child.hasAttribute('slot')
       : child.getAttribute('slot') === n;
 
 export class SlotController implements ReactiveController {
   public static anonymous = Symbol('anonymous slot');
 
-  private nodes = new Map<string|typeof SlotController.anonymous, Slot>();
+  private nodes = new Map<string | typeof SlotController.anonymous, Slot>();
 
   private logger: Logger;
 
   private firstUpdated = false;
 
   private mo = new MutationObserver(this.onMutation);
 
-  private slotNames: (string|null)[];
+  private slotNames: (string | null)[];
 
   private deprecations: Record<string, string> = {};
 
-  constructor(public host: ReactiveElement, ...config: ([SlotsConfig]|(string|null)[])) {
+  constructor(public host: ReactiveElement, ...config: ([SlotsConfig] | (string | null)[])) {
     this.logger = new Logger(this.host);
 
     if (isObjectConfigSpread(config)) {
@@ -163,12 +163,12 @@ export class SlotController implements ReactiveController {
     }
   }
 
-  private getChildrenForSlot<T extends Element = Element>(name: string|typeof SlotController.anonymous): T[] {
+  private getChildrenForSlot<T extends Element = Element>(name: string | typeof SlotController.anonymous): T[] {
     const children = Array.from(this.host.children) as T[];
     return children.filter(isSlot(name));
   }
 
-  @bound private initSlot(slotName: string|null) {
+  @bound private initSlot(slotName: string | null) {
     const name = slotName || SlotController.anonymous;
     const elements = this.nodes.get(name)?.slot?.assignedElements?.() ?? this.getChildrenForSlot(name);
     const selector = slotName ? `slot[name="${slotName}"]` : 'slot:not([name])';

core/pfe-core/core.ts

@@ -13,7 +13,7 @@ export interface PfeConfig {
 const noPref = Symbol();
 
 /** Retrieve an HTML metadata item */
-function getMeta(name: string): string|undefined {
+function getMeta(name: string): string | undefined {
   return document.head.querySelector<HTMLMetaElement>(`meta[name="${name}"]`)?.content;
 }
 
@@ -33,7 +33,7 @@ export function trackPerformance(preference: boolean | typeof noPref = noPref) {
  * A LitElement property converter which represents a list of numbers as a comma separated string
  * @see https://lit.dev/docs/components/properties/#conversion-converter
  */
-export const NumberListConverter: ComplexAttributeConverter<null|number[]> = {
+export const NumberListConverter: ComplexAttributeConverter<null | number[]> = {
   fromAttribute(value: string) {
     if (typeof value !== 'string') {
       return null;

core/pfe-core/decorators/observed.ts

@@ -40,7 +40,7 @@ type TypedFieldDecorator<T> = (proto: T, key: string | keyof T) => void ;
 export function observed<T extends ReactiveElement>(methodName: string): TypedFieldDecorator<T>
 export function observed<T extends ReactiveElement>(cb: ChangeCallback<T>): TypedFieldDecorator<T>
 export function observed<T extends ReactiveElement>(proto: T, key: string): void
-export function observed<T extends ReactiveElement>(...as: any[]): void|TypedFieldDecorator<T> {
+export function observed<T extends ReactiveElement>(...as: any[]): void | TypedFieldDecorator<T> {
   /** @observed('_myCustomChangeCallback') */
   if (as.length === 1) {
     const [methodNameOrCallback] = as;

core/pfe-core/functions/debounce.ts

@@ -11,7 +11,7 @@ export function debounce(
   delay: number,
   immediate = false
 ) {
-  let timeout: number|null;
+  let timeout: number | null;
   return function(this: unknown, ...args: any[]) {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const context = this;