refactor: eslint, better graph grid

.eslintrc

@@ -0,0 +1,17 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "prettier"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2022,
+    "sourceType": "module"
+  },
+  "rules": {
+    "prettier/prettier": "error",
+    "@typescript-eslint/no-explicit-any": "off"
+  }
+}

.github/workflows/lint.yml

@@ -0,0 +1,30 @@
+name: Lint
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 21
+          cache: 'yarn'
+
+      - name: Install dependencies
+        id: install
+        run: yarn --immutable
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Check for TypeScript errors
+        run: yarn tsc --noEmit
+        # run even if linting fails
+        if: always() && ${{ steps.install.outcome == 'success' }}

.prettierrc

@@ -1,3 +1,11 @@
 {
-  "singleQuote": true
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.{jsonc,*rc}",
+      "options": {
+        "trailingComma": "none"
+      }
+    }
+  ]
 }

.vscode/extensions.json

@@ -2,6 +2,7 @@
   "recommendations": [
     "bierner.lit-html",
     "esbenp.prettier-vscode",
-    "arcanis.vscode-zipfs"
+    "arcanis.vscode-zipfs",
+    "dbaeumer.vscode-eslint"
   ]
 }

.vscode/settings.json

@@ -1,10 +1,7 @@
 {
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.rulers": [
-    80,
-    120
-  ],
+  "editor.rulers": [80, 120],
   "emmet.includeLanguages": {
     "javascript": "html"
   },
@@ -14,5 +11,6 @@
   },
   "prettier.prettierPath": ".yarn/sdks/prettier/index.cjs",
   "typescript.tsdk": ".yarn/sdks/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  "eslint.nodePath": ".yarn/sdks"
 }

.yarn/sdks/eslint/bin/eslint.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint/bin/eslint.js
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real eslint/bin/eslint.js your application uses
+module.exports = absRequire(`eslint/bin/eslint.js`);

.yarn/sdks/eslint/lib/api.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real eslint your application uses
+module.exports = absRequire(`eslint`);

.yarn/sdks/eslint/lib/unsupported-api.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+const {existsSync} = require(`fs`);
+const {createRequire} = require(`module`);
+const {resolve} = require(`path`);
+
+const relPnpApiPath = "../../../../.pnp.cjs";
+
+const absPnpApiPath = resolve(__dirname, relPnpApiPath);
+const absRequire = createRequire(absPnpApiPath);
+
+if (existsSync(absPnpApiPath)) {
+  if (!process.versions.pnp) {
+    // Setup the environment to be able to require eslint/use-at-your-own-risk
+    require(absPnpApiPath).setup();
+  }
+}
+
+// Defer to the real eslint/use-at-your-own-risk your application uses
+module.exports = absRequire(`eslint/use-at-your-own-risk`);

.yarn/sdks/eslint/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "eslint",
+  "version": "8.56.0-sdk",
+  "main": "./lib/api.js",
+  "type": "commonjs",
+  "bin": {
+    "eslint": "./bin/eslint.js"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": "./lib/api.js",
+    "./use-at-your-own-risk": "./lib/unsupported-api.js"
+  }
+}

package.json

@@ -16,8 +16,14 @@
     "@parcel/transformer-inline-string": "2.11.0",
     "@parcel/transformer-webmanifest": "2.11.0",
     "@types/d3": "^7.4.3",
+    "@types/eslint": "^8",
     "@types/rbush": "^3",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
     "buffer": "^5.5.0||^6.0.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "parcel": "^2.11.0",
     "prettier": "^3.2.4",
     "punycode": "^2.0.0",
@@ -26,6 +32,9 @@
   },
   "scripts": {
     "start": "parcel static/index.html",
-    "build": "parcel build static/index.html --public-url https://vis.ordbokapi.org"
+    "build": "parcel build static/index.html --public-url https://vis.ordbokapi.org",
+    "format": "prettier --write 'src/**/*.ts'",
+    "lint": "eslint 'src/**/*.ts'",
+    "lint:fix": "eslint 'src/**/*.ts' --fix"
   }
 }

src/components/viewport.ts

@@ -1,5 +1,5 @@
 import * as pixi from 'pixi.js';
-// @ts-ignore
+// @ts-expect-error Broken types
 import { Viewport as PixiViewport } from 'pixi-viewport';
 import { html, text } from '../utils/index.js';
 import { GraphView } from '../rendering/index.js';

src/components/vis-client.ts

@@ -1,5 +1,4 @@
 import { html } from '../utils/index.js';
-import { AppStateManager } from '../providers/index.js';
 import { StateManagedElement } from './state-managed-element.js';
 import { SearchBar } from './search-bar.js';
 import { Sidebar } from './sidebar.js';

src/providers/app-state-manager.ts

@@ -39,7 +39,7 @@ export interface ScopedAppStateManager {
    */
   observe<K extends keyof AppState>(
     key: K,
-    listener: (value: AppState[K]) => void,
+    listener: (value: AppState[K], source: object) => void,
   ): void;
 
   /**
@@ -50,7 +50,7 @@ export interface ScopedAppStateManager {
    */
   unobserve<K extends keyof AppState>(
     key: K,
-    listener: (value: AppState[K]) => void,
+    listener: (value: AppState[K], source: object) => void,
   ): void;
 
   /**
@@ -117,7 +117,7 @@ export class AppStateManager {
   #observers: TwoKeyMap<
     keyof AppState,
     object,
-    Set<(value: AppState[keyof AppState]) => void>
+    Set<(value: AppState[keyof AppState], source: object) => void>
   > = new TwoKeyMap();
 
   /**
@@ -238,7 +238,7 @@ export class AppStateManager {
   observe<K extends keyof AppState>(
     subscriber: object,
     key: K,
-    listener: (value: AppState[K]) => void,
+    listener: (value: AppState[K], source: object) => void,
   ) {
     let set = this.#observers.get(key, subscriber);
 
@@ -259,7 +259,7 @@ export class AppStateManager {
   unobserve<K extends keyof AppState>(
     subscriber: object,
     key: K,
-    listener: (value: AppState[K]) => void,
+    listener: (value: AppState[K], source: object) => void,
   ) {
     const set = this.#observers.get(key, subscriber);
     if (!set) return;
@@ -283,7 +283,7 @@ export class AppStateManager {
 
       for (const listener of listeners) {
         try {
-          listener(value);
+          listener(value, subscriber);
         } catch (error) {
           console.warn(`Failed to notify listener for ${key}: ${error}`);
         }

src/rendering/bbox-collision-force.ts

@@ -1,10 +1,10 @@
 import * as d3 from 'd3';
 import * as pixi from 'pixi.js';
-// @ts-ignore
+// @ts-expect-error Broken types
 import { Viewport } from 'pixi-viewport';
-import { IndexedSet, Rect2D, Vector2D } from '../types/index.js';
+import { IndexedSet, Vector2D } from '../types/index.js';
 import { DebugPanel } from './debug-panel.js';
-import { INodeBBoxBehaviourState } from './graph-behaviours/graph-node-bbox-behaviour.js';
+import { INodeBBoxBehaviourState } from './graph-behaviours/node-bbox.js';
 
 /**
  * A force that prevents nodes from overlapping by applying a collision force

src/rendering/bounding-box-cache.ts

@@ -1,5 +1,5 @@
 import * as pixi from 'pixi.js';
-// @ts-ignore
+// @ts-expect-error Broken types
 import { Viewport } from 'pixi-viewport';
 import { Rect2D, Vector2D } from '../types/index.js';
 
@@ -69,7 +69,7 @@ export class BoundingBoxCache {
    * @param object An object.
    */
   get(object: pixi.DisplayObject): Rect2D {
-    let size = this.#sizes.get(object) ?? this.#cacheSize(object);
+    const size = this.#sizes.get(object) ?? this.#cacheSize(object);
 
     const topLeft = new Vector2D(object.position).subtract(size.divide(2));
 

src/rendering/debug-panel.ts

@@ -1,5 +1,5 @@
 import * as PIXI from 'pixi.js';
-import { Rect2D, Vector2D } from '../types/index.js';
+import { Rect2D } from '../types/index.js';
 
 export class DebugPanel {
   #appCanvas: PIXI.Graphics;

src/rendering/graph-behaviours/graph-force-behaviour.ts → src/rendering/graph-behaviours/force.ts

@@ -6,7 +6,7 @@ import {
 } from './graph-behaviour.js';
 import { Article } from '../../providers/index.js';
 import { BBoxCollisionForce } from '../bbox-collision-force.js';
-import { GraphNodeBBoxBehaviour } from './graph-node-bbox-behaviour.js';
+import { GraphNodeBBoxBehaviour } from './node-bbox.js';
 
 /**
  * Node force behaviour.