chore: setup linting

2026-02-02 16:22:14 +01:00
parent 137425b31b
commit 30e897468a
174 changed files with 6043 additions and 5107 deletions
--- a/app/src/lib/performance/BarSplit.svelte
+++ b/app/src/lib/performance/BarSplit.svelte
@@ -8,15 +8,15 @@

  const total = $derived(values.reduce((acc, v) => acc + v, 0));

-  let colors = ["red", "green", "blue"];
+  let colors = ['red', 'green', 'blue'];
 </script>

 <div class="wrapper">
  <div class="bars">
-    {#each values as value, i}
+    {#each values as value, i (value)}
      <div
        class="bar bg-{colors[i]}-400"
-        style="width: {(value / total) * 100}%;"
+        style:width={(value / total) * 100 + '%'}
      >
        {Math.round(value)}ms
      </div>
@@ -24,7 +24,7 @@
  </div>

  <div class="labels mt-2">
-    {#each values as _label, i}
+    {#each values as _label, i (_label)}
      <div class="text-{colors[i]}-400">{labels[i]}</div>
    {/each}
  </div>
--- a/app/src/lib/performance/Monitor.svelte
+++ b/app/src/lib/performance/Monitor.svelte
@@ -9,17 +9,17 @@

  let {
    points,
-    type = "ms",
-    title = "Performance",
+    type = 'ms',
+    title = 'Performance',
    max,
-    min,
+    min
  }: Props = $props();

  let internalMax = $derived(max ?? Math.max(...points));
  let internalMin = $derived(min ?? Math.min(...points))!;

  const maxText = $derived.by(() => {
-    if (type === "%") {
+    if (type === '%') {
      return 100;
    }

@@ -40,11 +40,10 @@
    points
      .map((point, i) => {
        const x = (i / (points.length - 1)) * 100;
-        const y =
-          100 - ((point - internalMin) / (internalMax - internalMin)) * 100;
+        const y = 100 - ((point - internalMin) / (internalMax - internalMin)) * 100;
        return `${x},${y}`;
      })
-      .join(" "),
+      .join(' ')
  );
 </script>

--- a/app/src/lib/performance/PerformanceViewer.svelte
+++ b/app/src/lib/performance/PerformanceViewer.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-  import Monitor from "./Monitor.svelte";
-  import { humanizeNumber } from "$lib/helpers";
-  import { Checkbox } from "@nodarium/ui";
-  import type { PerformanceData } from "@nodarium/utils";
-  import BarSplit from "./BarSplit.svelte";
+  import { humanizeNumber } from '$lib/helpers';
+  import { Checkbox } from '@nodarium/ui';
+  import type { PerformanceData } from '@nodarium/utils';
+  import BarSplit from './BarSplit.svelte';
+  import Monitor from './Monitor.svelte';

  const { data }: { data: PerformanceData } = $props();

-  let activeType = $state("total");
+  let activeType = $state('total');
  let showAverage = $state(true);

  function round(v: number) {
@@ -21,21 +21,21 @@
  }

  function getTitle(t: string) {
-    if (t.includes("/")) {
-      return `Node ${t.split("/").slice(-1).join("/")}`;
+    if (t.includes('/')) {
+      return `Node ${t.split('/').slice(-1).join('/')}`;
    }

    return t
-      .split("-")
+      .split('-')
      .map((v) => v[0].toUpperCase() + v.slice(1))
-      .join(" ");
+      .join(' ');
  }

  const viewerKeys = [
-    "total-vertices",
-    "total-faces",
-    "update-geometries",
-    "split-result",
+    'total-vertices',
+    'total-faces',
+    'update-geometries',
+    'split-result'
  ];

  // --- Small helpers that query `data` directly ---
@@ -64,21 +64,19 @@
  const lasts = $derived.by(() => data.at(-1) || {});

  const totalPerformance = $derived.by(() => {
-    const onlyLast =
-      getLast("runtime") +
-      getLast("update-geometries") +
-      getLast("worker-transfer");
-    const average =
-      getAverage("runtime") +
-      getAverage("update-geometries") +
-      getAverage("worker-transfer");
+    const onlyLast = getLast('runtime')
+      + getLast('update-geometries')
+      + getLast('worker-transfer');
+    const average = getAverage('runtime')
+      + getAverage('update-geometries')
+      + getAverage('worker-transfer');
    return { onlyLast, average };
  });

  const cacheRatio = $derived.by(() => {
    return {
-      onlyLast: Math.floor(getLast("cache-hit") * 100),
-      average: Math.floor(getAverage("cache-hit") * 100),
+      onlyLast: Math.floor(getLast('cache-hit') * 100),
+      average: Math.floor(getAverage('cache-hit') * 100)
    };
  });

@@ -87,10 +85,10 @@
    return Object.entries(source)
      .filter(
        ([key]) =>
-          !key.startsWith("node/") &&
-          key !== "total" &&
-          !key.includes("cache") &&
-          !viewerKeys.includes(key),
+          !key.startsWith('node/')
+          && key !== 'total'
+          && !key.includes('cache')
+          && !viewerKeys.includes(key)
      )
      .sort((a, b) => b[1] - a[1]);
  });
@@ -98,7 +96,7 @@
  const nodePerformanceData = $derived.by(() => {
    const source = showAverage ? averages : lasts;
    return Object.entries(source)
-      .filter(([key]) => key.startsWith("node/"))
+      .filter(([key]) => key.startsWith('node/'))
      .sort((a, b) => b[1] - a[1]);
  });

@@ -107,9 +105,9 @@
    return Object.entries(source)
      .filter(
        ([key]) =>
-          key !== "total-vertices" &&
-          key !== "total-faces" &&
-          viewerKeys.includes(key),
+          key !== 'total-vertices'
+          && key !== 'total-faces'
+          && viewerKeys.includes(key)
      )
      .sort((a, b) => b[1] - a[1]);
  });
@@ -117,15 +115,15 @@
  const splitValues = $derived.by(() => {
    if (showAverage) {
      return [
-        getAverage("worker-transfer"),
-        getAverage("runtime"),
-        getAverage("update-geometries"),
+        getAverage('worker-transfer'),
+        getAverage('runtime'),
+        getAverage('update-geometries')
      ];
    }
    return [
-      getLast("worker-transfer"),
-      getLast("runtime"),
-      getLast("update-geometries"),
+      getLast('worker-transfer'),
+      getLast('runtime'),
+      getLast('update-geometries')
    ];
  });

@@ -133,24 +131,24 @@
    if (showAverage) {
      return data.map((run) => {
        return (
-          (run["runtime"]?.reduce((acc, v) => acc + v, 0) || 0) +
-          (run["update-geometries"]?.reduce((acc, v) => acc + v, 0) || 0) +
-          (run["worker-transfer"]?.reduce((acc, v) => acc + v, 0) || 0)
+          (run['runtime']?.reduce((acc, v) => acc + v, 0) || 0)
+          + (run['update-geometries']?.reduce((acc, v) => acc + v, 0) || 0)
+          + (run['worker-transfer']?.reduce((acc, v) => acc + v, 0) || 0)
        );
      });
    }

    return data.map((run) => {
      return (
-        (run["runtime"]?.[0] || 0) +
-        (run["update-geometries"]?.[0] || 0) +
-        (run["worker-transfer"]?.[0] || 0)
+        (run['runtime']?.[0] || 0)
+        + (run['update-geometries']?.[0] || 0)
+        + (run['worker-transfer']?.[0] || 0)
      );
    });
  });

  function constructPoints(key: string) {
-    if (key === "total") {
+    if (key === 'total') {
      return totalPoints;
    }
    return data.map((run) => {
@@ -166,21 +164,21 @@
  }

  const computedTotalDisplay = $derived.by(() =>
-    round(showAverage ? totalPerformance.average : totalPerformance.onlyLast),
+    round(showAverage ? totalPerformance.average : totalPerformance.onlyLast)
  );

  const computedFps = $derived.by(() =>
    Math.floor(
-      1000 /
-        (showAverage
+      1000
+        / (showAverage
          ? totalPerformance.average || 1
-          : totalPerformance.onlyLast || 1),
-    ),
+          : totalPerformance.onlyLast || 1)
+    )
  );
 </script>

 {#if data.length !== 0}
-  {#if activeType === "cache-hit"}
+  {#if activeType === 'cache-hit'}
    <Monitor
      title="Cache Hits"
      points={constructPoints(activeType)}
@@ -202,7 +200,7 @@
    </div>

    <BarSplit
-      labels={["worker-transfer", "runtime", "update-geometries"]}
+      labels={['worker-transfer', 'runtime', 'update-geometries']}
      values={splitValues}
    />

@@ -215,14 +213,14 @@
            {computedTotalDisplay}<span>ms</span>
          </td>
          <td
-            class:active={activeType === "total"}
-            onclick={() => (activeType = "total")}
+            class:active={activeType === 'total'}
+            onclick={() => (activeType = 'total')}
          >
            total<span>({computedFps}fps)</span>
          </td>
        </tr>

-        {#each performanceData as [key, value]}
+        {#each performanceData as [key, value] (key)}
          <tr>
            <td>{round(value)}<span>ms</span></td>
            <td
@@ -246,27 +244,23 @@

      <tbody>
        <tr>
+          <td>{showAverage ? cacheRatio.average : cacheRatio.onlyLast}<span>%</span></td>
          <td
-            >{showAverage ? cacheRatio.average : cacheRatio.onlyLast}<span
-              >%</span
-            ></td
-          >
-          <td
-            class:active={activeType === "cache-hit"}
-            onclick={() => (activeType = "cache-hit")}
+            class:active={activeType === 'cache-hit'}
+            onclick={() => (activeType = 'cache-hit')}
          >
            cache hits
          </td>
        </tr>

-        {#each nodePerformanceData as [key, value]}
+        {#each nodePerformanceData as [key, value] (key)}
          <tr>
            <td>{round(value)}<span>ms</span></td>
            <td
              class:active={activeType === key}
              onclick={() => (activeType = key)}
            >
-              {key.split("/").slice(-1).join("/")}
+              {key.split('/').slice(-1).join('/')}
            </td>
          </tr>
        {/each}
@@ -278,22 +272,22 @@

      <tbody>
        <tr>
-          <td>{humanizeNumber(getLast("total-vertices"))}</td>
+          <td>{humanizeNumber(getLast('total-vertices'))}</td>
          <td>Vertices</td>
        </tr>
        <tr>
-          <td>{humanizeNumber(getLast("total-faces"))}</td>
+          <td>{humanizeNumber(getLast('total-faces'))}</td>
          <td>Faces</td>
        </tr>

-        {#each viewerPerformanceData as [key, value]}
+        {#each viewerPerformanceData as [key, value] (key)}
          <tr>
            <td>{round(value)}<span>ms</span></td>
            <td
              class:active={activeType === key}
              onclick={() => (activeType = key)}
            >
-              {key.split("/").slice(-1).join("/")}
+              {key.split('/').slice(-1).join('/')}
            </td>
          </tr>
        {/each}
--- a/app/src/lib/performance/SmallGraph.svelte
+++ b/app/src/lib/performance/SmallGraph.svelte
@@ -10,7 +10,7 @@
        const y = 100 - ((point - min) / (max - min)) * 100;
        return `${x},${y}`;
      })
-      .join(" ");
+      .join(' ');
  });
 </script>

--- a/app/src/lib/performance/SmallPerformanceViewer.svelte
+++ b/app/src/lib/performance/SmallPerformanceViewer.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-  import { humanizeDuration, humanizeNumber } from "$lib/helpers";
-  import { localState } from "$lib/helpers/localState.svelte";
-  import SmallGraph from "./SmallGraph.svelte";
-  import type { PerformanceData, PerformanceStore } from "@nodarium/utils";
+  import { humanizeDuration, humanizeNumber } from '$lib/helpers';
+  import { localState } from '$lib/helpers/localState.svelte';
+  import type { PerformanceData, PerformanceStore } from '@nodarium/utils';
+  import SmallGraph from './SmallGraph.svelte';

  const { store, fps }: { store: PerformanceStore; fps: number[] } = $props();

-  const open = localState("node.performance.small.open", {
+  const open = localState('node.performance.small.open', {
    runtime: false,
-    fps: false,
+    fps: false
  });

-  const vertices = $derived($store?.at(-1)?.["total-vertices"]?.[0] || 0);
-  const faces = $derived($store?.at(-1)?.["total-faces"]?.[0] || 0);
-  const runtime = $derived($store?.at(-1)?.["runtime"]?.[0] || 0);
+  const vertices = $derived($store?.at(-1)?.['total-vertices']?.[0] || 0);
+  const faces = $derived($store?.at(-1)?.['total-faces']?.[0] || 0);
+  const runtime = $derived($store?.at(-1)?.['runtime']?.[0] || 0);

  function getPoints(data: PerformanceData, key: string) {
    return data?.map((run) => run[key]?.[0] || 0) || [];
@@ -24,25 +24,25 @@
  <table>
    <tbody>
      <tr
-        style="cursor:pointer;"
+        style="cursor: pointer"
        onclick={() => (open.value.runtime = !open.value.runtime)}
      >
-        <td>{open.value.runtime ? "-" : "+"} runtime </td>
+        <td>{open.value.runtime ? '-' : '+'} runtime</td>
        <td>{humanizeDuration(runtime || 1000)}</td>
      </tr>
      {#if open.value.runtime}
        <tr>
          <td colspan="2">
-            <SmallGraph points={getPoints($store, "runtime")} />
+            <SmallGraph points={getPoints($store, 'runtime')} />
          </td>
        </tr>
      {/if}

      <tr
-        style="cursor:pointer;"
+        style="cursor: pointer"
        onclick={() => (open.value.fps = !open.value.fps)}
      >
-        <td>{open.value.fps ? "-" : "+"} fps </td>
+        <td>{open.value.fps ? '-' : '+'} fps</td>
        <td>
          {Math.floor(fps[fps.length - 1])}fps
        </td>
@@ -56,12 +56,12 @@
      {/if}

      <tr>
-        <td>vertices </td>
+        <td>vertices</td>
        <td>{humanizeNumber(vertices || 0)}</td>
      </tr>

      <tr>
-        <td>faces </td>
+        <td>faces</td>
        <td>{humanizeNumber(faces || 0)}</td>
      </tr>
    </tbody>
--- a/app/src/lib/performance/index.ts
+++ b/app/src/lib/performance/index.ts
@@ -1 +1 @@
-export { default as PerformanceViewer } from "./PerformanceViewer.svelte";
+export { default as PerformanceViewer } from './PerformanceViewer.svelte';