Use eslint for sorting our imports (#1637)

* Make eslint sort our imports

* fix missing deps in eslint rule (dae)

Caught on Linux due to the stricter sandboxing

* Remove exports-last eslint rule (for now?)

* Adjust browserslist settings

- We use ResizeObserver which is not supported in browsers like KaiOS,
  Baidu or Android UC

* Raise minimum iOS version 13.4

- It's the first version that supports ResizeObserver

* Apply new eslint rules to sort imports

package.json

@@ -65,6 +65,9 @@
         "codemirror": "^5.63.1",
         "css-browser-selector": "^0.6.5",
         "d3": "^7.0.0",
+        "eslint-plugin-import": "^2.25.4",
+        "eslint-plugin-simple-import-sort": "^7.0.0",
+        "eslint-plugin-svelte3": "^3.4.0",
         "intl-pluralrules": "^1.2.2",
         "jquery": "^3.5.1",
         "jquery-ui-dist": "^1.12.1",
@@ -83,9 +86,9 @@
     ],
     "browserslist": [
         "defaults",
-        "not IE 11",
         "not op_mini all",
+        "not < 1%",
         "Chrome 77",
-        "iOS 12"
+        "iOS 13.4"
     ]
 }

ts/.eslintrc.js

@@ -1,22 +1,53 @@
 module.exports = {
-    extends: [
+    extends: ["eslint:recommended", "plugin:compat/recommended"],
-        "eslint:recommended",
-        "plugin:@typescript-eslint/eslint-recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:compat/recommended",
-    ],
     parser: "@typescript-eslint/parser",
-    plugins: ["@typescript-eslint"],
+    plugins: [
+        "svelte3",
+        "import",
+        "simple-import-sort",
+        "@typescript-eslint",
+        "@typescript-eslint/eslint-plugin",
+    ],
     rules: {
-        "prefer-const": "warn",
-        "no-nested-ternary": "warn",
         "@typescript-eslint/ban-ts-comment": "warn",
-        "@typescript-eslint/no-non-null-assertion": "off",
         "@typescript-eslint/no-unused-vars": [
             "warn",
             { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
         ],
+        "import/newline-after-import": "warn",
+        "import/no-useless-path-segments": "warn",
+        "simple-import-sort/imports": "warn",
+        "simple-import-sort/exports": "warn",
+        "prefer-const": "warn",
+        "no-nested-ternary": "warn",
     },
+    overrides: [
+        {
+            files: "**/*.ts",
+            extends: [
+                "plugin:@typescript-eslint/eslint-recommended",
+                "plugin:@typescript-eslint/recommended",
+            ],
+            rules: {
+                "@typescript-eslint/no-non-null-assertion": "off",
+            },
+        },
+        {
+            files: "**/*.svelte",
+            processor: "svelte3/svelte3",
+            rules: {
+                "no-redeclare": "off",
+                "no-global-assign": "off",
+            },
+        },
+    ],
     env: { browser: true },
     ignorePatterns: ["backend_proto.d.ts", "*.svelte.d.ts"],
+    globals: {
+        globalThis: false,
+        NodeListOf: false,
+    },
+    settings: {
+        "svelte3/typescript": () => require("typescript"),
+    },
 };

ts/card-info/CardInfo.svelte

@@ -3,12 +3,12 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import type { Stats } from "../lib/proto";
-    import { stats as statsService } from "../lib/proto";
     import Container from "../components/Container.svelte";
     import Row from "../components/Row.svelte";
-    import CardStats from "./CardStats.svelte";
+    import type { Stats } from "../lib/proto";
+    import { stats as statsService } from "../lib/proto";
     import CardInfoPlaceholder from "./CardInfoPlaceholder.svelte";
+    import CardStats from "./CardStats.svelte";
     import Revlog from "./Revlog.svelte";
 
     export let cardId: number | null = null;

ts/card-info/CardStats.svelte

@@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr2 from "../lib/ftl";
     import { Stats, unwrapOptionalNumber } from "../lib/proto";
-    import { Timestamp, timeSpan, DAY } from "../lib/time";
+    import { DAY, timeSpan, Timestamp } from "../lib/time";
 
     export let stats: Stats.CardStatsResponse;
 

ts/card-info/Revlog.svelte

@@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import * as tr2 from "../lib/ftl";
     import { Stats } from "../lib/proto";
-    import { Timestamp, timeSpan } from "../lib/time";
+    import { timeSpan, Timestamp } from "../lib/time";
 
     type StatsRevlogEntry = Stats.CardStatsResponse.StatsRevlogEntry;
 

ts/card-info/index.ts

@@ -1,12 +1,12 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import { setupI18n, ModuleName } from "../lib/i18n";
-import { checkNightMode } from "../lib/nightmode";
-
-import CardInfo from "./CardInfo.svelte";
 import "./card-info-base.css";
 
+import { ModuleName, setupI18n } from "../lib/i18n";
+import { checkNightMode } from "../lib/nightmode";
+import CardInfo from "./CardInfo.svelte";
+
 const i18n = setupI18n({
     modules: [ModuleName.CARD_STATS, ModuleName.SCHEDULING, ModuleName.STATISTICS],
 });

ts/change-notetype/Alert.svelte

@@ -3,12 +3,13 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import * as tr from "../lib/ftl";
-    import Badge from "../components/Badge.svelte";
-    import { MapContext } from "./lib";
-    import { plusIcon, minusIcon } from "./icons";
     import { slide } from "svelte/transition";
 
+    import Badge from "../components/Badge.svelte";
+    import * as tr from "../lib/ftl";
+    import { minusIcon, plusIcon } from "./icons";
+    import { MapContext } from "./lib";
+
     export let unused: string[];
     export let ctx: MapContext;
 
@@ -18,7 +19,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             ? tr.changeNotetypeWillDiscardContent()
             : tr.changeNotetypeWillDiscardCards();
 
-    let maxItems: number = 3;
+    const maxItems: number = 3;
     let collapsed: boolean = true;
     $: collapseMsg = collapsed
         ? tr.changeNotetypeExpand()

ts/change-notetype/ChangeNotetypePage.svelte

@@ -3,15 +3,16 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import * as tr from "../lib/ftl";
     import { marked } from "marked";
-    import { ChangeNotetypeState, MapContext } from "./lib";
+
+    import Col from "../components/Col.svelte";
     import Container from "../components/Container.svelte";
     import Row from "../components/Row.svelte";
-    import Col from "../components/Col.svelte";
+    import * as tr from "../lib/ftl";
+    import { ChangeNotetypeState, MapContext } from "./lib";
+    import Mapper from "./Mapper.svelte";
     import NotetypeSelector from "./NotetypeSelector.svelte";
     import StickyHeader from "./StickyHeader.svelte";
-    import Mapper from "./Mapper.svelte";
 
     export let state: ChangeNotetypeState;
     $: info = state.info;

ts/change-notetype/Mapper.svelte

@@ -4,14 +4,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import Container from "../components/Container.svelte";
-    import MapperRow from "./MapperRow.svelte";
     import Spacer from "../components/Spacer.svelte";
     import type { ChangeNotetypeState, MapContext } from "./lib";
+    import MapperRow from "./MapperRow.svelte";
 
     export let state: ChangeNotetypeState;
     export let ctx: MapContext;
 
-    let info = state.info;
+    const info = state.info;
 </script>
 
 <Spacer --height="0.5rem" />

ts/change-notetype/MapperRow.svelte

@@ -3,15 +3,15 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import Row from "../components/Row.svelte";
     import Col from "../components/Col.svelte";
+    import Row from "../components/Row.svelte";
     import type { ChangeNotetypeState, MapContext } from "./lib";
 
     export let state: ChangeNotetypeState;
     export let ctx: MapContext;
     export let newIndex: number;
 
-    let info = state.info;
+    const info = state.info;
 
     function onChange(evt: Event) {
         const oldIdx = parseInt((evt.target as HTMLSelectElement).value, 10);

ts/change-notetype/NotetypeSelector.svelte

@@ -3,20 +3,20 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import type { ChangeNotetypeState } from "./lib";
-    import StickyContainer from "../components/StickyContainer.svelte";
-    import ButtonToolbar from "../components/ButtonToolbar.svelte";
-    import ButtonGroup from "../components/ButtonGroup.svelte";
-    import LabelButton from "../components/LabelButton.svelte";
     import Badge from "../components/Badge.svelte";
-    import { arrowRightIcon, arrowLeftIcon } from "./icons";
+    import ButtonGroup from "../components/ButtonGroup.svelte";
+    import ButtonToolbar from "../components/ButtonToolbar.svelte";
+    import LabelButton from "../components/LabelButton.svelte";
     import SelectButton from "../components/SelectButton.svelte";
     import SelectOption from "../components/SelectOption.svelte";
+    import StickyContainer from "../components/StickyContainer.svelte";
+    import { arrowLeftIcon, arrowRightIcon } from "./icons";
+    import type { ChangeNotetypeState } from "./lib";
     import SaveButton from "./SaveButton.svelte";
 
     export let state: ChangeNotetypeState;
-    let notetypes = state.notetypes;
+    const notetypes = state.notetypes;
-    let info = state.info;
+    const info = state.info;
 
     async function blur(event: Event): Promise<void> {
         await state.setTargetNotetypeIndex(

ts/change-notetype/SaveButton.svelte

@@ -3,13 +3,12 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import * as tr from "../lib/ftl";
-    import type { ChangeNotetypeState } from "./lib";
-    import { getPlatformString } from "../lib/shortcuts";
-
     import ButtonGroup from "../components/ButtonGroup.svelte";
     import LabelButton from "../components/LabelButton.svelte";
     import Shortcut from "../components/Shortcut.svelte";
+    import * as tr from "../lib/ftl";
+    import { getPlatformString } from "../lib/shortcuts";
+    import type { ChangeNotetypeState } from "./lib";
 
     export let state: ChangeNotetypeState;
 

ts/change-notetype/StickyHeader.svelte

@@ -3,22 +3,22 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import * as tr from "../lib/ftl";
     import Badge from "../components/Badge.svelte";
-    import Alert from "./Alert.svelte";
+    import Col from "../components/Col.svelte";
     import Container from "../components/Container.svelte";
     import Row from "../components/Row.svelte";
-    import Col from "../components/Col.svelte";
+    import StickyContainer from "../components/StickyContainer.svelte";
+    import * as tr from "../lib/ftl";
+    import Alert from "./Alert.svelte";
     import { exclamationIcon } from "./icons";
     import { ChangeNotetypeState, MapContext } from "./lib";
-    import StickyContainer from "../components/StickyContainer.svelte";
 
     export let state: ChangeNotetypeState;
     export let ctx: MapContext;
 
     $: info = state.info;
 
-    let heading: string =
+    const heading: string =
         ctx === MapContext.Field
             ? tr.changeNotetypeFields()
             : tr.changeNotetypeTemplates();

ts/change-notetype/icons.ts

@@ -3,8 +3,8 @@
 
 /// <reference types="../lib/image-import" />
 
-export { default as arrowRightIcon } from "bootstrap-icons/icons/arrow-right.svg";
 export { default as arrowLeftIcon } from "bootstrap-icons/icons/arrow-left.svg";
+export { default as arrowRightIcon } from "bootstrap-icons/icons/arrow-right.svg";
+export { default as minusIcon } from "bootstrap-icons/icons/dash-lg.svg";
 export { default as exclamationIcon } from "bootstrap-icons/icons/exclamation-circle.svg";
 export { default as plusIcon } from "bootstrap-icons/icons/plus-lg.svg";
-export { default as minusIcon } from "bootstrap-icons/icons/dash-lg.svg";

ts/change-notetype/index.ts

@@ -1,14 +1,14 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import { setupI18n, ModuleName } from "../lib/i18n";
-import { notetypes, empty } from "../lib/proto";
-import { checkNightMode } from "../lib/nightmode";
-import { ChangeNotetypeState } from "./lib";
-
-import ChangeNotetypePage from "./ChangeNotetypePage.svelte";
 import "./change-notetype-base.css";
 
+import { ModuleName, setupI18n } from "../lib/i18n";
+import { checkNightMode } from "../lib/nightmode";
+import { empty, notetypes } from "../lib/proto";
+import ChangeNotetypePage from "./ChangeNotetypePage.svelte";
+import { ChangeNotetypeState } from "./lib";
+
 const notetypeNames = notetypes.getNotetypeNames(empty);
 const i18n = setupI18n({
     modules: [ModuleName.ACTIONS, ModuleName.CHANGE_NOTETYPE, ModuleName.KEYBOARD],

ts/change-notetype/lib.test.ts

@@ -5,10 +5,11 @@
 @typescript-eslint/no-explicit-any: "off",
  */
 
-import { ChangeNotetypeState, negativeOneToNull, MapContext } from "./lib";
-import { Notetypes } from "../lib/proto";
 import { get } from "svelte/store";
+
 import * as tr from "../lib/ftl";
+import { Notetypes } from "../lib/proto";
+import { ChangeNotetypeState, MapContext, negativeOneToNull } from "./lib";
 
 const exampleNames = {
     entries: [

ts/change-notetype/lib.ts

@@ -1,10 +1,11 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import * as tr from "../lib/ftl";
-import { notetypes, Notetypes } from "../lib/proto";
-import { readable, Readable } from "svelte/store";
 import { isEqual } from "lodash-es";
+import { Readable, readable } from "svelte/store";
+
+import * as tr from "../lib/ftl";
+import { Notetypes, notetypes } from "../lib/proto";
 
 function nullToNegativeOne(list: (number | null)[]): number[] {
     return list.map((val) => val ?? -1);

ts/components/Badge.svelte

@@ -3,10 +3,11 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import IconConstrain from "./IconConstrain.svelte";
+    import { createEventDispatcher, getContext, onMount } from "svelte";
-    import type { DropdownProps } from "./dropdown";
+
     import { dropdownKey } from "./context-keys";
-    import { onMount, createEventDispatcher, getContext } from "svelte";
+    import type { DropdownProps } from "./dropdown";
+    import IconConstrain from "./IconConstrain.svelte";
 
     let className = "";
     export { className as class };

ts/components/ButtonDropdown.svelte

@@ -4,9 +4,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import { setContext } from "svelte";
-    import { dropdownKey } from "./context-keys";
 
     import ButtonToolbar from "./ButtonToolbar.svelte";
+    import { dropdownKey } from "./context-keys";
 
     export let id: string | undefined = undefined;
     let className = "";

ts/components/ButtonGroupItem.svelte

@@ -3,12 +3,13 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script context="module" lang="ts">
-    import { writable, get } from "svelte/store";
-    import contextProperty from "../sveltelib/context-property";
     import type { Writable } from "svelte/store";
+    import { get, writable } from "svelte/store";
+
+    import contextProperty from "../sveltelib/context-property";
     import type {
-        SlotHostProps,
         GetSlotHostProps,
+        SlotHostProps,
     } from "../sveltelib/dynamic-slotting";
 
     enum ButtonPosition {

ts/components/ColorPicker.svelte

@@ -3,7 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { onMount, createEventDispatcher } from "svelte";
+    import { createEventDispatcher, onMount } from "svelte";
 
     let inputRef: HTMLInputElement;
 

ts/components/DropdownItem.svelte

@@ -3,7 +3,8 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { onMount, createEventDispatcher } from "svelte";
+    import { createEventDispatcher, onMount } from "svelte";
+
     import { pageTheme } from "../sveltelib/theme";
 
     export let id: string | undefined = undefined;

ts/components/DropdownMenu.svelte

@@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import { setContext } from "svelte";
+
     import { dropdownKey } from "./context-keys";
 
     export let id: string | undefined = undefined;

ts/components/DynamicallySlottable.svelte

@@ -3,15 +3,14 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import type Item from "./Item.svelte";
-    import type ButtonGroupItem from "./ButtonGroupItem.svelte";
     /* import type { SlotHostProps } from "../sveltelib/dynamic-slotting"; */
-
     import dynamicSlotting, {
-        defaultProps,
         defaultInterface,
+        defaultProps,
         setSlotHostContext as defaultContext,
     } from "../sveltelib/dynamic-slotting";
+    import type ButtonGroupItem from "./ButtonGroupItem.svelte";
+    import type Item from "./Item.svelte";
 
     function id<T>(value: T): T {
         return value;

ts/components/IconButton.svelte

@@ -3,11 +3,12 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import IconConstrain from "./IconConstrain.svelte";
+    import { createEventDispatcher, getContext, onMount } from "svelte";
-    import { getContext, onMount, createEventDispatcher } from "svelte";
+
-    import { dropdownKey } from "./context-keys";
     import { pageTheme } from "../sveltelib/theme";
+    import { dropdownKey } from "./context-keys";
     import type { DropdownProps } from "./dropdown";
+    import IconConstrain from "./IconConstrain.svelte";
 
     export let id: string | undefined = undefined;
     let className = "";

ts/components/LabelButton.svelte

@@ -3,10 +3,11 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { onMount, createEventDispatcher, getContext } from "svelte";
+    import { createEventDispatcher, getContext, onMount } from "svelte";
+
+    import { pageTheme } from "../sveltelib/theme";
     import { dropdownKey } from "./context-keys";
     import type { DropdownProps } from "./dropdown";
-    import { pageTheme } from "../sveltelib/theme";
 
     export let id: string | undefined = undefined;
     let className: string = "";

ts/components/SelectButton.svelte

@@ -3,9 +3,11 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { onMount, createEventDispatcher } from "svelte";
+    import { createEventDispatcher, onMount } from "svelte";
+
     import { pageTheme } from "../sveltelib/theme";
-    let rtl: boolean = window.getComputedStyle(document.body).direction == "rtl";
+
+    const rtl: boolean = window.getComputedStyle(document.body).direction == "rtl";
 
     export let id: string | undefined = undefined;
     let className = "";

ts/components/Shortcut.svelte

@@ -4,8 +4,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import { createEventDispatcher, onMount } from "svelte";
-    import { registerShortcut } from "../lib/shortcuts";
+
     import { preventDefault } from "../lib/events";
+    import { registerShortcut } from "../lib/shortcuts";
 
     export let keyCombination: string;
 

ts/components/WithContext.svelte

@@ -3,8 +3,8 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import type { Readable } from "svelte/store";
     import { getContext } from "svelte";
+    import type { Readable } from "svelte/store";
 
     type T = boolean;
 

ts/components/WithDropdown.svelte

@@ -4,8 +4,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import Dropdown from "bootstrap/js/dist/dropdown";
+    import { onDestroy, setContext } from "svelte";
 
-    import { setContext, onDestroy } from "svelte";
     import { dropdownKey } from "./context-keys";
 
     export let autoOpen = false;

ts/components/WithTooltip.svelte

@@ -3,8 +3,8 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { onDestroy } from "svelte";
     import Tooltip from "bootstrap/js/dist/tooltip";
+    import { onDestroy } from "svelte";
 
     type TriggerType =
         | "hover focus"
@@ -43,7 +43,7 @@
     let previousTooltip: string = tooltip;
     $: if (tooltip !== previousTooltip) {
         previousTooltip = tooltip;
-        let element: HTMLElement = tooltipObject["_element"];
+        const element: HTMLElement = tooltipObject["_element"];
         tooltipObject.dispose();
         createTooltip(element);
     }

ts/congrats/CongratsPage.svelte

@@ -3,12 +3,12 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import Container from "../components/Container.svelte";
     import Col from "../components/Col.svelte";
-    import type { Scheduler } from "../lib/proto";
+    import Container from "../components/Container.svelte";
-    import { buildNextLearnMsg } from "./lib";
     import { bridgeLink } from "../lib/bridgecommand";
     import * as tr from "../lib/ftl";
+    import type { Scheduler } from "../lib/proto";
+    import { buildNextLearnMsg } from "./lib";
 
     export let info: Scheduler.CongratsInfoResponse;
 

ts/congrats/index.ts

@@ -1,13 +1,13 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import { scheduler, empty } from "../lib/proto";
-import { setupI18n, ModuleName } from "../lib/i18n";
-import { checkNightMode } from "../lib/nightmode";
-
-import CongratsPage from "./CongratsPage.svelte";
 import "./congrats-base.css";
 
+import { ModuleName, setupI18n } from "../lib/i18n";
+import { checkNightMode } from "../lib/nightmode";
+import { empty, scheduler } from "../lib/proto";
+import CongratsPage from "./CongratsPage.svelte";
+
 const i18n = setupI18n({ modules: [ModuleName.SCHEDULING] });
 
 export async function setupCongrats(): Promise<CongratsPage> {

ts/congrats/lib.ts

@@ -1,9 +1,9 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+import * as tr from "../lib/ftl";
 import type { Scheduler } from "../lib/proto";
 import { naturalUnit, unitAmount, unitName } from "../lib/time";
-import * as tr from "../lib/ftl";
 
 export function buildNextLearnMsg(info: Scheduler.CongratsInfoResponse): string {
     const secsUntil = info.secsUntilNextLearn;

ts/deck-options/Addons.svelte

@@ -3,12 +3,12 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import TitledContainer from "./TitledContainer.svelte";
     import type { DeckOptionsState } from "./lib";
+    import TitledContainer from "./TitledContainer.svelte";
 
     export let state: DeckOptionsState;
 
-    let components = state.addonComponents;
+    const components = state.addonComponents;
     const auxData = state.currentAuxData;
 </script>
 

ts/deck-options/AdvancedOptions.svelte

@@ -3,21 +3,21 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import * as tr from "../lib/ftl";
-    import TitledContainer from "./TitledContainer.svelte";
-    import SpinBoxRow from "./SpinBoxRow.svelte";
-    import SpinBoxFloatRow from "./SpinBoxFloatRow.svelte";
-    import type { DeckOptionsState } from "./lib";
-    import CardStateCustomizer from "./CardStateCustomizer.svelte";
     import DynamicallySlottable from "../components/DynamicallySlottable.svelte";
     import Item from "../components/Item.svelte";
+    import * as tr from "../lib/ftl";
+    import CardStateCustomizer from "./CardStateCustomizer.svelte";
+    import type { DeckOptionsState } from "./lib";
+    import SpinBoxFloatRow from "./SpinBoxFloatRow.svelte";
+    import SpinBoxRow from "./SpinBoxRow.svelte";
+    import TitledContainer from "./TitledContainer.svelte";
 
     export let state: DeckOptionsState;
     export let api: Record<string, never>;
 
-    let config = state.currentConfig;
+    const config = state.currentConfig;
-    let defaults = state.defaults;
+    const defaults = state.defaults;
-    let cardStateCustomizer = state.cardStateCustomizer;
+    const cardStateCustomizer = state.cardStateCustomizer;
 </script>
 
 <TitledContainer title={tr.deckConfigAdvancedTitle()}>

ts/deck-options/AudioOptions.svelte

@@ -3,18 +3,18 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import * as tr from "../lib/ftl";
-    import TitledContainer from "./TitledContainer.svelte";
-    import SwitchRow from "./SwitchRow.svelte";
-    import type { DeckOptionsState } from "./lib";
     import DynamicallySlottable from "../components/DynamicallySlottable.svelte";
     import Item from "../components/Item.svelte";
+    import * as tr from "../lib/ftl";
+    import type { DeckOptionsState } from "./lib";
+    import SwitchRow from "./SwitchRow.svelte";
+    import TitledContainer from "./TitledContainer.svelte";
 
     export let state: DeckOptionsState;
     export let api: Record<string, never>;
 
-    let config = state.currentConfig;
+    const config = state.currentConfig;
-    let defaults = state.defaults;
+    const defaults = state.defaults;
 </script>
 
 <TitledContainer title={tr.deckConfigAudioTitle()}>

ts/deck-options/BuryOptions.svelte

@@ -3,18 +3,18 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import TitledContainer from "./TitledContainer.svelte";
-    import SwitchRow from "./SwitchRow.svelte";
-    import * as tr from "../lib/ftl";
-    import type { DeckOptionsState } from "./lib";
     import DynamicallySlottable from "../components/DynamicallySlottable.svelte";
     import Item from "../components/Item.svelte";
+    import * as tr from "../lib/ftl";
+    import type { DeckOptionsState } from "./lib";
+    import SwitchRow from "./SwitchRow.svelte";
+    import TitledContainer from "./TitledContainer.svelte";
 
     export let state: DeckOptionsState;
     export let api: Record<string, never>;
 
-    let config = state.currentConfig;
+    const config = state.currentConfig;
-    let defaults = state.defaults;
+    const defaults = state.defaults;
 </script>
 
 <TitledContainer title={tr.deckConfigBuryTitle()}>

ts/deck-options/CardStateCustomizer.svelte

@@ -3,11 +3,11 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import * as tr from "../lib/ftl";
-    import Row from "../components/Row.svelte";
     import Col from "../components/Col.svelte";
-    import TooltipLabel from "./TooltipLabel.svelte";
+    import Row from "../components/Row.svelte";
+    import * as tr from "../lib/ftl";
     import RevertButton from "./RevertButton.svelte";
+    import TooltipLabel from "./TooltipLabel.svelte";
 
     export let value: string;
 </script>

ts/deck-options/ConfigSelector.svelte

@@ -3,23 +3,23 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import * as tr from "../lib/ftl";
-    import { getContext } from "svelte";
-    import { modalsKey } from "../components/context-keys";
-    import type { DeckOptionsState, ConfigListEntry } from "./lib";
     import type Modal from "bootstrap/js/dist/modal";
+    import { getContext } from "svelte";
 
-    import TextInputModal from "./TextInputModal.svelte";
-    import StickyContainer from "../components/StickyContainer.svelte";
-    import ButtonToolbar from "../components/ButtonToolbar.svelte";
     import ButtonGroup from "../components/ButtonGroup.svelte";
-
+    import ButtonToolbar from "../components/ButtonToolbar.svelte";
+    import { modalsKey } from "../components/context-keys";
     import SelectButton from "../components/SelectButton.svelte";
     import SelectOption from "../components/SelectOption.svelte";
+    import StickyContainer from "../components/StickyContainer.svelte";
+    import * as tr from "../lib/ftl";
+    import { noop } from "../lib/functional";
+    import type { ConfigListEntry, DeckOptionsState } from "./lib";
     import SaveButton from "./SaveButton.svelte";
+    import TextInputModal from "./TextInputModal.svelte";
 
     export let state: DeckOptionsState;
-    let configList = state.configList;
+    const configList = state.configList;
 
     function configLabel(entry: ConfigListEntry): string {
         const count = tr.deckConfigUsedByDecks({ decks: entry.useCount });
@@ -53,7 +53,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let modalKey: string;
     let modalStartingValue = "";
     let modalTitle = "";
-    let modalSuccess = (_text: string) => {};
+    let modalSuccess: (text: string) => void = noop;
 
     function promptToAdd() {
         modalTitle = tr.deckConfigAddGroup();

ts/deck-options/DailyLimits.svelte

@@ -3,20 +3,20 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import * as tr from "../lib/ftl";
-    import TitledContainer from "./TitledContainer.svelte";
     import DynamicallySlottable from "../components/DynamicallySlottable.svelte";
     import Item from "../components/Item.svelte";
-    import SpinBoxRow from "./SpinBoxRow.svelte";
+    import * as tr from "../lib/ftl";
-    import Warning from "./Warning.svelte";
     import type { DeckOptionsState } from "./lib";
+    import SpinBoxRow from "./SpinBoxRow.svelte";
+    import TitledContainer from "./TitledContainer.svelte";
+    import Warning from "./Warning.svelte";
 
     export let state: DeckOptionsState;
     export let api: Record<string, never>;
 
-    let config = state.currentConfig;
+    const config = state.currentConfig;
-    let defaults = state.defaults;
+    const defaults = state.defaults;
-    let parentLimits = state.parentLimits;
+    const parentLimits = state.parentLimits;
 
     const v3Extra = state.v3Scheduler
         ? "\n\n" +

ts/deck-options/DeckOptionsPage.svelte

@@ -3,28 +3,28 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import ConfigSelector from "./ConfigSelector.svelte";
+    import type { Writable } from "svelte/store";
+
     import Container from "../components/Container.svelte";
-    import Row from "../components/Row.svelte";
-    import DailyLimits from "./DailyLimits.svelte";
-    import DisplayOrder from "./DisplayOrder.svelte";
-    import NewOptions from "./NewOptions.svelte";
-    import AdvancedOptions from "./AdvancedOptions.svelte";
-    import BuryOptions from "./BuryOptions.svelte";
-    import LapseOptions from "./LapseOptions.svelte";
-    import TimerOptions from "./TimerOptions.svelte";
-    import AudioOptions from "./AudioOptions.svelte";
-    import Addons from "./Addons.svelte";
     import DynamicallySlottable from "../components/DynamicallySlottable.svelte";
     import Item from "../components/Item.svelte";
-
+    import Row from "../components/Row.svelte";
-    import type { DeckOptionsState } from "./lib";
-    import type { Writable } from "svelte/store";
-    import HtmlAddon from "./HtmlAddon.svelte";
     import type { DynamicSvelteComponent } from "../sveltelib/dynamicComponent";
+    import Addons from "./Addons.svelte";
+    import AdvancedOptions from "./AdvancedOptions.svelte";
+    import AudioOptions from "./AudioOptions.svelte";
+    import BuryOptions from "./BuryOptions.svelte";
+    import ConfigSelector from "./ConfigSelector.svelte";
+    import DailyLimits from "./DailyLimits.svelte";
+    import DisplayOrder from "./DisplayOrder.svelte";
+    import HtmlAddon from "./HtmlAddon.svelte";
+    import LapseOptions from "./LapseOptions.svelte";
+    import type { DeckOptionsState } from "./lib";
+    import NewOptions from "./NewOptions.svelte";
+    import TimerOptions from "./TimerOptions.svelte";
 
     export let state: DeckOptionsState;
-    let addons = state.addonComponents;
+    const addons = state.addonComponents;
 
     export function auxData(): Writable<Record<string, unknown>> {
         return state.currentAuxData;

ts/deck-options/DisplayOrder.svelte

@@ -3,22 +3,21 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import * as tr from "../lib/ftl";
-    import TitledContainer from "./TitledContainer.svelte";
-    import EnumSelectorRow from "./EnumSelectorRow.svelte";
     import DynamicallySlottable from "../components/DynamicallySlottable.svelte";
     import Item from "../components/Item.svelte";
-
+    import * as tr from "../lib/ftl";
+    import EnumSelectorRow from "./EnumSelectorRow.svelte";
     import type { DeckOptionsState } from "./lib";
     import { reviewMixChoices } from "./strings";
+    import TitledContainer from "./TitledContainer.svelte";
 
     export let state: DeckOptionsState;
     export let api: Record<string, never>;
 
-    let config = state.currentConfig;
+    const config = state.currentConfig;
-    let defaults = state.defaults;
+    const defaults = state.defaults;
 
-    let currentDeck = "\n\n" + tr.deckConfigDisplayOrderWillUseCurrentDeck();
+    const currentDeck = "\n\n" + tr.deckConfigDisplayOrderWillUseCurrentDeck();
 
     const newGatherPriorityChoices = [
         tr.deckConfigNewGatherPriorityDeck(),

ts/deck-options/EnumSelectorRow.svelte

@@ -3,13 +3,12 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import type { Breakpoint } from "../components/types";
-
-    import Row from "../components/Row.svelte";
     import Col from "../components/Col.svelte";
-    import TooltipLabel from "./TooltipLabel.svelte";
+    import Row from "../components/Row.svelte";
+    import type { Breakpoint } from "../components/types";
     import EnumSelector from "./EnumSelector.svelte";
     import RevertButton from "./RevertButton.svelte";
+    import TooltipLabel from "./TooltipLabel.svelte";
 
     export let value: number;
     export let defaultValue: number;

ts/deck-options/Label.svelte

@@ -3,7 +3,7 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { onMount, createEventDispatcher } from "svelte";
+    import { createEventDispatcher, onMount } from "svelte";
 
     let forId: string;
     export { forId as for };

ts/deck-options/LapseOptions.svelte

@@ -3,21 +3,21 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import * as tr from "../lib/ftl";
-    import TitledContainer from "./TitledContainer.svelte";
     import DynamicallySlottable from "../components/DynamicallySlottable.svelte";
     import Item from "../components/Item.svelte";
-    import StepsInputRow from "./StepsInputRow.svelte";
+    import * as tr from "../lib/ftl";
-    import SpinBoxRow from "./SpinBoxRow.svelte";
     import EnumSelectorRow from "./EnumSelectorRow.svelte";
-    import Warning from "./Warning.svelte";
     import type { DeckOptionsState } from "./lib";
+    import SpinBoxRow from "./SpinBoxRow.svelte";
+    import StepsInputRow from "./StepsInputRow.svelte";
+    import TitledContainer from "./TitledContainer.svelte";
+    import Warning from "./Warning.svelte";
 
     export let state: DeckOptionsState;
     export let api = {};
 
-    let config = state.currentConfig;
+    const config = state.currentConfig;
-    let defaults = state.defaults;
+    const defaults = state.defaults;
 
     let stepsExceedMinimumInterval: string;
     $: {

ts/deck-options/NewOptions.svelte

@@ -3,22 +3,21 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import TitledContainer from "./TitledContainer.svelte";
-    import StepsInputRow from "./StepsInputRow.svelte";
-    import SpinBoxRow from "./SpinBoxRow.svelte";
-    import EnumSelectorRow from "./EnumSelectorRow.svelte";
-    import Warning from "./Warning.svelte";
     import DynamicallySlottable from "../components/DynamicallySlottable.svelte";
     import Item from "../components/Item.svelte";
-
-    import type { DeckOptionsState } from "./lib";
     import * as tr from "../lib/ftl";
+    import EnumSelectorRow from "./EnumSelectorRow.svelte";
+    import type { DeckOptionsState } from "./lib";
+    import SpinBoxRow from "./SpinBoxRow.svelte";
+    import StepsInputRow from "./StepsInputRow.svelte";
+    import TitledContainer from "./TitledContainer.svelte";
+    import Warning from "./Warning.svelte";
 
     export let state: DeckOptionsState;
     export let api = {};
 
-    let config = state.currentConfig;
+    const config = state.currentConfig;
-    let defaults = state.defaults;
+    const defaults = state.defaults;
 
     const newInsertOrderChoices = [
         tr.deckConfigNewInsertionOrderSequential(),

ts/deck-options/RevertButton.svelte

@@ -3,17 +3,18 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import * as tr from "../lib/ftl";
     import type Dropdown from "bootstrap/js/dist/dropdown";
-    import WithDropdown from "../components/WithDropdown.svelte";
+    import { cloneDeep, isEqual as isEqualLodash } from "lodash-es";
-    import DropdownMenu from "../components/DropdownMenu.svelte";
-    import DropdownItem from "../components/DropdownItem.svelte";
-    import Badge from "../components/Badge.svelte";
-    import { revertIcon } from "./icons";
-    import { isEqual as isEqualLodash, cloneDeep } from "lodash-es";
-    import { touchDeviceKey } from "../components/context-keys";
     import { getContext } from "svelte";
 
+    import Badge from "../components/Badge.svelte";
+    import { touchDeviceKey } from "../components/context-keys";
+    import DropdownItem from "../components/DropdownItem.svelte";
+    import DropdownMenu from "../components/DropdownMenu.svelte";
+    import WithDropdown from "../components/WithDropdown.svelte";
+    import * as tr from "../lib/ftl";
+    import { revertIcon } from "./icons";
+
     type T = unknown;
 
     export let value: T;

ts/deck-options/SaveButton.svelte

@@ -3,20 +3,20 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import * as tr from "../lib/ftl";
-    import { createEventDispatcher } from "svelte";
-    import type { DeckOptionsState } from "./lib";
     import type Dropdown from "bootstrap/js/dist/dropdown";
-    import { getPlatformString } from "../lib/shortcuts";
+    import { createEventDispatcher } from "svelte";
-    import { withCollapsedWhitespace } from "../lib/i18n";
 
     import ButtonGroup from "../components/ButtonGroup.svelte";
-    import LabelButton from "../components/LabelButton.svelte";
-    import DropdownMenu from "../components/DropdownMenu.svelte";
-    import DropdownItem from "../components/DropdownItem.svelte";
     import DropdownDivider from "../components/DropdownDivider.svelte";
-    import WithDropdown from "../components/WithDropdown.svelte";
+    import DropdownItem from "../components/DropdownItem.svelte";
+    import DropdownMenu from "../components/DropdownMenu.svelte";
+    import LabelButton from "../components/LabelButton.svelte";
     import Shortcut from "../components/Shortcut.svelte";
+    import WithDropdown from "../components/WithDropdown.svelte";
+    import * as tr from "../lib/ftl";
+    import { withCollapsedWhitespace } from "../lib/i18n";
+    import { getPlatformString } from "../lib/shortcuts";
+    import type { DeckOptionsState } from "./lib";
 
     const dispatch = createEventDispatcher();
 

ts/deck-options/SpinBoxFloat.svelte

@@ -3,8 +3,8 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { pageTheme } from "../sveltelib/theme";
     import { localizedNumber } from "../lib/i18n";
+    import { pageTheme } from "../sveltelib/theme";
 
     export let value: number;
     export let min = 1;

ts/deck-options/SpinBoxFloatRow.svelte

@@ -3,11 +3,11 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import Row from "../components/Row.svelte";
     import Col from "../components/Col.svelte";
-    import TooltipLabel from "./TooltipLabel.svelte";
+    import Row from "../components/Row.svelte";
-    import SpinBoxFloat from "./SpinBoxFloat.svelte";
     import RevertButton from "./RevertButton.svelte";
+    import SpinBoxFloat from "./SpinBoxFloat.svelte";
+    import TooltipLabel from "./TooltipLabel.svelte";
 
     export let value: any;
     export let defaultValue: any;

ts/deck-options/SpinBoxRow.svelte

@@ -3,11 +3,11 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import Row from "../components/Row.svelte";
     import Col from "../components/Col.svelte";
-    import TooltipLabel from "./TooltipLabel.svelte";
+    import Row from "../components/Row.svelte";
-    import SpinBox from "./SpinBox.svelte";
     import RevertButton from "./RevertButton.svelte";
+    import SpinBox from "./SpinBox.svelte";
+    import TooltipLabel from "./TooltipLabel.svelte";
 
     export let value: any;
     export let defaultValue: any;

ts/deck-options/StepsInputRow.svelte

@@ -3,11 +3,11 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import Row from "../components/Row.svelte";
     import Col from "../components/Col.svelte";
-    import TooltipLabel from "./TooltipLabel.svelte";
+    import Row from "../components/Row.svelte";
-    import StepsInput from "./StepsInput.svelte";
     import RevertButton from "./RevertButton.svelte";
+    import StepsInput from "./StepsInput.svelte";
+    import TooltipLabel from "./TooltipLabel.svelte";
 
     export let value: any;
     export let defaultValue: any;

ts/deck-options/SwitchRow.svelte

@@ -3,12 +3,12 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import Row from "../components/Row.svelte";
     import Col from "../components/Col.svelte";
+    import Row from "../components/Row.svelte";
     import Label from "./Label.svelte";
-    import TooltipLabel from "./TooltipLabel.svelte";
-    import Switch from "./Switch.svelte";
     import RevertButton from "./RevertButton.svelte";
+    import Switch from "./Switch.svelte";
+    import TooltipLabel from "./TooltipLabel.svelte";
 
     export let value: boolean;
     export let defaultValue: boolean;

ts/deck-options/TextInputModal.svelte

@@ -3,10 +3,11 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { onMount, onDestroy, getContext } from "svelte";
+    import Modal from "bootstrap/js/dist/modal";
+    import { getContext, onDestroy, onMount } from "svelte";
+
     import { modalsKey } from "../components/context-keys";
     import { pageTheme } from "../sveltelib/theme";
-    import Modal from "bootstrap/js/dist/modal";
 
     export let title: string;
     export let prompt: string;

ts/deck-options/TimerOptions.svelte

@@ -3,19 +3,19 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import TitledContainer from "./TitledContainer.svelte";
     import DynamicallySlottable from "../components/DynamicallySlottable.svelte";
     import Item from "../components/Item.svelte";
-    import SpinBoxRow from "./SpinBoxRow.svelte";
-    import SwitchRow from "./SwitchRow.svelte";
     import * as tr from "../lib/ftl";
     import type { DeckOptionsState } from "./lib";
+    import SpinBoxRow from "./SpinBoxRow.svelte";
+    import SwitchRow from "./SwitchRow.svelte";
+    import TitledContainer from "./TitledContainer.svelte";
 
     export let state: DeckOptionsState;
     export let api: Record<string, never>;
 
-    let config = state.currentConfig;
+    const config = state.currentConfig;
-    let defaults = state.defaults;
+    const defaults = state.defaults;
 </script>
 
 <TitledContainer title={tr.deckConfigTimerTitle()}>

ts/deck-options/TooltipLabel.svelte

@@ -4,10 +4,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import { marked } from "marked";
-    import { infoCircle } from "./icons";
+
-    import WithTooltip from "../components/WithTooltip.svelte";
-    import Label from "./Label.svelte";
     import Badge from "../components/Badge.svelte";
+    import WithTooltip from "../components/WithTooltip.svelte";
+    import { infoCircle } from "./icons";
+    import Label from "./Label.svelte";
 
     export let markdownTooltip: string;
     let forId: string | undefined = undefined;

ts/deck-options/Warning.svelte

@@ -4,8 +4,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import { slide } from "svelte/transition";
+
     import Row from "../components/Row.svelte";
-    import { withoutUnicodeIsolation } from "../lib/i18n/";
+    import { withoutUnicodeIsolation } from "../lib/i18n";
 
     export let warning: string;
 </script>

ts/deck-options/icons.ts

@@ -5,5 +5,5 @@
 
 // Import icons from bootstrap
 export { default as revertIcon } from "bootstrap-icons/icons/arrow-counterclockwise.svg";
-export { default as infoCircle } from "bootstrap-icons/icons/info-circle.svg";
 export { default as gearIcon } from "bootstrap-icons/icons/gear.svg";
+export { default as infoCircle } from "bootstrap-icons/icons/info-circle.svg";

ts/deck-options/index.ts

@@ -6,16 +6,15 @@
  */
 
 import "../sveltelib/export-runtime";
-
-import { DeckOptionsState } from "./lib";
-import { setupI18n, ModuleName } from "../lib/i18n";
-import { deckConfig } from "../lib/proto";
-import { checkNightMode } from "../lib/nightmode";
-import { touchDeviceKey, modalsKey } from "../components/context-keys";
-
-import DeckOptionsPage from "./DeckOptionsPage.svelte";
 import "./deck-options-base.css";
 
+import { modalsKey, touchDeviceKey } from "../components/context-keys";
+import { ModuleName, setupI18n } from "../lib/i18n";
+import { checkNightMode } from "../lib/nightmode";
+import { deckConfig } from "../lib/proto";
+import DeckOptionsPage from "./DeckOptionsPage.svelte";
+import { DeckOptionsState } from "./lib";
+
 const i18n = setupI18n({
     modules: [
         ModuleName.SCHEDULING,
@@ -45,11 +44,11 @@ export async function setupDeckOptions(did: number): Promise<DeckOptionsPage> {
     });
 }
 
-import TitledContainer from "./TitledContainer.svelte";
-import SpinBoxRow from "./SpinBoxRow.svelte";
-import SpinBoxFloatRow from "./SpinBoxFloatRow.svelte";
 import EnumSelectorRow from "./EnumSelectorRow.svelte";
+import SpinBoxFloatRow from "./SpinBoxFloatRow.svelte";
+import SpinBoxRow from "./SpinBoxRow.svelte";
 import SwitchRow from "./SwitchRow.svelte";
+import TitledContainer from "./TitledContainer.svelte";
 
 export const components = {
     TitledContainer,

ts/deck-options/lib.test.ts

@@ -5,9 +5,10 @@
 @typescript-eslint/no-explicit-any: "off",
  */
 
+import { get } from "svelte/store";
+
 import { DeckConfig } from "../lib/proto";
 import { DeckOptionsState } from "./lib";
-import { get } from "svelte/store";
 
 const exampleData = {
     allConfig: [

ts/deck-options/lib.ts

@@ -1,10 +1,11 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import { DeckConfig, deckConfig } from "../lib/proto";
+import { cloneDeep, isEqual } from "lodash-es";
-import { Writable, writable, get, Readable, readable } from "svelte/store";
+import { get, Readable, readable, Writable, writable } from "svelte/store";
-import { isEqual, cloneDeep } from "lodash-es";
+
 import { localeCompare } from "../lib/i18n";
+import { DeckConfig, deckConfig } from "../lib/proto";
 import type { DynamicSvelteComponent } from "../sveltelib/dynamicComponent";
 
 export type DeckOptionsId = number;

ts/deck-options/steps.ts

@@ -1,7 +1,7 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import { TimespanUnit, naturalWholeUnit, unitAmount, unitSeconds } from "../lib/time";
+import { naturalWholeUnit, TimespanUnit, unitAmount, unitSeconds } from "../lib/time";
 
 function unitSuffix(unit: TimespanUnit): string {
     switch (unit) {

ts/domlib/index.ts

@@ -2,6 +2,6 @@
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 export * from "./location";
-export * from "./surround";
 export * from "./move-nodes";
 export * from "./place-caret";
+export * from "./surround";

ts/domlib/location/document.ts

@@ -1,10 +1,10 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+import { getSelection } from "../../lib/cross-browser";
+import { findNodeFromCoordinates } from "./node";
 import type { SelectionLocation, SelectionLocationContent } from "./selection";
 import { getSelectionLocation } from "./selection";
-import { findNodeFromCoordinates } from "./node";
-import { getSelection } from "../../lib/cross-browser";
 
 export function saveSelection(base: Node): SelectionLocation | null {
     return getSelectionLocation(base);

ts/domlib/location/index.ts

@@ -2,8 +2,7 @@
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 import { registerPackage } from "../../lib/runtime-require";
-
+import { restoreSelection, saveSelection } from "./document";
-import { saveSelection, restoreSelection } from "./document";
 import { Position } from "./location";
 
 registerPackage("anki/location", {
@@ -12,5 +11,5 @@ registerPackage("anki/location", {
     Position,
 });
 
-export { saveSelection, restoreSelection, Position };
+export { Position, restoreSelection, saveSelection };
 export type { SelectionLocation } from "./selection";

ts/domlib/location/range.ts

@@ -1,8 +1,8 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import { getNodeCoordinates } from "./node";
 import type { CaretLocation } from "./location";
+import { getNodeCoordinates } from "./node";
 
 interface RangeCoordinatesCollapsed {
     readonly start: CaretLocation;

ts/domlib/location/selection.ts

@@ -1,10 +1,10 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import { getNodeCoordinates } from "./node";
+import { getRange, getSelection } from "../../lib/cross-browser";
 import type { CaretLocation } from "./location";
 import { compareLocations, Position } from "./location";
-import { getSelection, getRange } from "../../lib/cross-browser";
+import { getNodeCoordinates } from "./node";
 
 export interface SelectionLocationCollapsed {
     readonly anchor: CaretLocation;

ts/domlib/surround/ascend.ts

@@ -1,8 +1,8 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import { ascend, isOnlyChild } from "../../lib/node";
 import { elementIsBlock } from "../../lib/dom";
+import { ascend, isOnlyChild } from "../../lib/node";
 
 export function ascendWhileSingleInline(node: Node, base: Node): Node {
     if (node === base) {

ts/domlib/surround/child-node-range.ts

@@ -1,8 +1,8 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+import { elementIsEmpty, nodeIsElement } from "../../lib/dom";
 import { ascend } from "../../lib/node";
-import { nodeIsElement, elementIsEmpty } from "../../lib/dom";
 
 export interface ChildNodeRange {
     parent: Node;

ts/domlib/surround/find-above.ts

@@ -2,7 +2,7 @@
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 import { nodeIsElement } from "../../lib/dom";
-import type { FoundMatch, ElementMatcher } from "./matcher";
+import type { ElementMatcher, FoundMatch } from "./matcher";
 
 export function findClosest(
     node: Node,

ts/domlib/surround/find-adjacent.test.ts

@@ -1,8 +1,8 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import { findBefore, findAfter } from "./find-adjacent";
 import { nodeToChildNodeRange } from "./child-node-range";
+import { findAfter, findBefore } from "./find-adjacent";
 import { matchTagName } from "./matcher";
 
 const parser = new DOMParser();

ts/domlib/surround/find-adjacent.ts

@@ -1,11 +1,11 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import { nodeIsElement, nodeIsText, elementIsEmpty } from "../../lib/dom";
+import { elementIsEmpty, nodeIsElement, nodeIsText } from "../../lib/dom";
 import { hasOnlyChild } from "../../lib/node";
 import type { ChildNodeRange } from "./child-node-range";
+import type { ElementMatcher, FoundAdjacent, FoundAlong } from "./matcher";
 import { MatchResult } from "./matcher";
-import type { ElementMatcher, FoundAlong, FoundAdjacent } from "./matcher";
 
 /**
  * These functions will not ascend on the starting node, but will descend on the neighbor node

ts/domlib/surround/find-within.ts

@@ -2,9 +2,9 @@
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 import { nodeIsElement } from "../../lib/dom";
-import { nodeWithinRange } from "./within-range";
 import type { ChildNodeRange } from "./child-node-range";
-import type { FoundMatch, ElementMatcher } from "./matcher";
+import type { ElementMatcher, FoundMatch } from "./matcher";
+import { nodeWithinRange } from "./within-range";
 
 /**
  * Elements returned should be in post-order

ts/domlib/surround/index.ts

@@ -2,11 +2,10 @@
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 import { registerPackage } from "../../lib/runtime-require";
-
-import { surroundNoSplitting } from "./no-splitting";
-import { unsurround } from "./unsurround";
 import { findClosest } from "./find-above";
 import { MatchResult, matchTagName } from "./matcher";
+import { surroundNoSplitting } from "./no-splitting";
+import { unsurround } from "./unsurround";
 
 registerPackage("anki/surround", {
     surroundNoSplitting,
@@ -16,5 +15,5 @@ registerPackage("anki/surround", {
     matchTagName,
 });
 
-export { surroundNoSplitting, unsurround, findClosest, MatchResult, matchTagName };
+export { findClosest, MatchResult, matchTagName, surroundNoSplitting, unsurround };
-export type { ElementMatcher, ElementClearer } from "./matcher";
+export type { ElementClearer, ElementMatcher } from "./matcher";

ts/domlib/surround/merge-match.ts

@@ -1,14 +1,14 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+import { ascendWhileSingleInline } from "./ascend";
 import type { ChildNodeRange } from "./child-node-range";
 import {
-    nodeToChildNodeRange,
     areSiblingChildNodeRanges,
-    mergeChildNodeRanges,
     coversWholeParent,
+    mergeChildNodeRanges,
+    nodeToChildNodeRange,
 } from "./child-node-range";
-import { ascendWhileSingleInline } from "./ascend";
 
 interface MergeMatch {
     mismatch: boolean;

ts/domlib/surround/no-splitting.ts

@@ -1,18 +1,18 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import { getRangeAnchors } from "./range-anchors";
-import { nodeWithinRange } from "./within-range";
-import { findTextNodesWithin } from "./text-node";
-import {
-    surroundChildNodeRangeWithNode,
-    nodeToChildNodeRange,
-} from "./child-node-range";
-import { mergeMatchChildNodeRanges } from "./merge-match";
 import { ascendWhileSingleInline } from "./ascend";
-import { normalizeInsertionRanges } from "./normalize-insertion-ranges";
+import {
+    nodeToChildNodeRange,
+    surroundChildNodeRangeWithNode,
+} from "./child-node-range";
+import type { ElementClearer, ElementMatcher } from "./matcher";
 import { matchTagName } from "./matcher";
-import type { ElementMatcher, ElementClearer } from "./matcher";
+import { mergeMatchChildNodeRanges } from "./merge-match";
+import { normalizeInsertionRanges } from "./normalize-insertion-ranges";
+import { getRangeAnchors } from "./range-anchors";
+import { findTextNodesWithin } from "./text-node";
+import { nodeWithinRange } from "./within-range";
 
 export interface NodesResult {
     addedNodes: Node[];

ts/domlib/surround/normalize-insertion-ranges.ts

@@ -1,16 +1,16 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import { findBefore, findAfter } from "./find-adjacent";
-import { findWithin, findWithinNode } from "./find-within";
-import { MatchResult } from "./matcher";
-import type {
-    FoundMatch,
-    ElementMatcher,
-    ElementClearer,
-    FoundAdjacent,
-} from "./matcher";
 import type { ChildNodeRange } from "./child-node-range";
+import { findAfter, findBefore } from "./find-adjacent";
+import { findWithin, findWithinNode } from "./find-within";
+import type {
+    ElementClearer,
+    ElementMatcher,
+    FoundAdjacent,
+    FoundMatch,
+} from "./matcher";
+import { MatchResult } from "./matcher";
 
 function countChildNodesRespectiveToParent(parent: Node, element: Element): number {
     return element.parentNode === parent ? element.childNodes.length : 1;

ts/domlib/surround/unsurround.ts

@@ -1,13 +1,13 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import { getRangeAnchors } from "./range-anchors";
-import type { NodesResult, SurroundNoSplittingResult } from "./no-splitting";
-import { MatchResult, matchTagName } from "./matcher";
-import type { FoundMatch, ElementMatcher, ElementClearer } from "./matcher";
 import { findFarthest } from "./find-above";
-import { findWithinRange, findWithinNode } from "./find-within";
+import { findWithinNode, findWithinRange } from "./find-within";
+import type { ElementClearer, ElementMatcher, FoundMatch } from "./matcher";
+import { MatchResult, matchTagName } from "./matcher";
+import type { NodesResult, SurroundNoSplittingResult } from "./no-splitting";
 import { surround } from "./no-splitting";
+import { getRangeAnchors } from "./range-anchors";
 
 function findBetween(
     range: Range,

ts/editable/ContentEditable.svelte

@@ -8,15 +8,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <script lang="ts">
     import type { Writable } from "svelte/store";
+
     import { updateAllState } from "../components/WithState.svelte";
     import actionList from "../sveltelib/action-list";
+    import type { InputManagerAction } from "../sveltelib/input-manager";
+    import type { MirrorAction } from "../sveltelib/mirror-dom";
+    import type { ContentEditableAPI } from "./content-editable";
     import {
         customFocusHandling,
         preventBuiltinContentEditableShortcuts,
     } from "./content-editable";
-    import type { ContentEditableAPI } from "./content-editable";
-    import type { MirrorAction } from "../sveltelib/mirror-dom";
-    import type { InputManagerAction } from "../sveltelib/input-manager";
 
     export let resolve: (editable: HTMLElement) => void;
 

ts/editable/Mathjax.svelte

@@ -19,10 +19,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <script lang="ts">
     import { onDestroy } from "svelte";
+    import { writable } from "svelte/store";
+
+    import { randomUUID } from "../lib/uuid";
     import { pageTheme } from "../sveltelib/theme";
     import { convertMathjax } from "./mathjax";
-    import { randomUUID } from "../lib/uuid";
-    import { writable } from "svelte/store";
 
     export let mathjax: string;
     export let block: boolean;

ts/editable/content-editable.ts

@@ -1,13 +1,13 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import { on, preventDefault } from "../lib/events";
-import { registerShortcut } from "../lib/shortcuts";
-import { placeCaretAfterContent } from "../domlib/place-caret";
-import { saveSelection, restoreSelection } from "../domlib/location";
-import { isApplePlatform } from "../lib/platform";
-import { bridgeCommand } from "../lib/bridgecommand";
 import type { SelectionLocation } from "../domlib/location";
+import { restoreSelection, saveSelection } from "../domlib/location";
+import { placeCaretAfterContent } from "../domlib/place-caret";
+import { bridgeCommand } from "../lib/bridgecommand";
+import { on, preventDefault } from "../lib/events";
+import { isApplePlatform } from "../lib/platform";
+import { registerShortcut } from "../lib/shortcuts";
 
 function safePlaceCaretAfterContent(editable: HTMLElement): void {
     /**

ts/editable/frame-element.ts

@@ -1,24 +1,24 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+import { moveChildOutOfElement } from "../domlib/move-nodes";
+import { placeCaretAfter, placeCaretBefore } from "../domlib/place-caret";
+import { getSelection, isSelectionCollapsed } from "../lib/cross-browser";
 import {
-    nodeIsText,
-    nodeIsElement,
     elementIsBlock,
     hasBlockAttribute,
+    nodeIsElement,
+    nodeIsText,
 } from "../lib/dom";
 import { on } from "../lib/events";
-import { getSelection, isSelectionCollapsed } from "../lib/cross-browser";
-import { moveChildOutOfElement } from "../domlib/move-nodes";
-import { placeCaretBefore, placeCaretAfter } from "../domlib/place-caret";
-import {
-    frameElementTagName,
-    isFrameHandle,
-    checkWhetherMovingIntoHandle,
-    FrameStart,
-    FrameEnd,
-} from "./frame-handle";
 import type { FrameHandle } from "./frame-handle";
+import {
+    checkWhetherMovingIntoHandle,
+    frameElementTagName,
+    FrameEnd,
+    FrameStart,
+    isFrameHandle,
+} from "./frame-handle";
 
 function restoreFrameHandles(mutations: MutationRecord[]): void {
     let referenceNode: Node | null = null;

ts/editable/frame-handle.ts

@@ -1,11 +1,11 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-import { nodeIsText, nodeIsElement, elementIsEmpty } from "../lib/dom";
-import { on } from "../lib/events";
-import { getSelection, isSelectionCollapsed } from "../lib/cross-browser";
 import { moveChildOutOfElement } from "../domlib/move-nodes";
 import { placeCaretAfter } from "../domlib/place-caret";
+import { getSelection, isSelectionCollapsed } from "../lib/cross-browser";
+import { elementIsEmpty, nodeIsElement, nodeIsText } from "../lib/dom";
+import { on } from "../lib/events";
 import type { FrameElement } from "./frame-element";
 
 /**

ts/editable/index.ts

@@ -2,7 +2,6 @@
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 import "./editable-base.css";
-
 /* only imported for the CSS */
 import "./ContentEditable.svelte";
 import "./Mathjax.svelte";

ts/editable/mathjax-element.ts

@@ -3,11 +3,10 @@
 
 import "mathjax/es5/tex-svg-full";
 
+import { placeCaretAfter, placeCaretBefore } from "../domlib/place-caret";
 import { on } from "../lib/events";
-import { placeCaretBefore, placeCaretAfter } from "../domlib/place-caret";
 import type { DecoratedElement, DecoratedElementConstructor } from "./decorated";
 import { FrameElement, frameElement } from "./frame-element";
-
 import Mathjax_svelte from "./Mathjax.svelte";
 
 const mathjaxTagPattern =

ts/editor/BrowserEditor.svelte

@@ -3,10 +3,10 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import NoteEditor from "./NoteEditor.svelte";
     import ButtonGroupItem from "../components/ButtonGroupItem.svelte";
-    import PreviewButton from "./PreviewButton.svelte";
     import type { NoteEditorAPI } from "./NoteEditor.svelte";
+    import NoteEditor from "./NoteEditor.svelte";
+    import PreviewButton from "./PreviewButton.svelte";
 
     const api: Partial<NoteEditorAPI> = {};
     let noteEditor: NoteEditor;

ts/editor/CodeMirror.svelte

@@ -13,12 +13,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import { createEventDispatcher, getContext } from "svelte";
     import type { Writable } from "svelte/store";
-    import storeSubscribe from "../sveltelib/store-subscribe";
-    import { directionKey } from "../lib/context-keys";
-    import { lightCodeMirrorTheme, darkCodeMirrorTheme } from "./code-mirror";
-    import { pageTheme } from "../sveltelib/theme";
 
-    export let configuration: CodeMirror.EditorConfiguration;
+    import { directionKey } from "../lib/context-keys";
+    import storeSubscribe from "../sveltelib/store-subscribe";
+    import { pageTheme } from "../sveltelib/theme";
+    import { darkCodeMirrorTheme, lightCodeMirrorTheme } from "./code-mirror";
+
+    export let configuration: CodeMirrorLib.EditorConfiguration;
     export let code: Writable<string>;
 
     const direction = getContext<Writable<"ltr" | "rtl">>(directionKey);
@@ -27,7 +28,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         rtlMoveVisually: true,
     };
 
-    let codeMirror: CodeMirror.EditorFromTextArea;
+    let codeMirror: CodeMirrorLib.EditorFromTextArea;
     $: codeMirror?.setOption("direction", $direction);
 
     function setValue(content: string): void {

ts/editor/DuplicateLink.svelte

@@ -3,8 +3,8 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import * as tr from "../lib/ftl";
     import { bridgeCommand } from "../lib/bridgecommand";
+    import * as tr from "../lib/ftl";
 </script>
 
 <a

ts/editor/EditingArea.svelte

@@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script context="module" lang="ts">
     import type { Writable } from "svelte/store";
+
     import contextProperty from "../sveltelib/context-property";
 
     export interface EditingInputAPI {
@@ -28,10 +29,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <script lang="ts">
-    import FocusTrap from "./FocusTrap.svelte";
-    import { writable } from "svelte/store";
     import { onMount, setContext as svelteSetContext } from "svelte";
+    import { writable } from "svelte/store";
+
     import { fontFamilyKey, fontSizeKey } from "../lib/context-keys";
+    import FocusTrap from "./FocusTrap.svelte";
 
     export let fontFamily: string;
     const fontFamilyStore = writable(fontFamily);

ts/editor/EditorField.svelte

@@ -3,10 +3,11 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script context="module" lang="ts">
-    import type { EditingAreaAPI } from "./EditingArea.svelte";
-    import contextProperty from "../sveltelib/context-property";
     import type { Readable } from "svelte/store";
 
+    import contextProperty from "../sveltelib/context-property";
+    import type { EditingAreaAPI } from "./EditingArea.svelte";
+
     export interface FieldData {
         name: string;
         description: string;
@@ -28,18 +29,18 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <script lang="ts">
-    import EditingArea from "./EditingArea.svelte";
-    import LabelContainer from "./LabelContainer.svelte";
-    import LabelDescription from "./LabelDescription.svelte";
-    import LabelName from "./LabelName.svelte";
-    import FieldState from "./FieldState.svelte";
-
     import { onDestroy, setContext } from "svelte";
-    import { writable } from "svelte/store";
     import type { Writable } from "svelte/store";
+    import { writable } from "svelte/store";
+
     import { directionKey } from "../lib/context-keys";
     import { promiseWithResolver } from "../lib/promise";
     import type { Destroyable } from "./destroyable";
+    import EditingArea from "./EditingArea.svelte";
+    import FieldState from "./FieldState.svelte";
+    import LabelContainer from "./LabelContainer.svelte";
+    import LabelDescription from "./LabelDescription.svelte";
+    import LabelName from "./LabelName.svelte";
 
     export let content: Writable<string>;
     export let field: FieldData;

ts/editor/FrameElement.svelte

@@ -7,7 +7,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     customElements.define(FrameElement.tagName, FrameElement);
 
-    import { FrameStart, FrameEnd } from "../editable/frame-handle";
+    import { FrameEnd, FrameStart } from "../editable/frame-handle";
 
     customElements.define(FrameStart.tagName, FrameStart);
     customElements.define(FrameEnd.tagName, FrameEnd);

ts/editor/HandleBackground.svelte

@@ -3,7 +3,7 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { onMount, createEventDispatcher } from "svelte";
+    import { createEventDispatcher, onMount } from "svelte";
 
     export let tooltip: string | undefined = undefined;
 

ts/editor/HandleControl.svelte

@@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import { createEventDispatcher } from "svelte";
+
     import { pageTheme } from "../sveltelib/theme";
 
     export let offsetX = 0;

ts/editor/HandleLabel.svelte

@@ -3,10 +3,11 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import type { Readable } from "svelte/store";
     import { getContext } from "svelte";
-    import { directionKey } from "../lib/context-keys";
     import { afterUpdate, createEventDispatcher, onMount } from "svelte";
+    import type { Readable } from "svelte/store";
+
+    import { directionKey } from "../lib/context-keys";
 
     let dimensions: HTMLDivElement;
     let overflowFix = 0;

ts/editor/HandleSelection.svelte

@@ -3,7 +3,8 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { onMount, createEventDispatcher } from "svelte";
+    import { createEventDispatcher } from "svelte";
+
     export let container: HTMLElement;
     export let image: HTMLImageElement;
 
@@ -15,7 +16,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let width: number;
     let height: number;
 
-    function setSelection(_selection?: HTMLDivElement): void {
+    function setSelection(): void {
         const containerRect = container.getBoundingClientRect();
         const imageRect = image!.getBoundingClientRect();
 
@@ -41,14 +42,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     }
 
     const dispatch = createEventDispatcher();
-    let selection: HTMLDivElement;
 
-    onMount(() => dispatch("mount", { selection }));
+    function initSelection(selection: HTMLDivElement): void {
+        setSelection();
+        dispatch("mount", { selection });
+    }
 </script>
 
 <div
-    bind:this={selection}
+    use:initSelection
-    use:setSelection
     on:click={(event) =>
         /* prevent triggering Bootstrap dropdown */ event.stopImmediatePropagation()}
     style="--left: {left}px; --top: {top}px; --width: {width}px; --height: {height}px; --offsetX: {offsetX}px; --offsetY: {offsetY}px;"

ts/editor/LabelContainer.svelte

@@ -3,8 +3,9 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import type { Readable } from "svelte/store";
     import { getContext } from "svelte";
+    import type { Readable } from "svelte/store";
+
     import { directionKey } from "../lib/context-keys";
 
     const direction = getContext<Readable<"ltr" | "rtl">>(directionKey);

ts/editor/LabelDescription.svelte

@@ -3,9 +3,9 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { descriptionIcon } from "./icons";
-    import WithTooltip from "../components/WithTooltip.svelte";
     import Badge from "../components/Badge.svelte";
+    import WithTooltip from "../components/WithTooltip.svelte";
+    import { descriptionIcon } from "./icons";
 
     export let description: string;
 </script>

ts/editor/MathjaxElement.svelte

@@ -3,8 +3,8 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { context } from "./DecoratedElements.svelte";
     import { Mathjax } from "../editable/mathjax-element";
+    import { context } from "./DecoratedElements.svelte";
 
     const decoratedElements = context.get();
     decoratedElements.push(Mathjax);

ts/editor/NoteCreator.svelte

@@ -3,12 +3,13 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import { onMount, onDestroy } from "svelte";
+    import { onDestroy, onMount } from "svelte";
+
     import { bridgeCommand } from "../lib/bridgecommand";
     import { registerShortcut } from "../lib/shortcuts";
-    import StickyBadge from "./StickyBadge.svelte";
-    import NoteEditor from "./NoteEditor.svelte";
     import type { NoteEditorAPI } from "./NoteEditor.svelte";
+    import NoteEditor from "./NoteEditor.svelte";
+    import StickyBadge from "./StickyBadge.svelte";
 
     const api: Partial<NoteEditorAPI> = {};
     let noteEditor: NoteEditor;