From 14e5c301610b91b6322f3011528feba775bfeae3 Mon Sep 17 00:00:00 2001
From: TPReal <tpreal@gmail.com>
Date: Wed, 15 Nov 2023 15:03:17 +0100
Subject: [PATCH] Added eslint rules that warn for non-readonly props, as they
 sometimes cause bugs and it makes sense to just make all the props readonly.

---
 .eslintrc.json                                  | 17 +++++++++++++++++
 .../js/components/felte-form/FelteSubmit.tsx    |  4 ++--
 .../felte-form/ValidationMessages.tsx           |  2 +-
 resources/js/components/ui/Capitalize.tsx       |  4 ++--
 resources/js/components/ui/CopyToClipboard.tsx  |  4 ++--
 resources/js/components/ui/Email.tsx            |  2 +-
 resources/js/components/ui/HideableSection.tsx  |  2 +-
 resources/js/components/ui/Modal.tsx            | 10 +++++-----
 .../js/components/ui/Table/CellRenderer.tsx     |  4 ++--
 resources/js/components/ui/Table/ColumnName.tsx |  2 +-
 resources/js/components/ui/Table/FilterIcon.tsx |  6 +++---
 resources/js/components/ui/Table/Header.tsx     |  4 ++--
 resources/js/components/ui/Table/IdColumn.tsx   |  2 +-
 resources/js/components/ui/Table/SortMarker.tsx |  2 +-
 .../js/components/ui/Table/TQueryTable.tsx      |  2 +-
 resources/js/components/ui/Table/Table.tsx      | 16 ++++++++--------
 .../js/components/ui/Table/TableSearch.tsx      |  2 +-
 .../js/components/ui/Table/TableSummary.tsx     |  2 +-
 .../tquery_filters/DateTimeFilterControl.tsx    |  6 +++---
 .../tquery_filters/TextualFilterControl.tsx     |  2 +-
 .../ui/Table/tquery_filters/select_items.tsx    | 16 ++++++++--------
 .../components/ui/Table/tquery_filters/types.ts |  8 ++++----
 resources/js/components/ui/TranslatedText.tsx   | 10 +++++-----
 .../js/components/ui/calendar/FullCalendar.tsx  | 14 +++++++-------
 resources/js/components/ui/form/Checkbox.tsx    |  4 ++--
 .../js/components/ui/form/DictionarySelect.tsx  | 10 +++++-----
 resources/js/components/ui/form/FieldLabel.tsx  |  6 +++---
 .../js/components/ui/form/SegmentedControl.tsx  | 14 +++++++-------
 resources/js/components/utils/AccessBarrier.tsx |  6 +++---
 resources/js/components/utils/QueryBarrier.tsx  |  8 ++++----
 .../authentication/forms/login/Login.form.tsx   |  2 +-
 .../facility-edit/FacilityCreateForm.tsx        |  4 ++--
 .../features/facility-edit/FacilityEditForm.tsx |  4 ++--
 resources/js/features/root/MemoTitle.tsx        |  2 +-
 .../root/components/navbar/NavigationItem.tsx   |  4 ++--
 .../components/navbar/NavigationSection.tsx     |  4 ++--
 resources/js/features/root/pages/Root.page.tsx  |  2 +-
 .../features/user-panel/PasswordChange.form.tsx |  4 ++--
 .../js/features/users-edit/UserCreate.form.tsx  |  4 ++--
 .../js/features/users-edit/UserEdit.form.tsx    |  4 ++--
 resources/js/features/users-edit/UserEdit.tsx   |  4 ++--
 .../js/features/users-edit/UserMembersEdit.tsx  |  2 +-
 42 files changed, 124 insertions(+), 107 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 94f34d19a..67a909673 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -38,6 +38,23 @@
       {
         "selector": "JSXOpeningElement > JSXIdentifier[name='button']",
         "message": "Use <Button> instead."
+      },
+      {
+        // It's impossible to match slashes, so here \W is used instead.
+        "selector": "ImportDeclaration[source.value=/^\\.\\.\\W\\.\\.\\W/]",
+        "message": "Don't import from ../../, use the absolute path instead."
+      },
+      {
+        "selector": "TSInterfaceDeclaration[id.name=/Props$/] > TSInterfaceBody > TSPropertySignature[readonly!='true']",
+        "message": "Mark props as readonly, this avoids some tricky bugs."
+      },
+      {
+        "selector": "TSInterfaceDeclaration[id.name=/Props$/] > TSInterfaceBody > TSPropertySignature > TSTypeAnnotation > TSArrayType",
+        "message": "Mark array props as readonly arrays (`readonly Type[]`), this avoids some tricky bugs."
+      },
+      {
+        "selector": "TSInterfaceDeclaration[id.name=/Props$/] > TSInterfaceBody > TSPropertySignature > TSTypeAnnotation > TSTypeReference[typeName.name=/^(Set|Map)$/]",
+        "message": "Mark Set/Map props as ReadonlySet/ReadonlyMap, this avoids some tricky bugs."
       }
     ],
     "no-unused-expressions": "warn",
diff --git a/resources/js/components/felte-form/FelteSubmit.tsx b/resources/js/components/felte-form/FelteSubmit.tsx
index 3ea9de51f..677e753d4 100644
--- a/resources/js/components/felte-form/FelteSubmit.tsx
+++ b/resources/js/components/felte-form/FelteSubmit.tsx
@@ -9,9 +9,9 @@ interface Props extends htmlAttributes.button {
    * The cancel handler. If present, there will be a cancel button to the right of the submit button.
    * The value is the handler called on cancel click. Default: no cancel.
    */
-  cancel?: () => void;
+  readonly cancel?: () => void;
   /** Whether to include the unknown validation messages above the button. Default: true. */
-  includeUnknownValidationMessages?: boolean;
+  readonly includeUnknownValidationMessages?: boolean;
 }
 
 /**
diff --git a/resources/js/components/felte-form/ValidationMessages.tsx b/resources/js/components/felte-form/ValidationMessages.tsx
index ec88031db..f7011fe22 100644
--- a/resources/js/components/felte-form/ValidationMessages.tsx
+++ b/resources/js/components/felte-form/ValidationMessages.tsx
@@ -5,7 +5,7 @@ import {Index, VoidComponent, createMemo, on} from "solid-js";
 import {HideableSection} from "../ui/HideableSection";
 
 interface Props {
-  fieldName: string;
+  readonly fieldName: string;
 }
 
 export const ValidationMessages: VoidComponent<Props> = (props) => {
diff --git a/resources/js/components/ui/Capitalize.tsx b/resources/js/components/ui/Capitalize.tsx
index 6d0993216..0c8ca9be9 100644
--- a/resources/js/components/ui/Capitalize.tsx
+++ b/resources/js/components/ui/Capitalize.tsx
@@ -2,8 +2,8 @@ import {VoidComponent, splitProps} from "solid-js";
 import {cx, htmlAttributes} from "../utils";
 
 interface Props extends htmlAttributes.span {
-  text: string | undefined;
-  capitalize?: boolean;
+  readonly text: string | undefined;
+  readonly capitalize?: boolean;
 }
 
 /** Displays a span with the specified text with its first letter capitalised using CSS. */
diff --git a/resources/js/components/ui/CopyToClipboard.tsx b/resources/js/components/ui/CopyToClipboard.tsx
index d1fb947f3..fe3d9f4e4 100644
--- a/resources/js/components/ui/CopyToClipboard.tsx
+++ b/resources/js/components/ui/CopyToClipboard.tsx
@@ -4,9 +4,9 @@ import {useLangFunc} from "../utils";
 import {Button} from "./Button";
 
 interface Props {
-  text: string | undefined;
+  readonly text: string | undefined;
   /** Whether the text should be displayed on hover. */
-  textInTitle?: boolean;
+  readonly textInTitle?: boolean;
 }
 
 /** A "Copy to clipboard" icon, copying the specified text on click. */
diff --git a/resources/js/components/ui/Email.tsx b/resources/js/components/ui/Email.tsx
index 4ca2afcd5..3a4a2116a 100644
--- a/resources/js/components/ui/Email.tsx
+++ b/resources/js/components/ui/Email.tsx
@@ -4,7 +4,7 @@ import {CopyToClipboard} from "./CopyToClipboard";
 import {EMPTY_VALUE_SYMBOL} from "./symbols";
 
 interface Props extends htmlAttributes.div {
-  email: string | undefined;
+  readonly email: string | undefined;
 }
 
 /** A component for displaying a copiable email address. No mailto. */
diff --git a/resources/js/components/ui/HideableSection.tsx b/resources/js/components/ui/HideableSection.tsx
index 1157a883d..8da452040 100644
--- a/resources/js/components/ui/HideableSection.tsx
+++ b/resources/js/components/ui/HideableSection.tsx
@@ -2,7 +2,7 @@ import {ParentComponent} from "solid-js";
 import {debouncedAccessor} from "../utils";
 
 interface Props {
-  show: boolean;
+  readonly show: boolean;
 }
 
 const TRANSITION_TIME_MS = 200;
diff --git a/resources/js/components/ui/Modal.tsx b/resources/js/components/ui/Modal.tsx
index eba6f9ccb..cb53f337b 100644
--- a/resources/js/components/ui/Modal.tsx
+++ b/resources/js/components/ui/Modal.tsx
@@ -9,30 +9,30 @@ import s from "./Modal.module.scss";
 import {ChildrenOrFunc, getChildrenElement} from "./children_func";
 
 interface BaseProps<T> {
-  title?: string;
+  readonly title?: string;
   /**
    * Style of the modal, mostly for specifying the size. When absent, a reasonable minimum width is used.
    */
-  style?: JSX.CSSProperties;
+  readonly style?: JSX.CSSProperties;
   /**
    * A value determining whether the modal is open. If truthy, the value is also available for the modal
    * children in its function form.
    *
    * The only way to close the modal is to set this to a falsy value (the modal never closes itself).
    */
-  open: T | undefined | false;
+  readonly open: T | undefined | false;
   /**
    * Children can be either a standard JSX element, or a function that is called with an accessor
    * to the non-nullable value passed to open. This is similar to the function form of the Show component.
    * see Modal doc for example.
    */
-  children: ChildrenOrFunc<[Accessor<NonNullable<T>>]>;
+  readonly children: ChildrenOrFunc<[Accessor<NonNullable<T>>]>;
   /**
    * Handler called when the user tries to escape from the modal, either by pressing the Escape key,
    * or by clicking outside. If these actions should close the modal, this handler needs to set the
    * open prop to false.
    */
-  onEscape?: (reason: EscapeReason) => void;
+  readonly onEscape?: (reason: EscapeReason) => void;
 }
 
 export const MODAL_STYLE_PRESETS = {
diff --git a/resources/js/components/ui/Table/CellRenderer.tsx b/resources/js/components/ui/Table/CellRenderer.tsx
index 9264a6ca8..1da675ef7 100644
--- a/resources/js/components/ui/Table/CellRenderer.tsx
+++ b/resources/js/components/ui/Table/CellRenderer.tsx
@@ -4,9 +4,9 @@ import {Dynamic} from "solid-js/web";
 
 export interface CellRendererProps<TProps extends object> {
   /** The cell content (e.g. component/string) render */
-  component: ColumnDefTemplate<TProps> | undefined;
+  readonly component: ColumnDefTemplate<TProps> | undefined;
   /** The props to pass to the cell component */
-  props: TProps;
+  readonly props: TProps;
 }
 
 /**
diff --git a/resources/js/components/ui/Table/ColumnName.tsx b/resources/js/components/ui/Table/ColumnName.tsx
index ad19aa3d7..5719db18b 100644
--- a/resources/js/components/ui/Table/ColumnName.tsx
+++ b/resources/js/components/ui/Table/ColumnName.tsx
@@ -5,7 +5,7 @@ import {useTable} from "./TableContext";
 
 interface Props {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  def: ColumnDef<any>;
+  readonly def: ColumnDef<any>;
 }
 
 /**
diff --git a/resources/js/components/ui/Table/FilterIcon.tsx b/resources/js/components/ui/Table/FilterIcon.tsx
index 2b8ebf8a1..1205b581c 100644
--- a/resources/js/components/ui/Table/FilterIcon.tsx
+++ b/resources/js/components/ui/Table/FilterIcon.tsx
@@ -5,9 +5,9 @@ import {Dynamic} from "solid-js/web";
 import {Button} from "../Button";
 
 interface Props {
-  isFiltering?: boolean;
-  class?: string;
-  onClear?: () => void;
+  readonly isFiltering?: boolean;
+  readonly class?: string;
+  readonly onClear?: () => void;
 }
 
 export const FilterIcon: VoidComponent<Props> = (props) => {
diff --git a/resources/js/components/ui/Table/Header.tsx b/resources/js/components/ui/Table/Header.tsx
index d69b0dac6..1bb61e2ee 100644
--- a/resources/js/components/ui/Table/Header.tsx
+++ b/resources/js/components/ui/Table/Header.tsx
@@ -7,8 +7,8 @@ import s from "./Header.module.scss";
 
 interface Props {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ctx: HeaderContext<any, unknown>;
-  filter?: JSX.Element;
+  readonly ctx: HeaderContext<any, unknown>;
+  readonly filter?: JSX.Element;
 }
 
 /**
diff --git a/resources/js/components/ui/Table/IdColumn.tsx b/resources/js/components/ui/Table/IdColumn.tsx
index 686b10680..91cfe9a1f 100644
--- a/resources/js/components/ui/Table/IdColumn.tsx
+++ b/resources/js/components/ui/Table/IdColumn.tsx
@@ -3,7 +3,7 @@ import {CopyToClipboard} from "../CopyToClipboard";
 import {EMPTY_VALUE_SYMBOL} from "../symbols";
 
 interface Props {
-  id: string | undefined;
+  readonly id: string | undefined;
 }
 
 /** A component for displaying a copiable id, truncated to take less space. */
diff --git a/resources/js/components/ui/Table/SortMarker.tsx b/resources/js/components/ui/Table/SortMarker.tsx
index 3898d06c6..5b07dfe2c 100644
--- a/resources/js/components/ui/Table/SortMarker.tsx
+++ b/resources/js/components/ui/Table/SortMarker.tsx
@@ -7,7 +7,7 @@ import {useTable} from "./TableContext";
 
 interface Props {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  column: Column<any>;
+  readonly column: Column<any>;
 }
 
 const ICONS = new Map<false | SortDirection, IconTypes>()
diff --git a/resources/js/components/ui/Table/TQueryTable.tsx b/resources/js/components/ui/Table/TQueryTable.tsx
index 551f9d892..e204c2a04 100644
--- a/resources/js/components/ui/Table/TQueryTable.tsx
+++ b/resources/js/components/ui/Table/TQueryTable.tsx
@@ -1,4 +1,5 @@
 import {ColumnDef, IdentifiedColumnDef, RowData, SortingState, createSolidTable} from "@tanstack/solid-table";
+import {toastMessages} from "components/utils/toast";
 import {FilterH} from "data-access/memo-api/tquery/filter_utils";
 import {ColumnConfig, createTableRequestCreator, tableHelper} from "data-access/memo-api/tquery/table";
 import {createTQuery} from "data-access/memo-api/tquery/tquery";
@@ -20,7 +21,6 @@ import {
   getBaseTableOptions,
   useTableCells,
 } from ".";
-import {toastMessages} from "../../utils/toast";
 import {ColumnFilterController, FilteringParams} from "./tquery_filters/ColumnFilterController";
 
 declare module "@tanstack/table-core" {
diff --git a/resources/js/components/ui/Table/Table.tsx b/resources/js/components/ui/Table/Table.tsx
index 6d97f2e3e..0005fb00a 100644
--- a/resources/js/components/ui/Table/Table.tsx
+++ b/resources/js/components/ui/Table/Table.tsx
@@ -91,9 +91,9 @@ export const AUTO_SIZE_COLUMN_DEFS = {
 } satisfies Partial<ColumnDef<object>>;
 
 interface Props<T = object> {
-  table: TanStackTable<T>;
+  readonly table: TanStackTable<T>;
   /** Table mode. Default: embedded. */
-  mode?: DisplayMode;
+  readonly mode?: DisplayMode;
   /**
    * The iteration component used for iterating over rows. Default: For.
    *
@@ -101,17 +101,17 @@ interface Props<T = object> {
    * collection of elements. For backend tables, when the rows change identity after each query
    * to the backend, Index might be a better choice.
    */
-  rowsIteration?: "For" | "Index";
+  readonly rowsIteration?: "For" | "Index";
   /** The content to put above the table, e.g. the global search bar. It has access to the table context */
-  aboveTable?: () => JSX.Element;
+  readonly aboveTable?: () => JSX.Element;
   /** The content to put below the table, e.g. the pagination controller. It has access to the table context */
-  belowTable?: () => JSX.Element;
+  readonly belowTable?: () => JSX.Element;
   /** Whether the whole table content is loading. This hides the whole table and displays a spinner. */
-  isLoading?: boolean;
+  readonly isLoading?: boolean;
   /** Whether the content of the table is reloading. This dims the table and makes it inert. */
-  isDimmed?: boolean;
+  readonly isDimmed?: boolean;
   /** A signal which changes when the table should scroll itself to the top. */
-  scrollToTopSignal?: Accessor<unknown>;
+  readonly scrollToTopSignal?: Accessor<unknown>;
 }
 
 const DEFAULT_PROPS = {
diff --git a/resources/js/components/ui/Table/TableSearch.tsx b/resources/js/components/ui/Table/TableSearch.tsx
index f8ad71fb4..b7361e507 100644
--- a/resources/js/components/ui/Table/TableSearch.tsx
+++ b/resources/js/components/ui/Table/TableSearch.tsx
@@ -3,7 +3,7 @@ import {ParentProps, VoidComponent, createComputed, createSignal, splitProps} fr
 import {useTable} from ".";
 
 interface Props extends htmlAttributes.div {
-  placeholder?: string;
+  readonly placeholder?: string;
 }
 
 export const TableSearch: VoidComponent<ParentProps<Props>> = (allProps) => {
diff --git a/resources/js/components/ui/Table/TableSummary.tsx b/resources/js/components/ui/Table/TableSummary.tsx
index a8e0b9df2..d0804bbcf 100644
--- a/resources/js/components/ui/Table/TableSummary.tsx
+++ b/resources/js/components/ui/Table/TableSummary.tsx
@@ -7,7 +7,7 @@ interface Props {
    * Number of rows. Must be specified for backend tables where it cannot be taken from the
    * table object.
    */
-  rowsCount?: number;
+  readonly rowsCount?: number;
 }
 
 export const TableSummary: VoidComponent<Props> = (props) => {
diff --git a/resources/js/components/ui/Table/tquery_filters/DateTimeFilterControl.tsx b/resources/js/components/ui/Table/tquery_filters/DateTimeFilterControl.tsx
index 72c852b7f..e555f633f 100644
--- a/resources/js/components/ui/Table/tquery_filters/DateTimeFilterControl.tsx
+++ b/resources/js/components/ui/Table/tquery_filters/DateTimeFilterControl.tsx
@@ -18,13 +18,13 @@ type DateTimeRangeFilter =
   | (DateColumnFilter & {op: "="});
 
 interface DateTimeColumnProps extends FilterControlProps<DateTimeRangeFilter> {
-  columnType?: "datetime";
+  readonly columnType?: "datetime";
   /** Whether the inputs should set date and time. Default is only date. */
-  useDateTimeInputs?: boolean;
+  readonly useDateTimeInputs?: boolean;
 }
 
 interface DateColumnProps extends FilterControlProps<DateTimeRangeFilter> {
-  columnType: "date";
+  readonly columnType: "date";
 }
 
 type Props = DateColumnProps | DateTimeColumnProps;
diff --git a/resources/js/components/ui/Table/tquery_filters/TextualFilterControl.tsx b/resources/js/components/ui/Table/tquery_filters/TextualFilterControl.tsx
index 863a3bf26..8a541e8c6 100644
--- a/resources/js/components/ui/Table/tquery_filters/TextualFilterControl.tsx
+++ b/resources/js/components/ui/Table/tquery_filters/TextualFilterControl.tsx
@@ -8,7 +8,7 @@ import {makeSelectItem} from "./select_items";
 import {FilterControlProps} from "./types";
 
 interface StringColumnProps extends FilterControlProps {
-  columnType: "string" | "text";
+  readonly columnType: "string" | "text";
 }
 
 export const TextualFilterControl: VoidComponent<StringColumnProps> = (props) => {
diff --git a/resources/js/components/ui/Table/tquery_filters/select_items.tsx b/resources/js/components/ui/Table/tquery_filters/select_items.tsx
index 386b1c889..f93d1f98c 100644
--- a/resources/js/components/ui/Table/tquery_filters/select_items.tsx
+++ b/resources/js/components/ui/Table/tquery_filters/select_items.tsx
@@ -4,8 +4,8 @@ import {cx} from "components/utils";
 import {Match, Show, Switch, VoidComponent} from "solid-js";
 
 interface SelectItemSymbolProps {
-  symbol: string;
-  class?: string;
+  readonly symbol: string;
+  readonly class?: string;
 }
 
 export const SelectItemSymbol: VoidComponent<SelectItemSymbolProps> = (props) => (
@@ -13,8 +13,8 @@ export const SelectItemSymbol: VoidComponent<SelectItemSymbolProps> = (props) =>
 );
 
 interface SelectItemDescriptionProps {
-  description: string;
-  class?: string;
+  readonly description: string;
+  readonly class?: string;
 }
 
 export const SelectItemDescription: VoidComponent<SelectItemDescriptionProps> = (props) => (
@@ -22,10 +22,10 @@ export const SelectItemDescription: VoidComponent<SelectItemDescriptionProps> =
 );
 
 interface SelectItemLabelProps {
-  symbol?: string;
-  symbolClass?: string;
-  description?: string;
-  infoIcon?: InfoIconProps;
+  readonly symbol?: string;
+  readonly symbolClass?: string;
+  readonly description?: string;
+  readonly infoIcon?: InfoIconProps;
 }
 
 export const SelectItemLabelOnList: VoidComponent<SelectItemLabelProps> = (props) => (
diff --git a/resources/js/components/ui/Table/tquery_filters/types.ts b/resources/js/components/ui/Table/tquery_filters/types.ts
index 977cdcd58..a0b9f8c48 100644
--- a/resources/js/components/ui/Table/tquery_filters/types.ts
+++ b/resources/js/components/ui/Table/tquery_filters/types.ts
@@ -2,10 +2,10 @@ import {FilterH} from "data-access/memo-api/tquery/filter_utils";
 import {VoidComponent} from "solid-js";
 
 export interface FilterControlProps<F extends FilterH = FilterH> {
-  name: string;
-  nullable?: boolean;
-  filter: F | undefined;
-  setFilter: (filter: F | undefined) => void;
+  readonly name: string;
+  readonly nullable?: boolean;
+  readonly filter: F | undefined;
+  readonly setFilter: (filter: F | undefined) => void;
 }
 
 export type FilterControl<F extends FilterH = FilterH> = VoidComponent<FilterControlProps<F>>;
diff --git a/resources/js/components/ui/TranslatedText.tsx b/resources/js/components/ui/TranslatedText.tsx
index c0c3869b4..a5607f9e6 100644
--- a/resources/js/components/ui/TranslatedText.tsx
+++ b/resources/js/components/ui/TranslatedText.tsx
@@ -4,15 +4,15 @@ import {Capitalize} from "./Capitalize";
 
 interface Props {
   /** The highest priority source. */
-  override?: () => JSX.Element;
+  readonly override?: () => JSX.Element;
   /** The second-highest priority source. */
-  langFunc?: LangEntryFunc | [func?: LangPrefixFunc, subKey?: string];
+  readonly langFunc?: LangEntryFunc | [func?: LangPrefixFunc, subKey?: string];
   /** Whether to capitalize. Applies to the result of the lang func only. */
-  capitalize?: boolean;
+  readonly capitalize?: boolean;
   /** The last source. */
-  fallbackCode?: string;
+  readonly fallbackCode?: string;
   /* The function that wraps the computed text. Called with no argument if there is no text. */
-  wrapIn?: (text?: JSX.Element) => JSX.Element;
+  readonly wrapIn?: (text?: JSX.Element) => JSX.Element;
 }
 
 /**
diff --git a/resources/js/components/ui/calendar/FullCalendar.tsx b/resources/js/components/ui/calendar/FullCalendar.tsx
index d2dfbc671..b35c2be18 100644
--- a/resources/js/components/ui/calendar/FullCalendar.tsx
+++ b/resources/js/components/ui/calendar/FullCalendar.tsx
@@ -14,13 +14,13 @@ export const MODES = ["month", "week", "day"] as const;
 export type Mode = (typeof MODES)[number];
 
 interface Props extends htmlAttributes.div {
-  locale: Intl.Locale;
-  resourceGroups: readonly ResourceGroup[];
-  holidays?: readonly DateTime[];
-  modes?: Mode[];
-  initialMode?: Mode;
-  initialResourcesSelection?: readonly string[];
-  initialDay?: DateTime;
+  readonly locale: Intl.Locale;
+  readonly resourceGroups: readonly ResourceGroup[];
+  readonly holidays?: readonly DateTime[];
+  readonly modes?: readonly Mode[];
+  readonly initialMode?: Mode;
+  readonly initialResourcesSelection?: readonly string[];
+  readonly initialDay?: DateTime;
 }
 
 const defaultProps = () =>
diff --git a/resources/js/components/ui/form/Checkbox.tsx b/resources/js/components/ui/form/Checkbox.tsx
index 759a0498a..c703fd803 100644
--- a/resources/js/components/ui/form/Checkbox.tsx
+++ b/resources/js/components/ui/form/Checkbox.tsx
@@ -4,8 +4,8 @@ import {VoidComponent} from "solid-js";
 import {FieldLabel, labelIdForField} from "./FieldLabel";
 
 interface Props extends htmlAttributes.input {
-  name: string;
-  label?: string;
+  readonly name: string;
+  readonly label?: string;
 }
 
 /**
diff --git a/resources/js/components/ui/form/DictionarySelect.tsx b/resources/js/components/ui/form/DictionarySelect.tsx
index 555140425..d225f513e 100644
--- a/resources/js/components/ui/form/DictionarySelect.tsx
+++ b/resources/js/components/ui/form/DictionarySelect.tsx
@@ -8,13 +8,13 @@ interface BaseProps
   extends htmlAttributes.div,
     Pick<SelectBaseProps, "name" | "label" | "disabled" | "placeholder" | "small"> {
   /** The id or name of the dictionary. */
-  dictionary: string;
-  filterable?: boolean;
+  readonly dictionary: string;
+  readonly filterable?: boolean;
   /** What to do with disabled dictionary positions. Default: hide. */
-  disabledItemsMode?: "show" | "showAsActive" | "hide";
-  positionsSorter?: (a: Position, b: Position) => number;
+  readonly disabledItemsMode?: "show" | "showAsActive" | "hide";
+  readonly positionsSorter?: (a: Position, b: Position) => number;
   /** A function creating the items. It can make use of the default item properties provided. */
-  itemFunc?: (pos: Position, defItem: () => DefaultDictionarySelectItem) => SelectItem | undefined;
+  readonly itemFunc?: (pos: Position, defItem: () => DefaultDictionarySelectItem) => SelectItem | undefined;
 }
 
 type DefaultDictionarySelectItem = Required<Pick<SelectItem, "value" | "text" | "disabled">>;
diff --git a/resources/js/components/ui/form/FieldLabel.tsx b/resources/js/components/ui/form/FieldLabel.tsx
index 589f325fd..ab49e7d97 100644
--- a/resources/js/components/ui/form/FieldLabel.tsx
+++ b/resources/js/components/ui/form/FieldLabel.tsx
@@ -4,10 +4,10 @@ import {JSX, VoidComponent, splitProps} from "solid-js";
 import {TranslatedText} from "../TranslatedText";
 
 interface Props extends htmlAttributes.label {
-  fieldName: string;
-  text?: string;
+  readonly fieldName: string;
+  readonly text?: string;
   /** Optional function that takes the label text and returns JSX. The result is then wrapped in label. */
-  wrapIn?: (text: JSX.Element) => JSX.Element;
+  readonly wrapIn?: (text: JSX.Element) => JSX.Element;
 }
 
 /**
diff --git a/resources/js/components/ui/form/SegmentedControl.tsx b/resources/js/components/ui/form/SegmentedControl.tsx
index ae874f17b..f6a2ebb63 100644
--- a/resources/js/components/ui/form/SegmentedControl.tsx
+++ b/resources/js/components/ui/form/SegmentedControl.tsx
@@ -6,15 +6,15 @@ import {FieldLabel} from "./FieldLabel";
 import s from "./SegmentedControl.module.scss";
 
 interface Props extends htmlAttributes.div {
-  name: string;
-  items: Item[];
-  label?: string;
+  readonly name: string;
+  readonly items: readonly Item[];
+  readonly label?: string;
   /** Optionally value, if should be used in standalone mode (not in form). */
-  value?: string;
-  setValue?: (value: string) => void;
-  disabled?: boolean;
+  readonly value?: string;
+  readonly setValue?: (value: string) => void;
+  readonly disabled?: boolean;
   /** Whether to make the control smaller. */
-  small?: boolean;
+  readonly small?: boolean;
 }
 
 interface Item {
diff --git a/resources/js/components/utils/AccessBarrier.tsx b/resources/js/components/utils/AccessBarrier.tsx
index ded93b320..a423431a9 100644
--- a/resources/js/components/utils/AccessBarrier.tsx
+++ b/resources/js/components/utils/AccessBarrier.tsx
@@ -12,7 +12,7 @@ export interface AccessBarrierProps extends Pick<QueryBarrierProps, "Error" | "P
   /**
    * Component rendered when access is not granted
    */
-  Fallback?: VoidComponent;
+  readonly Fallback?: VoidComponent;
   /**
    * Map of roles that user must be granted in order to access this section
    * (logical AND)
@@ -21,11 +21,11 @@ export interface AccessBarrierProps extends Pick<QueryBarrierProps, "Error" | "P
    *
    * @default []
    */
-  roles?: PermissionKey[];
+  readonly roles?: readonly PermissionKey[];
   /**
    * FacilityUrl available in params object (useParams)
    */
-  facilityUrl?: string;
+  readonly facilityUrl?: string;
 }
 
 /** The roles for which querying facility permissions is necessary. */
diff --git a/resources/js/components/utils/QueryBarrier.tsx b/resources/js/components/utils/QueryBarrier.tsx
index 39106230e..8a402f64b 100644
--- a/resources/js/components/utils/QueryBarrier.tsx
+++ b/resources/js/components/utils/QueryBarrier.tsx
@@ -4,16 +4,16 @@ import {BigSpinner} from "../ui/Spinner";
 
 export interface QueryBarrierProps {
   /** List of queries to handle. */
-  queries: CreateQueryResult<unknown, unknown>[];
+  readonly queries: readonly CreateQueryResult<unknown, unknown>[];
   /**
    * If set, the barrier waits until the first fetch is done, even if data was available in the cache.
    * See `Query.isFetchedAfterMount`.
    */
-  ignoreCachedData?: boolean;
+  readonly ignoreCachedData?: boolean;
   /** Component to show when query is in error state. */
-  Error?: VoidComponent;
+  readonly Error?: VoidComponent;
   /** Component to show when query is in pending state. */
-  Pending?: VoidComponent;
+  readonly Pending?: VoidComponent;
 }
 
 /**
diff --git a/resources/js/features/authentication/forms/login/Login.form.tsx b/resources/js/features/authentication/forms/login/Login.form.tsx
index 9a929bc5c..f11762e5a 100644
--- a/resources/js/features/authentication/forms/login/Login.form.tsx
+++ b/resources/js/features/authentication/forms/login/Login.form.tsx
@@ -26,7 +26,7 @@ export namespace LoginForm {
   export type Output = z.output<ReturnType<typeof getSchema>>;
 
   interface Props {
-    onSuccess?: () => void;
+    readonly onSuccess?: () => void;
   }
 
   export const Component: VoidComponent<Props> = (props) => {
diff --git a/resources/js/features/facility-edit/FacilityCreateForm.tsx b/resources/js/features/facility-edit/FacilityCreateForm.tsx
index 0f2207666..3f8e2a527 100644
--- a/resources/js/features/facility-edit/FacilityCreateForm.tsx
+++ b/resources/js/features/facility-edit/FacilityCreateForm.tsx
@@ -8,8 +8,8 @@ import toast from "solid-toast";
 import {FacilityForm, FacilityFormInput, FacilityFormOutput} from "./FacilityForm";
 
 interface Props {
-  onSuccess?: () => void;
-  onCancel?: () => void;
+  readonly onSuccess?: () => void;
+  readonly onCancel?: () => void;
 }
 
 /** Produces best effort suggestion for the url, e.g. "My Facility Name" --> "my-facility-name" */
diff --git a/resources/js/features/facility-edit/FacilityEditForm.tsx b/resources/js/features/facility-edit/FacilityEditForm.tsx
index efb0a84f0..b013b3c75 100644
--- a/resources/js/features/facility-edit/FacilityEditForm.tsx
+++ b/resources/js/features/facility-edit/FacilityEditForm.tsx
@@ -11,8 +11,8 @@ interface FormParams {
 }
 
 interface Props extends FormParams {
-  onSuccess?: () => void;
-  onCancel?: () => void;
+  readonly onSuccess?: () => void;
+  readonly onCancel?: () => void;
 }
 
 export const FacilityEditForm: VoidComponent<Props> = (props) => {
diff --git a/resources/js/features/root/MemoTitle.tsx b/resources/js/features/root/MemoTitle.tsx
index a9c4e3ddc..d0d49c6cc 100644
--- a/resources/js/features/root/MemoTitle.tsx
+++ b/resources/js/features/root/MemoTitle.tsx
@@ -6,7 +6,7 @@ import {DEV, VoidComponent} from "solid-js";
 
 interface Props {
   /** A translations sub-key in routes defining the page title. */
-  routeKey: string;
+  readonly routeKey: string;
 }
 
 export const MemoTitle: VoidComponent<Props> = (props) => {
diff --git a/resources/js/features/root/components/navbar/NavigationItem.tsx b/resources/js/features/root/components/navbar/NavigationItem.tsx
index cd0e64dcd..09f1ecc94 100644
--- a/resources/js/features/root/components/navbar/NavigationItem.tsx
+++ b/resources/js/features/root/components/navbar/NavigationItem.tsx
@@ -7,12 +7,12 @@ import {Show, VoidComponent, splitProps} from "solid-js";
 import {Dynamic} from "solid-js/web";
 
 export interface NavigationItemProps extends Omit<AnchorProps, "children"> {
-  icon: IconTypes;
+  readonly icon: IconTypes;
   /**
    * A translations sub-key in routes defining the page title.
    * Used directly as the page title if key is missing - only to be used for dev pages.
    */
-  routeKey: string;
+  readonly routeKey: string;
 }
 
 /** Marker class to detect navigation item activity. */
diff --git a/resources/js/features/root/components/navbar/NavigationSection.tsx b/resources/js/features/root/components/navbar/NavigationSection.tsx
index 49ade7036..55adf5230 100644
--- a/resources/js/features/root/components/navbar/NavigationSection.tsx
+++ b/resources/js/features/root/components/navbar/NavigationSection.tsx
@@ -3,8 +3,8 @@ import {For, Show, VoidComponent, splitProps} from "solid-js";
 import {NavigationItem, NavigationItemProps} from "./NavigationItem";
 
 export interface NavigationSectionProps extends Pick<AccessBarrierProps, "facilityUrl" | "roles"> {
-  title?: string;
-  items: NavigationItemProps[];
+  readonly title?: string;
+  readonly items: readonly NavigationItemProps[];
 }
 
 const noop = () => null;
diff --git a/resources/js/features/root/pages/Root.page.tsx b/resources/js/features/root/pages/Root.page.tsx
index 5d8123e6c..082e591ae 100644
--- a/resources/js/features/root/pages/Root.page.tsx
+++ b/resources/js/features/root/pages/Root.page.tsx
@@ -9,7 +9,7 @@ import {Main} from "../layout/Main";
 import {Navbar} from "../layout/Navbar";
 
 interface Props {
-  facilityUrl?: string;
+  readonly facilityUrl?: string;
 }
 
 export default ((allProps) => {
diff --git a/resources/js/features/user-panel/PasswordChange.form.tsx b/resources/js/features/user-panel/PasswordChange.form.tsx
index e7d3353da..38d9f3b04 100644
--- a/resources/js/features/user-panel/PasswordChange.form.tsx
+++ b/resources/js/features/user-panel/PasswordChange.form.tsx
@@ -28,8 +28,8 @@ export namespace PasswordChangeForm {
   export type Output = z.output<ReturnType<typeof getSchema>>;
 
   interface Props {
-    onSuccess?: () => void;
-    onCancel?: () => void;
+    readonly onSuccess?: () => void;
+    readonly onCancel?: () => void;
   }
 
   export const Component: VoidComponent<Props> = (props) => {
diff --git a/resources/js/features/users-edit/UserCreate.form.tsx b/resources/js/features/users-edit/UserCreate.form.tsx
index 8ae58a4f6..2c66e1db4 100644
--- a/resources/js/features/users-edit/UserCreate.form.tsx
+++ b/resources/js/features/users-edit/UserCreate.form.tsx
@@ -9,8 +9,8 @@ import {UserMembersEdit} from "./UserMembersEdit";
 
 export namespace UserCreateForm {
   interface Props {
-    onSuccess?: () => void;
-    onCancel?: () => void;
+    readonly onSuccess?: () => void;
+    readonly onCancel?: () => void;
   }
 
   export const Component: VoidComponent<Props> = (props) => {
diff --git a/resources/js/features/users-edit/UserEdit.form.tsx b/resources/js/features/users-edit/UserEdit.form.tsx
index 3a3604b70..d6a8771cf 100644
--- a/resources/js/features/users-edit/UserEdit.form.tsx
+++ b/resources/js/features/users-edit/UserEdit.form.tsx
@@ -15,8 +15,8 @@ export namespace UserEditForm {
   }
 
   interface Props extends FormParams {
-    onSuccess?: () => void;
-    onCancel?: () => void;
+    readonly onSuccess?: () => void;
+    readonly onCancel?: () => void;
   }
 
   export const Component: VoidComponent<Props> = (props) => {
diff --git a/resources/js/features/users-edit/UserEdit.tsx b/resources/js/features/users-edit/UserEdit.tsx
index cbde56bfb..859c1b671 100644
--- a/resources/js/features/users-edit/UserEdit.tsx
+++ b/resources/js/features/users-edit/UserEdit.tsx
@@ -47,8 +47,8 @@ export namespace UserEdit {
   export type Output = z.output<ReturnType<typeof getSchema>>;
 
   interface Props extends FormConfigWithoutTransformFn<Input> {
-    onCancel?: () => void;
-    id: string;
+    readonly onCancel?: () => void;
+    readonly id: string;
   }
 
   export const EditForm: VoidComponent<Props> = (allProps) => {
diff --git a/resources/js/features/users-edit/UserMembersEdit.tsx b/resources/js/features/users-edit/UserMembersEdit.tsx
index 8e71a0216..67cc27200 100644
--- a/resources/js/features/users-edit/UserMembersEdit.tsx
+++ b/resources/js/features/users-edit/UserMembersEdit.tsx
@@ -50,7 +50,7 @@ export namespace UserMembersEdit {
 
   interface Props {
     /** The path in the form under which the members are stored. */
-    membersPath: string;
+    readonly membersPath: string;
   }
 
   export const MembersTable = (props: Props) => {