Use Biome

biome.json

@@ -0,0 +1,34 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.7.1/schema.json",
+	"organizeImports": {
+		"enabled": true
+	},
+	"formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "ignore": [],
+    "attributePosition": "auto",
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 80
+	},
+	"javascript": {
+    "formatter": {
+      "arrowParentheses": "always",
+      "bracketSameLine": true,
+      "bracketSpacing": true,
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+			"quoteStyle": "single",
+      "semicolons": "asNeeded",
+      "trailingComma": "all"
+    }
+  },
+	"linter": {
+		"enabled": true,
+		"ignore": ["lib/**", "__tests__/**"],
+		"rules": {
+			"recommended": true
+		}
+	}
+}

package.json

@@ -5,11 +5,12 @@
   "type": "module",
   "packageManager": "[email protected]",
   "scripts": {
-    "lint": "eslint './packages/**/*.ts' './packages/**/*.tsx'",
+    "lint": "biome check --apply ./packages",
     "test": "jest",
     "build": "turbo run build:clean && pnpm run -r build:types && turbo run build:js"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.7.2",
     "@skypack/package-check": "^0.2.2",
     "@swc/cli": "^0.3.12",
     "@swc/core": "^1.3.37",
@@ -19,23 +20,11 @@
     "@types/jest": "^29.4.0",
     "@types/leaflet": "^1.9.1",
     "@types/warning": "^3.0.0",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
     "cross-env": "^7.0.3",
     "del-cli": "^5.0.0",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.4.3",
     "jest-environment-jsdom": "^29.4.3",
     "leaflet": "^1.9.3",
-    "prettier": "^3.2.5",
-    "prettier-eslint": "^16.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-test-renderer": "^18.2.0",

packages/core/__tests__/components.tsx

@@ -2,10 +2,10 @@ import { act, render, screen } from '@testing-library/react'
 import React, { StrictMode, useEffect, useRef } from 'react'
 
 import {
-  createElementHook,
   createContainerComponent,
   createDivOverlayComponent,
   createDivOverlayHook,
+  createElementHook,
   createLeafComponent,
   useLeafletContext,
 } from '../src'

packages/core/package.json

@@ -6,12 +6,7 @@
     "type": "git",
     "url": "https://github.com/PaulLeCam/react-leaflet.git"
   },
-  "keywords": [
-    "react-component",
-    "react",
-    "leaflet",
-    "map"
-  ],
+  "keywords": ["react-component", "react", "leaflet", "map"],
   "author": "Paul Le Cam <[email protected]>",
   "license": "Hippocratic-2.1",
   "bugs": {
@@ -24,9 +19,7 @@
   "exports": {
     ".": "./lib/index.js"
   },
-  "files": [
-    "lib/*"
-  ],
+  "files": ["lib/*"],
   "sideEffects": false,
   "scripts": {
     "build:clean": "del lib",
@@ -50,10 +43,7 @@
     "@types/react-dom": "^18.0.11"
   },
   "jest": {
-    "extensionsToTreatAsEsm": [
-      ".ts",
-      ".tsx"
-    ],
+    "extensionsToTreatAsEsm": [".ts", ".tsx"],
     "resolver": "ts-jest-resolver",
     "testEnvironment": "jsdom",
     "transform": {

packages/core/src/attribution.ts

@@ -1,8 +1,8 @@
-import type { Map } from 'leaflet'
+import type { Map as LeafletMap } from 'leaflet'
 import { useEffect, useRef } from 'react'
 
 export function useAttribution(
-  map: Map,
+  map: LeafletMap,
   attribution: string | null | undefined,
 ) {
   const attributionRef = useRef(attribution)

packages/core/src/circle.ts

@@ -1,9 +1,9 @@
 import type {
-  Circle as LeafletCircle,
-  CircleMarker as LeafletCircleMarker,
   CircleMarkerOptions,
   CircleOptions,
   LatLngExpression,
+  Circle as LeafletCircle,
+  CircleMarker as LeafletCircleMarker,
 } from 'leaflet'
 import type { ReactNode } from 'react'
 

packages/core/src/component.tsx

@@ -43,6 +43,7 @@ export function createDivOverlayComponent<
     const { instance } = useElement(props, setOpen).current
 
     useImperativeHandle(forwardedRef, () => instance)
+    // biome-ignore lint/correctness/useExhaustiveDependencies: update overlay when children change
     useEffect(
       function updateOverlay() {
         if (isOpen) {

packages/core/src/context.ts

@@ -1,4 +1,4 @@
-import type { Control, Layer, LayerGroup, Map } from 'leaflet'
+import type { Control, Layer, LayerGroup, Map as LeafletMap } from 'leaflet'
 import { createContext, useContext } from 'react'
 
 export const CONTEXT_VERSION = 1
@@ -10,14 +10,14 @@ export type ControlledLayer = {
 
 export type LeafletContextInterface = Readonly<{
   __version: number
-  map: Map
+  map: LeafletMap
   layerContainer?: ControlledLayer | LayerGroup
   layersControl?: Control.Layers
   overlayContainer?: Layer
   pane?: string
 }>
 
-export function createLeafletContext(map: Map): LeafletContextInterface {
+export function createLeafletContext(map: LeafletMap): LeafletContextInterface {
   return Object.freeze({ __version: CONTEXT_VERSION, map })
 }
 

packages/core/src/control.ts

@@ -1,4 +1,4 @@
-import { Control, type ControlOptions } from 'leaflet'
+import type { Control, ControlOptions } from 'leaflet'
 import { useEffect, useRef } from 'react'
 
 import { useLeafletContext } from './context.js'

packages/core/src/div-overlay.ts

@@ -1,8 +1,8 @@
 import type { Popup, Tooltip } from 'leaflet'
 
 import { useAttribution } from './attribution.js'
-import { useLeafletContext, type LeafletContextInterface } from './context.js'
-import type { LeafletElement, ElementHook } from './element.js'
+import { type LeafletContextInterface, useLeafletContext } from './context.js'
+import type { ElementHook, LeafletElement } from './element.js'
 import { useEventHandlers } from './events.js'
 import type { LayerProps } from './layer.js'
 import { withPane } from './pane.js'

packages/core/src/dom.ts

@@ -5,15 +5,15 @@ function splitClassName(className: string): string[] {
 }
 
 export function addClassName(element: HTMLElement, className: string) {
-  splitClassName(className).forEach((cls) => {
+  for (const cls of splitClassName(className)) {
     DomUtil.addClass(element, cls)
-  })
+  }
 }
 
 export function removeClassName(element: HTMLElement, className: string) {
-  splitClassName(className).forEach((cls) => {
+  for (const cls of splitClassName(className)) {
     DomUtil.removeClass(element, cls)
-  })
+  }
 }
 
 export function updateClassName(

packages/core/src/element.ts

@@ -60,7 +60,7 @@ export function createElementHook<E, P, C = unknown>(
           propsRef.current = props
         }
       },
-      [instance, props, context],
+      [instance, props, updateElement],
     )
 
     return elementRef

packages/core/src/generic.ts

@@ -14,17 +14,17 @@ import {
 } from './component.js'
 import type { LeafletContextInterface } from './context.js'
 import { createControlHook } from './control.js'
+import {
+  type DivOverlay,
+  type DivOverlayLifecycleHook,
+  createDivOverlayHook,
+} from './div-overlay.js'
 import {
   type LeafletElement,
   createElementHook,
   createElementObject,
 } from './element.js'
 import { type LayerProps, createLayerHook } from './layer.js'
-import {
-  type DivOverlay,
-  type DivOverlayLifecycleHook,
-  createDivOverlayHook,
-} from './div-overlay.js'
 import { type PathProps, createPathHook } from './path.js'
 
 interface LayerWithChildrenProps extends LayerProps, PropsWithChildren {}

packages/core/src/layer.ts

@@ -3,7 +3,7 @@ import { useEffect } from 'react'
 
 import { useAttribution } from './attribution.js'
 import { type LeafletContextInterface, useLeafletContext } from './context.js'
-import type { LeafletElement, ElementHook } from './element.js'
+import type { ElementHook, LeafletElement } from './element.js'
 import { type EventedProps, useEventHandlers } from './events.js'
 import { withPane } from './pane.js'
 

packages/core/src/media-overlay.ts

@@ -1,8 +1,8 @@
 import {
+  type ImageOverlayOptions,
   LatLngBounds,
   type LatLngBoundsExpression,
   type ImageOverlay as LeafletImageOverlay,
-  type ImageOverlayOptions,
   type SVGOverlay as LeafletSVGOverlay,
   type VideoOverlay as LeafletVideoOverlay,
 } from 'leaflet'

packages/core/src/path.ts

@@ -2,7 +2,7 @@ import type { FeatureGroup, Path, PathOptions } from 'leaflet'
 import { useEffect, useRef } from 'react'
 
 import { useLeafletContext } from './context.js'
-import type { LeafletElement, ElementHook } from './element.js'
+import type { ElementHook, LeafletElement } from './element.js'
 import { useEventHandlers } from './events.js'
 import { type InteractiveLayerProps, useLayerLifecycle } from './layer.js'
 import { withPane } from './pane.js'
@@ -15,7 +15,7 @@ export function usePathOptions(
   element: LeafletElement<FeatureGroup | Path>,
   props: PathProps,
 ) {
-  const optionsRef = useRef<PathOptions | void>()
+  const optionsRef = useRef<PathOptions | undefined>()
 
   useEffect(
     function updatePathOptions() {

packages/react-leaflet/__tests__/ScaleControl.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react'
 import React from 'react'
 
-import { ScaleControl, MapContainer } from '../src'
+import { MapContainer, ScaleControl } from '../src'
 
 describe('ScaleControl', () => {
   test('renders and unmounts', () => {

packages/react-leaflet/__tests__/ZoomControl.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react'
 import React from 'react'
 
-import { ZoomControl, MapContainer } from '../src'
+import { MapContainer, ZoomControl } from '../src'
 
 describe('ZoomControl', () => {
   test('renders and unmounts', () => {

packages/react-leaflet/package.json

@@ -6,12 +6,7 @@
     "type": "git",
     "url": "https://github.com/PaulLeCam/react-leaflet.git"
   },
-  "keywords": [
-    "react-component",
-    "react",
-    "leaflet",
-    "map"
-  ],
+  "keywords": ["react-component", "react", "leaflet", "map"],
   "author": "Paul Le Cam <[email protected]>",
   "license": "Hippocratic-2.1",
   "bugs": {
@@ -25,9 +20,7 @@
     ".": "./lib/index.js",
     "./*": "./lib/*.js"
   },
-  "files": [
-    "lib/*"
-  ],
+  "files": ["lib/*"],
   "sideEffects": false,
   "scripts": {
     "build:clean": "del lib",
@@ -56,10 +49,7 @@
     "@types/react-dom": "^18.0.11"
   },
   "jest": {
-    "extensionsToTreatAsEsm": [
-      ".ts",
-      ".tsx"
-    ],
+    "extensionsToTreatAsEsm": [".ts", ".tsx"],
     "resolver": "ts-jest-resolver",
     "testEnvironment": "jsdom",
     "transform": {