Run Biome linter (#1391)

* Backend updates

* frontend updates

* Undo 15

* Undo 15

* oops

* oops

* oops

* make thing not hook

* regen yarn.lock

* oops

* The resize observer

* oops

* hamster help

* more updates

* more

* fixules

* more migration

* meowp

* one

* un-frug

* useImportType

* useTemplate

* useNumberNamespace

* noUselessFragments

* useLiteralKeys

* useOptionalChain

* noUnnecessaryContinue

* noUnreachable

* noDoubleEquals

* useSortedClasses

* removed unneded file

* delete later

* Promment

* useSingleVarDeclarator

* useSelfClosingElements

* noConfusingVoidType

* wut

* noAccumulatingSpread

* noForEach

* noAssignInExpressions

* cleanups

* useDefaultParameterLast

* useEnumInitializers

* useNodejsImportProtocol

frontend/biome.json

@@ -22,16 +22,8 @@
         "rules": {
             "recommended": true,
             "style": {
-                "useImportType": "off",
-                "useTemplate": "off",
                 "noUselessElse": "off",
-                "noParameterAssign": "off",
-                "useNumberNamespace": "off",
-                "useDefaultParameterLast": "off",
-                "useEnumInitializers": "off",
-                "useSingleVarDeclarator": "off",
-                "useSelfClosingElements": "off",
-                "useNodejsImportProtocol": "off"
+                "noParameterAssign": "off"
             },
             "a11y": {
                 "useValidAnchor": "off",
@@ -44,25 +36,16 @@
             "suspicious": {
                 "noExplicitAny": "off",
                 "noArrayIndexKey": "off",
-                "noDoubleEquals": "off",
-                "noAssignInExpressions": "off",
-                "noConfusingVoidType": "off",
-                "noImplicitAnyLet": "off"
+                "noConfusingVoidType": "off"
             },
             "correctness": {
-                "useExhaustiveDependencies": "off",
-                "noUnreachable": "off",
-                "noUnnecessaryContinue": "off"
-            },
-            "complexity": {
-                "useLiteralKeys": "off",
-                "useOptionalChain": "off",
-                "noForEach": "off",
-                "noUselessFragments": "off"
+                "useExhaustiveDependencies": "off"
             },
             "performance": {
-                "noDelete": "off",
-                "noAccumulatingSpread": "off"
+                "noDelete": "off"
+            },
+            "nursery": {
+                "useSortedClasses": "error"
             }
         }
     },

frontend/next.config.js

@@ -1,5 +1,5 @@
 const { Compilation } = require("webpack")
-const { execSync } = require("child_process")
+const { execSync } = require("node:child_process")
 const { config } = require("dotenv")
 
 for (const envFile of [".env.local", ".env"]) {
@@ -161,7 +161,7 @@ let app = withPlausibleProxy({
     },
 }))
 
-if (process.env.ANALYZE == "true") {
+if (process.env.ANALYZE === "true") {
     app = require("@next/bundle-analyzer")(app)
 }
 

frontend/src/app/(navfooter)/SiteStats.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { ReactNode } from "react"
+import type { ReactNode } from "react"
 
 import Link from "next/link"
 
@@ -25,7 +25,7 @@ export default function SiteStats() {
         return null
     }
 
-    return <p className="inline-flex gap-8 text-xs text-gray-11 md:gap-16">
+    return <p className="inline-flex gap-8 text-gray-11 text-xs md:gap-16">
         <Stat>{stats.scratch_count.toLocaleString()} scratches created</Stat>
         <Stat href="https://stats.decomp.me/decomp.me">{stats.profile_count.toLocaleString()} unique visitors</Stat>
         <Stat>{stats.github_user_count.toLocaleString()} users signed up</Stat>

frontend/src/app/(navfooter)/WelcomeInfo.tsx

@@ -15,7 +15,7 @@ export default function WelcomeInfo() {
     const saveDataEnabled = headers().get("Save-Data") === "on"
 
     return <div className="relative overflow-x-hidden p-2">
-        {!saveDataEnabled && <div className="absolute top-14 -z-10 hidden w-full opacity-80 sm:block">
+        {!saveDataEnabled && <div className="-z-10 absolute top-14 hidden w-full opacity-80 sm:block">
             <ScrollingPlatformIcons />
             <div
                 className="absolute top-0 size-full"
@@ -27,15 +27,15 @@ export default function WelcomeInfo() {
         </div>}
         <div className="text-center text-lg">
             <h1
-                className="!md:leading-[0.8] mx-auto w-full max-w-lg text-4xl font-extrabold text-gray-12 md:max-w-3xl md:text-6xl"
+                className="mx-auto w-full max-w-lg font-extrabold text-4xl text-gray-12 !md:leading-[0.8] md:max-w-3xl md:text-6xl"
                 style={{
                     // Shadow to make text more readable on the background
                     textShadow: "0 1px 0.3rem hsl(var(--color-mauve10) / 0.4)",
                 }}
             >
                 Collaboratively decompile code in your browser.
             </h1>
-            <p className="mx-auto my-6 w-full max-w-screen-sm leading-tight text-gray-11">
+            <p className="mx-auto my-6 w-full max-w-screen-sm text-gray-11 leading-tight">
                 {SITE_DESCRIPTION}
             </p>
             <div className="flex flex-col items-center justify-center gap-2 md:flex-row">

frontend/src/app/(navfooter)/credits/ContributorsList.tsx

@@ -2,9 +2,14 @@ import { LinkExternalIcon } from "@primer/octicons-react"
 
 import GhostButton from "@/components/GhostButton"
 import UserAvatar from "@/components/user/UserAvatar"
-import UserMention, { GithubUser, getUserName } from "@/components/user/UserMention"
+import UserMention, { type GithubUser, getUserName } from "@/components/user/UserMention"
 import { get } from "@/lib/api/request"
-import { User } from "@/lib/api/types"
+import type { User } from "@/lib/api/types"
+
+interface GitHubContributor {
+    login: string
+    contributions: number
+}
 
 export type Contributor = User | GithubUser
 
@@ -19,9 +24,9 @@ export async function getContributorUsernames(): Promise<string[]> {
         return ["ethteck", "nanaian"]
     }
 
-    const contributors = await req.json()
-    contributors.sort((a: any, b: any) => b.contributions - a.contributions)
-    return contributors.map((contributor: any) => contributor.login)
+    const contributors = await req.json() as GitHubContributor[]
+    contributors.sort((a, b) => b.contributions - a.contributions)
+    return contributors.map((contributor) => contributor.login)
 }
 
 export async function usernameToContributor(username: string): Promise<Contributor> {
@@ -49,7 +54,7 @@ export default function ContributorsList({ contributors }: { contributors: Contr
 
     return <div className="py-4">
         <div className="mb-2 flex items-center justify-between">
-            <h3 className="text-lg font-medium tracking-tight text-gray-12 md:text-2xl">
+            <h3 className="font-medium text-gray-12 text-lg tracking-tight md:text-2xl">
                 Contributors
             </h3>
             <GhostButton href="https://github.com/decompme/decomp.me/graphs/contributors">

frontend/src/app/(navfooter)/credits/page.tsx

@@ -1,6 +1,6 @@
 import UserMention from "@/components/user/UserMention"
 import { get } from "@/lib/api/request"
-import { User } from "@/lib/api/types"
+import type { User } from "@/lib/api/types"
 
 import ContributorsList, { getContributorUsernames, usernameToContributor } from "./ContributorsList"
 import LinkList from "./LinkList"
@@ -72,17 +72,17 @@ export default async function Page() {
 
     return <main>
         <div className="mx-auto max-w-prose p-4 pb-2 text-justify text-base leading-normal">
-            <h1 className="text-2xl font-semibold tracking-tight text-gray-12 md:text-3xl">
+            <h1 className="font-semibold text-2xl text-gray-12 tracking-tight md:text-3xl">
                 Credits
             </h1>
             <p className="py-4">
                 decomp.me is maintained by <Contributor contributor={maintainers[0]} /> and <Contributor contributor={maintainers[1]} />.
             </p>
-            <div className="my-4 border-y border-gray-6">
+            <div className="my-4 border-gray-6 border-y">
                 <ContributorsList contributors={contributors} />
             </div>
             <div className="py-4">
-                <h3 className="text-lg font-medium tracking-tight text-gray-12 md:text-2xl">
+                <h3 className="font-medium text-gray-12 text-lg tracking-tight md:text-2xl">
                     Acknowledgements
                 </h3>
                 <p className="my-2">

frontend/src/app/(navfooter)/faq/page.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react"
+import type { ReactNode } from "react"
 
 import Link from "next/link"
 
@@ -22,7 +22,7 @@ export const metadata = {
 
 export default function Page() {
     return <main className="mx-auto max-w-prose p-4 pb-2 text-justify text-base leading-normal">
-        <h1 className="text-2xl font-semibold tracking-tight text-gray-12 md:text-3xl">
+        <h1 className="font-semibold text-2xl text-gray-12 tracking-tight md:text-3xl">
             Frequently Asked Questions
         </h1>
 

frontend/src/app/(navfooter)/login/page.tsx

@@ -46,14 +46,14 @@ function Login() {
             })
         }
 
-        if (githubError == "access_denied") {
+        if (githubError === "access_denied") {
             setError(new Error("Please grant access to your GitHub account to sign in!"))
         }
     }, [code, router, mutate, next, error, githubError])
 
     return <main className="mx-auto flex max-w-prose items-center justify-center px-4 py-6 text-base leading-normal">
         {error ? <div>
-            <h1 className="text-3xl font-semibold">Error signing in</h1>
+            <h1 className="font-semibold text-3xl">Error signing in</h1>
             <p className="py-4">
                 The following error prevented you from signing in:
             </p>
@@ -64,7 +64,7 @@ function Login() {
                 You can try again by clicking the button below.
             </p>
             <GitHubLoginButton />
-        </div> : code ? <div className="flex items-center justify-center gap-4 py-8 text-2xl font-medium text-gray-12">
+        </div> : code ? <div className="flex items-center justify-center gap-4 py-8 font-medium text-2xl text-gray-12">
             <LoadingSpinner width={32} className="animate-spin" />
             Signing in...
         </div> : <div>

frontend/src/app/(navfooter)/new/NewScratchForm.tsx

@@ -12,7 +12,7 @@ import CodeMirror from "@/components/Editor/CodeMirror"
 import PlatformSelect from "@/components/PlatformSelect"
 import Select from "@/components/Select2"
 import * as api from "@/lib/api"
-import { Library } from "@/lib/api/types"
+import type { Library } from "@/lib/api/types"
 import { scratchUrl } from "@/lib/api/urls"
 import basicSetup from "@/lib/codemirror/basic-setup"
 import { cpp } from "@/lib/codemirror/cpp"
@@ -116,21 +116,21 @@ export default function NewScratchForm({ serverCompilers }: {
     // Load fields from localStorage
     useEffect(() => {
         try {
-            setLabel(localStorage["new_scratch_label"] ?? "")
-            setAsm(localStorage["new_scratch_asm"] ?? "")
-            setContext(localStorage["new_scratch_context"] ?? "")
-            const pid = parseInt(localStorage["new_scratch_presetId"])
+            setLabel(localStorage.new_scratch_label ?? "")
+            setAsm(localStorage.new_scratch_asm ?? "")
+            setContext(localStorage.new_scratch_context ?? "")
+            const pid = Number.parseInt(localStorage.new_scratch_presetId)
             if (!Number.isNaN(pid)) {
                 const preset = presets[pid]
                 if (preset) {
                     setPreset(preset)
                 }
             } else {
-                setPlatform(localStorage["new_scratch_platform"] ?? "")
-                setCompilerId(localStorage["new_scratch_compilerId"] ?? undefined)
-                setCompilerFlags(localStorage["new_scratch_compilerFlags"] ?? "")
-                setDiffFlags(JSON.parse(localStorage["new_scratch_diffFlags"] ?? "[]"))
-                setLibraries(JSON.parse(localStorage["new_scratch_libraries"] ?? "[]"))
+                setPlatform(localStorage.new_scratch_platform ?? "")
+                setCompilerId(localStorage.new_scratch_compilerId ?? undefined)
+                setCompilerFlags(localStorage.new_scratch_compilerFlags ?? "")
+                setDiffFlags(JSON.parse(localStorage.new_scratch_diffFlags ?? "[]"))
+                setLibraries(JSON.parse(localStorage.new_scratch_libraries ?? "[]"))
             }
             incrementValueVersion()
         } catch (error) {
@@ -144,18 +144,18 @@ export default function NewScratchForm({ serverCompilers }: {
         if (!ready)
             return
 
-        localStorage["new_scratch_label"] = label
-        localStorage["new_scratch_asm"] = asm
-        localStorage["new_scratch_context"] = context
-        localStorage["new_scratch_platform"] = platform
-        localStorage["new_scratch_compilerId"] = compilerId
-        localStorage["new_scratch_compilerFlags"] = compilerFlags
-        localStorage["new_scratch_diffFlags"] = JSON.stringify(diffFlags)
-        localStorage["new_scratch_libraries"] = JSON.stringify(libraries)
-        if (presetId == undefined) {
+        localStorage.new_scratch_label = label
+        localStorage.new_scratch_asm = asm
+        localStorage.new_scratch_context = context
+        localStorage.new_scratch_platform = platform
+        localStorage.new_scratch_compilerId = compilerId
+        localStorage.new_scratch_compilerFlags = compilerFlags
+        localStorage.new_scratch_diffFlags = JSON.stringify(diffFlags)
+        localStorage.new_scratch_libraries = JSON.stringify(libraries)
+        if (presetId === undefined) {
             localStorage.removeItem("new_scratch_presetId")
         } else {
-            localStorage["new_scratch_presetId"] = presetId
+            localStorage.new_scratch_presetId = presetId
         }
     }, [ready, label, asm, context, platform, compilerId, compilerFlags, diffFlags, libraries, presetId])
 
@@ -169,7 +169,7 @@ export default function NewScratchForm({ serverCompilers }: {
         if (!ready)
             return
 
-        if (presetId != undefined || compilerId != undefined) {
+        if (presetId !== undefined || compilerId !== undefined) {
             // User has specified a preset or compiler, don't override it
             return
         }
@@ -192,11 +192,9 @@ export default function NewScratchForm({ serverCompilers }: {
     const compilersTranslation = getTranslation("compilers")
     const compilerChoiceOptions = useMemo(() => {
         return Object.keys(platformCompilers).reduce((sum, id) => {
-            return {
-                ...sum,
-                [id]: compilersTranslation.t(id),
-            }
-        }, {})
+            sum[id] = compilersTranslation.t(id)
+            return sum
+        }, {} as Record<string, string>)
     }, [platformCompilers, compilersTranslation])
 
     const submit = async () => {
@@ -213,8 +211,8 @@ export default function NewScratchForm({ serverCompilers }: {
                 diff_label: label || defaultLabel || "",
             })
 
-            localStorage["new_scratch_label"] = ""
-            localStorage["new_scratch_asm"] = ""
+            localStorage.new_scratch_label = ""
+            localStorage.new_scratch_asm = ""
 
             await api.claimScratch(scratch)
 
@@ -310,7 +308,7 @@ export default function NewScratchForm({ serverCompilers }: {
         <div>
             <AsyncButton
                 primary
-                disabled={asm.length == 0}
+                disabled={asm.length === 0}
                 onClick={submit}
                 errorPlacement="right-center"
                 className="mt-2"

frontend/src/app/(navfooter)/new/layout.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react"
+import type { ReactNode } from "react"
 
 export default function Layout({ children }: { children: ReactNode }) {
     return <div className="mx-auto max-w-[46.5rem] p-4 pb-2 text-justify text-base leading-normal">

frontend/src/app/(navfooter)/new/page.tsx

@@ -11,7 +11,7 @@ export default async function NewScratchPage() {
     const compilers = await get("/compiler")
 
     return <main>
-        <h1 className="text-2xl font-semibold tracking-tight text-gray-12 md:text-3xl">Start a new scratch</h1>
+        <h1 className="font-semibold text-2xl text-gray-12 tracking-tight md:text-3xl">Start a new scratch</h1>
         <p className="max-w-prose py-3 leading-snug">{DESCRIPTION}</p>
         <NewScratchForm serverCompilers={compilers} />
     </main>

frontend/src/app/(navfooter)/page.tsx

@@ -1,4 +1,4 @@
-import { Metadata } from "next"
+import type { Metadata } from "next"
 
 import ScratchList, { SingleLineScratchItem } from "@/components/ScratchList"
 import YourScratchList from "@/components/YourScratchList"

frontend/src/app/(navfooter)/platform/[id]/page.tsx

@@ -1,11 +1,11 @@
-import { Metadata } from "next"
+import type { Metadata } from "next"
 
 import { notFound } from "next/navigation"
 
 import { PlatformIcon } from "@/components/PlatformSelect/PlatformIcon"
 import ScratchList, { ScratchItemPlatformList } from "@/components/ScratchList"
 import { get } from "@/lib/api/request"
-import { PlatformMetadata } from "@/lib/api/types"
+import type { PlatformMetadata } from "@/lib/api/types"
 
 export async function generateMetadata({ params }: { params: { id: number } }):Promise<Metadata> {
     let platform: PlatformMetadata
@@ -21,9 +21,9 @@ export async function generateMetadata({ params }: { params: { id: number } }):P
     }
 
     let description = "There "
-    description += platform.num_scratches == 1 ? "is " : "are "
-    description += platform.num_scratches == 0 ? "currently no " : `${platform.num_scratches.toLocaleString("en-US")} `
-    description += platform.num_scratches == 1 ? "scratch " : "scratches "
+    description += platform.num_scratches === 1 ? "is " : "are "
+    description += platform.num_scratches === 0 ? "currently no " : `${platform.num_scratches.toLocaleString("en-US")} `
+    description += platform.num_scratches === 1 ? "scratch " : "scratches "
     description += "for this platform."
 
     return {
@@ -48,7 +48,7 @@ export default async function Page({ params }: { params: { id: number } }) {
     }
 
     return <main className="mx-auto w-full max-w-3xl p-4">
-        <div className="flex items-center gap-2 text-2xl font-medium">
+        <div className="flex items-center gap-2 font-medium text-2xl">
             <PlatformIcon platform={platform.id} size={32} />
             <h1>
                 {platform.name}