Type fixes

.github/workflows/chromatic.yml

@@ -22,9 +22,9 @@ jobs:
         run: npm ci
       - name: Publish to Chromatic
         uses: chromaui/action@v1
-        continue-on-error: true # remove once Svue errors are out
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          exitOnceUploaded: true
           # onlyChanged: true
           # externals: |
           #  - 'public/**'

jsconfig.json

@@ -9,7 +9,8 @@
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": false,
-    "moduleResolution": "bundler"
+    "moduleResolution": "bundler",
+    "types": ["@testing-library/jest-dom"]
   },
   // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
   //

src/api/embed.js

@@ -1,4 +1,4 @@
-import session from "./session.js";
+import session from "./session";
 import { apiUrl } from "./base.js";
 import { queryBuilder } from "@/util/url.js";
 

src/api/session.js → src/api/session.ts

@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios, { type AxiosInstance } from "axios";
 import axiosRetry from "axios-retry";
 
 import { DC_BASE } from "../config/config.js";
@@ -30,11 +30,12 @@ export function getCsrfToken() {
   return token;
 }
 
-const session = axios.create({
-  xsrfCookieName: CSRF_COOKIE_NAME,
-  xsrfHeaderName: CSRF_HEADER_NAME,
-  withCredentials: cookiesEnabled,
-});
+const session: AxiosInstance & { getStatic?: (url: string) => any } =
+  axios.create({
+    xsrfCookieName: CSRF_COOKIE_NAME,
+    xsrfHeaderName: CSRF_HEADER_NAME,
+    withCredentials: cookiesEnabled,
+  });
 
 session.interceptors.response.use(
   (response) => {
@@ -55,6 +56,11 @@ session.interceptors.response.use(
 
 const CACHE_LIMIT = 50;
 
+export interface SessionCache {
+  cached: any[];
+  cachedByUrl: Record<string, any>;
+}
+
 export class SessionCache {
   constructor() {
     this.cached = [];
@@ -86,7 +92,7 @@ export class SessionCache {
 
 const sessionCache = new SessionCache();
 
-session.getStatic = async function getStatic(url) {
+session.getStatic = async function getStatic(url: string) {
   if (sessionCache.has(url)) {
     return sessionCache.lookup(url);
   }

src/api/types/document.ts

@@ -4,6 +4,13 @@ import type { Project } from "./project";
 
 export type DocumentAccess = "public" | "organization" | "private";
 
+export type DocumentStatus =
+  | "success"
+  | "readable"
+  | "pending"
+  | "error"
+  | "nofile";
+
 export interface DocumentRevision {
   version: number;
   user: number;
@@ -19,7 +26,7 @@ export interface Document {
   asset_url: string;
   canonical_url: string;
   created_at: string;
-  data: Record<string, unknown>;
+  data: Record<string, string[]>;
   description: string;
   edit_access: boolean;
   file_hash: string;
@@ -39,7 +46,7 @@ export interface Document {
   revisions?: DocumentRevision[];
   slug: string;
   source: string;
-  status: "success" | "failure" | "queued" | "in_progress";
+  status: DocumentStatus;
   title: string;
   updated_at: string;
   user: User | number;

src/common/Dropdown2.svelte

@@ -99,6 +99,8 @@
 <!-- Element to Trigger Dropdown -->
 <div class="dropdownContainer" class:open={isOpen} {id}>
   <div
+    role="button"
+    tabindex={0}
     bind:this={title}
     class={`title ${titleColor}`}
     class:open={isOpen}

src/common/ProgressiveImage.svelte

@@ -1,7 +1,7 @@
 <script>
   import { onMount, onDestroy, createEventDispatcher } from "svelte";
   import { IMAGE_WIDTHS } from "../config/config.js";
-  import { pageImageUrl } from "@/api/viewer.js";
+  import { pageImageUrl } from "@/api/viewer";
   import { timeout } from "@/util/timeout.js";
 
   const dispatch = createEventDispatcher();

src/config/config.js

@@ -51,6 +51,9 @@ export const CSRF_HEADER_NAME = "X-CSRFToken";
 
 export const POLL_INTERVAL = 5000;
 
+/**
+ * @type {Array<[string, number]>}
+ */
 export const IMAGE_WIDTHS_ENTRIES = [
   ["xlarge", 2000],
   ["large", 1000],
@@ -59,10 +62,9 @@ export const IMAGE_WIDTHS_ENTRIES = [
   ["thumbnail", 60],
 ];
 
-export const IMAGE_WIDTHS = IMAGE_WIDTHS_ENTRIES.map(([name, width]) => [
-  width,
-  name,
-]).sort((a, b) => a[0] - b[0]);
+export const IMAGE_WIDTHS = IMAGE_WIDTHS_ENTRIES.sort(
+  (a, b) => a[1] - b[1],
+).map(([k, v]) => [v, k]);
 
 export const IMAGE_WIDTHS_MAP = new Map(IMAGE_WIDTHS_ENTRIES);
 

src/lib/api/addons.ts

@@ -1,8 +1,10 @@
+import type { Page } from "@/api/types/common";
+import type { AddOnListItem } from "@/addons/types";
+
 import { error } from "@sveltejs/kit";
+
 import { BASE_API_URL } from "@/config/config.js";
-import { type AddOnListItem } from "@/addons/types";
 import { isErrorCode } from "../utils";
-import type { Page } from "@/api/types/common";
 
 export async function getPinnedAddons(
   fetch = globalThis.fetch,
@@ -15,7 +17,7 @@ export async function getPinnedAddons(
   if (isErrorCode(resp.status)) {
     error(resp.status, resp.statusText);
   }
-  return resp.json();
+  return resp.json() as Promise<Page<AddOnListItem>>;
 }
 
 export async function getAddons(
@@ -26,5 +28,5 @@ export async function getAddons(
   if (isErrorCode(resp.status)) {
     error(resp.status, resp.statusText);
   }
-  return resp.json();
+  return resp.json() as Promise<Page<AddOnListItem>>;
 }

src/lib/api/notes.test.ts

@@ -0,0 +1,43 @@
+import { test, describe, expect } from "vitest";
+
+import { APP_URL } from "@/config/config.js";
+import * as notes from "./notes";
+import type { Document, Note } from "./types";
+import document from "./fixtures/documents/document.json";
+import note from "./fixtures/notes/note.json";
+
+describe("fetching notes", () => {
+  test.todo("notes.get");
+  test.todo("notes.list");
+});
+
+describe("note helper methods", () => {
+  const d = document as Document;
+  const n = note as Note;
+
+  test("canonicalNoteUrl", () => {
+    expect(notes.canonicalNoteUrl(d, n)).toStrictEqual(
+      new URL(
+        "/documents/2622-agreement-between-conservatives-and-liberal-democrats-to-form-a-coalition-government/annotations/557/",
+        APP_URL,
+      ),
+    );
+  });
+
+  test("noteUrl", () => {
+    expect(notes.noteUrl(d, n)).toStrictEqual(
+      new URL(
+        "/documents/2622-agreement-between-conservatives-and-liberal-democrats-to-form-a-coalition-government/#document/p3/a557",
+        APP_URL,
+      ),
+    );
+  });
+
+  test("width", () => {
+    expect(notes.width(n)).toStrictEqual(n.x2 - n.x1);
+  });
+
+  test("height", () => {
+    expect(notes.height(n)).toStrictEqual(n.y2 - n.y1);
+  });
+});