Replaces eslint and prettier with biomejs (#27)

.github/workflows/pr.yml

@@ -16,19 +16,26 @@ jobs:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Install PNPM
-        run: npm i -g pnpm
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
 
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
+          cache: "pnpm"
+          cache-dependency-path: "./pnpm-lock.yaml"
 
       - name: Install dependencies
         run: pnpm install
 
-      - name: Run lint script
-        run: pnpm lint
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
+        with:
+          version: latest
+
+      - name: Run Biome
+        run: biome ci .
 
       - name: Run build script
         run: pnpm build

.github/workflows/release.yml

@@ -23,16 +23,13 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
-          cache: 'pnpm'
-          cache-dependency-path: './pnpm-lock.yaml'
+          node-version: 22
+          cache: "pnpm"
+          cache-dependency-path: "./pnpm-lock.yaml"
 
       - name: Install dependencies
         run: pnpm install
 
-      - name: Lint project
-        run: pnpm lint
-
       - name: Extract version from tag
         id: extract_version
         run: echo "version=${GITHUB_REF#refs/tags/v}" >> $GITHUB_OUTPUT

.prettierignore

@@ -0,0 +1,9 @@
+dist
+node_modules
+pnpm-lock.yaml
+*.js
+*.ts
+*.tsx
+*.css
+*.jsx
+*.json

.prettierrc.yml

@@ -1 +0,0 @@
-singleQuote: true

.vscode/extensions.json

@@ -1,7 +1,3 @@
 {
-  "recommendations": [
-    "arcanis.vscode-zipfs",
-    "esbenp.prettier-vscode",
-    "dbaeumer.vscode-eslint"
-  ]
-}
+  "recommendations": ["arcanis.vscode-zipfs", "biomejs.biome"]
+}

.vscode/settings.json

@@ -1,6 +1,15 @@
 {
+  "files.eol": "\n",
+  "files.insertFinalNewline": true,
+  "files.trimTrailingWhitespace": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll.biome": "explicit",
+    "source.organizeImports.biome": "explicit"
+  },
+  "editor.rulers": [80],
+  "editor.formatOnSave": true,
+  "[javascript][typescript][javascriptreact][typescriptreact][css][json][jsonc]": {
+    "editor.defaultFormatter": "biomejs.biome"
   },
   "[yaml][markdown][html][scss]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"

README.md

@@ -20,16 +20,16 @@ yarn add tgui-core
 Now, you can use them like normal TGUI components.
 
 ```tsx
-import { Button } from 'tgui-core/components';
+import { Button } from "tgui-core/components";
 
 <Button>Click</Button>;
 ```
 
 You can even use it in tandem with your own in house TGUI components,
 
 ```tsx
-import { Button } from 'tgui-core/components';
-import { Box } from '../components';
+import { Button } from "tgui-core/components";
+import { Box } from "../components";
 ```
 
 ## License

biome.json

@@ -0,0 +1,55 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "ignore": ["node_modules", "dist", "styles/**/*.d.ts"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "noUnusedImports": "warn",
+        "noUnusedVariables": "warn",
+        "useExhaustiveDependencies": "off"
+      },
+      "style": {
+        "noNonNullAssertion": "warn",
+        "useSelfClosingElements": {
+          "level": "warn",
+          "fix": "safe"
+        },
+        "noUnusedTemplateLiteral": {
+          "level": "warn",
+          "fix": "safe"
+        }
+      },
+      "suspicious": {
+        "noExplicitAny": "off",
+        "noArrayIndexKey": "warn"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  },
+  "css": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  }
+}

global.d.ts

@@ -169,7 +169,7 @@ type ByondType = {
  * Object that provides access to Byond Skin API and is available in
  * any tgui application.
  */
-const Byond: ByondType;
+const Byond: ByondType = {} as ByondType;
 
 declare const loadedMappings: Record<string, string>;
 

lib/common/color.ts

@@ -17,22 +17,23 @@ export class Color {
     // Alpha component needs to permit fractional values, so cannot use |
     let alpha = this.a;
     if (typeof alpha === 'string') {
-      alpha = parseFloat(this.a as any);
+      alpha = Number.parseFloat(this.a as any);
     }
-    if (isNaN(alpha)) {
+    if (Number.isNaN(alpha)) {
       alpha = 1;
     }
     return `rgba(${this.r | 0}, ${this.g | 0}, ${this.b | 0}, ${alpha})`;
   }
 
   /**  Darkens a color by a given percent. Returns a color, which can have toString called to get it's rgba() css value. */
   darken(percent: number): Color {
-    percent /= 100;
+    const scaled = percent / 100;
+
     return new Color(
-      this.r - this.r * percent,
-      this.g - this.g * percent,
-      this.b - this.b * percent,
-      this.a
+      this.r - this.r * scaled,
+      this.g - this.g * scaled,
+      this.b - this.b * scaled,
+      this.a,
     );
   }
 
@@ -47,9 +48,9 @@ export class Color {
    */
   static fromHex(hex: string): Color {
     return new Color(
-      parseInt(hex.slice(1, 3), 16),
-      parseInt(hex.slice(3, 5), 16),
-      parseInt(hex.slice(5, 7), 16)
+      Number.parseInt(hex.slice(1, 3), 16),
+      Number.parseInt(hex.slice(3, 5), 16),
+      Number.parseInt(hex.slice(5, 7), 16),
     );
   }
 
@@ -61,7 +62,7 @@ export class Color {
       (c2.r - c1.r) * n + c1.r,
       (c2.g - c1.g) * n + c1.g,
       (c2.b - c1.b) * n + c1.b,
-      (c2.a - c1.a) * n + c1.a
+      (c2.a - c1.a) * n + c1.a,
     );
   }
 
@@ -83,6 +84,6 @@ export class Color {
     }
     const ratio = scaled % 1;
     const index = scaled | 0;
-    return this.lerp(colors[index], colors[index + 1], ratio);
+    return Color.lerp(colors[index], colors[index + 1], ratio);
   }
 }

lib/common/events.ts

@@ -44,7 +44,7 @@ export const globalEvents = new EventEmitter();
 let ignoreWindowFocus = false;
 
 export const setupGlobalEvents = (
-  options: { ignoreWindowFocus?: boolean } = {}
+  options: { ignoreWindowFocus?: boolean } = {},
 ): void => {
   ignoreWindowFocus = !!options.ignoreWindowFocus;
 };
@@ -132,6 +132,7 @@ function focusNearestTrackedParent(node: HTMLElement | null) {
       node.focus();
       return;
     }
+    // biome-ignore lint/style/noParameterAssign: This is fine
     node = node.parentElement;
   }
 }
@@ -230,9 +231,9 @@ export class KeyEvent {
     if (this.code >= 48 && this.code <= 90) {
       this._str += String.fromCharCode(this.code);
     } else if (this.code >= KEY_F1 && this.code <= KEY_F12) {
-      this._str += 'F' + (this.code - 111);
+      this._str += `F${this.code - 111}`;
     } else {
-      this._str += '[' + this.code + ']';
+      this._str += `[${this.code}]`;
     }
     return this._str;
   }

lib/common/format.ts

@@ -30,9 +30,9 @@ const SI_BASE_INDEX = SI_SYMBOLS.indexOf(' ');
 export function formatSiUnit(
   value: number,
   minBase1000 = -SI_BASE_INDEX,
-  unit = ''
+  unit = '',
 ): string {
-  if (!isFinite(value)) {
+  if (!Number.isFinite(value)) {
     return value.toString();
   }
 
@@ -42,7 +42,7 @@ export function formatSiUnit(
   const symbol =
     SI_SYMBOLS[Math.min(base1000 + SI_BASE_INDEX, SI_SYMBOLS.length - 1)];
 
-  const scaledValue = value / Math.pow(1000, base1000);
+  const scaledValue = value / 1000 ** base1000;
 
   let formattedValue = scaledValue.toFixed(2);
   if (formattedValue.endsWith('.00')) {
@@ -91,7 +91,7 @@ export function formatDb(value: number): string {
   const sign = db >= 0 ? '+' : '-';
   let formatted: string | number = Math.abs(db);
 
-  if (formatted === Infinity) {
+  if (formatted === Number.POSITIVE_INFINITY) {
     formatted = 'Inf';
   } else {
     formatted = formatted.toFixed(2);
@@ -121,9 +121,9 @@ const SI_BASE_TEN_UNITS = [
 export function formatSiBaseTenUnit(
   value: number,
   minBase1000 = 0,
-  unit = ''
+  unit = '',
 ): string {
-  if (!isFinite(value)) {
+  if (!Number.isFinite(value)) {
     return 'NaN';
   }
 
@@ -132,7 +132,7 @@ export function formatSiBaseTenUnit(
   const base1000 = Math.floor(base10 / 3);
   const symbol = SI_BASE_TEN_UNITS[base1000];
 
-  const scaledValue = value / Math.pow(1000, base1000);
+  const scaledValue = value / 1000 ** base1000;
   const precision = Math.max(0, 2 - (base10 % 3));
   const formattedValue = scaledValue.toFixed(precision);
 
@@ -145,7 +145,7 @@ export function formatSiBaseTenUnit(
  */
 export function formatTime(
   val: number,
-  formatType: 'short' | 'default' = 'default'
+  formatType: 'short' | 'default' = 'default',
 ): string {
   const totalSeconds = Math.floor(val / 10);
   const hours = Math.floor(totalSeconds / 3600);