From 15c089d02d5ca3af872113876b9d9e66f4e727f0 Mon Sep 17 00:00:00 2001 From: Simon Reinisch Date: Tue, 19 Nov 2024 16:27:42 +0100 Subject: [PATCH] Prefer arrow functions everywhere and use standard classes in build --- eslint.config.mjs | 5 +++++ package.json | 1 + packages/preact/demo/index.tsx | 6 +++--- packages/react/demo/index.tsx | 6 +++--- packages/vanilla/src/EventEmitter.ts | 2 +- packages/vanilla/src/utils/css.ts | 12 ++---------- packages/vanilla/src/utils/domRect.ts | 1 - packages/vanilla/src/utils/frames.ts | 4 ++-- packages/vanilla/src/utils/intersects.ts | 4 ++-- packages/vanilla/src/utils/selectAll.ts | 4 ++-- packages/vanilla/src/utils/shouldTrigger.ts | 4 ++-- packages/vanilla/tsconfig.json | 2 +- pnpm-lock.yaml | 13 +++++++++++++ 13 files changed, 37 insertions(+), 27 deletions(-) diff --git a/eslint.config.mjs b/eslint.config.mjs index de198b4..c199297 100644 --- a/eslint.config.mjs +++ b/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,6 +22,9 @@ export default [ } } }, + plugins: { + 'prefer-arrow-functions': preferArrowFunctions + }, settings: { react: { version: 'detect' @@ -28,6 +32,7 @@ export default [ }, 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', diff --git a/package.json b/package.json index 485b5ac..ce21752 100644 --- a/package.json +++ b/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", diff --git a/packages/preact/demo/index.tsx b/packages/preact/demo/index.tsx index f1f6274..e78839b 100644 --- a/packages/preact/demo/index.tsx +++ b/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>(() => new Set()); const extractIds = (els: Element[]): number[] => els.map(v => v.getAttribute('data-key')) @@ -42,7 +42,7 @@ function SelectableArea({boxes, offset, className}: { ))} ); -} +}; render( <> diff --git a/packages/react/demo/index.tsx b/packages/react/demo/index.tsx index 7d78d37..31f46ea 100644 --- a/packages/react/demo/index.tsx +++ b/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>(() => new Set()); const extractIds = (els: Element[]): number[] => @@ -43,7 +43,7 @@ function SelectableArea({boxes, offset, className}: { ))} ); -} +}; const root = createRoot(document.getElementById('root') as HTMLElement); diff --git a/packages/vanilla/src/EventEmitter.ts b/packages/vanilla/src/EventEmitter.ts index 46f85ff..aa23931 100644 --- a/packages/vanilla/src/EventEmitter.ts +++ b/packages/vanilla/src/EventEmitter.ts @@ -18,7 +18,7 @@ export class EventTarget { return this; } - public dispatchEvent(event: K, ...data: Parameters): unknown { + public dispatchEvent(event: K, ...data: Parameters): boolean { let ok = true; for (const cb of (this._listeners.get(event) ?? [])) { ok = (cb(...data) !== false) && ok; diff --git a/packages/vanilla/src/utils/css.ts b/packages/vanilla/src/utils/css.ts index 91d6386..dc137c2 100644 --- a/packages/vanilla/src/utils/css.ts +++ b/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> | string, - val?: string | number -): void { +export const css = ({style}: HTMLElement, attr: Partial> | 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); } -} - +}; diff --git a/packages/vanilla/src/utils/domRect.ts b/packages/vanilla/src/utils/domRect.ts index c51f10d..876da5a 100644 --- a/packages/vanilla/src/utils/domRect.ts +++ b/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}; }; diff --git a/packages/vanilla/src/utils/frames.ts b/packages/vanilla/src/utils/frames.ts index 00bbaed..1ff6338 100644 --- a/packages/vanilla/src/utils/frames.ts +++ b/packages/vanilla/src/utils/frames.ts @@ -13,7 +13,7 @@ export const frames = (fn: F): Frames => { let lock = false; return { - next(...args: Parameters): void { + next: (...args: Parameters): void => { previousArgs = args; if (!lock) { @@ -24,7 +24,7 @@ export const frames = (fn: F): Frames => { }); } }, - cancel() { + cancel: () => { cancelAnimationFrame(frameId); lock = false; } diff --git a/packages/vanilla/src/utils/intersects.ts b/packages/vanilla/src/utils/intersects.ts index bf28712..4a67d16 100644 --- a/packages/vanilla/src/utils/intersects.ts +++ b/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; } } -} +}; diff --git a/packages/vanilla/src/utils/selectAll.ts b/packages/vanilla/src/utils/selectAll.ts index 22c35cb..a6a687d 100644 --- a/packages/vanilla/src/utils/selectAll.ts +++ b/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; -} +}; diff --git a/packages/vanilla/src/utils/shouldTrigger.ts b/packages/vanilla/src/utils/shouldTrigger.ts index e0c625f..b9383f9 100644 --- a/packages/vanilla/src/utils/shouldTrigger.ts +++ b/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; -} \ No newline at end of file +}; \ No newline at end of file diff --git a/packages/vanilla/tsconfig.json b/packages/vanilla/tsconfig.json index 3e23413..10b00ef 100644 --- a/packages/vanilla/tsconfig.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8570031..c297375 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -44,6 +44,9 @@ importers: eslint: specifier: 9.13.0 version: 9.13.0 + eslint-plugin-prefer-arrow-functions: + specifier: 3.4.1 + version: 3.4.1(eslint@9.13.0) eslint-plugin-react: specifier: 7.37.2 version: 7.37.2(eslint@9.13.0) @@ -1748,6 +1751,12 @@ packages: resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==} engines: {node: '>=10'} + eslint-plugin-prefer-arrow-functions@3.4.1: + resolution: {integrity: sha512-c8NP0E8xpkRqDq2eDSRr+wA4jwkwOEVNnZx4YY3O0V9M7OhtKdQIj5zmzIXwu+ueURmbwYrnz65sEoLLoIVZpg==} + engines: {node: '>=18.0.0'} + peerDependencies: + eslint: '>=8.0.0' + eslint-plugin-react@7.37.2: resolution: {integrity: sha512-EsTAnj9fLVr/GZleBLFbj/sSuXeWmp1eXIN60ceYnZveqEaUCyW4X+Vh4WTdUhCkW4xutXYqTXCUSyqD4rB75w==} engines: {node: '>=4'} @@ -5851,6 +5860,10 @@ snapshots: escape-string-regexp@4.0.0: {} + eslint-plugin-prefer-arrow-functions@3.4.1(eslint@9.13.0): + dependencies: + eslint: 9.13.0 + eslint-plugin-react@7.37.2(eslint@9.13.0): dependencies: array-includes: 3.1.8