lint

Author: yagebu

frontend/src/charts/SelectCombobox.svelte

@@ -36,6 +36,8 @@
   /** Whether the list of options in the Combobox popup is hidden. */
   let hidden = $state(true);
   /** The index of the option that is currently focused */
+  // Use the initial index in options (options does not change).
+  // svelte-ignore state_referenced_locally
   let index = $state(options.indexOf(value));
   /** The popup list element. */
   let ul: HTMLUListElement | undefined = $state();

frontend/src/charts/Sunburst.svelte

@@ -34,8 +34,7 @@
 
   $effect.pre(() => {
     // if-expression to run on each change of chart
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    data;
+    void data;
     untrack(() => {
       current = null;
     });

frontend/src/codemirror/setup.ts

@@ -22,7 +22,6 @@ import {
 } from "@codemirror/language";
 import { lintGutter, lintKeymap } from "@codemirror/lint";
 import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
-import type { Extension } from "@codemirror/state";
 import { EditorState } from "@codemirror/state";
 import type { KeyBinding } from "@codemirror/view";
 import {
@@ -81,22 +80,14 @@ interface EditorAndAttachment {
   renderEditor: Attachment<HTMLDivElement | HTMLPreElement>;
 }
 
-function setup(
-  value: string | undefined,
-  extensions: Extension[],
-): EditorAndAttachment {
-  const view = new EditorView({
-    state: EditorState.create(
-      value !== undefined ? { doc: value, extensions } : { extensions },
-    ),
-  });
+function editor_attachment(editor: EditorView): EditorAndAttachment {
   return {
-    editor: view,
+    editor,
     renderEditor: (el) => {
-      el.appendChild(view.dom);
+      el.appendChild(editor.dom);
 
       return () => {
-        el.removeChild(view.dom);
+        el.removeChild(editor.dom);
       };
     },
   };
@@ -105,12 +96,16 @@ function setup(
 /**
  * A basic readonly editor for an asynchronously loaded document.
  */
-export function initDocumentPreviewEditor(value: string): EditorAndAttachment {
-  return setup(value, [
-    baseExtensions,
-    EditorState.readOnly.of(true),
-    placeholder("Loading..."),
-  ]);
+export function initDocumentPreviewEditor(): EditorAndAttachment {
+  return editor_attachment(
+    new EditorView({
+      extensions: [
+        baseExtensions,
+        EditorState.readOnly.of(true),
+        placeholder("Loading..."),
+      ],
+    }),
+  );
 }
 
 /**
@@ -121,11 +116,14 @@ export class BeancountTextarea extends HTMLTextAreaElement {
     super();
     getBeancountLanguageSupport()
       .then((beancount) => {
-        const { editor } = setup(this.value, [
-          beancount,
-          syntaxHighlighting(defaultHighlightStyle),
-          EditorView.editable.of(false),
-        ]);
+        const editor = new EditorView({
+          doc: this.value,
+          extensions: [
+            beancount,
+            syntaxHighlighting(defaultHighlightStyle),
+            EditorView.editable.of(false),
+          ],
+        });
         this.parentNode?.insertBefore(editor.dom, this);
         this.style.display = "none";
       })
@@ -140,64 +138,80 @@ export function initBeancountEditor(
   value: string,
   onDocChanges: (s: EditorState) => void,
   commands: KeyBinding[],
-  beancount: LanguageSupport,
+  beancount: () => LanguageSupport,
 ): EditorAndAttachment {
   const $indent = store_get(indent);
   const $currency_column = store_get(currency_column);
-  return setup(value, [
-    beancount,
-    indentUnit.of(" ".repeat($indent)),
-    ...($currency_column ? [rulerPlugin($currency_column - 1)] : []),
-    keymap.of(commands),
-    EditorView.updateListener.of((update) => {
-      if (update.docChanged) {
-        onDocChanges(update.state);
-      }
+  return editor_attachment(
+    new EditorView({
+      doc: value,
+      extensions: [
+        beancount(),
+        indentUnit.of(" ".repeat($indent)),
+        ...($currency_column ? [rulerPlugin($currency_column - 1)] : []),
+        keymap.of(commands),
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged) {
+            onDocChanges(update.state);
+          }
+        }),
+        baseExtensions,
+        syntaxHighlighting(beancountEditorHighlight),
+      ],
     }),
-    baseExtensions,
-    syntaxHighlighting(beancountEditorHighlight),
-  ]);
+  );
 }
 
 /**
  * A basic readonly BQL editor that only does syntax highlighting.
  */
 export function initReadonlyQueryEditor(value: string): EditorAndAttachment {
-  return setup(value, [
-    bql,
-    syntaxHighlighting(beancountQueryHighlight),
-    EditorView.editable.of(false),
-  ]);
+  return editor_attachment(
+    new EditorView({
+      doc: value,
+      extensions: [
+        bql,
+        syntaxHighlighting(beancountQueryHighlight),
+        EditorView.editable.of(false),
+      ],
+    }),
+  );
 }
 
 /**
  * The main BQL editor.
  */
 export function initQueryEditor(
-  value: string | undefined,
+  value: string,
   onDocChanges: (s: EditorState) => void,
-  _placeholder: string,
-  submit: () => void,
+  placeholder_value: string,
+  get_submit: () => () => void,
 ): EditorAndAttachment {
-  return setup(value, [
-    bql,
-    EditorView.updateListener.of((update) => {
-      if (update.docChanged) {
-        onDocChanges(update.state);
-      }
+  return editor_attachment(
+    new EditorView({
+      doc: value,
+      extensions: [
+        bql,
+        EditorView.updateListener.of((update) => {
+          if (update.docChanged) {
+            onDocChanges(update.state);
+          }
+        }),
+        keymap.of([
+          {
+            key: "Control-Enter",
+            mac: "Meta-Enter",
+            run: () => {
+              const submit = get_submit();
+              submit();
+              return true;
+            },
+          },
+        ]),
+        placeholder(placeholder_value),
+        baseExtensions,
+        syntaxHighlighting(beancountQueryHighlight),
+      ],
     }),
-    keymap.of([
-      {
-        key: "Control-Enter",
-        mac: "Meta-Enter",
-        run: () => {
-          submit();
-          return true;
-        },
-      },
-    ]),
-    placeholder(_placeholder),
-    baseExtensions,
-    syntaxHighlighting(beancountQueryHighlight),
-  ]);
+  );
 }

frontend/src/editor/DocumentPreviewEditor.svelte

@@ -15,7 +15,7 @@
 
   let { url }: Props = $props();
 
-  const { editor, renderEditor } = initDocumentPreviewEditor("");
+  const { editor, renderEditor } = initDocumentPreviewEditor();
 
   const set_editor_content = (value: string) => {
     if (value !== editor.state.sliceDoc()) {

frontend/src/editor/SliceEditor.svelte

@@ -24,8 +24,12 @@
     sha256sum = $bindable(),
   }: Props = $props();
 
-  let currentSlice = $state(slice);
-  let changed = $derived(currentSlice !== slice);
+  // Keep the initital slice value to check for changes.
+  // svelte-ignore state_referenced_locally
+  const initial_slice = slice;
+
+  let currentSlice = $state(initial_slice);
+  let changed = $derived(currentSlice !== initial_slice);
 
   let saving = $state(false);
   let deleting = $state(false);
@@ -67,7 +71,7 @@
   }
 
   const { renderEditor } = initBeancountEditor(
-    slice,
+    initial_slice,
     (state) => {
       currentSlice = state.sliceDoc();
     },
@@ -83,7 +87,7 @@
         },
       },
     ],
-    beancount_language_support,
+    () => beancount_language_support,
   );
 </script>
 

frontend/src/reports/editor/Editor.svelte

@@ -72,13 +72,12 @@
         },
       },
     ],
-    beancount_language_support,
+    () => beancount_language_support,
   );
 
   $effect(() => {
     // update editor contents if source changes
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    source;
+    void source;
     untrack(() => {
       editor.dispatch(replaceContents(editor.state, source.source));
       sha256sum = source.sha256sum;

frontend/src/reports/import/Import.svelte

@@ -23,12 +23,15 @@
 
   let { files }: ImportReportProps = $props();
 
-  /** Whether the `<details>` for the "other files" is open. */
-  let show_other_files = $state.raw(
-    // initially show the other files if no importable files are present
-    files.every((file) => !file.identified_by_importers),
+  // initially show the other files if no importable files are present
+  // svelte-ignore state_referenced_locally
+  const show_other_files_initially = files.every(
+    (file) => !file.identified_by_importers,
   );
 
+  /** Whether the `<details>` for the "other files" is open. */
+  let show_other_files = $state.raw(show_other_files_initially);
+
   /** The array of entries to show the modal for. */
   let entries: Entry[] = $state([]);
 

frontend/src/reports/query/QueryEditor.svelte

@@ -17,7 +17,7 @@
       value = state.sliceDoc();
     },
     _("...enter a BQL query. 'help' to list available commands."),
-    submit,
+    () => submit,
   );
 
   $effect(() => {

frontend/src/reports/query/ReadonlyQueryEditor.svelte

@@ -8,6 +8,8 @@
 
   let { value, error = false }: Props = $props();
 
+  // This component is not used with updating values
+  // svelte-ignore state_referenced_locally
   const { renderEditor } = initReadonlyQueryEditor(value);
 </script>
 

frontend/src/tree-table/IntervalTreeTableNode.svelte

@@ -11,9 +11,11 @@
   import { getTreeTableNotShownContext } from "./helpers.ts";
   import IntervalTreeTableNode from "./IntervalTreeTableNode.svelte";
 
+  type Nodes = NonEmptyArray<AccountTreeNode>;
+
   interface Props {
     /** The account nodes to show. */
-    nodes: NonEmptyArray<AccountTreeNode>;
+    nodes: Nodes;
     /** The budgets (per account a list per date range). */
     budgets: Record<string, AccountBudget[]>;
   }
@@ -70,9 +72,7 @@
       {#each children as child, index (child.account)}
         {#if !$not_shown.has(child.account)}
           <IntervalTreeTableNode
-            nodes={nodes.map(
-              (n) => n.children[index],
-            ) as unknown as NonEmptyArray}
+            nodes={nodes.map((n) => n.children[index]) as unknown as Nodes}
             {budgets}
           />
         {/if}