chore: Switch to biome for linting and formatting

.github/workflows/ci.yml

@@ -25,11 +25,15 @@ jobs:
           # pnpm test
           # pnpm publint
 
-      - name: Prettier check
-        run: pnpm fmt:check
-
       - name: Type check
         run: pnpm typecheck
 
       - name: Test
         run: pnpm test
+
+  Lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6
+      - uses: biomejs/setup-biome@4c91541eaada48f67d7dbd7833600ce162b68f51 # v2
+      - run: biome ci .

biome.json

@@ -0,0 +1,58 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.4.12/schema.json",
+  "assist": {
+    "actions": {
+      "source": {
+        "organizeImports": "on"
+      }
+    }
+  },
+  "files": {
+    "ignoreUnknown": true,
+    "includes": [
+      "**",
+      "!!**/*.log",
+      "!!**/coverage",
+      "!!**/dist",
+      "!!**/fixtures",
+      "!!**/node_modules"
+    ]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 80
+  },
+  "javascript": {
+    "formatter": {
+      "arrowParentheses": "always",
+      "quoteStyle": "double",
+      "semicolons": "always",
+      "trailingCommas": "all"
+    }
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "style": {
+        "noNonNullAssertion": "off",
+        "useImportType": {
+          "level": "error",
+          "options": {
+            "style": "separatedType"
+          }
+        }
+      },
+      "suspicious": {
+        "noExplicitAny": "off"
+      }
+    }
+  },
+  "vcs": {
+    "clientKind": "git",
+    "enabled": true,
+    "useIgnoreFile": true
+  }
+}

examples/linestring/app.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from "react";
-import { createRoot } from "react-dom/client";
-import { StaticMap, MapContext, NavigationControl } from "react-map-gl";
-import DeckGL, { Layer, PickingInfo } from "deck.gl";
 import { GeoArrowPathLayer } from "@geoarrow/deck.gl-layers";
 import * as arrow from "apache-arrow";
+import type { Layer, PickingInfo } from "deck.gl";
+import DeckGL from "deck.gl";
+import { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { MapContext, NavigationControl, StaticMap } from "react-map-gl";
 
 const GEOARROW_POINT_DATA =
   "http://localhost:8080/ne_10m_roads_north_america.arrow";

examples/multilinestring/app.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from "react";
-import { createRoot } from "react-dom/client";
-import { StaticMap, MapContext, NavigationControl } from "react-map-gl";
-import DeckGL, { Layer } from "deck.gl";
 import { GeoArrowPathLayer } from "@geoarrow/deck.gl-layers";
 import * as arrow from "apache-arrow";
+import type { Layer } from "deck.gl";
+import DeckGL from "deck.gl";
+import { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { MapContext, NavigationControl, StaticMap } from "react-map-gl";
 
 const GEOARROW_MULTILINESTRING_DATA =
   "http://localhost:8080/ne_10m_roads_north_america.feather";
@@ -65,7 +66,7 @@ function Root() {
         getColor: ({ index, data }) => {
           const recordBatch = data.data;
           const row = recordBatch.get(index)!;
-          return COLORS_LOOKUP[row["scalerank"]];
+          return COLORS_LOOKUP[row.scalerank];
         },
         widthMinPixels: 0.8,
         pickable: true,

examples/multipoint/app.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from "react";
-import { createRoot } from "react-dom/client";
-import { StaticMap, MapContext, NavigationControl } from "react-map-gl";
-import DeckGL, { Layer } from "deck.gl";
 import { GeoArrowScatterplotLayer } from "@geoarrow/deck.gl-layers";
 import * as arrow from "apache-arrow";
+import type { Layer } from "deck.gl";
+import DeckGL from "deck.gl";
+import { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { MapContext, NavigationControl, StaticMap } from "react-map-gl";
 
 const GEOARROW_MULTIPOINT_DATA =
   "http://localhost:8080/naturalearth_cities_multipoint.feather";
@@ -75,6 +76,7 @@ function Root() {
       layers={layers}
       // @ts-expect-error
       ContextProvider={MapContext.Provider}
+      onClick={onClick}
     >
       <StaticMap mapStyle={MAP_STYLE} />
       <NavigationControl style={NAV_CONTROL_STYLE} />

examples/multipolygon/app.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from "react";
-import { createRoot } from "react-dom/client";
-import { StaticMap, MapContext, NavigationControl } from "react-map-gl";
-import DeckGL, { Layer, PickingInfo } from "deck.gl";
 import { GeoArrowSolidPolygonLayer } from "@geoarrow/deck.gl-layers";
 import * as arrow from "apache-arrow";
+import type { Layer, PickingInfo } from "deck.gl";
+import DeckGL from "deck.gl";
+import { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { MapContext, NavigationControl, StaticMap } from "react-map-gl";
 
 const GEOARROW_POLYGON_DATA =
   "http://localhost:8080/ne_10m_admin_0_countries.feather";

examples/point/app.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from "react";
-import { createRoot } from "react-dom/client";
-import { StaticMap, MapContext, NavigationControl } from "react-map-gl";
-import DeckGL, { Layer, PickingInfo } from "deck.gl";
 import { GeoArrowScatterplotLayer } from "@geoarrow/deck.gl-layers";
 import * as arrow from "apache-arrow";
+import type { Layer, PickingInfo } from "deck.gl";
+import DeckGL from "deck.gl";
+import { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { MapContext, NavigationControl, StaticMap } from "react-map-gl";
 
 const GEOARROW_POINT_DATA =
   "http://localhost:8080/2019-01-01_performance_mobile_tiles.feather";
@@ -61,7 +62,7 @@ function Root() {
         getRadius: ({ index, data }) => {
           const recordBatch = data.data;
           const row = recordBatch.get(index)!;
-          return row["avg_d_kbps"] / 50;
+          return row.avg_d_kbps / 50;
         },
         radiusMinPixels: 0.1,
         pickable: true,

examples/polygon/app.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from "react";
-import { createRoot } from "react-dom/client";
-import { StaticMap, MapContext, NavigationControl } from "react-map-gl";
-import DeckGL, { Layer, PickingInfo } from "deck.gl";
 import { GeoArrowPolygonLayer } from "@geoarrow/deck.gl-layers";
 import * as arrow from "apache-arrow";
+import type { Layer, PickingInfo } from "deck.gl";
+import DeckGL from "deck.gl";
+import { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { MapContext, NavigationControl, StaticMap } from "react-map-gl";
 
 // const GEOARROW_POLYGON_DATA = "http://localhost:8080/small.feather";
 
@@ -29,7 +30,7 @@ const NAV_CONTROL_STYLE = {
 function Root() {
   const onClick = (info: PickingInfo) => {
     if (info.object) {
-      console.log(info.object["BoroName"]);
+      console.log(info.object.BoroName);
     }
   };
 

examples/text/app.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from "react";
-import { createRoot } from "react-dom/client";
-import { StaticMap, MapContext, NavigationControl } from "react-map-gl";
-import DeckGL, { Layer, PickingInfo } from "deck.gl";
 import { _GeoArrowTextLayer } from "@geoarrow/deck.gl-layers";
 import * as arrow from "apache-arrow";
+import type { Layer, PickingInfo } from "deck.gl";
+import DeckGL from "deck.gl";
+import { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { MapContext, NavigationControl, StaticMap } from "react-map-gl";
 
 const GEOARROW_POLYGON_DATA = "http://localhost:8080/text.arrow";
 

examples/trips/app.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from "react";
-import { createRoot } from "react-dom/client";
-import { StaticMap, MapContext, NavigationControl } from "react-map-gl";
-import DeckGL, { Layer, PickingInfo } from "deck.gl";
 import { GeoArrowTripsLayer } from "@geoarrow/deck.gl-layers";
 import * as arrow from "apache-arrow";
+import type { Layer, PickingInfo } from "deck.gl";
+import DeckGL from "deck.gl";
+import { useEffect, useState } from "react";
+import { createRoot } from "react-dom/client";
+import { MapContext, NavigationControl, StaticMap } from "react-map-gl";
 
 const GEOARROW_POINT_DATA = "http://localhost:8080/trips.feather";
 
@@ -32,12 +33,12 @@ function Root() {
   const [time, setTime] = useState(0);
   const [animation] = useState<{ id: number }>({ id: 0 });
 
-  const animate = () => {
-    setTime((t) => (t + animationSpeed) % loopLength);
-    animation.id = window.requestAnimationFrame(animate);
-  };
-
   useEffect(() => {
+    const animate = () => {
+      setTime((t) => (t + animationSpeed) % loopLength);
+      animation.id = window.requestAnimationFrame(animate);
+    };
+
     animation.id = window.requestAnimationFrame(animate);
     return () => window.cancelAnimationFrame(animation.id);
   }, [animation]);

package.json

@@ -3,11 +3,17 @@
   "private": true,
   "scripts": {
     "build": "cd packages/deck.gl-layers && pnpm build",
+    "check:fix": "biome check --write .",
+    "check": "biome check .",
     "clean": "rimraf dist packages/deck.gl-layers/dist",
     "docs:build": "typedoc",
     "docs:publish": "gh-pages -d docs_build",
     "fmt:check": "prettier '**/*.ts' --check",
     "fmt": "prettier '**/*.ts' --write",
+    "format:fix": "biome format --write .",
+    "format": "biome format .",
+    "lint:fix": "biome lint --write .",
+    "lint": "biome lint .",
     "prepublishOnly": "pnpm clean && pnpm build",
     "test": "vitest run",
     "typecheck": "tsc --build",
@@ -21,12 +27,12 @@
   "author": "Kyle Barron <kylebarron2@gmail.com>",
   "license": "MIT",
   "devDependencies": {
+    "@biomejs/biome": "^2.4.11",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.3",
     "@rollup/plugin-typescript": "^11.1.2",
     "gh-pages": "^6.1.0",
-    "prettier": "^3.1.0",
     "rimraf": "^5.0.5",
     "rollup": "^3.26.2",
     "rollup-plugin-dts": "^5.3.0",

packages/deck.gl-layers/rollup.config.js

@@ -1,8 +1,8 @@
+import commonjs from "@rollup/plugin-commonjs";
+import { nodeResolve } from "@rollup/plugin-node-resolve";
 import terser from "@rollup/plugin-terser";
 import typescript from "@rollup/plugin-typescript";
 import dts from "rollup-plugin-dts";
-import { nodeResolve } from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
 
 const input = "./src/index.ts";
 const sourcemap = true;

packages/deck.gl-layers/src/layers/a5-layer.ts

@@ -2,21 +2,26 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {
-  CompositeLayer,
+import type {
   CompositeLayerProps,
   DefaultProps,
   GetPickingInfoParams,
   Layer,
   LayersList,
 } from "@deck.gl/core";
+import { CompositeLayer } from "@deck.gl/core";
 import type { A5LayerProps } from "@deck.gl/geo-layers";
 import { A5Layer } from "@deck.gl/geo-layers";
 import * as arrow from "apache-arrow";
 
-import { ColorAccessor, FloatAccessor, GeoArrowPickingInfo } from "../types";
+import type {
+  ColorAccessor,
+  FloatAccessor,
+  GeoArrowPickingInfo,
+} from "../types";
+import type { GeoArrowExtraPickingProps } from "../utils/picking";
+import { getPickingInfo } from "../utils/picking";
 import { assignAccessor, extractAccessorsFromProps } from "../utils/utils";
-import { GeoArrowExtraPickingProps, getPickingInfo } from "../utils/picking";
 import { validateAccessors } from "../utils/validate";
 
 /** All properties supported by GeoArrowA5Layer */
@@ -93,9 +98,9 @@ const defaultProps: DefaultProps<GeoArrowA5LayerProps> = {
   ...ourDefaultProps,
 };
 
-export class GeoArrowA5Layer<ExtraProps extends {} = {}> extends CompositeLayer<
-  GeoArrowA5LayerProps & ExtraProps
-> {
+export class GeoArrowA5Layer<
+  ExtraProps extends object = Record<string, never>,
+> extends CompositeLayer<GeoArrowA5LayerProps & ExtraProps> {
   static defaultProps = defaultProps;
   static layerName = "GeoArrowA5Layer";
 
@@ -107,11 +112,11 @@ export class GeoArrowA5Layer<ExtraProps extends {} = {}> extends CompositeLayer<
     return getPickingInfo(params, this.props.data);
   }
 
-  renderLayers(): Layer<{}> | LayersList | null {
+  renderLayers(): Layer<object> | LayersList | null {
     return this._renderLayer();
   }
 
-  _renderLayer(): Layer<{}> | LayersList | null {
+  _renderLayer(): Layer<object> | LayersList | null {
     const { data: batch, getPentagon } = this.props;
 
     if (this.props._validate) {