Prefer arrow functions everywhere and use standard classes in build

eslint.config.mjs

@@ -3,6 +3,7 @@ import ts from 'typescript-eslint';
 import react from 'eslint-plugin-react';
 import vue from 'eslint-plugin-vue';
 import tsParser from '@typescript-eslint/parser';
+import preferArrowFunctions from 'eslint-plugin-prefer-arrow-functions';
 
 export default [
   js.configs.recommended,
@@ -21,13 +22,17 @@ export default [
         }
       }
     },
+    plugins: {
+      'prefer-arrow-functions': preferArrowFunctions
+    },
     settings: {
       react: {
         version: 'detect'
       }
     },
     rules: {
       '@typescript-eslint/no-non-null-assertion': 'off',
+      'prefer-arrow-functions/prefer-arrow-functions': 'error',
       'react/react-in-jsx-scope': 'off',
       'react/prop-types': 'off',
       'no-console': 'error',

package.json

@@ -30,6 +30,7 @@
         "@vue/compiler-sfc": "3.5.12",
         "@vue/eslint-config-typescript": "14.1.3",
         "eslint": "9.13.0",
+        "eslint-plugin-prefer-arrow-functions": "3.4.1",
         "eslint-plugin-react": "7.37.2",
         "eslint-plugin-vue": "9.30.0",
         "lerna": "8.1.8",

packages/preact/demo/index.tsx

@@ -3,11 +3,11 @@ import {useState} from 'preact/hooks';
 import SelectionArea, {SelectionEvent} from '../src';
 import './index.css';
 
-function SelectableArea({boxes, offset, className}: {
+const SelectableArea = ({boxes, offset, className}: {
     boxes: number;
     offset: number;
     className: string;
-}) {
+}) => {
     const [selected, setSelected] = useState<Set<number>>(() => new Set());
     const extractIds = (els: Element[]): number[] =>
         els.map(v => v.getAttribute('data-key'))
@@ -42,7 +42,7 @@ function SelectableArea({boxes, offset, className}: {
             ))}
         </SelectionArea>
     );
-}
+};
 
 render(
     <>

packages/react/demo/index.tsx

@@ -3,11 +3,11 @@ import {createRoot} from 'react-dom/client';
 import SelectionArea, {SelectionEvent} from '../src';
 import './index.css';
 
-function SelectableArea({boxes, offset, className}: {
+const SelectableArea = ({boxes, offset, className}: {
     boxes: number;
     offset: number;
     className: string;
-}) {
+}) => {
     const [selected, setSelected] = useState<Set<number>>(() => new Set());
 
     const extractIds = (els: Element[]): number[] =>
@@ -43,7 +43,7 @@ function SelectableArea({boxes, offset, className}: {
             ))}
         </SelectionArea>
     );
-}
+};
 
 
 const root = createRoot(document.getElementById('root') as HTMLElement);

packages/vanilla/src/EventEmitter.ts

@@ -18,7 +18,7 @@ export class EventTarget<Events extends EventMap> {
         return this;
     }
 
-    public dispatchEvent<K extends keyof Events>(event: K, ...data: Parameters<Events[K]>): unknown {
+    public dispatchEvent<K extends keyof Events>(event: K, ...data: Parameters<Events[K]>): boolean {
         let ok = true;
         for (const cb of (this._listeners.get(event) ?? [])) {
             ok = (cb(...data) !== false) && ok;

packages/vanilla/src/utils/css.ts

@@ -11,25 +11,17 @@ const unitify = (val: string | number, unit = 'px'): string => {
  * @param val The value for a single attribute.
  * @returns {*}
  */
-export function css(
-    {style}: HTMLElement,
-    attr: Partial<Record<keyof CSSStyleDeclaration, string | number>> | string,
-    val?: string | number
-): void {
+export const css = ({style}: HTMLElement, attr: Partial<Record<keyof CSSStyleDeclaration, string | number>> | string, val?: string | number): void => {
     if (typeof attr === 'object') {
-
         for (const [key, value] of Object.entries(attr)) {
             if (value !== undefined) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 style[key as any] = unitify(value);
             }
-
         }
-
     } else if (val !== undefined) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         style[attr as any] = unitify(val);
     }
-}
-
+};
 

packages/vanilla/src/utils/domRect.ts

@@ -2,6 +2,5 @@
 export const domRect = (x = 0, y = 0, width = 0, height = 0): DOMRect => {
     const rect = {x, y, width, height, top: y, left: x, right: x + width, bottom: y + height};
     const toJSON = () => JSON.stringify(rect);
-
     return {...rect, toJSON};
 };

packages/vanilla/src/utils/frames.ts

@@ -13,7 +13,7 @@ export const frames = <F extends AnyFunction>(fn: F): Frames<F> => {
     let lock = false;
 
     return {
-        next(...args: Parameters<F>): void {
+        next: (...args: Parameters<F>): void => {
             previousArgs = args;
 
             if (!lock) {
@@ -24,7 +24,7 @@ export const frames = <F extends AnyFunction>(fn: F): Frames<F> => {
                 });
             }
         },
-        cancel() {
+        cancel: () => {
             cancelAnimationFrame(frameId);
             lock = false;
         }

packages/vanilla/src/utils/intersects.ts

@@ -7,7 +7,7 @@ export type Intersection = 'center' | 'cover' | 'touch'
  * @param mode Options are center, cover or touch.
  * @returns {boolean} If both elements intersects each other.
  */
-export function intersects(a: DOMRect, b: DOMRect, mode: Intersection = 'touch'): boolean {
+export const intersects = (a: DOMRect, b: DOMRect, mode: Intersection = 'touch'): boolean => {
     switch (mode) {
         case 'center': {
             const bxc = b.left + b.width / 2;
@@ -31,4 +31,4 @@ export function intersects(a: DOMRect, b: DOMRect, mode: Intersection = 'touch')
                 a.top <= b.bottom;
         }
     }
-}
+};

packages/vanilla/src/utils/selectAll.ts

@@ -6,7 +6,7 @@ export type SelectAllSelectors = readonly (string | Element)[] | string | Elemen
  * @param doc
  * @returns {Array} Array of DOM-Nodes.
  */
-export function selectAll(selector: SelectAllSelectors, doc: Document = document): Element[] {
+export const selectAll = (selector: SelectAllSelectors, doc: Document = document): Element[] => {
     const list = !Array.isArray(selector) ? [selector] : selector;
     let nodes: Element[] = [];
 
@@ -25,4 +25,4 @@ export function selectAll(selector: SelectAllSelectors, doc: Document = document
     }
 
     return nodes;
-}
+};

packages/vanilla/src/utils/shouldTrigger.ts

@@ -8,7 +8,7 @@ import {Trigger} from '../types';
  * @param triggers A list of Triggers that signify that the event should execute until completion
  * @returns Whether the MouseEvent should execute until completion
  */
-export function shouldTrigger(event: MouseEvent, triggers: Trigger[]): boolean {
+export const shouldTrigger = (event: MouseEvent, triggers: Trigger[]): boolean => {
     for (const trigger of triggers) {
         // The trigger requires only a specific button to be pressed
         if (typeof trigger === 'number') {
@@ -36,4 +36,4 @@ export function shouldTrigger(event: MouseEvent, triggers: Trigger[]): boolean {
 
     // By default, we do not process the event
     return false;
-}
+};

packages/vanilla/tsconfig.json

@@ -2,7 +2,7 @@
     "include": ["src", "demo"],
     "compilerOptions": {
         "target": "ESNext",
-        "useDefineForClassFields": true,
+        "useDefineForClassFields": false,
         "module": "ESNext",
         "lib": ["ESNext", "DOM"],
         "moduleResolution": "Node",