Migrate from ESLint to Biome

.eslintignore

@@ -1 +1,2 @@
-build/
+build/
+dist/

.eslintrc.json

@@ -1,6 +1,9 @@
 {
   "parserOptions": {
-    "ecmaVersion": 2020
+    "ecmaVersion": 2020,
+    "ecmaFeatures": {
+      "jsx": true
+    }
   },
   "overrides": [
     {
@@ -10,6 +13,7 @@
       }
     }
   ],
+  "parser": "@typescript-eslint/parser",
   "plugins": [
     "@typescript-eslint",
     "solid"
@@ -32,10 +36,6 @@
         "SwitchCase": 1
       }
     ],
-    "quotes": [
-      "warn",
-      "backtick"
-    ],
     "semi": [
       "warn",
       "always"
@@ -55,8 +55,8 @@
         "ignoreReadBeforeAssign": false
       }
     ],
-    "no-unused-vars": "error",
-    "@typescript-eslint/no-unused-vars": [ "error" ],
+    "no-unused-vars": "warn",
+    "@typescript-eslint/no-unused-vars": "warn",
     "no-var": "warn",
     "require-atomic-updates": "off",
     "no-empty": "off",

biome.jsonc

@@ -0,0 +1,74 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.7.0/schema.json",
+	"organizeImports": { "enabled": true },
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": false,
+			"complexity": {
+				"noExtraBooleanCast": "error",
+				"noMultipleSpacesInRegularExpressionLiterals": "error",
+				"noUselessCatch": "error",
+				"noWith": "error"
+			},
+			"correctness": {
+				"noConstAssign": "error",
+				"noConstantCondition": "error",
+				"noEmptyCharacterClassInRegex": "error",
+				"noEmptyPattern": "error",
+				"noGlobalObjectCalls": "error",
+				"noInnerDeclarations": "error",
+				"noInvalidConstructorSuper": "error",
+				"noInvalidUseBeforeDeclaration": "error",
+				"noNewSymbol": "error",
+				"noNonoctalDecimalEscape": "error",
+				"noPrecisionLoss": "error",
+				"noSelfAssign": "error",
+				"noSetterReturn": "error",
+				"noSwitchDeclarations": "off",
+				"noUndeclaredVariables": "error",
+				"noUnreachable": "error",
+				"noUnreachableSuper": "error",
+				"noUnsafeFinally": "error",
+				"noUnsafeOptionalChaining": "error",
+				"noUnusedLabels": "error",
+				"noUnusedVariables": "error",
+				"useIsNan": "error",
+				"useValidForDirection": "error",
+				"useYield": "error",
+				// Do not explicitly set "children" in props.
+				// For example: 
+				// <Component children={children} /> ❌
+				"noChildrenProp": "error"
+			},
+			"style": { "noVar": "warn", "useConst": "warn" },
+			"suspicious": {
+				"noAssignInExpressions": "error",
+				"noAsyncPromiseExecutor": "error",
+				"noCatchAssign": "error",
+				"noClassAssign": "error",
+				"noCompareNegZero": "error",
+				"noConsoleLog": "off",
+				"noControlCharactersInRegex": "error",
+				"noDuplicateCase": "error",
+				"noDuplicateClassMembers": "error",
+				"noDuplicateObjectKeys": "error",
+				"noDuplicateParameters": "error",
+				"noEmptyBlockStatements": "off",
+				"noFallthroughSwitchClause": "error",
+				"noFunctionAssign": "error",
+				"noGlobalAssign": "error",
+				"noImportAssign": "error",
+				"noMisleadingCharacterClass": "error",
+				"noPrototypeBuiltins": "error",
+				"noRedeclare": "error",
+				"noShadowRestrictedNames": "error",
+				"noUnsafeNegation": "error",
+				"useGetterReturn": "error",
+				"useValidTypeof": "error"
+			}
+		},
+		"ignore": ["**/build/", "./dist/**/*", "./src-tauri/**/*"]
+	},
+	"overrides": [{ "include": ["*.mjs"] }]
+}

package.json

@@ -17,6 +17,7 @@
     "solid-styled-components": "^0.28.5"
   },
   "devDependencies": {
+    "@biomejs/biome": "1.7.0",
     "@solid-devtools/overlay": "^0.30.1",
     "@tauri-apps/cli": "^1.5.11",
     "@typescript-eslint/eslint-plugin": "^5.62.0",

src/MemoryContext.tsx

@@ -1,7 +1,8 @@
 import { JSX, createContext, useContext } from "solid-js";
 import { createStore } from "solid-js/store";
 import NodeStudioProject from "./classes/project";
-import { MousePosition, useMousePosition } from "./util/mousePosition";
+// import { MousePosition, useMousePosition } from "./util/mousePosition"; // Broken
+import { useMousePosition, MousePositionInside } from "@solid-primitives/mouse";
 
 export interface IInstrument {
   name: string,
@@ -24,54 +25,62 @@ export interface IMemory {
   [x: string]: any // TODO: **REMOVE THIS LINE WHEN PROJECT IS DONE!**
 }
 
-type PanelFunction = () => JSX.Element;
+type SplitableFunction = () => JSX.Element;
 
 export const MemoryContext = createContext<{
   masterAnalyser: AnalyserNode,
   audioContext: AudioContext,
 
-  panels: (PanelFunction)[],
-  addPanel(NewPanel: PanelFunction): void,
-  removePanel(OldPanel: PanelFunction): void,
+  readonly panels: (SplitableFunction)[],
+  addPanel(NewPanel: SplitableFunction): void, // eslint-disable-line no-unused-vars
+  removePanel(OldPanel: SplitableFunction): void, // eslint-disable-line no-unused-vars
 
-  mousePosition: MousePosition
+  readonly isEditingPanels: boolean,
+  toggleEditingPanels(): void,
+
+  mousePosition: MousePositionInside
 }>();
 
 export function useMemoryContext() {
   const context = useContext(MemoryContext);
   if (!context) throw new Error(`useMemoryContext: MemoryContext is undefined!`);
-  
+
   return context;
 }
 
 export function MemoryProvider(props: { children: JSX.Element }) {
   const audioContext = new window.AudioContext();
   const masterAnalyser = audioContext.createAnalyser();
 
-  const [panelsStore, setPanelsStore] = createStore(
-    [] as PanelFunction[]
-  );
+  const [memoryStore, setMemoryStore] = createStore({
+    panels: [] as SplitableFunction[],
+    isEditingPanels: false
+  });
 
   const memory = {
     audioContext,
     masterAnalyser,
 
-    panels: panelsStore,
-    addPanel(NewPanel: PanelFunction) {
+    get panels() { return memoryStore.panels; },
+    addPanel(NewPanel: SplitableFunction) {
       console.log("Adding a panel...");
-      return setPanelsStore([...panelsStore, NewPanel]);
+      return setMemoryStore("panels", memoryStore.panels.length, () => NewPanel);
     },
-    removePanel(OldPanel: PanelFunction) {
+    removePanel(OldPanel: SplitableFunction) {
       console.log("Removing a panel...");
-      return setPanelsStore(panelsStore.filter((panel) => panel !== OldPanel));
+      return setMemoryStore("panels", memoryStore.panels.filter((panel) => panel !== OldPanel));
+    },
+    get isEditingPanels() { return memoryStore.isEditingPanels; },
+    toggleEditingPanels() {
+      setMemoryStore("isEditingPanels", (e) => !e);
     },
 
     mousePosition: useMousePosition()
-  }
+  };
 
   return (
     <MemoryContext.Provider value={memory}>
       {props.children}
     </MemoryContext.Provider>
-  )
+  );
 }

src/components/Header.tsx

@@ -3,6 +3,7 @@ import styles from "../css/Header.module.css";
 import Panel from "./Panel";
 import SpectrumGraph from "./SpectrumGraph";
 import WaveformGraph from "./WaveformGraph";
+import Splitable from "./Splitable";
 
 export default function Header() {
 
@@ -17,10 +18,23 @@ export default function Header() {
       <button>Track</button>
       <button>Help</button>
       <button onClick={() => {
-        memoryContext.addPanel(() => <Panel />);
+        memoryContext.addPanel(() => {
+          return (
+            // TEMPORARY
+            <Splitable type="vertical">
+              <Panel />
+              <Splitable type="horizontal">
+                <Panel />
+                <Panel />
+              </Splitable>
+              <Panel />
+              <Panel />
+            </Splitable>
+          );
+        });
         // memoryContext.setPanels([...memoryContext.panels, <Panel />]);
         console.log(memoryContext.panels);
-      }}>+ Panel</button>
+      }}>+ 🍌</button>
 
       <input
         style={{ flex: 1 }}
@@ -32,5 +46,5 @@ export default function Header() {
       <SpectrumGraph />
 
     </div>
-  )
+  );
 }