adapt typescript to strict mode

club/static/bundled/club/components/ajax-select-index.ts

@@ -1,7 +1,6 @@
-import type { TomOption } from "tom-select/dist/types/types";
+import type { escape_html } from "tom-select/src/utils";
-import type { escape_html } from "tom-select/dist/types/utils";
+import { AjaxSelect } from "#core:core/components/ajax-select-base";
-import { AjaxSelect } from "#core:core/components/ajax-select-base.ts";
+import { registerComponent } from "#core:utils/web-components";
-import { registerComponent } from "#core:utils/web-components.ts";
 import { type ClubSchema, clubSearchClub } from "#openapi";
 
 @registerComponent("club-ajax-select")
@@ -10,7 +9,7 @@ export class ClubAjaxSelect extends AjaxSelect {
   protected labelField = "name";
   protected searchField = ["code", "name"];
 
-  protected async search(query: string): Promise<TomOption[]> {
+  protected async search(query: string) {
     const resp = await clubSearchClub({ query: { search: query } });
     if (resp.data) {
       return resp.data.results;

com/static/bundled/com/components/ics-calendar-index.ts

@@ -1,4 +1,9 @@
-import { Calendar, type EventClickArg, type EventContentArg } from "@fullcalendar/core";
+import {
+  Calendar,
+  type EventClickArg,
+  type EventContentArg,
+  type EventInput,
+} from "@fullcalendar/core";
 import type { EventImpl } from "@fullcalendar/core/internal";
 import enLocale from "@fullcalendar/core/locales/en-gb";
 import frLocale from "@fullcalendar/core/locales/fr";
@@ -6,8 +11,8 @@ import dayGridPlugin from "@fullcalendar/daygrid";
 import iCalendarPlugin from "@fullcalendar/icalendar";
 import listPlugin from "@fullcalendar/list";
 import { type HTMLTemplateResult, html, render } from "lit-html";
-import { makeUrl } from "#core:utils/api.ts";
+import { type GenericEndpoint, makeUrl } from "#core:utils/api";
-import { inheritHtmlElement, registerComponent } from "#core:utils/web-components.ts";
+import { inheritHtmlElement, registerComponent } from "#core:utils/web-components";
 import {
   calendarCalendarInternal,
   calendarCalendarUnpublished,
@@ -19,11 +24,11 @@ import {
 @registerComponent("ics-calendar")
 export class IcsCalendar extends inheritHtmlElement("div") {
   static observedAttributes = ["locale", "can_moderate", "can_delete", "ics-help-url"];
-  private calendar: Calendar;
+  private calendar!: Calendar;
-  private locale = "en";
+  private locale? = "en";
-  private canModerate = false;
+  private canModerate? = false;
-  private canDelete = false;
+  private canDelete? = false;
-  private helpUrl = "";
+  private helpUrl? = "";
 
   // Hack variable to detect recurring events
   // The underlying ics library doesn't include any info about rrules
@@ -35,10 +40,12 @@ export class IcsCalendar extends inheritHtmlElement("div") {
       this.locale = newValue;
     }
     if (name === "can_moderate") {
-      this.canModerate = newValue.toLowerCase() === "true";
+      this.canModerate =
+        typeof newValue === "string" && newValue.toLowerCase() === "true";
     }
     if (name === "can_delete") {
-      this.canDelete = newValue.toLowerCase() === "true";
+      this.canDelete =
+        typeof newValue === "string" && newValue.toLowerCase() === "true";
     }
 
     if (name === "ics-help-url") {
@@ -94,7 +101,7 @@ export class IcsCalendar extends inheritHtmlElement("div") {
         .toString()
         .split("/")
         .filter((s) => s) // Remove blank characters
-        .pop(),
+        .pop() as string,
       10,
     );
   }
@@ -159,7 +166,7 @@ export class IcsCalendar extends inheritHtmlElement("div") {
     this.refreshEvents();
   }
 
-  async getEventSources() {
+  async getEventSources(): Promise<EventInput[]> {
     const tagRecurringEvents = (eventData: EventImpl) => {
       // This functions tags events with a similar event url
       // We rely on the fact that the event url is always the same
@@ -173,14 +180,14 @@ export class IcsCalendar extends inheritHtmlElement("div") {
     };
     return [
       {
-        url: `${await makeUrl(calendarCalendarInternal)}`,
+        url: `${await makeUrl(calendarCalendarInternal as GenericEndpoint)}`,
         format: "ics",
         className: "internal",
         cache: false,
         eventDataTransform: tagRecurringEvents,
       },
       {
-        url: `${await makeUrl(calendarCalendarUnpublished)}`,
+        url: `${await makeUrl(calendarCalendarUnpublished as GenericEndpoint)}`,
         format: "ics",
         color: "red",
         className: "unpublished",
@@ -213,7 +220,7 @@ export class IcsCalendar extends inheritHtmlElement("div") {
             ${event.title}
           </h4>
           <span class="event-details-row-content">
-            ${this.formatDate(event.start)} - ${this.formatDate(event.end)}
+            ${this.formatDate(event.start as Date)} - ${this.formatDate(event.end as Date)}
           </span>
         </div>
       `;
@@ -251,7 +258,7 @@ export class IcsCalendar extends inheritHtmlElement("div") {
       const buttons = [] as HTMLTemplateResult[];
 
       if (this.canModerate) {
-        if (event.source.internalEventSource.ui.classNames.includes("unpublished")) {
+        if (event.source?.internalEventSource.ui.classNames.includes("unpublished")) {
           const button = html`
             <button class="btn btn-green" @click="${() => this.publishNews(newsId)}">
               <i class="fa fa-check"></i>${gettext("Publish")}
@@ -338,9 +345,9 @@ export class IcsCalendar extends inheritHtmlElement("div") {
               button.classList.remove("text-copied");
             }
             button.setAttribute("tooltip", gettext("Link copied"));
-            navigator.clipboard.writeText(
+            await navigator.clipboard.writeText(
               new URL(
-                await makeUrl(calendarCalendarInternal),
+                await makeUrl(calendarCalendarInternal as GenericEndpoint),
                 window.location.origin,
               ).toString(),
             );

com/static/bundled/com/moderation-alert-index.ts

@@ -1,4 +1,9 @@
-import { newsDeleteNews, newsFetchNewsDates, newsPublishNews } from "#openapi";
+import {
+  newsDeleteNews,
+  newsFetchNewsDates,
+  newsPublishNews,
+  type PaginatedResponseSchemaNewsDateSchema,
+} from "#openapi";
 
 // This will be used in jinja templates,
 // so we cannot use real enums as those are purely an abstraction of Typescript
@@ -64,7 +69,8 @@ document.addEventListener("alpine:init", () => {
         // biome-ignore lint/style/useNamingConvention: api is snake-case
         query: { news_id: this.newsId, page: 1, page_size: 1 },
       });
-      return response.data.count;
+
+      return (response.data as PaginatedResponseSchemaNewsDateSchema).count;
     },
 
     weeklyEventWarningMessage(nbEvents: number): string {

com/static/bundled/com/upcoming-news-loader-index.ts

@@ -1,11 +1,11 @@
 import { type NewsDateSchema, newsFetchNewsDates } from "#openapi";
 
-interface ParsedNewsDateSchema extends Omit<NewsDateSchema, "start_date" | "end_date"> {
+type ParsedNewsDateSchema = Omit<NewsDateSchema, "start_date" | "end_date"> & {
   // biome-ignore lint/style/useNamingConvention: api is snake_case
   start_date: Date;
   // biome-ignore lint/style/useNamingConvention: api is snake_case
   end_date: Date;
-}
+};
 
 document.addEventListener("alpine:init", () => {
   Alpine.data("upcomingNewsLoader", (startDate: Date, locale: string) => ({
@@ -32,6 +32,11 @@ document.addEventListener("alpine:init", () => {
           page_size: this.pageSize,
         },
       });
+      if (response.response === undefined || response.data === undefined) {
+        // response may be undefined, because error may be
+        // from building the request object itself or from a network error
+        return;
+      }
       if (response.response.status === 404) {
         this.hasNext = false;
       } else if (response.data.next === null) {
@@ -44,7 +49,7 @@ document.addEventListener("alpine:init", () => {
       this.loading = false;
     },
 
-    groupedDates(): Record<string, NewsDateSchema[]> {
+    groupedDates(): Record<string, ParsedNewsDateSchema[]> {
       return this.newsDates
         .map(
           (date: NewsDateSchema): ParsedNewsDateSchema => ({

core/api.py

@@ -1,4 +1,4 @@
-from typing import Annotated, Any, Literal
+from typing import Annotated, Literal
 
 from annotated_types import Ge, Le, MinLen
 from django.conf import settings
@@ -26,6 +26,7 @@ from core.schemas import (
     UserFilterSchema,
     UserProfileSchema,
     UserSchema,
+    ValidationErrorSchema,
 )
 from core.templatetags.renderer import markdown
 from counter.utils import is_logged_in_counter
@@ -45,7 +46,7 @@ class UploadController(ControllerBase):
         "/image",
         response={
             200: UploadedFileSchema,
-            422: dict[Literal["detail"], list[dict[str, Any]]],
+            422: ValidationErrorSchema,
             403: dict[Literal["detail"], str],
         },
         permissions=[HasPerm("core.add_quickuploadimage")],

core/schemas.py

@@ -19,6 +19,16 @@ from core.utils import get_last_promo, is_image
 NonEmptyStr = Annotated[str, MinLen(1)]
 
 
+class ValidationErrorSchema(Schema):
+    class ValidationErrorItem(Schema):
+        loc: list[str | int]
+        msg: str
+        type: str
+        ctx: dict[str, str]
+
+    detail: list[ValidationErrorItem]
+
+
 class UploadedImage(UploadedFile):
     @classmethod
     def _validate(cls, v: Any, info: ValidationInfo) -> Any:

core/static/bundled/alpine/limited-choices.ts

@@ -25,7 +25,7 @@ export function limitedChoices(Alpine: AlpineType) {
   Alpine.directive(
     "limited-choices",
     (el, { expression }, { evaluateLater, effect }) => {
-      const getMaxChoices = evaluateLater(expression);
+      const getMaxChoices = evaluateLater<string>(expression);
       let maxChoices: number;
       const inputs: HTMLInputElement[] = Array.from(
         el.querySelectorAll("input[type='checkbox']"),
@@ -54,7 +54,7 @@ export function limitedChoices(Alpine: AlpineType) {
         });
       }
       effect(() => {
-        getMaxChoices((value: string) => {
+        getMaxChoices((value) => {
           const previousValue = maxChoices;
           maxChoices = Number.parseInt(value, 10);
           if (maxChoices < previousValue) {

core/static/bundled/base-bundle-index.ts

@@ -43,13 +43,19 @@ polyfillCountryFlagEmojis();
 /**
  * HTMX
  */
-document.body.addEventListener("htmx:beforeRequest", (event: CustomEvent) => {
+document.body.addEventListener(
-  event.detail.target.ariaBusy = true;
+  "htmx:beforeRequest" as keyof HTMLElementEventMap,
-});
+  (event) => {
+    (event as CustomEvent).detail.target.ariaBusy = true;
+  },
+);
 
-document.body.addEventListener("htmx:beforeSwap", (event: CustomEvent) => {
+document.body.addEventListener(
-  event.detail.target.ariaBusy = null;
+  "htmx:beforeSwap" as keyof HTMLElementEventMap,
-});
+  (event) => {
+    (event as CustomEvent).detail.target.ariaBusy = null;
+  },
+);
 
 Object.assign(window, { htmx });
 

core/static/bundled/core/components/ajax-select-base.ts

@@ -4,9 +4,9 @@ import type {
   TomLoadCallback,
   TomOption,
   TomSettings,
-} from "tom-select/dist/types/types";
+} from "tom-select/src/types";
-import type { escape_html } from "tom-select/dist/types/utils";
+import type { escape_html } from "tom-select/src/utils";
-import { inheritHtmlElement } from "#core:utils/web-components.ts";
+import { inheritHtmlElement } from "#core:utils/web-components";
 
 export class AutoCompleteSelectBase extends inheritHtmlElement("select") {
   static observedAttributes = [
@@ -15,7 +15,7 @@ export class AutoCompleteSelectBase extends inheritHtmlElement("select") {
     "max",
     "min-characters-for-search",
   ];
-  public widget: TomSelect;
+  public widget!: TomSelect;
 
   protected minCharNumberForSearch = 0;
   protected delay: number | null = null;
@@ -24,8 +24,8 @@ export class AutoCompleteSelectBase extends inheritHtmlElement("select") {
 
   protected attributeChangedCallback(
     name: string,
-    _oldValue?: string,
+    _oldValue: string,
-    newValue?: string,
+    newValue: string,
   ) {
     switch (name) {
       case "delay": {
@@ -73,7 +73,7 @@ export class AutoCompleteSelectBase extends inheritHtmlElement("select") {
       persist: false,
       maxItems: this.node.multiple ? this.max : 1,
       closeAfterSelect: true,
-      loadThrottle: this.delay,
+      loadThrottle: this.delay ?? undefined,
       placeholder: this.placeholder,
       shouldLoad: (query: string) => this.shouldLoad(query), // wraps the method to avoid shadowing `this` by the one from tom-select
       render: {
@@ -103,7 +103,7 @@ export class AutoCompleteSelectBase extends inheritHtmlElement("select") {
 }
 
 export abstract class AjaxSelect extends AutoCompleteSelectBase {
-  protected filter?: (items: TomOption[]) => TomOption[] = null;
+  protected filter?: (items: TomOption[]) => TomOption[];
   protected minCharNumberForSearch = 2;
   /**
    * A cache of researches that have been made using this input.

core/static/bundled/core/components/ajax-select-index.ts

@@ -1,11 +1,12 @@
+// @ts-expect-error TS2882
 import "tom-select/dist/css/tom-select.default.css";
-import type { TomOption } from "tom-select/dist/types/types";
+import type { TomOption } from "tom-select/src/types";
-import type { escape_html } from "tom-select/dist/types/utils";
+import type { escape_html } from "tom-select/src/utils";
 import {
   AjaxSelect,
   AutoCompleteSelectBase,
-} from "#core:core/components/ajax-select-base.ts";
+} from "#core:core/components/ajax-select-base";
-import { registerComponent } from "#core:utils/web-components.ts";
+import { registerComponent } from "#core:utils/web-components";
 import {
   type GroupSchema,
   groupSearchGroup,

core/static/bundled/core/components/easymde-index.ts

@@ -1,11 +1,13 @@
+// @ts-expect-error 2307
 // biome-ignore lint/correctness/noUndeclaredDependencies: shipped by easymde
 import "codemirror/lib/codemirror.css";
+// @ts-expect-error 2307
 import "easymde/src/css/easymde.css";
 // biome-ignore lint/correctness/noUndeclaredDependencies: Imported by EasyMDE
 import type CodeMirror from "codemirror";
 // biome-ignore lint/style/useNamingConvention: This is how they called their namespace
 import EasyMDE from "easymde";
-import { inheritHtmlElement, registerComponent } from "#core:utils/web-components.ts";
+import { inheritHtmlElement, registerComponent } from "#core:utils/web-components";
 import {
   markdownRenderMarkdown,
   type UploadUploadImageErrors,
@@ -25,11 +27,11 @@ const loadEasyMde = (textarea: HTMLTextAreaElement) => {
           file: file,
         },
       });
-      if (!response.response.ok) {
+      if (response.response !== undefined && !response.response.ok) {
-        if (response.response.status === 422) {
+        if (response?.response.status === 422) {
           onError(
             (response.error as UploadUploadImageErrors[422]).detail
-              .map((err: Record<"ctx", Record<"error", string>>) => err.ctx.error)
+              .map((err) => err.ctx.error)
               .join(" ; "),
           );
         } else if (response.response.status === 403) {
@@ -39,6 +41,10 @@ const loadEasyMde = (textarea: HTMLTextAreaElement) => {
         }
         return;
       }
+      if (response.data === undefined) {
+        // this can't happen, it's just for the type checker to know
+        return;
+      }
       onSuccess(response.data.href);
       // Workaround function to add an image name to uploaded image
       // Without this, you get ![](url) instead of ![name](url)
@@ -58,21 +64,18 @@ const loadEasyMde = (textarea: HTMLTextAreaElement) => {
       });
       easymde.codemirror.replaceSelection("\n");
     },
-    previewRender: (plainText: string, preview: MarkdownInput) => {
+    previewRender: (plainText, preview) => {
       /* This is wrapped this way to allow time for Alpine to be loaded on the page */
-      return Alpine.debounce((plainText: string, preview: MarkdownInput) => {
+      return Alpine.debounce(() => {
-        const func = async (
+        const func = async () => {
-          plainText: string,
-          preview: MarkdownInput,
-        ): Promise<null> => {
           preview.innerHTML = (
             await markdownRenderMarkdown({ body: { text: plainText } })
           ).data as string;
           return null;
         };
-        func(plainText, preview);
+        func().then();
         return null;
-      }, 300)(plainText, preview);
+      }, 300)();
     },
     forceSync: true, // Avoid validation error on generic create view
     imageTexts: {
@@ -222,9 +225,11 @@ const loadEasyMde = (textarea: HTMLTextAreaElement) => {
   });
 
   const submits: HTMLInputElement[] = Array.from(
-    textarea.closest("form").querySelectorAll('input[type="submit"]'),
+    (textarea.closest("form") as HTMLFormElement).querySelectorAll(
+      'input[type="submit"]',
+    ),
   );
-  const parentDiv = textarea.parentElement.parentElement;
+  const parentDiv = textarea.parentElement?.parentElement as HTMLElement;
 
   function checkMarkdownInput(event: Event) {
     // an attribute is null if it does not exist, else a string
@@ -249,6 +254,7 @@ const loadEasyMde = (textarea: HTMLTextAreaElement) => {
 };
 
 @registerComponent("markdown-input")
+// biome-ignore lint/correctness/noUnusedVariables: it is used in jinja
 class MarkdownInput extends inheritHtmlElement("textarea") {
   connectedCallback() {
     super.connectedCallback();

core/static/bundled/core/components/include-index.ts

@@ -2,7 +2,7 @@ import {
   type InheritedHtmlElement,
   inheritHtmlElement,
   registerComponent,
-} from "#core:utils/web-components.ts";
+} from "#core:utils/web-components";
 
 /**
  * ElementOnce web components
@@ -28,7 +28,7 @@ export function elementOnce<K extends keyof HTMLElementTagNameMap>(tagName: K) {
 
     clearNode() {
       while (this.firstChild) {
-        this.removeChild(this.lastChild);
+        this.removeChild(this.lastChild as ChildNode);
       }
     }
 
@@ -130,7 +130,7 @@ startObserver(observer);
 export class LinkOnce extends elementOnce("link") {
   getElementQuerySelector(): string {
     // We get href from node.attributes instead of node.href to avoid getting the domain part
-    return `link[href='${this.node.attributes.getNamedItem("href").nodeValue}']`;
+    return `link[href='${this.node.attributes.getNamedItem("href")?.nodeValue}']`;
   }
 }
 
@@ -142,6 +142,6 @@ export class LinkOnce extends elementOnce("link") {
 export class ScriptOnce extends inheritHtmlElement("script") {
   getElementQuerySelector(): string {
     // We get href from node.attributes instead of node.src to avoid getting the domain part
-    return `script[src='${this.node.attributes.getNamedItem("src").nodeValue}']`;
+    return `script[src='${this.node.attributes.getNamedItem("src")?.nodeValue}']`;
   }
 }

core/static/bundled/core/components/nfc-input-index.ts

@@ -1,4 +1,4 @@
-import { inheritHtmlElement, registerComponent } from "#core:utils/web-components.ts";
+import { inheritHtmlElement, registerComponent } from "#core:utils/web-components";
 
 @registerComponent("nfc-input")
 export class NfcInput extends inheritHtmlElement("input") {
@@ -26,9 +26,11 @@ export class NfcInput extends inheritHtmlElement("input") {
         window.alert(gettext("Unsupported NFC card"));
       });
 
-      ndef.addEventListener("reading", (event: NDEFReadingEvent) => {
+      ndef.addEventListener("reading", (event) => {
         this.removeAttribute("scan");
-        this.node.value = event.serialNumber.replace(/:/g, "").toUpperCase();
+        this.node.value = (event as NDEFReadingEvent).serialNumber
+          .replace(/:/g, "")
+          .toUpperCase();
         /* Auto submit form, we need another button to not trigger our previously defined click event */
         const submit = document.createElement("button");
         this.node.appendChild(submit);

core/static/bundled/core/components/tabs-index.ts

@@ -1,6 +1,6 @@
 import { html, render } from "lit-html";
 import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
-import { registerComponent } from "#core:utils/web-components.ts";
+import { registerComponent } from "#core:utils/web-components";
 
 @registerComponent("ui-tab")
 export class Tab extends HTMLElement {
@@ -19,7 +19,7 @@ export class Tab extends HTMLElement {
     }
 
     if (name === "title") {
-      this.description = newValue;
+      this.description = newValue ?? "";
     }
     this.dispatchEvent(new CustomEvent("ui-tab-updated", { bubbles: true }));
   }
@@ -79,15 +79,15 @@ export class Tab extends HTMLElement {
 
 @registerComponent("ui-tab-group")
 export class TabGroup extends HTMLElement {
-  private node: HTMLDivElement;
+  private node!: HTMLDivElement;
 
   connectedCallback() {
     this.node = document.createElement("div");
     this.node.classList.add("tabs", "shadow");
     this.appendChild(this.node);
 
-    this.addEventListener("ui-tab-activated", (event: CustomEvent) => {
+    this.addEventListener("ui-tab-activated", (event) => {
-      const target = event.detail as Tab;
+      const target = (event as CustomEvent).detail as Tab;
       for (const tab of this.getElementsByTagName("ui-tab") as HTMLCollectionOf<Tab>) {
         if (tab !== target) {
           tab.setActive(false);

core/static/bundled/core/dynamic-formset-index.ts

@@ -26,19 +26,23 @@ document.addEventListener("alpine:init", () => {
    * `counter/templates/counter/product_form.jinja`
    */
   Alpine.data("dynamicFormSet", (config?: Config) => ({
+    formContainer: undefined as unknown as HTMLElement,
+    nbForms: 0,
+    template: undefined as unknown as HTMLTemplateElement,
+
     init() {
       this.formContainer = this.$refs.formContainer as HTMLElement;
       this.nbForms = this.formContainer.children.length as number;
       this.template = this.$refs.formTemplate as HTMLTemplateElement;
       const prefix = config?.prefix ?? "form";
-      this.$root
+      (
-        .querySelector(`#id_${prefix}-TOTAL_FORMS`)
+        this.$root.querySelector(`#id_${prefix}-TOTAL_FORMS`) as HTMLFormElement
-        .setAttribute(":value", "nbForms");
+      ).setAttribute(":value", "nbForms");
     },
 
     addForm() {
       this.formContainer.appendChild(document.importNode(this.template.content, true));
-      const newForm = this.formContainer.lastElementChild;
+      const newForm = this.formContainer.lastElementChild as Element;
       const inputs: NodeListOf<HTMLFormInputElement> = newForm.querySelectorAll(
         "input, select, textarea",
       );
@@ -59,7 +63,7 @@ document.addEventListener("alpine:init", () => {
       this.nbForms -= 1;
       // adjust the id of remaining forms
       for (let i = 0; i < this.nbForms; i++) {
-        const form: HTMLDivElement = this.formContainer.children[i];
+        const form = this.formContainer.children[i];
         const inputs: NodeListOf<HTMLFormInputElement> = form.querySelectorAll(
           "input, select, textarea",
         );

core/static/bundled/core/navbar.ts

@@ -1,5 +1,5 @@
 function showMenu() {
-  const navbar = document.getElementById("navbar-content");
+  const navbar = document.getElementById("navbar-content") as HTMLElement;
   const current = navbar.getAttribute("mobile-display");
   navbar.setAttribute("mobile-display", current === "hidden" ? "revealed" : "hidden");
 }
@@ -20,9 +20,12 @@ function navbarInit() {
         item.removeAttribute("open");
       }
     });
-    item.addEventListener("click", (event: MouseEvent) => {
+    item.addEventListener("click", (event) => {
       // Don't close when clicking on desktop mode
-      if ((event.target as HTMLElement).nodeName !== "SUMMARY" || event.detail === 0) {
+      if (
+        (event.target as HTMLElement).nodeName !== "SUMMARY" ||
+        (event as MouseEvent).detail === 0
+      ) {
         return;
       }
 

core/static/bundled/core/read-more-index.ts

@@ -1,3 +1,4 @@
+// @ts-expect-error 2307 this dependency does exist, but it's a little bit wacky
 import clip from "@arendjr/text-clipper";
 
 /*

core/static/bundled/core/tooltips-index.ts

@@ -70,15 +70,16 @@ function createTooltip(element: HTMLElement) {
 function updateTooltip(element: HTMLElement, tooltip: HTMLElement, status: Status) {
   // Update tooltip status and set it's attributes and content
   tooltip.setAttribute("tooltip-status", status);
-  tooltip.innerText = element.getAttribute("tooltip");
+  tooltip.innerText = element.getAttribute("tooltip") as string;
 
   for (const attributes of [
     { src: "tooltip-class", dst: "class", default: ["tooltip"] },
     { src: "tooltip-id", dst: "id", default: [] },
   ]) {
     const populated = attributes.default;
-    if (element.hasAttribute(attributes.src)) {
+    const attr = element.getAttribute(attributes.src);
-      populated.push(...element.getAttribute(attributes.src).split(" "));
+    if (attr !== null) {
+      populated.push(...attr.split(" "));
     }
     tooltip.setAttribute(attributes.dst, populated.join(" "));
   }
@@ -93,7 +94,7 @@ function getTooltip(element: HTMLElement) {
   return tooltip;
 }
 
-function tooltipMouseover(event: MouseEvent) {
+function tooltipMouseover(event: Event) {
   // We get the closest tooltip to have a consistent behavior
   // when hovering over a child element of a tooltip marked element
   const target = (event.target as HTMLElement).closest("[tooltip]") as HTMLElement;
@@ -111,7 +112,7 @@ function tooltipMouseover(event: MouseEvent) {
   });
 }
 
-function tooltipMouseout(event: MouseEvent) {
+function tooltipMouseout(event: Event) {
   // We get the closest tooltip to have a consistent behavior
   // when hovering over a child element of a tooltip marked element
   const target = (event.target as HTMLElement).closest("[tooltip]") as HTMLElement;
@@ -141,7 +142,7 @@ new MutationObserver((mutations: MutationRecord[]) => {
       }
     } else if (tooltips.has(target)) {
       // Remove corresponding tooltip
-      tooltips.get(target).remove();
+      tooltips.get(target)?.remove();
       tooltips.delete(target);
     }
   }
@@ -163,7 +164,7 @@ new MutationObserver((mutations: MutationRecord[]) => {
         continue;
       }
       if (tooltips.has(target)) {
-        tooltips.get(target).remove();
+        tooltips.get(target)?.remove();
         tooltips.delete(target);
       }
     }

core/static/bundled/user/family-graph-index.ts

@@ -1,20 +1,13 @@
-import cytoscape, {
+import cytoscape, { type ElementDefinition, type Singular } from "cytoscape";
-  type ElementDefinition,
-  type NodeSingular,
-  type Singular,
-} from "cytoscape";
 import cxtmenu from "cytoscape-cxtmenu";
 import klay, { type KlayLayoutOptions } from "cytoscape-klay";
-import { History, initialUrlParams, updateQueryString } from "#core:utils/history.ts";
+import { History, initialUrlParams, updateQueryString } from "#core:utils/history";
 import { familyGetFamilyGraph, type UserProfileSchema } from "#openapi";
 
 cytoscape.use(klay);
 cytoscape.use(cxtmenu);
 
-type GraphData = (
+type GraphData = { data: UserProfileSchema | { source: number; target: number } }[];
-  | { data: UserProfileSchema }
-  | { data: { source: number; target: number } }
-)[];
 
 function isMobile() {
   return window.innerWidth < 500;
@@ -27,10 +20,8 @@ async function getGraphData(
 ): Promise<GraphData> {
   const data = (
     await familyGetFamilyGraph({
-      path: {
       // biome-ignore lint/style/useNamingConvention: api is snake_case
-        user_id: userId,
+      path: { user_id: userId },
-      },
       query: {
         // biome-ignore lint/style/useNamingConvention: api is snake_case
         godfathers_depth: godfathersDepth,
@@ -39,6 +30,10 @@ async function getGraphData(
       },
     })
   ).data;
+  if (data === undefined) {
+    console.error("Family graph request failed");
+    return [];
+  }
   return [
     ...data.users.map((user) => {
       return { data: user };
@@ -155,7 +150,7 @@ function createGraph(container: HTMLDivElement, data: GraphData, activeUserId: n
       {
         content: '<i class="fa fa-external-link fa-2x"></i>',
         select: (el) => {
-          window.open(el.data().profile_url, "_blank").focus();
+          window.open(el.data().profile_url, "_blank")?.focus();
         },
       },
 
@@ -195,12 +190,12 @@ document.addEventListener("alpine:init", () => {
     godfathersDepth: 0,
     godchildrenDepth: 0,
     reverse: initialUrlParams.get("reverse")?.toLowerCase?.() === "true",
-    graph: undefined as cytoscape.Core,
+    graph: undefined as unknown as cytoscape.Core,
-    graphData: {},
+    graphData: {} as GraphData,
     isZoomEnabled: !isMobile(),
 
     getInitialDepth(prop: string) {
-      const value = Number.parseInt(initialUrlParams.get(prop), 10);
+      const value = Number.parseInt(initialUrlParams.get(prop) as string, 10);
       if (Number.isNaN(value) || value < config.depthMin || value > config.depthMax) {
         return defaultDepth;
       }
@@ -223,8 +218,8 @@ document.addEventListener("alpine:init", () => {
           await delayedFetch();
         });
       }
-      this.$watch("reverse", async (value: number) => {
+      this.$watch("reverse", async (newValue, _oldValue) => {
-        updateQueryString("reverse", value.toString(), History.Replace);
+        updateQueryString("reverse", newValue.toString(), History.Replace);
         await this.reverseGraph();
       });
       this.$watch("graphData", async () => {
@@ -259,9 +254,9 @@ document.addEventListener("alpine:init", () => {
     },
 
     async reverseGraph() {
-      this.graph.elements((el: NodeSingular) => {
+      this.graph
-        el.position({ x: -el.position().x, y: -el.position().y });
+        .elements()
-      });
+        .positions((el, _) => ({ x: -el.position().x, y: -el.position().y }));
       this.graph.center(this.graph.elements());
     },
 

core/static/bundled/utils/alert-message.ts

@@ -5,9 +5,9 @@ interface AlertParams {
 
 export class AlertMessage {
   public open: boolean;
-  public success: boolean;
+  public success!: boolean;
   public content: string;
-  private timeoutId?: number;
+  private timeoutId: number | null;
   private readonly defaultDuration: number;
 
   constructor(params?: { defaultDuration: number }) {

core/static/bundled/utils/api.ts

@@ -37,6 +37,10 @@ export const paginated = async <T>(
   queryParams.query.page = 1;
 
   const firstPage = (await endpoint(queryParams)).data;
+  if (firstPage === undefined) {
+    console.error(`Request to "${options?.url}" failed`);
+    return [];
+  }
   const results = firstPage.results;
 
   const nbElements = firstPage.count;
@@ -45,9 +49,9 @@ export const paginated = async <T>(
   if (nbPages > 1) {
     const promises: Promise<T[]>[] = [];
     for (let i = 2; i <= nbPages; i++) {
-      const nextPage = structuredClone(queryParams);
+      const nextPage = structuredClone(queryParams) as Required<PaginatedRequest>;
       nextPage.query.page = i;
-      promises.push(endpoint(nextPage).then((res) => res.data.results));
+      promises.push(endpoint(nextPage).then((res) => res.data?.results ?? []));
     }
     results.push(...(await Promise.all(promises)).flat());
   }
@@ -61,8 +65,7 @@ interface Request extends TDataShape {
 interface InterceptorOptions {
   url: string;
 }
-
+export type GenericEndpoint = <ThrowOnError extends boolean = false>(
-type GenericEndpoint = <ThrowOnError extends boolean = false>(
   options?: Options<Request, ThrowOnError>,
 ) => RequestResult<unknown, unknown, ThrowOnError>;
 
@@ -71,7 +74,7 @@ type GenericEndpoint = <ThrowOnError extends boolean = false>(
  **/
 export const makeUrl = async (endpoint: GenericEndpoint) => {
   let url = "";
-  const interceptor = (_request: undefined, options: InterceptorOptions) => {
+  const interceptor = (_request: Request, options: InterceptorOptions) => {
     url = options.url;
     throw new Error("We don't want to send the request");
   };

core/static/bundled/utils/csv.ts

@@ -7,14 +7,14 @@ interface StringifyOptions<T extends object> {
   titleRow?: readonly string[];
 }
 
-function getNested<T extends object>(obj: T, key: NestedKeyOf<T>) {
+function getNested<T extends { [key: string]: unknown }>(obj: T, key: NestedKeyOf<T>) {
-  const path: (keyof object)[] = key.split(".") as (keyof unknown)[];
+  const path = key.split(".");
-  let res = obj[path.shift() as keyof T];
+  let res = obj[path.shift() as string] as { [key: string]: unknown } | undefined;
   for (const node of path) {
-    if (res === null) {
+    if (res === undefined) {
       break;
     }
-    res = res[node];
+    res = res[node] as { [key: string]: unknown } | undefined;
   }
   return res;
 }
@@ -29,18 +29,21 @@ function sanitizeCell(content: string): string {
 }
 
 export const csv = {
-  stringify: <T extends object>(objs: T[], options?: StringifyOptions<T>) => {
+  stringify: <T extends { [key: string]: unknown }>(
-    const columns = options.columns;
+    objs: T[],
+    options?: StringifyOptions<T>,
+  ) => {
+    const columns = options?.columns;
     const content = objs
       .map((obj) => {
-        return columns
+        return (columns ?? [])
           .map((col) => {
             return sanitizeCell((getNested(obj, col) ?? "").toString());
           })
           .join(",");
       })
       .join("\n");
-    if (!options.titleRow) {
+    if (!options?.titleRow) {
       return content;
     }
     const firstRow = options.titleRow.map(sanitizeCell).join(",");

core/static/bundled/utils/web-components.ts

@@ -29,6 +29,7 @@ export function registerComponent(name: string, options?: ElementDefinitionOptio
 export interface InheritedHtmlElement<K extends keyof HTMLElementTagNameMap>
   extends HTMLElement {
   readonly inheritedTagName: K;
+  // readonly initializedAttribute: "component-initialized";
   node: HTMLElementTagNameMap[K];
 }
 
@@ -47,8 +48,8 @@ export function inheritHtmlElement<K extends keyof HTMLElementTagNameMap>(tagNam
     implements InheritedHtmlElement<K>
   {
     readonly inheritedTagName = tagName;
-    private readonly initializedAttribute = "component-initialized";
+    readonly initializedAttribute = "component-initialized";
-    node: HTMLElementTagNameMap[K];
+    node!: HTMLElementTagNameMap[K];
 
     connectedCallback(autoAddNode?: boolean) {
       // When nesting inherited elements, we might trigger the wrapping twice

counter/static/bundled/counter/components/ajax-select-index.ts

@@ -1,7 +1,7 @@
-import type { TomOption } from "tom-select/dist/types/types";
+import type { TomOption } from "tom-select/src/types";
-import type { escape_html } from "tom-select/dist/types/utils";
+import type { escape_html } from "tom-select/src/utils";
-import { AjaxSelect } from "#core:core/components/ajax-select-base.ts";
+import { AjaxSelect } from "#core:core/components/ajax-select-base";
-import { registerComponent } from "#core:utils/web-components.ts";
+import { registerComponent } from "#core:utils/web-components";
 import {
   type CounterSchema,
   counterSearchCounter,
@@ -28,14 +28,18 @@ export class ProductAjaxSelect extends AjaxSelect {
     return [];
   }
 
+  private getName(item: SimpleProductSchema, sanitize: typeof escape_html): string {
+    return item.code ? `${sanitize(item.code)} - ${sanitize(item.name)}` : item.name;
+  }
+
   protected renderOption(item: SimpleProductSchema, sanitize: typeof escape_html) {
     return `<div class="select-item">
-            <span class="select-item-text">${sanitize(item.code)} - ${sanitize(item.name)}</span>
+            <span class="select-item-text">${this.getName(item, sanitize)}</span>
           </div>`;
   }
 
   protected renderItem(item: SimpleProductSchema, sanitize: typeof escape_html) {
-    return `<span>${sanitize(item.code)} - ${sanitize(item.name)}</span>`;
+    return `<span>${this.getName(item, sanitize)}</span>`;
   }
 }
 
@@ -44,7 +48,7 @@ export class ProductTypeAjaxSelect extends AjaxSelect {
   protected valueField = "id";
   protected labelField = "name";
   protected searchField = ["name"];
-  private productTypes = null as ProductTypeSchema[];
+  private productTypes = null as ProductTypeSchema[] | null;
 
   protected async search(query: string): Promise<TomOption[]> {
     // The production database has a grand total of 26 product types
@@ -52,7 +56,7 @@ export class ProductTypeAjaxSelect extends AjaxSelect {
     // Thus, it's appropriate to fetch all product types during first use,
     // then to reuse the result again and again.
     if (this.productTypes === null) {
-      this.productTypes = (await producttypeFetchAll()).data || null;
+      this.productTypes = (await producttypeFetchAll()).data || [];
     }
     return this.productTypes.filter((t) =>
       t.name.toLowerCase().includes(query.toLowerCase()),

counter/static/bundled/counter/components/counter-product-select-index.ts

@@ -59,7 +59,7 @@ export class CounterProductSelect extends AutoCompleteSelectBase {
         return onOptionSelect.call(
           this.widget,
           evt,
-          this.widget.getOption(value, true),
+          this.widget.getOption(value, true) as HTMLElement,
         );
       },
     );
@@ -70,12 +70,15 @@ export class CounterProductSelect extends AutoCompleteSelectBase {
       ...super.tomSelectSettings(),
       openOnFocus: false,
       // We make searching on exact code matching a higher priority
-      // We need to manually set weights or it results on an inconsistent
+      // We need to manually set weights, or it results on an inconsistent
       // behavior between production and development environment
+      //
+      // SearchField can be an object array (according to the docs),
+      // but it is unproperly typed, so we must force-cast to trick TS
       searchField: [
         { field: "code", weight: 2 },
         { field: "text", weight: 0.5 },
-      ],
+      ] as unknown as string[],
     };
   }
 }

counter/static/bundled/counter/product-list-index.ts

@@ -1,9 +1,14 @@
 import { showSaveFilePicker } from "native-file-system-adapter";
 import type TomSelect from "tom-select";
+import type { ClubAjaxSelect } from "#club:club/components/ajax-select-index";
 import type { NestedKeyOf } from "#core:types/nested-key";
-import { paginated } from "#core:utils/api";
+import { type PaginatedRequest, paginated } from "#core:utils/api";
 import { csv } from "#core:utils/csv";
 import { getCurrentUrlParams, History, updateQueryString } from "#core:utils/history";
+import type {
+  CounterAjaxSelect,
+  ProductTypeAjaxSelect,
+} from "#counter:counter/components/ajax-select-index";
 import {
   type ProductSchema,
   type ProductSearchProductsDetailedData,
@@ -51,6 +56,8 @@ const csvColumnTitles = [
   gettext("archived"),
 ];
 
+type ProductStatus = "active" | "archived" | "both";
+
 document.addEventListener("alpine:init", () => {
   Alpine.data("productList", () => ({
     loading: false,
@@ -59,8 +66,7 @@ document.addEventListener("alpine:init", () => {
 
     /** Total number of elements corresponding to the current query. */
     nbPages: 0,
-
+    productStatus: "" as ProductStatus,
-    productStatus: "" as "active" | "archived" | "both",
     search: "",
     productTypes: [] as string[],
     clubs: [] as string[],
@@ -71,16 +77,18 @@ document.addEventListener("alpine:init", () => {
     async init() {
       const url = getCurrentUrlParams();
       this.search = url.get("search") || "";
-      this.productStatus = url.get("productStatus") ?? "active";
+      this.productStatus = (url.get("productStatus") ?? "active") as ProductStatus;
-      const productTypesWidget = this.$refs.productTypesInput.widget as TomSelect;
+      const productTypesWidget = (this.$refs.productTypesInput as ProductTypeAjaxSelect)
+        .widget as TomSelect;
       productTypesWidget.on("change", (items: string[]) => {
         this.productTypes = [...items];
       });
-      const clubsWidget = this.$refs.clubsInput.widget as TomSelect;
+      const clubsWidget = (this.$refs.clubsInput as ClubAjaxSelect).widget as TomSelect;
       clubsWidget.on("change", (items: string[]) => {
         this.clubs = [...items];
       });
-      const countersWidget = this.$refs.countersInput.widget as TomSelect;
+      const countersWidget = (this.$refs.countersInput as CounterAjaxSelect)
+        .widget as TomSelect;
       countersWidget.on("change", (items: string[]) => {
         this.counters = [...items];
       });
@@ -127,9 +135,9 @@ document.addEventListener("alpine:init", () => {
           // biome-ignore lint/style/useNamingConvention: api is in snake_case
           is_archived: isArchived,
           // biome-ignore lint/style/useNamingConvention: api is in snake_case
-          product_type: [...this.productTypes],
+          product_type: [...this.productTypes.map(Number.parseInt)],
-          club: [...this.clubs],
+          club: [...this.clubs.map(Number.parseInt)],
-          counter: [...this.counters],
+          counter: [...this.counters.map(Number.parseInt)],
         },
       };
     },
@@ -141,6 +149,10 @@ document.addEventListener("alpine:init", () => {
       this.loading = true;
       const options = this.getQueryParams();
       const resp = await productSearchProductsDetailed(options);
+      if (resp.data === undefined) {
+        console.error("Product search request failed");
+        return;
+      }
       this.nbPages = Math.ceil(resp.data.count / defaultPageSize);
       this.products = resp.data.results.reduce<GroupedProducts>(
         (acc: GroupedProducts, curr: ProductSchema) => {
@@ -172,7 +184,10 @@ document.addEventListener("alpine:init", () => {
       // If not, fetch them.
       const products: ProductSchema[] =
         this.nbPages > 1
-          ? await paginated(productSearchProductsDetailed, this.getQueryParams())
+          ? await paginated(
+              productSearchProductsDetailed,
+              this.getQueryParams() as PaginatedRequest,
+            )
           : Object.values<ProductSchema[]>(this.products).flat();
       // CSV cannot represent nested data
       // so we create a row for each price of each product.

counter/static/bundled/counter/product-type-index.ts

@@ -1,5 +1,5 @@
 import Alpine from "alpinejs";
-import { AlertMessage } from "#core:utils/alert-message.ts";
+import { AlertMessage } from "#core:utils/alert-message";
 import { producttypeReorder } from "#openapi";
 
 document.addEventListener("alpine:init", () => {
@@ -22,7 +22,7 @@ document.addEventListener("alpine:init", () => {
       const productTypes = this.$refs.productTypes
         .childNodes as NodeListOf<HTMLLIElement>;
       const getId = (elem: HTMLLIElement) =>
-        Number.parseInt(elem.getAttribute("x-sort:item"), 10);
+        Number.parseInt(elem.getAttribute("x-sort:item") as string, 10);
       const query =
         newPosition === 0
           ? { above: getId(productTypes.item(1)) }
@@ -32,6 +32,10 @@ document.addEventListener("alpine:init", () => {
         path: { type_id: itemId },
         query: query,
       });
+      if (response.response === undefined) {
+        console.error("Product type reordering request failed");
+        return;
+      }
       this.openAlertMessage(response.response);
       this.loading = false;
     },

eboutic/static/bundled/eboutic/checkout-index.ts

@@ -61,10 +61,10 @@ document.addEventListener("alpine:init", () => {
           // biome-ignore lint/style/useNamingConvention: api is in snake_case
           path: { basket_id: basket.id },
         });
-        if (res.response.ok) {
+        if (res.response?.ok) {
           this.data = res.data as Record<string, string>;
           this.isCbAvailable = true;
-        } else if (res.response.status === 410) {
+        } else if (res.response?.status === 410) {
           // The basket is expired, so no payment method should be available at all.
           // This shouldn't happen, because we don't send the request
           // when the timeout is passed, but we are better safe than sorry

package-lock.json

@@ -48,6 +48,7 @@
         "@types/cytoscape-cxtmenu": "^3.4.5",
         "@types/cytoscape-klay": "^3.1.5",
         "@types/js-cookie": "^3.0.6",
+        "@types/node": "^26.1.1",
         "rollup-plugin-visualizer": "^7.0.1",
         "typescript": "^6.0.3",
         "vite": "^8.1.0"
@@ -2511,6 +2512,16 @@
       "integrity": "sha512-a79Yc3TOk6dGdituy8hmTTJXjOkZ7zsFYV10L337ttq/rec8lRMDBpV7fL3uLx6TgbFCa5DU/h8FmIBQPSbU0w==",
       "license": "MIT"
     },
+    "node_modules/@types/node": {
+      "version": "26.1.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-26.1.1.tgz",
+      "integrity": "sha512-nxAkRSVkN1Y0JC1W8ky/fTfkGsMmcrRsbx+3XoZE+rMOX71kLYTV7fLXpqud1GpbpP5TuffXFqfX7fH2GgZREw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~8.3.0"
+      }
+    },
     "node_modules/@types/tern": {
       "version": "0.23.9",
       "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.9.tgz",
@@ -4654,6 +4665,13 @@
       "integrity": "sha512-Z1YkJ7IIYNrFeOxAlHUercY4Q2I+PhYD/3VkWpJGy/Oqudy3bFpNcQxnv6Oa9fTSXCHPGz1eDoX1bZYm2Z891A==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/undici-types": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-8.3.0.tgz",
+      "integrity": "sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",

package.json

@@ -33,6 +33,7 @@
     "@types/cytoscape-cxtmenu": "^3.4.5",
     "@types/cytoscape-klay": "^3.1.5",
     "@types/js-cookie": "^3.0.6",
+    "@types/node": "^26.1.1",
     "rollup-plugin-visualizer": "^7.0.1",
     "typescript": "^6.0.3",
     "vite": "^8.1.0"

pyproject.toml

@@ -35,7 +35,7 @@ dependencies = [
     "django-ordered-model>=3.7.4,<4.0.0",
     "django-simple-captcha>=0.6.3,<1.0.0",
     "python-dateutil>=2.9.0.post0,<3.0.0.0",
-    "sentry-sdk>=2.64.0,<3.0.0",
+    "sentry-sdk>=2.63.0,<3.0.0",
     "jinja2>=3.1.6,<4.0.0",
     "django-countries>=9.0.0,<10.0.0",
     "dict2xml>=1.7.8,<2.0.0",

sas/api.py

@@ -1,4 +1,4 @@
-from typing import Any, Literal
+from typing import Literal
 
 from django.conf import settings
 from django.core.exceptions import ValidationError
@@ -20,7 +20,7 @@ from api.permissions import (
     IsRoot,
 )
 from core.models import Notification, User
-from core.schemas import UploadedImage
+from core.schemas import UploadedImage, ValidationErrorSchema
 from sas.models import Album, PeoplePictureRelation, Picture
 from sas.schemas import (
     AlbumAutocompleteSchema,
@@ -106,7 +106,7 @@ class PicturesController(ControllerBase):
         response={
             200: None,
             409: dict[Literal["detail"], dict[str, list[str]]],
-            422: dict[Literal["detail"], list[dict[str, Any]]],
+            422: ValidationErrorSchema,
         },
         url_name="upload_picture",
     )

sas/static/bundled/sas/components/ajax-select-index.ts

@@ -1,7 +1,7 @@
-import type { TomOption } from "tom-select/dist/types/types";
+import type { TomOption } from "tom-select/src/types";
-import type { escape_html } from "tom-select/dist/types/utils";
+import type { escape_html } from "tom-select/src/utils";
-import { AjaxSelect } from "#core:core/components/ajax-select-base.ts";
+import { AjaxSelect } from "#core:core/components/ajax-select-base";
-import { registerComponent } from "#core:utils/web-components.ts";
+import { registerComponent } from "#core:utils/web-components";
 import { type AlbumAutocompleteSchema, albumAutocompleteAlbum } from "#openapi";
 
 @registerComponent("album-ajax-select")

sas/static/bundled/sas/pictures-download-index.ts

@@ -9,7 +9,7 @@ document.addEventListener("alpine:init", () => {
 
     async downloadZip() {
       this.isDownloading = true;
-      const bar = this.$refs.progress;
+      const bar = this.$refs.progress as HTMLProgressElement;
       bar.value = 0;
       bar.max = this.downloadPictures.length;
 
@@ -31,10 +31,11 @@ document.addEventListener("alpine:init", () => {
 
       await Promise.all(
         this.downloadPictures.map((p: PictureSchema) => {
-          const imgName = `${p.album.name}/IMG_${p.id}_${p.date.replace(/[:-]/g, "_")}${p.name.slice(p.name.lastIndexOf("."))}`;
+          const dateStr = (p.date as string).replace(/[:-]/g, "_");
+          const imgName = `${p.album.name}/IMG_${p.id}_${dateStr}${p.name.slice(p.name.lastIndexOf("."))}`;
           return zipWriter.add(imgName, new HttpReader(p.full_size_url), {
             level: 9,
-            lastModDate: new Date(p.date),
+            lastModDate: new Date(p.date as string),
             onstart: incrementProgressBar,
           });
         }),

sas/static/bundled/sas/user/pictures-index.ts

@@ -57,14 +57,16 @@ document.addEventListener("alpine:init", () => {
 
     async init() {
       const pictures = await this.fetchPictures();
-      const groupedAlbums = Object.groupBy(pictures, (i: PictureSchema) => i.album.id);
+      const groupedAlbums = Object.groupBy(pictures, (i) => i.album.id as number);
-      this.albums = Object.values(groupedAlbums).map((pictures: PictureSchema[]) => {
+      this.albums = Object.values(groupedAlbums as Record<number, PictureSchema[]>).map(
+        (pictures) => {
           return {
-          id: pictures[0].album.id,
+            id: pictures[0].album.id as number,
             name: pictures[0].album.name,
             pictures: pictures,
           };
-      });
+        },
+      );
       this.albums.sort((a: Album, b: Album) => b.id - a.id);
       const hash = document.location.hash.replace("#", "");
       if (hash.startsWith("album-")) {

sas/static/bundled/sas/viewer-index.ts

@@ -1,4 +1,5 @@
 import type TomSelect from "tom-select";
+import type { TomOption } from "tom-select/src/types";
 import type { UserAjaxSelect } from "#core:core/components/ajax-select-index";
 import { paginated } from "#core:utils/api";
 import { History } from "#core:utils/history";
@@ -6,7 +7,6 @@ import {
   type IdentifiedUserSchema,
   type ModerationRequestSchema,
   type PictureSchema,
-  type PicturesFetchIdentificationsResponse,
   type PicturesFetchPicturesData,
   picturesDeletePicture,
   picturesFetchIdentifications,
@@ -15,6 +15,7 @@ import {
   picturesIdentifyUsers,
   picturesModeratePicture,
   picturesRotatePicture,
+  type SimpleAlbumSchema,
   type UserProfileSchema,
   usersidentifiedDeleteRelation,
 } from "#openapi";
@@ -23,8 +24,8 @@ import {
  * A container for a picture with the users identified on it
  * able to prefetch its data.
  */
-class PictureWithIdentifications {
+class PictureWithIdentifications implements PictureSchema {
-  identifications: PicturesFetchIdentificationsResponse = null;
+  identifications?: IdentifiedUserSchema[];
   imageLoading = false;
   identificationsLoading = false;
   moderationLoading = false;
@@ -32,10 +33,43 @@ class PictureWithIdentifications {
   compressedUrl: string = "";
   thumbUrl: string = "";
   fullSizeUrl: string = "";
-  moderationRequests: ModerationRequestSchema[] = null;
+  moderationRequests: ModerationRequestSchema[] = [];
+  owner: UserProfileSchema;
+  // biome-ignore-start lint/style/useNamingConvention: PictureSchema has CamelCase properties
+  sas_url: string;
+  full_size_url: string;
+  compressed_url: string;
+  thumb_url: string;
+  album: SimpleAlbumSchema;
+  report_url: string;
+  edit_url: string;
+  name: string;
+  date?: string | undefined;
+  updated_at: string;
+  size?: number | undefined;
+  is_moderated?: boolean | undefined;
+  asked_for_removal?: boolean | undefined;
+  // biome-ignore-end lint/style/useNamingConvention: PictureSchema has CamelCase properties
 
   constructor(picture: PictureSchema) {
-    Object.assign(this, picture);
+    if (picture.id === null || picture.id === undefined) {
+      throw new Error("picture id expected a value");
+    }
+    this.owner = picture.owner;
+    this.sas_url = picture.sas_url;
+    this.full_size_url = picture.full_size_url;
+    this.compressed_url = picture.compressed_url;
+    this.thumb_url = picture.thumb_url;
+    this.album = picture.album;
+    this.report_url = picture.report_url;
+    this.edit_url = picture.edit_url;
+    this.name = picture.name;
+    this.date = picture.date;
+    this.updated_at = picture.updated_at;
+    this.size = picture.size;
+    this.is_moderated = picture.is_moderated;
+    this.asked_for_removal = picture.asked_for_removal;
+    this.id = picture.id;
     this.compressedUrl = picture.compressed_url;
     this.thumbUrl = picture.thumb_url;
     this.fullSizeUrl = picture.full_size_url;
@@ -69,12 +103,13 @@ class PictureWithIdentifications {
       return;
     }
     this.identificationsLoading = true;
-    this.identifications = (
+    this.identifications =
+      (
         await picturesFetchIdentifications({
           // biome-ignore lint/style/useNamingConvention: api is in snake_case
           path: { picture_id: this.id },
         })
-    ).data;
+      ).data ?? [];
     this.identificationsLoading = false;
   }
 
@@ -88,12 +123,13 @@ class PictureWithIdentifications {
       return;
     }
     this.moderationLoading = true;
-    this.moderationRequests = (
+    this.moderationRequests =
+      (
         await picturesFetchModerationRequests({
           // biome-ignore lint/style/useNamingConvention: api is in snake_case
           path: { picture_id: this.id },
         })
-    ).data;
+      ).data ?? [];
     this.moderationLoading = false;
   }
 
@@ -103,6 +139,10 @@ class PictureWithIdentifications {
       // biome-ignore lint/style/useNamingConvention: api is snake case
       path: { picture_id: this.id, direction: direction },
     });
+    if (!res.data) {
+      console.error("The data o the rotated were expected, but nothing was returned");
+      return;
+    }
     // urls returned by the api include a timestamp for cache busting
     this.fullSizeUrl = res.data.full_size_url;
     this.compressedUrl = res.data.compressed_url;
@@ -157,7 +197,7 @@ document.addEventListener("alpine:init", () => {
     currentPicture: {
       // biome-ignore lint/style/useNamingConvention: api is in snake_case
       is_moderated: true,
-      id: null as number,
+      id: null as number | null,
       name: "",
       // biome-ignore lint/style/useNamingConvention: api is in snake_case
       display_name: "",
@@ -171,19 +211,19 @@ document.addEventListener("alpine:init", () => {
       // biome-ignore lint/style/useNamingConvention: api is in snake_case
       created_at: new Date(),
       identifications: [] as IdentifiedUserSchema[],
-    },
+    } as unknown as PictureWithIdentifications,
     /**
      * The picture which will be displayed next if the user press the "next" button
      **/
-    nextPicture: null as PictureWithIdentifications,
+    nextPicture: null as PictureWithIdentifications | null,
     /**
      * The picture which will be displayed next if the user press the "previous" button
      **/
-    previousPicture: null as PictureWithIdentifications,
+    previousPicture: null as PictureWithIdentifications | null,
     /**
      * The select2 component used to identify users
      **/
-    selector: undefined as UserAjaxSelect,
+    selector: undefined as UserAjaxSelect | undefined,
     /**
      * Error message when a moderation operation fails
      **/
@@ -201,24 +241,18 @@ document.addEventListener("alpine:init", () => {
           query: { album_id: config.albumId },
         } as PicturesFetchPicturesData)
       ).map(PictureWithIdentifications.fromPicture);
-      this.selector = this.$refs.search;
+      this.selector = this.$refs.search as UserAjaxSelect;
-      this.selector.setFilter((users: UserProfileSchema[]) => {
+      this.selector.setFilter((users: TomOption[]) => {
-        const resp: UserProfileSchema[] = [];
         const ids = [
           ...(this.currentPicture.identifications || []).map(
             (i: IdentifiedUserSchema) => i.user.id,
           ),
         ];
-        for (const user of users) {
+        return users.filter((user) => !ids.includes(user.id));
-          if (!ids.includes(user.id)) {
-            resp.push(user);
-          }
-        }
-        return resp;
       });
       this.currentPicture = this.pictures.find(
-        (i: PictureSchema) => i.id === config.firstPictureId,
+        (i) => i.id === config.firstPictureId,
-      );
+      ) as PictureWithIdentifications;
       this.$watch(
         "currentPicture",
         (current: PictureSchema, previous: PictureSchema) => {
@@ -236,7 +270,7 @@ document.addEventListener("alpine:init", () => {
         this.pushstate = History.Replace;
         this.currentPicture = this.pictures.find(
           (i: PictureSchema) => i.id === Number.parseInt(event.state.sasPictureId, 10),
-        );
+        ) as PictureWithIdentifications;
       });
       this.pushstate = History.Replace; /* Avoid first url push */
       await this.updatePicture();
@@ -311,14 +345,15 @@ document.addEventListener("alpine:init", () => {
         // As the album is now empty, go back to the parent page
         document.location.href = config.albumUrl;
       }
-      this.currentPicture = this.nextPicture || this.previousPicture;
+      this.currentPicture = (this.nextPicture ||
+        this.previousPicture) as PictureWithIdentifications;
     },
 
     /**
      * Send the identification request and update the list of identified users.
      */
     async submitIdentification(): Promise<void> {
-      const widget: TomSelect = this.selector.widget;
+      const widget: TomSelect = (this.selector as UserAjaxSelect).widget;
       await picturesIdentifyUsers({
         // biome-ignore lint/style/useNamingConvention: api is in snake_case
         path: { picture_id: this.currentPicture.id },

subscription/static/bundled/subscription/creation-form-existing-user-index.ts

@@ -1,10 +1,11 @@
+import type { UserAjaxSelect } from "#core:core/components/ajax-select-index";
 import { userFetchUser } from "#openapi";
 
 Alpine.data("existing_user_subscription_form", () => ({
   loading: false,
   selectedUser: "",
   profileFragment: "",
-  dateOfBirth: "",
+  dateOfBirth: "" as string | null,
   dateOfBirthHidden: true,
 
   init() {
@@ -14,7 +15,9 @@ Alpine.data("existing_user_subscription_form", () => ({
 
     this.$nextTick(() => {
       // Force to detect the initial value
-      this.selectedUser = this.$refs.userSelect.widget.getValue();
+      this.selectedUser = (
+        this.$refs.userSelect as UserAjaxSelect
+      ).widget.getValue() as string;
     });
   },
 
@@ -31,11 +34,15 @@ Alpine.data("existing_user_subscription_form", () => ({
       // biome-ignore lint/style/useNamingConvention: api is snake_case
       userFetchUser({ path: { user_id: userId } }),
     ]);
+    if (userInfos.data === undefined) {
+      console.error("User infos request failed");
+      return;
+    }
     this.profileFragment = await miniProfile.text();
     // If the user has no birthdate yet, show the form input
     // to fill this info.
     // Else keep the input hidden and change its value to the user birthdate
-    this.dateOfBirth = userInfos.data.date_of_birth;
+    this.dateOfBirth = userInfos.data.date_of_birth ?? null;
     this.dateOfBirthHidden = userInfos.data.date_of_birth !== null;
     this.loading = false;
   },

subscription/static/bundled/subscription/stats-index.ts

@@ -17,7 +17,10 @@ function getRandomColorUniq(list: string[]) {
   }
   return color;
 }
-function hexToRgb(hex: string) {
+
+type Rgb = { r: number; g: number; b: number };
+
+function hexToRgb(hex: string): Rgb | null {
   // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
   const hexrgb = hex.replace(shorthandRegex, (_m, r, g, b) => {
@@ -37,32 +40,29 @@ function hexToRgb(hex: string) {
 document.addEventListener("DOMContentLoaded", () => {
   const ctx = (document.getElementById("statsChart") as HTMLCanvasElement).getContext(
     "2d",
-  );
+  ) as CanvasRenderingContext2D;
   const labels: string[] = [];
   const total: string[] = [];
-  const colors: string[] = [];
+  const colorStrings: string[] = [];
   const colorsDimmed: string[] = [];
   for (const element of Array.from(document.getElementsByClassName("types"))) {
-    labels.push(element.childNodes[0].textContent);
+    labels.push(element.childNodes[0].textContent as string);
   }
   for (const element of Array.from(document.getElementsByClassName("total"))) {
-    total.push(element.childNodes[0].childNodes[0].textContent);
+    total.push(element.childNodes[0].childNodes[0].textContent as string);
   }
 
   for (const _ of labels) {
-    colors.push(getRandomColorUniq(colors));
+    colorStrings.push(getRandomColorUniq(colorStrings));
+  }
+  const colors = colorStrings.map(hexToRgb) as Rgb[];
+
+  for (const color of colors) {
+    colorsDimmed.push(`rgba(${color.r}, ${color.g}, ${color.b}, 0.2)`);
   }
 
-  for (const element of colors) {
+  for (const color of colors) {
-    const rgbColor = hexToRgb(element);
+    colorsDimmed.push(`rgba(${color.r}, ${color.g}, ${color.b}, 0.2)`);
-    colorsDimmed.push(`rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, 0.2)`);
-  }
-
-  for (const element of colors) {
-    const rgbColorDimmed = hexToRgb(element);
-    colorsDimmed.push(
-      `rgba(${rgbColorDimmed.r}, ${rgbColorDimmed.g}, ${rgbColorDimmed.b}, 0.2)`,
-    );
   }
 
   new Chart(ctx, {
@@ -71,10 +71,11 @@ document.addEventListener("DOMContentLoaded", () => {
       labels: labels,
       datasets: [
         {
-          label: document.getElementById("graphLabel").childNodes[0].textContent,
+          label: document.getElementById("graphLabel")?.childNodes[0]
+            .textContent as string,
           data: total,
           backgroundColor: colorsDimmed,
-          borderColor: colors,
+          borderColor: colorStrings,
           borderWidth: 1,
         },
       ],

timetable/static/bundled/timetable/generator-index.ts

@@ -58,7 +58,7 @@ function parseSlots(s: string): TimetableSlot[] {
     .filter((s: string) => s.length > 0)
     .map((row: string) => {
       const parsed = TIMETABLE_ROW_RE.exec(row);
-      if (!parsed) {
+      if (!parsed?.groups) {
         throw new Error(`Couldn't parse row ${row}`);
       }
       const [startHour, startMin] = parsed.groups.startHour
@@ -173,7 +173,7 @@ document.addEventListener("alpine:init", () => {
 
     async savePng() {
       const elem = document.getElementById("timetable");
-      const img = (await html2canvas(elem)).toDataURL();
+      const img = (await html2canvas(elem as HTMLElement)).toDataURL();
       const downloadLink = document.createElement("a");
       downloadLink.href = img;
       downloadLink.download = "edt.png";

tsconfig.bundled.json

@@ -0,0 +1,27 @@
+{
+  "exclude": ["staticfiles/generated/**/*", "*.mts", "node_modules/**/*"],
+  "compilerOptions": {
+    "outDir": "./staticfiles/generated/bundled/",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "module": "esnext",
+    "target": "es2024",
+    "allowJs": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "composite": true,
+    "types": ["alpinejs"],
+    "paths": {
+      "#openapi": ["./staticfiles/generated/openapi/client/index.ts"],
+      "#openapi:*": ["./staticfiles/generated/openapi/client/*"],
+      "#core:*": ["./core/static/bundled/*"],
+      "#pedagogy:*": ["./pedagogy/static/bundled/*"],
+      "#counter:*": ["./counter/static/bundled/*"],
+      "#com:*": ["./com/static/bundled/*"],
+      "#club:*": ["./club/static/bundled/*"]
+    }
+  }
+}

tsconfig.json

@@ -1,24 +1,6 @@
 {
-  "compilerOptions": {
+  "references": [
-    "outDir": "./staticfiles/generated/bundled/",
+    {"path": "tsconfig.bundled.json"},
-    "sourceMap": true,
+    {"path": "tsconfig.node.json"}
-    "noImplicitAny": true,
+  ],
-    "module": "esnext",
-    "target": "es2024",
-    "allowJs": true,
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "types": ["alpinejs"],
-    "paths": {
-      "#openapi": ["./staticfiles/generated/openapi/client/index.ts"],
-      "#openapi:*": ["./staticfiles/generated/openapi/client/*"],
-      "#core:*": ["./core/static/bundled/*"],
-      "#pedagogy:*": ["./pedagogy/static/bundled/*"],
-      "#counter:*": ["./counter/static/bundled/*"],
-      "#com:*": ["./com/static/bundled/*"]
-    }
-  }
 }

tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "include": ["vite.config.*"],
+  "compilerOptions": {
+    "module": "preserve",
+    "moduleResolution": "bundler",
+    "types": ["node"],
+    "emitDeclarationOnly": true,
+    "composite": true
+  }
+}

vite.config.mts

@@ -8,7 +8,7 @@ import {
   type Rollup,
   type UserConfig,
 } from "vite";
-import tsconfig from "./tsconfig.json";
+import { compilerOptions } from "./tsconfig.bundled.json";
 
 const outDir = resolve(__dirname, "./staticfiles/generated/bundled");
 const collectedFiles = glob.sync(
@@ -20,7 +20,7 @@ const collectedFiles = glob.sync(
  **/
 function getAliases(): AliasOptions {
   const aliases: AliasOptions = {};
-  for (const [key, value] of Object.entries(tsconfig.compilerOptions.paths)) {
+  for (const [key, value] of Object.entries(compilerOptions.paths)) {
     aliases[key] = resolve(__dirname, value[0]);
   }
   return aliases;
@@ -59,7 +59,7 @@ export default defineConfig((config: UserConfig) => {
           // Mirror architecture of static folders in generated .js and .css
           entryFileNames: (chunkInfo: Rollup.PreRenderedChunk) => {
             if (chunkInfo.facadeModuleId !== null) {
-              return `${getRelativeAssetPath(chunkInfo.facadeModuleId)}.[hash].js`;
+              return `${getRelativeAssetPath(chunkInfo.facadeModuleId as string)}.[hash].js`;
             }
             return "[name].[hash].js";
           },
@@ -80,8 +80,6 @@ export default defineConfig((config: UserConfig) => {
     resolve: {
       alias: getAliases(),
     },
-    // biome-ignore lint/style/useNamingConvention: that's how it's called
-    inject: { Alpine: "alpinejs", htmx: "htmx.org" },
     plugins: [visualizer({ filename: ".bundle-size-report.html" }) as PluginOption],
   } satisfies UserConfig;
 });