Improve eslint formatting

.eslintrc.js

@@ -0,0 +1,73 @@
+module.exports = {
+    root: true,
+    extends: [
+        "eslint:recommended",
+        "plugin:compat/recommended",
+        "plugin:svelte/base",
+        "plugin:svelte/recommended",
+        "plugin:svelte/prettier",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "prettier",
+    ],
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        extraFileExtensions: [".svelte"],
+    },
+    plugins: [
+        "svelte",
+        "simple-import-sort",
+        "import",
+        "@typescript-eslint",
+        "@typescript-eslint/eslint-plugin",
+    ],
+    rules: {
+        "prefer-const": "warn",
+        "no-nested-ternary": "warn",
+        "simple-import-sort/imports": "warn",
+        "simple-import-sort/exports": "warn",
+        "import/first": "warn",
+        "import/newline-after-import": "warn",
+        "import/no-useless-path-segments": "warn",
+        "import/no-duplicates": "warn",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/ban-ts-comment": "warn",
+        "@typescript-eslint/no-unused-vars": [
+            "warn",
+            { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
+        ],
+    },
+    overrides: [
+        {
+            files: "*.svelte",
+            parser: "svelte-eslint-parser",
+            parserOptions: {
+                parser: "@typescript-eslint/parser",
+            },
+            rules: {
+                "svelte/no-useless-mustaches": "warn",
+                "svelte/require-optimized-style-attribute": "warn",
+                "svelte/html-quotes": "warn",
+                "svelte/prefer-class-directive": "warn",
+                "svelte/prefer-style-directive": "warn",
+                "svelte/shorthand-attribute": "warn",
+                "svelte/shorthand-directive": "warn",
+                "no-redeclare": "off",
+                "no-global-assign": "off",
+                "no-self-assign": "off",
+                "no-undef": "off",
+                "svelte/no-at-html-tags": "off",
+                /* We would also ideally get rid of this: */
+                "@typescript-eslint/no-explicit-any": "off",
+                /* Does not recognize that `store` and `$store` belongs to the same var: */
+                "@typescript-eslint/no-unused-vars": "off",
+            },
+        },
+    ],
+    env: { browser: true },
+    ignorePatterns: ["backend_proto.d.ts", "*.svelte.d.ts"],
+    globals: {
+        globalThis: false,
+        NodeListOf: false,
+    },
+};

.prettierrc.js

@@ -0,0 +1,6 @@
+ module.exports = {
+  trailingComma: "all",
+  printWidth: 88,
+  tabWidth: 4,
+  semi: true,
+};

BUILD.bazel

@@ -35,5 +35,7 @@ pkg_tar(
 exports_files([
     "defs.bzl",
     "package.json",
-    ".prettierrc",
+    ".prettierignore",
+    ".prettierrc.js",
+    ".eslintrc.js",
 ])

docs/BUILD.bazel

@@ -1,4 +1,3 @@
 load("//ts:prettier.bzl", "prettier_test")
 
 # formatting of the .md files
-prettier_test()

package.json

@@ -28,7 +28,9 @@
         "diff": "^5.0.0",
         "escodegen": "^2.0.0",
         "eslint": "^7.24.0",
+        "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-compat": "^3.13.0",
+        "eslint-plugin-svelte": "^2.2.0",
         "espree": "^9.0.0",
         "estraverse": "^5.2.0",
         "glob": "^7.1.6",
@@ -69,7 +71,6 @@
         "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",

ts/BUILD.bazel

@@ -9,13 +9,13 @@ prettier_test()
 #################
 
 exports_files([
-    ".eslintrc.js",
     "licenses.json",
     "sql_format.ts",
     "jest.config.js",
-    "package.json",
     "protobuf-no-long.js",
     "page.html",
+    "tsconfig.json",
+    "format.sh",
 ])
 
 # a copy needs to be placed in bazel-bin for libs with

ts/card-info/BUILD.bazel

@@ -1,5 +1,5 @@
-load("//ts:prettier.bzl", "prettier_test")
 load("//ts:eslint.bzl", "eslint_test")
+load("//ts:prettier.bzl", "prettier_test")
 load("//ts/svelte:svelte.bzl", "compile_svelte", "svelte_check")
 load("//ts:esbuild.bzl", "esbuild")
 load("//ts:generate_page.bzl", "generate_page")
@@ -61,7 +61,6 @@ prettier_test()
 eslint_test()
 
 svelte_check(
-    name = "svelte_check",
     srcs = glob([
         "*.ts",
         "*.svelte",

ts/card-info/CardInfo.svelte

@@ -11,7 +11,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import CardStats from "./CardStats.svelte";
     import Revlog from "./Revlog.svelte";
 
-    export let includeRevlog: boolean = true;
+    export let includeRevlog = true;
 
     let stats: Stats.CardStatsResponse | null = null;
     let revlog: Stats.CardStatsResponse.StatsRevlogEntry[] | null = null;

ts/change-notetype/Alert.svelte

@@ -19,8 +19,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             ? tr.changeNotetypeWillDiscardContent()
             : tr.changeNotetypeWillDiscardCards();
 
-    const maxItems: number = 3;
-    let collapsed: boolean = true;
+    const maxItems = 3;
+    let collapsed = true;
     $: collapseMsg = collapsed
         ? tr.changeNotetypeExpand()
         : tr.changeNotetypeCollapse();

ts/change-notetype/ChangeNotetypePage.svelte

@@ -23,7 +23,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <NotetypeSelector {state} />
 </div>
 
-<div id="scrollArea" style="--offset: {offset}px; --gutter-inline: 0.25rem;">
+<div id="scrollArea" style:--offset="{offset}px" style:--gutter-inline="0.25rem">
     <Row class="gx-0" --cols={2}>
         <Col --col-size={1} breakpoint="md">
             <Container>

ts/change-notetype/MapperRow.svelte

@@ -21,7 +21,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 <Row --cols={2}>
     <Col --col-size={1}>
-        <!-- svelte-ignore a11y-no-onchange -->
         <select
             value={$info.getOldIndex(ctx, newIndex)}
             class="form-select"

ts/components/Absolute.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">
-    export let top: boolean = false;
-    export let bottom: boolean = false;
-    export let left: boolean = false;
-    export let right: boolean = false;
+    export let top = false;
+    export let bottom = false;
+    export let left = false;
+    export let right = false;
 </script>
 
 <div class="absolute" class:top class:bottom class:left class:right>

ts/components/BUILD.bazel

@@ -32,7 +32,6 @@ prettier_test()
 eslint_test()
 
 svelte_check(
-    name = "svelte_check",
     srcs = glob([
         "*.ts",
         "*.svelte",

ts/components/ButtonGroup.svelte

@@ -4,24 +4,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     export let id: string | undefined = undefined;
-    let className: string = "";
+    let className = "";
     export { className as class };
 
-    export let size: number | undefined = undefined;
-    export let wrap: boolean | undefined = undefined;
+    export let size = -1;
+    export let wrap = false;
 
-    $: buttonSize = size ? `--buttons-size: ${size}rem; ` : "";
     let buttonWrap: string;
-    $: if (wrap === undefined) {
-        buttonWrap = "";
-    } else {
-        buttonWrap = wrap ? `--buttons-wrap: wrap; ` : `--buttons-wrap: nowrap; `;
-    }
-
-    $: style = buttonSize + buttonWrap;
+    $: buttonWrap = wrap ? `wrap` : `nowrap`;
 </script>
 
-<div {id} class="button-group btn-group {className}" {style} dir="ltr" role="group">
+<div
+    {id}
+    class="button-group btn-group {className}"
+    style:--button-size="{size}rem"
+    style:--button-wrap="{buttonWrap}rem"
+    dir="ltr"
+    role="group"
+>
     <slot />
 </div>
 

ts/components/ButtonGroupItem.svelte

@@ -67,37 +67,42 @@
     export let id: string | undefined = undefined;
     export let hostProps: ButtonSlotHostProps | undefined = undefined;
 
-    let style: string;
+    let leftRadius = 0;
+    let rightRadius = 0;
 
     if (!context.available()) {
         console.log("ButtonGroupItem: should always have a slotHostContext");
     }
 
     const { detach, position } = hostProps ?? context.get().getProps();
-    const radius = "5px";
+    const radius = 5;
 
     function updateButtonStyle(position: ButtonPosition) {
         switch (position) {
             case ButtonPosition.Standalone:
-                style = `--border-left-radius: ${radius}; --border-right-radius: ${radius}; `;
+                leftRadius = radius;
+                rightRadius = radius;
                 break;
             case ButtonPosition.InlineStart:
-                style = `--border-left-radius: ${radius}; --border-right-radius: 0; `;
+                leftRadius = radius;
                 break;
             case ButtonPosition.Center:
-                style = "--border-left-radius: 0; --border-right-radius: 0; ";
                 break;
             case ButtonPosition.InlineEnd:
-                style = `--border-left-radius: 0; --border-right-radius: ${radius}; `;
+                rightRadius = radius;
                 break;
         }
     }
 
     $: updateButtonStyle($position);
 </script>
 
-<!-- div is necessary to preserve item position -->
-<div class="button-group-item" {id} {style}>
+<div
+    class="button-group-item"
+    {id}
+    style:--border-left-radius="{leftRadius}px"
+    style:--border-right-radius="{rightRadius}px"
+>
     {#if !$detach}
         <slot />
     {/if}

ts/components/ButtonToolbar.svelte

@@ -6,28 +6,22 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { pageTheme } from "../sveltelib/theme";
 
     export let id: string | undefined = undefined;
-    let className: string = "";
+    let className = "";
     export { className as class };
 
-    export let size: number | undefined = undefined;
-    export let wrap: boolean | undefined = undefined;
+    export let size = -1;
+    export let wrap = false;
 
-    $: buttonSize = size ? `--buttons-size: ${size}rem; ` : "";
     let buttonWrap: string;
-    $: if (wrap === undefined) {
-        buttonWrap = "";
-    } else {
-        buttonWrap = wrap ? `--buttons-wrap: wrap; ` : `--buttons-wrap: nowrap; `;
-    }
-
-    $: style = buttonSize + buttonWrap;
+    $: buttonWrap = wrap ? `wrap` : `nowrap`;
 </script>
 
 <div
     {id}
     class="button-toolbar btn-toolbar {className}"
     class:nightMode={$pageTheme.isDark}
-    {style}
+    style:--button-size="{size}rem"
+    style:--button-wrap="{buttonWrap}rem"
     role="toolbar"
     on:focusout
 >

ts/components/Container.svelte

@@ -6,7 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { Breakpoint } from "./types";
 
     export let id: string | undefined = undefined;
-    let className: string = "";
+    let className = "";
     export { className as class };
 
     /* width: 100% if viewport < breakpoint otherwise with gutters */