chore: 🤖 replace eslint with biome

biome.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "formatter": {
+    "indentWidth": 2,
+    "indentStyle": "space"
+  },
+  "linter": {
+    "rules": {
+      "complexity": {
+        "noForEach": "off"
+      },
+      "style": {
+        "useTemplate": "off"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "semicolons": "asNeeded",
+      "trailingComma": "all"
+    }
+  },
+  "files": {
+    "ignore": [".vscode"]
+  }
+}

cypress/e2e/a11y.cy.ts

@@ -1,10 +1,10 @@
-import { Result, RunOptions } from 'axe-core'
+import type { Result, RunOptions } from 'axe-core'
 
 function terminalLog(violations: Result[]) {
   cy.task(
     'log',
     violations.length === 1
-      ? `1 accessibility violation was detected`
+      ? '1 accessibility violation was detected'
       : `${violations.length} accessibility violations were detected`,
   )
 

package.json

@@ -16,10 +16,12 @@
     "watch:styles": "yarn build:styles --watch",
     "watch:vitest": "vitest",
     "watch": "concurrently 'yarn watch:scripts' 'yarn watch:styles'",
-    "format": "prettier --write '{cypress,src,test}/**/*.{js,jsx,ts,tsx,json,css,md}'",
-    "lint:scripts": "ESLINT_USE_FLAT_CONFIG=false eslint '{cypress,src,test}/**/*.ts'",
-    "lint:styles": "stylelint 'src/**/*.css'",
+    "format": "concurrently 'yarn format:scripts' 'yarn format:styles'",
+    "format:scripts": "biome check --apply .",
+    "format:styles": "prettier --write '{src}/**/*.{css,md}'",
     "lint": "concurrently 'yarn lint:scripts' 'yarn lint:styles'",
+    "lint:scripts": "biome lint .",
+    "lint:styles": "stylelint 'src/**/*.css'",
     "pretest": "yarn lint",
     "test": "concurrently 'yarn test:vitest' 'yarn test:cypress'",
     "test:coverage": "concurrently 'yarn test:vitest --coverage' 'yarn test:cypress'",
@@ -52,34 +54,23 @@
     "defaults"
   ],
   "devDependencies": {
+    "@biomejs/biome": "1.7.3",
     "@commitlint/cli": "19.3.0",
     "@commitlint/config-conventional": "19.2.2",
-    "@pacote/eslint-config": "6.0.1",
     "@rollup/plugin-commonjs": "25.0.7",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-terser": "^0.4.0",
     "@rollup/plugin-typescript": "11.1.6",
     "@testing-library/cypress": "10.0.1",
     "@testing-library/dom": "10.1.0",
     "@testing-library/jest-dom": "^6.1.3",
-    "@typescript-eslint/eslint-plugin": "7.10.0",
-    "@typescript-eslint/parser": "7.10.0",
     "@vitest/coverage-v8": "^1.0.1",
     "axe-core": "4.9.1",
     "concurrently": "8.2.2",
     "cssnano": "7.0.1",
     "cypress": "13.10.0",
     "cypress-axe": "1.5.0",
     "cz-conventional-changelog": "3.3.0",
-    "eslint": "^9.0.0",
-    "eslint-config-prettier": "9.1.0",
-    "eslint-config-standard": "17.1.0",
-    "eslint-plugin-cypress": "3.2.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "17.7.0",
-    "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-testing-library": "6.2.2",
     "git-cz": "^4.9.0",
     "husky": "9.0.11",
     "jsdom": "^24.0.0",

src/dom/document.ts

@@ -1,6 +1,6 @@
-import { footnoteActions, FootnoteElements } from './footnote'
+import { footnoteActions, type FootnoteElements } from './footnote'
 import { bindScrollHandler } from './scroll'
-import { Adapter } from '../use-cases'
+import type { Adapter } from '../use-cases'
 import { addClass, removeClass, unmount } from './element'
 
 export const CLASS_CONTENT = 'littlefoot__content'
@@ -81,11 +81,12 @@ function findReference<E extends Element>(
 ) {
   const processed: E[] = []
   return (link: HTMLAnchorElement): [string, Element, E] | undefined => {
-    const fragment = link.href.split('#')[1]!
-    const related = queryAll<E>(
-      document,
-      '#' + window.CSS.escape(fragment),
-    ).find((footnote) => allowDuplicates || !processed.includes(footnote))
+    const fragment = link.href.split('#')[1]
+    const related = fragment
+      ? queryAll<E>(document, '#' + window.CSS.escape(fragment)).find(
+          (footnote) => allowDuplicates || !processed.includes(footnote),
+        )
+      : undefined
     const body = related?.closest<E>(footnoteSelector)
 
     if (body) {
@@ -97,6 +98,7 @@ function findReference<E extends Element>(
 }
 
 function recursiveHideFootnoteContainer(element: Element): void {
+  // biome-ignore lint/style/noNonNullAssertion: <explanation>
   const container = element.parentElement!
   const visibleElements = children(container, ':not(.' + CLASS_PRINT_ONLY + ')')
   const visibleSeparators = visibleElements.filter((el) => el.tagName === 'HR')
@@ -108,6 +110,7 @@ function recursiveHideFootnoteContainer(element: Element): void {
 }
 
 function recursiveUnmount(element: Element, stopElement: Element) {
+  // biome-ignore lint/style/noNonNullAssertion: <explanation>
   const parent = element.parentElement!
   unmount(element)
   if (parent === stopElement) return

src/dom/events.ts

@@ -1,5 +1,5 @@
 import { throttle } from '@pacote/throttle'
-import { UseCases, FootnoteAction } from '../use-cases'
+import type { UseCases, FootnoteAction } from '../use-cases'
 
 const FRAME = 16
 const SELECTOR_BUTTON = '[data-footnote-button]'

src/dom/footnote.ts

@@ -4,9 +4,9 @@ import {
   repositionTooltip,
   getMaxHeight,
   getLeftInPixels,
-  Position,
+  type Position,
 } from './layout'
-import { Footnote } from '../use-cases'
+import type { Footnote } from '../use-cases'
 import { addClass, removeClass, unmount } from './element'
 
 const CLASS_ACTIVE = 'is-active'

src/dom/layout.ts

@@ -21,7 +21,7 @@ function getAvailableRoom(element: HTMLElement): Room {
 }
 
 export function getLeftRelative(element: HTMLElement): number {
-  const marginLeft = parseFloat(getStyle(element, 'marginLeft'))
+  const marginLeft = Number.parseFloat(getStyle(element, 'marginLeft'))
   const width = element.offsetWidth - marginLeft
   const left = element.getBoundingClientRect().left + width / 2
 
@@ -34,12 +34,12 @@ export function getLeftInPixels(
 ): number {
   const maxWidth = content.offsetWidth
   const leftRelative = getLeftRelative(button)
-  const buttonMarginLeft = parseInt(getStyle(button, 'marginLeft'), 10)
+  const buttonMarginLeft = Number.parseInt(getStyle(button, 'marginLeft'), 10)
   return -leftRelative * maxWidth + buttonMarginLeft + button.offsetWidth / 2
 }
 
 function popoverPosition(footnote: HTMLElement, room: Room): Position {
-  const marginSize = parseInt(getStyle(footnote, 'marginTop'), 10)
+  const marginSize = Number.parseInt(getStyle(footnote, 'marginTop'), 10)
   const totalHeight = 2 * marginSize + footnote.offsetHeight
   return room.below < totalHeight && room.below < room.above ? 'above' : 'below'
 }
@@ -51,7 +51,7 @@ export function getAvailableHeight(
 ): number {
   const room = getAvailableRoom(button)
   const position = popoverPosition(footnote, room)
-  const marginSize = parseInt(getStyle(footnote, 'marginTop'), 10)
+  const marginSize = Number.parseInt(getStyle(footnote, 'marginTop'), 10)
   return Math.min(maxHeight, room[position] - marginSize - 15)
 }
 

src/littlefoot.ts

@@ -1,4 +1,4 @@
-import { DEFAULT_SETTINGS, Settings } from './settings'
+import { DEFAULT_SETTINGS, type Settings } from './settings'
 import { createUseCases } from './use-cases'
 import { setup } from './dom/document'
 import { addListeners } from './dom/events'

src/settings.ts

@@ -1,8 +1,8 @@
-import { UseCaseSettings } from './use-cases'
+import type { UseCaseSettings } from './use-cases'
 import {
   CLASS_CONTENT,
   CLASS_WRAPPER,
-  HTMLAdapterSettings,
+  type HTMLAdapterSettings,
 } from './dom/document'
 import { CLASS_TOOLTIP } from './dom/layout'
 

src/use-cases.ts

@@ -1,6 +1,4 @@
-interface ActionCallback<T> {
-  (popover: T, button: T): void
-}
+type ActionCallback<T> = (popover: T, button: T) => void
 
 export type UseCaseSettings<T> = Readonly<{
   activateCallback?: ActionCallback<T>

test/helper.ts

@@ -1,13 +1,13 @@
 import { expect } from 'vitest'
 import { waitFor, screen } from '@testing-library/dom'
-import { join } from 'path'
-import { readFileSync } from 'fs'
+import { join } from 'node:path'
+import { readFileSync } from 'node:fs'
 import * as matchers from '@testing-library/jest-dom/matchers'
 
 expect.extend(matchers)
 
 export function getPopoverByText(matcher: string | RegExp): HTMLElement {
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  // biome-ignore lint/style/noNonNullAssertion: <explanation>
   return screen
     .getByText(matcher, { selector: '.littlefoot__popover *' })
     .closest<HTMLElement>('[data-footnote-id]')!
@@ -24,7 +24,7 @@ export function getButton(id: string): HTMLElement {
 }
 
 export function getPopover(id: string): HTMLElement {
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  // biome-ignore lint/style/noNonNullAssertion: <explanation>
   return document.querySelector<HTMLElement>(`aside[data-footnote-id="${id}"]`)!
 }
 

test/setup.test.ts

@@ -72,7 +72,7 @@ test('preserves empty tags and square brackets elsewhere in the footnote body',
   const content = getPopover('1').querySelector('.littlefoot__content')
   expect(content?.querySelector('hr')).not.toBeNull()
   expect(content).toContainHTML(
-    `This footnote has a backlink wrapped in [] and an element.`,
+    'This footnote has a backlink wrapped in [] and an element.',
   )
 })
 

test/use-cases.test.ts

@@ -1,9 +1,9 @@
 import { test, expect, afterEach, vi } from 'vitest'
 import {
   createUseCases,
-  Adapter,
-  Footnote,
-  UseCaseSettings,
+  type Adapter,
+  type Footnote,
+  type UseCaseSettings,
 } from '../src/use-cases'
 
 afterEach(() => {