Improve ESLint configuration

eslint.config.mjs

@@ -68,7 +68,37 @@ export default ts.config(
       "@typescript-eslint/consistent-type-definitions": ["error", 'type'],
       // This error is already picked up by TypeScript, and it's annoying to need to silence it
       // twice when it is incorrect
-      "@typescript-eslint/no-unsafe-call": "off"
+      "@typescript-eslint/no-unsafe-call": "off",
+      // Prevent node standard library imports without `node:` prefix
+      "no-restricted-imports": ["error", {
+        paths: [
+          { name: "os", message: "Import from `node:os`" },
+          { name: "path", message: "Import from `node:path`" },
+          { name: "fs", message: "Import from `node:fs`" },
+          { name: "fs/promises", message: "Import from `node:fs/promises`" },
+          { name: "svelte/legacy", message: "Avoid legacy Svelte features" },
+        ]
+      }],
+      // Use `Promise.all` instead of `await` in a for loop for better async performance
+      "no-await-in-loop": "error",
+      // Don't allow duplicate imports, because they are yucky
+      "no-duplicate-imports": "error",
+      // Common mistake with `new Promise`
+      "no-promise-executor-return": ["error", { allowVoid: true }],
+      // Accidentally forgetting to use `back-ticks` for template literals
+      "no-template-curly-in-string": "error",
+      // Use === instead of ==
+      "eqeqeq": "error",
+      // Use dot notation for object property access
+      "dot-notation": "error",
+      // Don't use `alert` and similar functions
+      "no-alert": "error",
+      // Use camelCase for naming
+      "camelcase": "error",
+      // Use `const` over `let` where reasonable
+      // Not required for destructuring, since that just makes things painful for Svelte props where
+      // some props are bindable
+      "prefer-const": ["error", { destructuring: "all" }],
     },
   },
   {

src/components/Background.svelte

@@ -6,7 +6,7 @@
     color: string;
   };
 
-  let { color }: Props = $props();
+  const { color }: Props = $props();
 
   /** Possible positions for the background splotches */
   const possiblePositions: [number, number][] = [
@@ -30,7 +30,7 @@
    *
    * Each color is of the form `[color, posX, posY, spread]`
    */
-  let colors: [string, string, string, string][] = $derived(
+  const colors: [string, string, string, string][] = $derived(
     [-25, -15, -10, -5, 0, 0, 5, 10, 15, 25].map((hueDiff) => {
       const base = colord(color);
       const newColor = withLightness(

src/components/Paper.svelte

@@ -5,7 +5,7 @@
     children?: Snippet;
   };
 
-  let { opacity = 0.75, children }: Props = $props();
+  const { opacity = 0.75, children }: Props = $props();
 </script>
 
 <div class="paper" style="--opacity: {opacity}">

src/components/base/TextInput.svelte

@@ -37,7 +37,7 @@
 
   let displayErrorMessage = $state(false);
   let errorMessage: string | null = $state(null);
-  let overallErrorText = $derived(errorText ?? errorMessage);
+  const overallErrorText = $derived(errorText ?? errorMessage);
 
   function performValidation() {
     // Only start showing error messages once the user has interacted with this

src/components/base/button/Button.svelte

@@ -31,7 +31,7 @@
     mode = 'default',
   }: ButtonProps = $props();
 
-  let { color, hoverColor, clickColor } = $derived.by(() => {
+  const { color, hoverColor, clickColor } = $derived.by(() => {
     if (mode === 'warning') {
       return {
         color: '#FF808040',

src/components/base/button/CopyButton.svelte

@@ -7,7 +7,7 @@
     children?: import('svelte').Snippet;
   };
 
-  let { text, hint = 'Copy', children }: Props = $props();
+  const { text, hint = 'Copy', children }: Props = $props();
 
   function copy() {
     void navigator.clipboard.writeText(text);

src/components/card/Card.svelte

@@ -15,13 +15,13 @@
     onclick?: (e: MouseEvent | undefined | null) => void;
   };
 
-  let { link, color, children, onclick }: Props = $props();
+  const { link, color, children, onclick }: Props = $props();
 
-  let baseColor = $derived(withLightness(colord(color), 80).toHex());
-  let hoverColor = $derived(withLightness(colord(color), 65).toHex());
+  const baseColor = $derived(withLightness(colord(color), 80).toHex());
+  const hoverColor = $derived(withLightness(colord(color), 65).toHex());
 
-  let linkHref = $derived(link ? link.url : undefined);
-  let linkNewTab = $derived(link?.newTab ? '_blank' : undefined);
+  const linkHref = $derived(link ? link.url : undefined);
+  const linkNewTab = $derived(link?.newTab ? '_blank' : undefined);
 </script>
 
 <!--

src/components/card/CardList.svelte

@@ -5,7 +5,7 @@
     children: Snippet;
   }
 
-  let { children }: Props = $props();
+  const { children }: Props = $props();
 </script>
 
 <div class="card-list">

src/components/card/IconCard.svelte

@@ -14,7 +14,7 @@
     icon?: import('svelte').Snippet;
   };
 
-  let { title, link, color, icon, onclick }: Props = $props();
+  const { title, link, color, icon, onclick }: Props = $props();
 </script>
 
 <!--

src/components/card/ItemCard.svelte

@@ -18,7 +18,7 @@
     dndId?: string;
   };
 
-  let { item, itemId, link, onclick, dndId }: Props = $props();
+  const { item, itemId, link, onclick, dndId }: Props = $props();
 </script>
 
 <div

src/components/card/ItemCardGrid.svelte

@@ -24,7 +24,7 @@
     onDropItem?: (itemId: ItemId) => void;
   };
 
-  let {
+  const {
     portfolio,
     itemIds,
     onclick,

src/components/chip/Chip.svelte

@@ -18,7 +18,7 @@
     onclick?: (e: MouseEvent | undefined | null) => void;
   };
 
-  let {
+  const {
     name,
     description,
     color,
@@ -27,18 +27,18 @@
     selected = false,
   }: Props = $props();
 
-  let fillColor = $derived(
+  const fillColor = $derived(
     selected
       ? withLightness(colord(color), 75).toHex()
       : withLightness(colord(color), 85).toHex(),
   );
-  let borderColor = $derived(
+  const borderColor = $derived(
     selected
       ? withLightness(colord(color), 40).toHex()
       : withLightness(colord(color), 50).toHex(),
   );
-  let hoverColor = $derived(withLightness(colord(color), 60).toHex());
-  let borderWidth = $derived(selected ? '2px' : '1px');
+  const hoverColor = $derived(withLightness(colord(color), 60).toHex());
+  const borderWidth = $derived(selected ? '2px' : '1px');
 </script>
 
 <a {onclick} href={link?.url}>

src/components/chip/ItemChip.svelte

@@ -12,7 +12,7 @@
     onclick?: (e: MouseEvent | undefined | null) => void;
   };
 
-  let {
+  const {
     item,
     itemId,
     link = false,

src/components/chip/ItemChipList.svelte

@@ -22,7 +22,7 @@
     onclick?: (itemId: ItemId) => void;
   };
 
-  let { portfolio, items, link = false, onfilter, onclick }: Props = $props();
+  const { portfolio, items, link = false, onfilter, onclick }: Props = $props();
 
   // Smoooooooooooth scrolling
   // ==================================================

src/components/markdown/Markdown.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import { run } from 'svelte/legacy';
-
   import { marked } from 'marked';
   import hljs from 'highlight.js';
   import 'highlight.js/styles/stackoverflow-light.css';
@@ -9,7 +7,7 @@
     source: string;
   };
 
-  let { source }: Props = $props();
+  const { source }: Props = $props();
 
   // https://github.com/markedjs/marked/discussions/2982#discussioncomment-6979586
   const renderer = {
@@ -35,12 +33,11 @@
       });
     });
   }
-  let rendered = $derived(marked(source));
-  // https://stackoverflow.com/a/75688200/6335363
-  // TODO: Find a way to automagically disable this but only for Svelte
-  run(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    rendered && markdownRender && applySyntaxHighlighting(markdownRender);
+  const rendered = $derived(marked(source));
+  $effect(() => {
+    if (rendered && markdownRender) {
+      applySyntaxHighlighting(markdownRender);
+    }
   });
 </script>
 

src/components/markdown/MarkdownEditor.svelte

@@ -20,7 +20,7 @@
     }
   }
 
-  let updater = new DelayedUpdater(onchange, consts.EDIT_COMMIT_HESITATION);
+  const updater = new DelayedUpdater(onchange, consts.EDIT_COMMIT_HESITATION);
 </script>
 
 <div class="md-editor">

src/components/modals/Error.svelte

@@ -8,7 +8,7 @@
     onclose: () => void;
   };
 
-  let { text, show, header, onclose }: Props = $props();
+  const { text, show, header, onclose }: Props = $props();
 </script>
 
 <Modal {show} color="#ffaaaa" {onclose}>

src/components/modals/Modal.svelte

@@ -9,7 +9,7 @@
     onclose: () => void;
   };
 
-  let {
+  const {
     show,
     color = 'white',
     showCloseButton = true,
@@ -18,7 +18,7 @@
     onclose,
   }: Props = $props();
 
-  let display = $derived(show ? 'block' : 'none');
+  const display = $derived(show ? 'block' : 'none');
 
   function onkeydown(e: KeyboardEvent) {
     if (show && e.key === 'Escape') {

src/components/modals/NewItemModal.svelte

@@ -14,7 +14,7 @@
     onclose: () => void;
   };
 
-  let { show, parent, onclose }: Props = $props();
+  const { show, parent, onclose }: Props = $props();
 
   let itemName = $state('');
   let newItemId = $state('');
@@ -43,7 +43,7 @@
     await goto(itemId.child(parent, newItemId));
   }
 
-  let valuesOk = $state({
+  const valuesOk = $state({
     name: false,
     id: false,
   });

src/components/modals/Spinner.svelte

@@ -7,7 +7,7 @@
     show: boolean;
   };
 
-  let { header, text, show }: Props = $props();
+  const { header, text, show }: Props = $props();
 </script>
 
 <Modal {show} color="white" showCloseButton={false} onclose={() => {}}>

src/components/navbar/ControlButtons.svelte

@@ -17,7 +17,7 @@
     onEditFinish?: () => void;
   };
 
-  let {
+  const {
     loggedIn,
     editable = false,
     editing = false,

src/components/navbar/Navbar.svelte

@@ -35,7 +35,7 @@
     onEditFinish?: () => void;
   } & (PropsItem | PropsOther);
 
-  let {
+  const {
     path,
     data,
     loggedIn,
@@ -81,7 +81,7 @@
     ];
   }
 
-  let overallPath: NavbarPath = $derived.by(() => {
+  const overallPath: NavbarPath = $derived.by(() => {
     if (typeof path === 'string') {
       // Path is ItemId
       return itemIdToPath(path, lastItem!);

src/lib/itemData.ts

@@ -2,8 +2,7 @@
  * Functions for navigating and operating on the `ItemData` type
  */
 
-import type { ItemId } from './itemId';
-import itemId from './itemId';
+import itemId, { type ItemId } from './itemId';
 import type { ItemData } from './server/data/item';
 
 /**

src/lib/localStore.ts

@@ -5,15 +5,14 @@
  */
 
 import { browser } from '$app/environment';
-import type { Writable } from 'svelte/store';
-import { writable, get } from 'svelte/store';
+import { writable, get, type Writable } from 'svelte/store';
 
 const storage = <T>(key: string, initValue: T): Writable<T> => {
   const store = writable(initValue);
   if (!browser) return store;
 
   const storedValueStr = localStorage.getItem(key);
-  if (storedValueStr != null) store.set(JSON.parse(storedValueStr));
+  if (storedValueStr !== null) store.set(JSON.parse(storedValueStr));
 
   store.subscribe((val) => {
     if (([null, undefined] as (T | undefined | null)[]).includes(val)) {
@@ -25,7 +24,7 @@ const storage = <T>(key: string, initValue: T): Writable<T> => {
 
   window.addEventListener('storage', () => {
     const storedValueStr = localStorage.getItem(key);
-    if (storedValueStr == null) return;
+    if (storedValueStr === null) return;
 
     const localValue: T = JSON.parse(storedValueStr);
     if (localValue !== get(store)) store.set(localValue);

src/lib/seo.ts

@@ -2,8 +2,7 @@
  * Helper functions used in SEO (search engine optimization).
  */
 
-import type { ItemId } from './itemId';
-import itemId from './itemId';
+import itemId, { type ItemId } from './itemId';
 import type { ItemData } from './server/data/item';
 
 export function generateKeywords(data: ItemData, id: ItemId): string {

src/lib/server/auth/passwords.ts

@@ -13,7 +13,7 @@ const FAIL_DURATION = 100;
  * Promise that resolves in a random amount of time, used to get some timing
  * invariance.
  */
-const sleepRandom = () => new Promise<void>((r) => setTimeout(r, Math.random() * FAIL_DURATION));
+const sleepRandom = () => new Promise<void>((r) => void setTimeout(r, Math.random() * FAIL_DURATION));
 
 /**
  * Throw a 401 after a random (small) amount of time, so that timing attacks

src/lib/server/auth/secret.ts

@@ -1,7 +1,7 @@
 /**
  * Code for managing the authentication secret.
  */
-import fs from 'fs/promises';
+import fs from 'node:fs/promises';
 import { getPrivateDataDir } from '../data/dataDir';
 import { nanoid } from 'nanoid';
 

src/lib/server/data/config.ts

@@ -1,4 +1,4 @@
-import { readFile, writeFile } from 'fs/promises';
+import { readFile, writeFile } from 'node:fs/promises';
 import { array, nullable, object, string, validate, type Infer } from 'superstruct';
 import { getDataDir } from './dataDir';
 import { version } from '$app/environment';

src/lib/server/data/dataDir.ts

@@ -1,4 +1,4 @@
-import path from 'path';
+import path from 'node:path';
 import simpleGit, { CheckRepoActions } from 'simple-git';
 import { fileExists } from '../util';