chore: Replace eslint/prettier with biome (#796)

* chore: Replace eslint/prettier with biome

* ci: Update Linting action

* chore: Apply formatting

* chore: Repair unsafe fix

.github/workflows/ci.yml

@@ -32,15 +32,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v3
-        with:
-          version: 7
-      - uses: actions/setup-node@v4
+      - uses: biomejs/setup-biome@v2
         with:
-          node-version: 18
-      - run: |
-          pnpm install
-          pnpm lint
+          version: latest
+      - run: biome ci .
 
   Test:
     runs-on: ubuntu-20.04

.meta-updater/main.mjs

@@ -3,7 +3,6 @@ const LUMAGL_VERSION = '~8.5.21';
 const MATHGL_VERSION = '^3.5.7';
 const REACT_VERSION = '^16.8.0 || ^17.0.0';
 
-
 /** @typedef {import('@pnpm/types').PackageManifest} PackageManifest */
 
 /**
@@ -12,9 +11,13 @@ const REACT_VERSION = '^16.8.0 || ^17.0.0';
  * @param {PackageManifest} manifest
  */
 function pinVersions(manifest) {
-  for (let key of /** @type {const} */ (['dependencies', 'devDependencies', 'peerDependencies'])) {
-    let deps = manifest[key] ?? {};
-    for (let name of Object.keys(deps)) {
+  for (const key of /** @type {const} */ ([
+    'dependencies',
+    'devDependencies',
+    'peerDependencies'
+  ])) {
+    const deps = manifest[key] ?? {};
+    for (const name of Object.keys(deps)) {
       if (name.startsWith('@deck.gl/') || name === 'deck.gl') {
         deps[name] = DECK_VERSION;
       }

biome.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.7.3/schema.json",
+  "organizeImports": {
+    "enabled": false
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "complexity": {
+        "useLiteralKeys": "off",
+        "noForEach": "off"
+      },
+      "suspicious": {
+        "noExportsInTest": "off"
+      }
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "javascript": {
+    "formatter": {
+      "trailingComma": "none",
+      "arrowParentheses": "asNeeded",
+      "quoteStyle": "single"
+    }
+  },
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignore": ["package.json"]
+  }
+}

package.json

@@ -16,9 +16,7 @@
     "build": "pnpm -r --parallel build",
     "clean": "pnpm -r exec -- rm -rf node_modules",
     "test": "pnpm -r --parallel test",
-    "check-format": "prettier --check --ignore-path .gitignore tsconfig.json sites/avivator packages/",
-    "lint": "npm run check-format && eslint \"packages/*/src/**/*\" \"sites/avivator/src/**/*\"",
-    "format": "npm run check-format -- --write",
+    "fix": "biome check --apply .",
     "version": "node ./scripts/version.mjs",
     "publish": "pnpm build && pnpm changeset publish"
   },
@@ -33,6 +31,7 @@
     "@luma.gl/webgl": "~8.5.21"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.7.3",
     "@changesets/cli": "^2.27.1",
     "@deck.gl/extensions": "~8.8.27",
     "@deck.gl/mesh-layers": "~8.8.27",
@@ -44,16 +43,10 @@
     "@pnpm/types": "^10.0.0",
     "@probe.gl/test-utils": "^3.5.0",
     "@svitejs/changesets-changelog-github-compact": "^1.1.0",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.13.1",
     "esbuild": "^0.19.5",
-    "eslint": "^8.53.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
     "esno": "^4.0.0",
     "gl": "^6.0.2",
     "gray-matter": "^4.0.3",
-    "prettier": "^3.2.5",
     "tap-spec": "^5.0.0",
     "tape": "^5.5.3",
     "tape-catch": "^1.0.6",
@@ -73,11 +66,5 @@
         "@loaders.gl/core": "3.2"
       }
     }
-  },
-  "prettier": {
-    "singleQuote": true,
-    "trailingComma": "none",
-    "arrowParens": "avoid"
-  },
-  "sideEffects": false
+  }
 }

packages/extensions/prepare.mjs

@@ -23,13 +23,13 @@ const files = (await fsp.readdir(dir)).filter(fname => fname.endsWith('.glsl'));
 console.log(`Writing each ${YELLOW}\`glsl-colormap\`${RESET} to ${outfile}\n`);
 
 for (const file of files) {
-  let contents = await fsp.readFile(path.resolve(dir, file), {
+  const contents = await fsp.readFile(path.resolve(dir, file), {
     encoding: 'utf-8'
   });
   // find colormap name
   const name = contents.match(/^vec4 (.*) \(.*\{$/m)[1];
   const impl = contents
-    .replace(`vec4 ${name}`, `vec4 apply_cmap`) // replace colormap fn name
+    .replace(`vec4 ${name}`, 'vec4 apply_cmap') // replace colormap fn name
     .replace(/^#pragma glslify.*\n/gm, ''); // strip off glslify export
 
   await fh.write(`export const ${name} = \`\\\n${impl}\`;\n`);

packages/extensions/src/additive-colormap-extension/additive-colormap-extension.js

@@ -90,7 +90,6 @@ const AdditiveColormapExtension = class extends LayerExtension {
       opacity,
       useTransparentColor
     };
-    // eslint-disable-next-line no-unused-expressions
     this.state.model?.setUniforms(uniforms);
   }
 };

packages/extensions/src/color-palette-3d-extensions/additive-blend-extension.js

@@ -1,6 +1,6 @@
 import BaseExtension from './base-extension';
 
-const _BEFORE_RENDER = ``;
+const _BEFORE_RENDER = '';
 
 const _RENDER = `\
   vec3 rgbCombo = vec3(0.0);
@@ -24,7 +24,7 @@ const _RENDER = `\
   }
 `;
 
-const _AFTER_RENDER = ``;
+const _AFTER_RENDER = '';
 
 /**
  * This deck.gl extension allows for a color palette to be used for rendering in 3D with additive blending.

packages/extensions/src/color-palette-3d-extensions/base-extension.js

@@ -27,7 +27,6 @@ const BaseExtension = class extends LayerExtension {
     const uniforms = {
       colors: paddedColors
     };
-    // eslint-disable-next-line no-unused-expressions
     this.state.model?.setUniforms(uniforms);
   }
 };

packages/extensions/src/color-palette-extension/color-palette-extension.js

@@ -44,7 +44,6 @@ const ColorPaletteExtension = class extends LayerExtension {
       transparentColor: (transparentColor || [0, 0, 0]).map(i => i / 255),
       useTransparentColor: Boolean(useTransparentColor)
     };
-    // eslint-disable-next-line no-unused-expressions
     this.state.model?.setUniforms(uniforms);
   }
 };

packages/extensions/src/lens-extension/lens-extension.js

@@ -127,7 +127,6 @@ const LensExtension = class extends LayerExtension {
       lensBorderRadius,
       colors: paddedColors
     };
-    // eslint-disable-next-line no-unused-expressions
     this.state.model?.setUniforms(uniforms);
   }
 

packages/extensions/src/utils.js

@@ -22,7 +22,7 @@ export function padWithDefault(arr, defaultValue, padWidth) {
 }
 
 /** @type {Color[]} */
-// prettier-ignore
+// biome-ignore format: Nicely formatted color palette
 const COLOR_PALETTE = [
   [  0,   0, 255], // blue
   [  0, 255,   0], // green

packages/layers/src/bitmap-layer.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line max-classes-per-file
 import { BitmapLayer as BaseBitmapLayer } from '@deck.gl/layers';
 import { COORDINATE_SYSTEM, CompositeLayer } from '@deck.gl/core';
 import { Model, Geometry } from '@luma.gl/core';

packages/layers/src/image-layer.js

@@ -86,7 +86,6 @@ const ImageLayer = class extends CompositeLayer {
 
           if (isInterleaved(loader.shape)) {
             // data is for BitmapLayer and needs to be of form { data: Uint8Array, width, height };
-            // eslint-disable-next-line prefer-destructuring
             raster.data = raster.data[0];
             if (raster.data.length === raster.width * raster.height * 3) {
               // data is RGB (not RGBA) and need to update texture formats
@@ -108,11 +107,8 @@ const ImageLayer = class extends CompositeLayer {
     }
   }
 
-  // eslint-disable-next-line class-methods-use-this
   getPickingInfo({ info, sourceLayer }) {
-    // eslint-disable-next-line no-param-reassign
     info.sourceLayer = sourceLayer;
-    // eslint-disable-next-line no-param-reassign
     info.tile = sourceLayer.props.tile;
     return info;
   }

packages/layers/src/multiscale-image-layer/multiscale-image-layer.js

@@ -106,7 +106,6 @@ const MultiscaleImageLayer = class extends CompositeLayer {
         };
 
         if (isInterleaved(loader[resolution].shape)) {
-          // eslint-disable-next-line prefer-destructuring
           tile.data = tile.data[0];
           if (tile.data.length === tile.width * tile.height * 3) {
             tile.format = GL.RGB;

packages/layers/src/utils.js

@@ -46,7 +46,7 @@ export function padContrastLimits({
   domain,
   dtype
 }) {
-  const maxSliderValue = (domain && domain[1]) || getDtypeValues(dtype).max;
+  const maxSliderValue = domain?.[1] || getDtypeValues(dtype).max;
   const newContrastLimits = contrastLimits.map((slider, i) =>
     channelsVisible[i]
       ? slider

packages/layers/src/volume-layer/volume-layer.js

@@ -104,7 +104,6 @@ const VolumeLayer = class extends CompositeLayer {
       const source = loader[resolution];
       let progress = 0;
       const totalRequests =
-        // eslint-disable-next-line no-bitwise
         (source.shape[source.labels.indexOf('z')] >> resolution) *
         selections.length;
       const onUpdate = () => {

packages/layers/src/xr-3d-layer/xr-3d-layer.js

@@ -48,7 +48,7 @@ const channelsModule = {
   `
 };
 
-// prettier-ignore
+// biome-ignore format: Avoid reformatting to keep the rows clear
 const CUBE_STRIP = [
 	1, 1, 0,
 	0, 1, 0,
@@ -138,7 +138,8 @@ const XR3DLayer = class extends Layer {
     gl.pixelStorei(GL.UNPACK_ALIGNMENT, 1);
     gl.pixelStorei(GL.PACK_ALIGNMENT, 1);
     const programManager = ProgramManager.getDefaultProgramManager(gl);
-    const processStr = `fs:DECKGL_PROCESS_INTENSITY(inout float intensity, vec2 contrastLimits, int channelIndex)`;
+    const processStr =
+      'fs:DECKGL_PROCESS_INTENSITY(inout float intensity, vec2 contrastLimits, int channelIndex)';
     if (!programManager._hookFunctions.includes(processStr)) {
       programManager.addShaderHook(processStr);
     }
@@ -151,9 +152,7 @@ const XR3DLayer = class extends Layer {
       if (shaders) {
         const { inject = {}, modules = [] } = shaders;
         const definesInjection = inject[hookName];
-        const moduleDefinesInjection = modules.some(
-          m => m.inject && m?.inject[hookName]
-        );
+        const moduleDefinesInjection = modules.some(m => m?.inject?.[hookName]);
         return definesInjection || moduleDefinesInjection;
       }
       return false;
@@ -197,7 +196,7 @@ const XR3DLayer = class extends Layer {
     super.finalizeState();
 
     if (this.state.textures) {
-      Object.values(this.state.textures).forEach(tex => tex && tex.delete());
+      Object.values(this.state.textures).forEach(tex => tex?.delete());
     }
   }
 
@@ -284,7 +283,7 @@ const XR3DLayer = class extends Layer {
         clippingPlanes.length || NUM_PLANES_DEFAULT
       );
       // Need to flatten for shaders.
-      const normals = paddedClippingPlanes.map(plane => plane.normal).flat();
+      const normals = paddedClippingPlanes.flatMap(plane => plane.normal);
       const distances = paddedClippingPlanes.map(plane => plane.distance);
       model
         .setUniforms({
@@ -336,7 +335,7 @@ const XR3DLayer = class extends Layer {
       volume5: null
     };
     if (this.state.textures) {
-      Object.values(this.state.textures).forEach(tex => tex && tex.delete());
+      Object.values(this.state.textures).forEach(tex => tex?.delete());
     }
     if (
       channelData &&

packages/layers/src/xr-layer/xr-layer.js

@@ -1,4 +1,3 @@
-/* eslint-disable prefer-destructuring */
 // A lot of this codes inherits paradigms form DeckGL that
 // we live in place for now, hence some of the not-destructuring
 import GL from '@luma.gl/constants';
@@ -111,7 +110,8 @@ const XRLayer = class extends Layer {
 
     const mutateStr =
       'fs:DECKGL_MUTATE_COLOR(inout vec4 rgba, float intensity0, float intensity1, float intensity2, float intensity3, float intensity4, float intensity5, vec2 vTexCoord)';
-    const processStr = `fs:DECKGL_PROCESS_INTENSITY(inout float intensity, vec2 contrastLimits, int channelIndex)`;
+    const processStr =
+      'fs:DECKGL_PROCESS_INTENSITY(inout float intensity, vec2 contrastLimits, int channelIndex)';
     // Only initialize shader hook functions _once globally_
     // Since the program manager is shared across all layers, but many layers
     // might be created, this solves the performance issue of always adding new
@@ -132,7 +132,7 @@ const XRLayer = class extends Layer {
     super.finalizeState();
 
     if (this.state.textures) {
-      Object.values(this.state.textures).forEach(tex => tex && tex.delete());
+      Object.values(this.state.textures).forEach(tex => tex?.delete());
     }
   }
 
@@ -225,7 +225,6 @@ const XRLayer = class extends Layer {
     positions[10] = bounds[1];
     positions[11] = 0;
 
-    // eslint-disable-next-line  no-param-reassign
     attributes.value = positions;
   }
 
@@ -269,7 +268,7 @@ const XRLayer = class extends Layer {
       channel5: null
     };
     if (this.state.textures) {
-      Object.values(this.state.textures).forEach(tex => tex && tex.delete());
+      Object.values(this.state.textures).forEach(tex => tex?.delete());
     }
     if (
       channelData &&