tree-reports: migrate to Svelte 5 runes

frontend/src/reports/commodities/index.ts

@@ -1,5 +1,4 @@
 import { get } from "../../api";
-import type { FavaChart } from "../../charts";
 import { LineChart } from "../../charts/line";
 import { domHelpers } from "../../charts/tooltip";
 import { day } from "../../format";
@@ -8,14 +7,7 @@ import { getURLFilters } from "../../stores/filters";
 import { Route } from "../route";
 import CommoditiesSvelte from "./Commodities.svelte";
 
-export const commodities = new Route<{
-  commodities: {
-    base: string;
-    quote: string;
-    prices: [Date, number][];
-  }[];
-  charts: FavaChart[];
-}>(
+export const commodities = new Route(
   "commodities",
   CommoditiesSvelte,
   async (url) =>

frontend/src/reports/documents/index.ts

@@ -1,11 +1,10 @@
 import { get } from "../../api";
-import type { Document } from "../../entries";
 import { _ } from "../../i18n";
 import { getURLFilters } from "../../stores/filters";
 import { Route } from "../route";
 import Documents from "./Documents.svelte";
 
-export const documents = new Route<{ documents: Document[] }>(
+export const documents = new Route(
   "documents",
   Documents,
   async (url: URL) =>

frontend/src/reports/editor/index.ts

@@ -1,16 +1,10 @@
-import type { LanguageSupport } from "@codemirror/language";
-
 import { get } from "../../api";
-import type { SourceFile } from "../../api/validators";
 import { getBeancountLanguageSupport } from "../../codemirror/beancount";
 import { _ } from "../../i18n";
 import { Route } from "../route";
 import Editor from "./Editor.svelte";
 
-export const editor = new Route<{
-  source: SourceFile;
-  beancount_language_support: LanguageSupport;
-}>(
+export const editor = new Route(
   "editor",
   Editor,
   async (url: URL) =>

frontend/src/reports/events/index.ts

@@ -1,13 +1,10 @@
 import { get } from "../../api";
-import type { Event } from "../../entries";
 import { _ } from "../../i18n";
 import { getURLFilters } from "../../stores/filters";
 import { Route } from "../route";
 import Events from "./Events.svelte";
 
-export const events = new Route<{
-  events: Event[];
-}>(
+export const events = new Route(
   "events",
   Events,
   async (url: URL) =>

frontend/src/reports/holdings/index.ts

@@ -2,7 +2,6 @@ import { get } from "../../api";
 import { getUrlPath } from "../../helpers";
 import { _ } from "../../i18n";
 import { getURLFilters } from "../../stores/filters";
-import type { QueryResultTable } from "../query/query_table";
 import { Route } from "../route";
 import Holdings from "./Holdings.svelte";
 
@@ -67,11 +66,7 @@ ORDER BY cost_currency
 `.trim(),
 };
 
-export const holdings = new Route<{
-  aggregation_key: HoldingsReportType;
-  query_string: string;
-  query_result_table: QueryResultTable;
-}>(
+export const holdings = new Route(
   "holdings",
   Holdings,
   async (url) => {

frontend/src/reports/route.svelte.ts

@@ -15,7 +15,10 @@ export interface FrontendRoute {
 }
 
 /** This class pairs the components and their load functions to use them in a type-safe way. */
-export class Route<T extends Record<string, unknown>> implements FrontendRoute {
+// The base type for the component props needs to be typed as Record<string,any> to allow for T
+// to be correctly inferred from the imported svelte components
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export class Route<T extends Record<string, any>> implements FrontendRoute {
   /** The currently rendered instance - if loading failed, we render an error component. */
   private instance?:
     | { error: false; component: Record<string, unknown>; props: T }

frontend/src/reports/tree_reports/BalanceSheet.svelte

@@ -2,14 +2,15 @@
   import { parseChartData } from "../../charts";
   import ChartSwitcher from "../../charts/ChartSwitcher.svelte";
   import { chartContext } from "../../charts/context";
-  import type { AccountTreeNode } from "../../charts/hierarchy";
   import TreeTable from "../../tree-table/TreeTable.svelte";
+  import type { TreeReportProps } from ".";
 
-  export let charts: unknown;
-  export let trees: AccountTreeNode[];
-  export let date_range: { begin: Date; end: Date } | null;
+  let { charts, trees, date_range }: TreeReportProps = $props();
+  let end = $derived(date_range?.end ?? null);
 
-  $: chartData = parseChartData(charts, $chartContext).unwrap_or(null);
+  let chartData = $derived(
+    parseChartData(charts, $chartContext).unwrap_or(null),
+  );
 </script>
 
 {#if chartData}
@@ -19,12 +20,12 @@
 <div class="row">
   <div class="column">
     {#each trees.slice(0, 1) as tree}
-      <TreeTable {tree} end={date_range?.end ?? null} />
+      <TreeTable {tree} {end} />
     {/each}
   </div>
   <div class="column">
     {#each trees.slice(1) as tree}
-      <TreeTable {tree} end={date_range?.end ?? null} />
+      <TreeTable {tree} {end} />
     {/each}
   </div>
 </div>

frontend/src/reports/tree_reports/IncomeStatement.svelte

@@ -2,14 +2,15 @@
   import { parseChartData } from "../../charts";
   import ChartSwitcher from "../../charts/ChartSwitcher.svelte";
   import { chartContext } from "../../charts/context";
-  import type { AccountTreeNode } from "../../charts/hierarchy";
   import TreeTable from "../../tree-table/TreeTable.svelte";
+  import type { TreeReportProps } from ".";
 
-  export let charts: unknown;
-  export let trees: AccountTreeNode[];
-  export let date_range: { begin: Date; end: Date } | null;
+  let { charts, trees, date_range }: TreeReportProps = $props();
+  let end = $derived(date_range?.end ?? null);
 
-  $: chartData = parseChartData(charts, $chartContext).unwrap_or(null);
+  let chartData = $derived(
+    parseChartData(charts, $chartContext).unwrap_or(null),
+  );
 </script>
 
 {#if chartData}
@@ -19,12 +20,12 @@
 <div class="row">
   <div class="column">
     {#each trees.slice(0, 2) as tree}
-      <TreeTable {tree} end={date_range?.end ?? null} />
+      <TreeTable {tree} {end} />
     {/each}
   </div>
   <div class="column">
     {#each trees.slice(2) as tree}
-      <TreeTable {tree} end={date_range?.end ?? null} />
+      <TreeTable {tree} {end} />
     {/each}
   </div>
 </div>

frontend/src/reports/tree_reports/TrialBalance.svelte

@@ -2,14 +2,15 @@
   import { parseChartData } from "../../charts";
   import ChartSwitcher from "../../charts/ChartSwitcher.svelte";
   import { chartContext } from "../../charts/context";
-  import type { AccountTreeNode } from "../../charts/hierarchy";
   import TreeTable from "../../tree-table/TreeTable.svelte";
+  import type { TreeReportProps } from ".";
 
-  export let charts: unknown;
-  export let trees: AccountTreeNode[];
-  export let date_range: { begin: Date; end: Date } | null;
+  let { charts, trees, date_range }: TreeReportProps = $props();
+  let end = $derived(date_range?.end ?? null);
 
-  $: chartData = parseChartData(charts, $chartContext).unwrap_or(null);
+  let chartData = $derived(
+    parseChartData(charts, $chartContext).unwrap_or(null),
+  );
 </script>
 
 {#if chartData}
@@ -18,6 +19,6 @@
 
 <div class="row">
   {#each trees as tree}
-    <TreeTable {tree} end={date_range?.end ?? null} />
+    <TreeTable {tree} {end} />
   {/each}
 </div>

frontend/src/reports/tree_reports/index.ts

@@ -1,11 +1,18 @@
 import { get } from "../../api";
+import type { AccountTreeNode } from "../../charts/hierarchy";
 import { _ } from "../../i18n";
 import { getURLFilters } from "../../stores/filters";
 import { Route } from "../route";
 import BalanceSheet from "./BalanceSheet.svelte";
 import IncomeStatement from "./IncomeStatement.svelte";
 import TrialBalance from "./TrialBalance.svelte";
 
+export interface TreeReportProps {
+  charts: unknown;
+  trees: AccountTreeNode[];
+  date_range: { begin: Date; end: Date } | null;
+}
+
 export const income_statement = new Route(
   "income_statement",
   IncomeStatement,

frontend/src/tree-table/AccountCell.svelte

@@ -9,17 +9,21 @@
   import AccountIndicator from "../sidebar/AccountIndicator.svelte";
   import { getTreeTableContext } from "./helpers";
 
-  /** The account node to render the name cell for. */
-  export let node: AccountTreeNode;
+  interface Props {
+    /** The account node to render the name cell for. */
+    node: AccountTreeNode;
+  }
+
+  let { node }: Props = $props();
 
   const { toggled } = getTreeTableContext();
 
-  $: ({ account, children } = node);
+  let { account, children } = $derived(node);
 
   /**
    * Toggle the account and (depending on the mouse event) its children in the set.
    */
-  $: on_click = (event: MouseEvent) => {
+  let on_click = $derived((event: MouseEvent) => {
     toggled.update((t) => {
       const new_t = new Set(t);
       const is_toggled = new_t.has(account);
@@ -50,12 +54,12 @@
       }
       return new_t;
     });
-  };
+  });
 </script>
 
 <span class="droptarget" data-account-name={account}>
   {#if children.length > 0}
-    <button type="button" class="unset" on:click={on_click}>
+    <button type="button" class="unset" onclick={on_click}>
       {$toggled.has(account) ? "▸" : "▾"}
     </button>
   {/if}

frontend/src/tree-table/AccountCellHeader.svelte

@@ -20,7 +20,7 @@
       type="button"
       class="link"
       title={_("Expand all accounts")}
-      on:click={() => {
+      onclick={() => {
         toggled.set(new Set());
       }}
     >

frontend/src/tree-table/Diff.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
   import { ctx } from "../stores/format";
 
-  /** Difference to show. */
-  export let diff: number;
-  /** Number to show on hover. */
-  export let num: number;
-  /** The currency that both numbers are in. */
-  export let currency: string;
+  interface Props {
+    /** Difference to show. */
+    diff: number;
+    /** Number to show on hover. */
+    num: number;
+    /** The currency that both numbers are in. */
+    currency: string;
+  }
+
+  let { diff, num, currency }: Props = $props();
 </script>
 
 <br />

frontend/src/tree-table/IntervalTreeTable.svelte

@@ -12,35 +12,44 @@
   import { get_collapsed, get_not_shown, setTreeTableContext } from "./helpers";
   import IntervalTreeTableNode from "./IntervalTreeTableNode.svelte";
 
-  /** The account trees to show. */
-  export let trees: NonEmptyArray<AccountTreeNode>;
-  /** The dates. */
-  export let dates: { begin: Date; end: Date }[];
-  /** The budgets (per account a list per date range). */
-  export let budgets: Record<string, AccountBudget[]>;
-  /** Whether this is cumulative. */
-  export let accumulate: boolean;
+  interface Props {
+    /** The account trees to show. */
+    trees: NonEmptyArray<AccountTreeNode>;
+    /** The dates. */
+    dates: { begin: Date; end: Date }[];
+    /** The budgets (per account a list per date range). */
+    budgets: Record<string, AccountBudget[]>;
+    /** Whether this is cumulative. */
+    accumulate: boolean;
+  }
+
+  let { trees, dates, budgets, accumulate }: Props = $props();
 
   // Initialize context.
   // toggled is computed once on initialisation; not_shown is kept updated.
   const toggled = writable(get_collapsed(trees[0], $collapse_account));
   const not_shown = writable(new Set<string>());
   setTreeTableContext({ toggled, not_shown });
-  $: $not_shown = intersection(
+
+  $not_shown = intersection(
     ...trees.map((n, index) => $get_not_shown(n, dates[index]?.end ?? null)),
   );
 
-  $: account = trees[0].account;
-  $: start_date = accumulate ? min(dates, (d) => d.begin) : undefined;
-  $: start_date_filter = start_date
-    ? $currentTimeFilterDateFormat(start_date)
-    : undefined;
-  $: time_filters = dates.map((date_range): [string, string] => {
-    const title = $currentTimeFilterDateFormat(date_range.begin);
-    return start_date_filter != null
-      ? [title, `${start_date_filter}-${title}`]
-      : [title, title];
-  });
+  let account = $derived(trees[0].account);
+  let start_date = $derived(
+    accumulate ? min(dates, (d) => d.begin) : undefined,
+  );
+  let start_date_filter = $derived(
+    start_date ? $currentTimeFilterDateFormat(start_date) : undefined,
+  );
+  let time_filters = $derived(
+    dates.map((date_range): [string, string] => {
+      const title = $currentTimeFilterDateFormat(date_range.begin);
+      return start_date_filter != null
+        ? [title, `${start_date_filter}-${title}`]
+        : [title, title];
+    }),
+  );
 </script>
 
 <ol class="flex-table tree-table-new">