Merge pull request #1398 from ankitects/ts_project [note: Windows users]

update to latest rules_nodejs & switch to ts_project

Windows users with an existing checkout will likely need to use 'bazel clean' before building, due to old files lying around in the wrong place

BUILD.bazel

@@ -22,12 +22,6 @@ genrule(
     visibility = ["//visibility:public"],
 )
 
-alias(
-    name = "tsconfig.json",
-    actual = "//ts:tsconfig.json",
-    visibility = ["//visibility:public"],
-)
-
 pkg_tar(
     name = "dist",
     srcs = [

defs.bzl

@@ -9,7 +9,6 @@ load("@build_bazel_rules_nodejs//:index.bzl", "node_repositories", "yarn_install
 load("@io_bazel_rules_sass//:defs.bzl", "sass_repositories")
 load("@com_github_ali5h_rules_pip//:defs.bzl", "pip_import")
 load("//pip/pyqt5:defs.bzl", "install_pyqt5")
-load("@esbuild_toolchain//:esbuild_repo.bzl", "esbuild_dependencies")
 
 anki_version = "2.1.49"
 
@@ -53,5 +52,3 @@ def setup_deps():
     )
 
     sass_repositories()
-
-    esbuild_dependencies()

late_deps.bzl

@@ -2,7 +2,9 @@
 
 load("@py_deps//:requirements.bzl", "pip_install")
 load("@rules_rust//tools/rust_analyzer/raze:crates.bzl", "rules_rust_tools_rust_analyzer_fetch_remote_crates")
+load("@build_bazel_rules_nodejs//toolchains/esbuild:esbuild_repositories.bzl", "esbuild_repositories")
 
 def setup_late_deps():
     pip_install()
     rules_rust_tools_rust_analyzer_fetch_remote_crates()
+    esbuild_repositories()

qt/aqt/data/web/js/BUILD.bazel

@@ -6,6 +6,7 @@ load("//ts:eslint.bzl", "eslint_test")
 ts_library(
     name = "pycmd",
     srcs = ["pycmd.d.ts"],
+    tsconfig = "tsconfig.json",
     visibility = ["//qt/aqt/data/web/js:__subpackages__"],
 )
 
@@ -50,8 +51,8 @@ filegroup(
     srcs = [
         "aqt_es5",
         "editor",
-        "reviewer",
         "mathjax.js",
+        "reviewer",
         "//qt/aqt/data/web/js/vendor",
     ],
     visibility = ["//qt:__subpackages__"],

repos.bzl

@@ -89,21 +89,8 @@ def register_repos():
     maybe(
         http_archive,
         name = "build_bazel_rules_nodejs",
-        sha256 = "4a5d654a4ccd4a4c24eca5d319d85a88a650edf119601550c95bf400c8cc897e",
+        sha256 = "3635797a96c7bfcd0d265dacd722a07335e64d6ded9834af8d3f1b7ba5a25bba",
-        urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/3.5.1/rules_nodejs-3.5.1.tar.gz"],
+        urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/4.3.0/rules_nodejs-4.3.0.tar.gz"],
-    )
-
-    # native.local_repository(
-    #     name = "esbuild_toolchain",
-    #     path = "../esbuild_toolchain",
-    # )
-
-    maybe(
-        http_archive,
-        name = "esbuild_toolchain",
-        sha256 = "7385dfb2acce6517fcfdb16480cf18d1959bafb83d8cddc0c1e95779609f762c",
-        urls = ["https://github.com/ankitects/esbuild_toolchain/archive/refs/tags/anki-2021-06-01.tar.gz"],
-        strip_prefix = "esbuild_toolchain-anki-2021-06-01",
     )
 
     # sass
@@ -117,11 +104,11 @@ def register_repos():
     maybe(
         http_archive,
         name = "io_bazel_rules_sass",
-        strip_prefix = "rules_sass-anki-2020-12-23",
+        strip_prefix = "rules_sass-d0cda2205a6e9706ded30f7dd7d30c82b1301fbe",
         urls = [
-            "https://github.com/ankitects/rules_sass/archive/anki-2020-12-23.tar.gz",
+            "https://github.com/bazelbuild/rules_sass/archive/d0cda2205a6e9706ded30f7dd7d30c82b1301fbe.zip",
         ],
-        sha256 = "224ae14b8d2166b3ab4c5fa9b2ae1828f30620ac628dc152e6c0859c7853bb97",
+        sha256 = "640ad20f878a6656968e35f35343359446db91a773224ddf52ae110f1e48bb20",
     )
 
     # translations

ts/.eslintrc.js

@@ -16,4 +16,5 @@ module.exports = {
         ],
     },
     env: { browser: true },
+    ignorePatterns: ["backend_proto.d.ts", "*.svelte.d.ts"],
 };

ts/.prettierignore

@@ -1,2 +1,4 @@
 licenses.json
 vendor
+*.svelte.d.ts
+backend_proto.d.ts

ts/BUILD.bazel

@@ -1,30 +1,17 @@
 load("//ts:prettier.bzl", "prettier", "prettier_test")
 load("//ts:sql_format.bzl", "sql_format_setup")
-load("@npm//@bazel/typescript:index.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:index.bzl", "copy_to_bin")
 
 prettier()
 
-prettier_test(
+prettier_test()
-    name = "format_check",
-    srcs = glob([
-        "*.ts",
-        "*.js",
-    ]),
-)
 
 sql_format_setup()
 
-ts_library(
-    name = "image_module_support",
-    srcs = ["images.d.ts"],
-    visibility = ["//visibility:public"],
-)
-
 # Exported files
 #################
 
 exports_files([
-    "tsconfig.json",
     ".prettierrc",
     ".eslintrc.js",
     "licenses.json",
@@ -34,6 +21,14 @@ exports_files([
     "protobuf-no-long.js",
 ])
 
+# a copy needs to be placed in bazel-bin for libs with
+# generated files
+copy_to_bin(
+    name = "tsconfig_bin",
+    srcs = ["tsconfig.json"],
+    visibility = ["//visibility:public"],
+)
+
 alias(
     name = "yarn",
     actual = "@nodejs//:yarn",

ts/change-notetype/BUILD.bazel

@@ -1,9 +1,9 @@
-load("@npm//@bazel/typescript:index.bzl", "ts_library")
 load("//ts:prettier.bzl", "prettier_test")
 load("//ts:eslint.bzl", "eslint_test")
 load("//ts/svelte:svelte.bzl", "compile_svelte", "svelte_check")
 load("//ts:esbuild.bzl", "esbuild")
 load("//ts:compile_sass.bzl", "compile_sass")
+load("//ts:typescript.bzl", "typescript")
 load("//ts:jest.bzl", "jest_test")
 
 compile_sass(
@@ -17,69 +17,44 @@ compile_sass(
     ],
 )
 
-svelte_files = glob(["*.svelte"])
+compile_svelte()
 
-svelte_names = [f.replace(".svelte", "") for f in svelte_files]
+typescript(
-
-compile_svelte(
-    name = "svelte",
-    srcs = svelte_files,
-    deps = [
-        "//ts/components",
-        "//ts/sveltelib",
-        "@npm//@types/bootstrap",
-    ],
-)
-
-ts_library(
     name = "index",
-    srcs = ["index.ts"],
+    srcs = glob(["*.ts"]),
-    deps = [
-        "ChangeNotetypePage",
-        "lib",
-        "//ts/components",
-        "//ts/lib",
-        "@npm//svelte2tsx",
-    ],
-)
-
-ts_library(
-    name = "lib",
-    srcs = [
-        "lib.ts",
-    ],
-    module_name = "change-notetype",
     deps = [
+        ":svelte",
         "//ts/components",
         "//ts/lib",
         "//ts/sveltelib",
+        "@npm//@fluent",
+        "@npm//@types/jest",
         "@npm//lodash-es",
         "@npm//svelte",
+        "@npm//svelte2tsx",
     ],
 )
 
 esbuild(
     name = "change-notetype",
-    args = [
+    args = {
-        "--global-name=anki",
+        "globalName": "anki",
-        "--resolve-extensions=.mjs,.js",
+        "loader": {".svg": "text"},
-        "--log-level=warning",
+    },
-        "--loader:.svg=text",
-    ],
     entry_point = "index.ts",
     output_css = "change-notetype.css",
     visibility = ["//visibility:public"],
     deps = [
-        "index",
         ":base_css",
-        "@npm//bootstrap",
+        ":index",
-        "@npm//marked",
+        ":svelte",
+        "//ts/components",
         "//ts/lib",
         "//ts/sveltelib",
-        "//ts/components",
+        "@npm//bootstrap",
-        "//ts/components:svelte_components",
+        "@npm//marked",
         "@npm//protobufjs",
-    ] + svelte_names,
+    ],
 )
 
 exports_files(["change-notetype.html"])
@@ -87,20 +62,9 @@ exports_files(["change-notetype.html"])
 # Tests
 ################
 
-prettier_test(
+prettier_test()
-    name = "format_check",
-    srcs = glob([
-        "*.ts",
-        "*.svelte",
-    ]),
-)
 
-eslint_test(
+eslint_test()
-    name = "eslint",
-    srcs = glob([
-        "*.ts",
-    ]),
-)
 
 svelte_check(
     name = "svelte_check",
@@ -120,9 +84,6 @@ svelte_check(
 jest_test(
     protobuf = True,
     deps = [
-        ":lib",
+        ":index",
-        "//ts/lib",
-        "@npm//protobufjs",
-        "@npm//svelte",
     ],
 )

ts/change-notetype/ChangeNotetypePage.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 * as tr from "lib/i18n";
+    import * as tr from "../lib/i18n";
     import NotetypeSelector from "./NotetypeSelector.svelte";
     import Mapper from "./Mapper.svelte";
     import { ChangeNotetypeState, MapContext } from "./lib";

ts/change-notetype/Mapper.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 * as tr from "lib/i18n";
+    import * as tr from "../lib/i18n";
     import MapperRow from "./MapperRow.svelte";
     import { ChangeNotetypeState, MapContext } from "./lib";
     import { slide } from "svelte/transition";

ts/change-notetype/NotetypeSelector.svelte

@@ -5,14 +5,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="ts">
     import type { ChangeNotetypeState } from "./lib";
 
-    import StickyHeader from "components/StickyHeader.svelte";
+    import StickyHeader from "../components/StickyHeader.svelte";
-    import ButtonToolbar from "components/ButtonToolbar.svelte";
+    import ButtonToolbar from "../components/ButtonToolbar.svelte";
-    import Item from "components/Item.svelte";
+    import Item from "../components/Item.svelte";
-    import ButtonGroup from "components/ButtonGroup.svelte";
+    import ButtonGroup from "../components/ButtonGroup.svelte";
-    import ButtonGroupItem from "components/ButtonGroupItem.svelte";
+    import ButtonGroupItem from "../components/ButtonGroupItem.svelte";
 
-    import SelectButton from "components/SelectButton.svelte";
+    import SelectButton from "../components/SelectButton.svelte";
-    import SelectOption from "components/SelectOption.svelte";
+    import SelectOption from "../components/SelectOption.svelte";
     import SaveButton from "./SaveButton.svelte";
 
     export let state: ChangeNotetypeState;

ts/change-notetype/SaveButton.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 * as tr from "lib/i18n";
+    import * as tr from "../lib/i18n";
     import type { ChangeNotetypeState } from "./lib";
-    import { withButton } from "components/helpers";
+    import { withButton } from "../components/helpers";
 
-    import ButtonGroup from "components/ButtonGroup.svelte";
+    import ButtonGroup from "../components/ButtonGroup.svelte";
-    import ButtonGroupItem from "components/ButtonGroupItem.svelte";
+    import ButtonGroupItem from "../components/ButtonGroupItem.svelte";
 
-    import LabelButton from "components/LabelButton.svelte";
+    import LabelButton from "../components/LabelButton.svelte";
-    import WithShortcut from "components/WithShortcut.svelte";
+    import WithShortcut from "../components/WithShortcut.svelte";
 
     export let state: ChangeNotetypeState;
 

ts/change-notetype/index.ts

@@ -6,10 +6,10 @@
  */
 
 import { ChangeNotetypeState, getChangeNotetypeInfo, getNotetypeNames } from "./lib";
-import { setupI18n, ModuleName } from "lib/i18n";
+import { setupI18n, ModuleName } from "../lib/i18n";
-import { checkNightMode } from "lib/nightmode";
+import { checkNightMode } from "../lib/nightmode";
 import ChangeNotetypePage from "./ChangeNotetypePage.svelte";
-import { nightModeKey } from "components/context-keys";
+import { nightModeKey } from "../components/context-keys";
 
 export async function changeNotetypePage(
     target: HTMLDivElement,

ts/change-notetype/lib.test.ts

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

ts/change-notetype/lib.ts

@@ -5,8 +5,8 @@
 @typescript-eslint/no-non-null-assertion: "off",
  */
 
-import { Notetypes } from "lib/proto";
+import { Notetypes } from "../lib/proto";
-import { postRequest } from "lib/postrequest";
+import { postRequest } from "../lib/postrequest";
 import { readable, Readable } from "svelte/store";
 import { isEqual } from "lodash-es";
 

ts/change-notetype/tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "extends": "../tsconfig.json",
+    "include": ["*"],
+    "references": [
+        { "path": "../lib" },
+        { "path": "../sveltelib" },
+        { "path": "../components" }
+    ],
+    "compilerOptions": {
+        "types": ["jest"]
+    }
+}

ts/components/BUILD.bazel

@@ -1,70 +1,33 @@
-load("@npm//@bazel/typescript:index.bzl", "ts_library")
 load("//ts/svelte:svelte.bzl", "compile_svelte", "svelte_check")
 load("//ts:prettier.bzl", "prettier_test")
 load("//ts:eslint.bzl", "eslint_test")
-load("//ts:esbuild.bzl", "esbuild")
+load("//ts:typescript.bzl", "typescript")
 
-svelte_files = glob(["*.svelte"])
+compile_svelte()
 
-svelte_names = [f.replace(".svelte", "") for f in svelte_files]
+typescript(
-
-filegroup(
-    name = "svelte_components",
-    srcs = svelte_names,
-    visibility = ["//visibility:public"],
-)
-
-compile_svelte(
-    name = "svelte",
-    srcs = svelte_files,
-    visibility = ["//visibility:public"],
-    deps = [
-        "//ts/lib",
-        "//ts/sass:base_lib",
-        "//ts/sass:button_mixins_lib",
-        "//ts/sass:scrollbar_lib",
-        "//ts/sass/bootstrap",
-    ],
-)
-
-ts_library(
     name = "components",
     srcs = glob(
         ["*.ts"],
         exclude = ["*.test.ts"],
     ),
-    module_name = "components",
-    tsconfig = "//ts:tsconfig.json",
-    visibility = ["//visibility:public"],
     deps = [
+        ":svelte",
         "//ts/lib",
         "//ts/sveltelib",
         "@npm//@popperjs/core",
         "@npm//@types/bootstrap",
         "@npm//bootstrap",
         "@npm//svelte",
-    ] + svelte_names,
+    ],
 )
 
 # Tests
 ################
 
-prettier_test(
+prettier_test()
-    name = "format_check",
-    srcs = glob([
-        "*.ts",
-        "*.svelte",
-    ]),
-)
 
-eslint_test(
+eslint_test()
-    name = "eslint",
-    srcs = glob(
-        [
-            "*.ts",
-        ],
-    ),
-)
 
 svelte_check(
     name = "svelte_check",
@@ -77,5 +40,6 @@ svelte_check(
         "//ts/sass:scrollbar_lib",
         "//ts/sass/bootstrap",
         "@npm//@types/bootstrap",
+        "//ts/sveltelib:sveltelib_pkg",
     ],
 )

ts/components/ButtonToolbar.svelte

@@ -95,7 +95,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </div>
 
 <style lang="scss">
-    @use 'scrollbar';
+    @use "scrollbar";
 
     .nightMode {
         @include scrollbar.night-mode;

ts/components/DropdownItem.svelte

@@ -39,7 +39,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </button>
 
 <style lang="scss">
-    @use 'button-mixins' as button;
+    @use "button-mixins" as button;
 
     button {
         display: flex;

ts/components/WithShortcut.svelte

@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="typescript">
     import { onDestroy } from "svelte";
-    import { registerShortcut, getPlatformString } from "lib/shortcuts";
+    import { registerShortcut, getPlatformString } from "../lib/shortcuts";
 
     export let shortcut: string;
 

ts/components/tsconfig.json

@@ -0,0 +1,5 @@
+{
+    "extends": "../tsconfig.json",
+    "include": ["*"],
+    "references": [{ "path": "../lib" }, { "path": "../sveltelib" }]
+}

ts/congrats/BUILD.bazel

@@ -4,6 +4,7 @@ load("//ts:eslint.bzl", "eslint_test")
 load("//ts/svelte:svelte.bzl", "svelte", "svelte_check")
 load("//ts:esbuild.bzl", "esbuild")
 load("//ts:compile_sass.bzl", "compile_sass")
+load("//ts:typescript.bzl", "typescript")
 
 compile_sass(
     srcs = ["congrats-base.scss"],
@@ -20,31 +21,26 @@ svelte(
     entry_point = "CongratsPage.svelte",
 )
 
-ts_library(
+typescript(
     name = "index",
-    srcs = ["index.ts"],
+    srcs = [
+        "index.ts",
+        "lib.ts",
+    ],
     deps = [
         "CongratsPage",
-        "lib",
         "//ts/lib",
+        "@npm//@fluent",
         "@npm//svelte",
         "@npm//svelte2tsx",
     ],
 )
 
-ts_library(
-    name = "lib",
-    srcs = ["lib.ts"],
-    deps = ["//ts/lib"],
-)
-
 esbuild(
     name = "congrats",
-    args = [
+    args = {
-        "--global-name=anki",
+        "globalName": "anki",
-        "--resolve-extensions=.mjs,.js",
+    },
-        "--log-level=warning",
-    ],
     entry_point = "index.ts",
     output_css = "congrats.css",
     visibility = ["//visibility:public"],
@@ -62,25 +58,16 @@ exports_files(["congrats.html"])
 # Tests
 ################
 
-prettier_test(
+prettier_test()
-    name = "format_check",
-    srcs = glob([
-        "*.ts",
-        "*.svelte",
-    ]),
-)
 
-eslint_test(
+eslint_test()
-    name = "eslint",
-    srcs = glob([
-        "*.ts",
-    ]),
-)
 
 svelte_check(
     name = "svelte_check",
     srcs = glob([
         "*.ts",
         "*.svelte",
-    ]),
+    ]) + [
+        "//ts/lib:lib_pkg",
+    ],
 )

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 type { Scheduler } from "lib/proto";
+    import type { Scheduler } from "../lib/proto";
     import { buildNextLearnMsg } from "./lib";
-    import { bridgeLink } from "lib/bridgecommand";
+    import { bridgeLink } from "../lib/bridgecommand";
 
     export let info: Scheduler.CongratsInfoResponse;
-    import * as tr from "lib/i18n";
+    import * as tr from "../lib/i18n";
 
     const congrats = tr.schedulingCongratulationsFinished();
     let nextLearnMsg: string;

ts/congrats/CongratsPage.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/congrats/CongratsPage.svelte.d.ts

ts/congrats/congrats-base.scss

@@ -1,5 +1,5 @@
-@use 'core';
+@use "core";
-@use 'scrollbar';
+@use "scrollbar";
 
 .night-mode {
     @include scrollbar.night-mode;

ts/congrats/index.ts

@@ -2,8 +2,8 @@
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 import { getCongratsInfo } from "./lib";
-import { setupI18n, ModuleName } from "lib/i18n";
+import { setupI18n, ModuleName } from "../lib/i18n";
-import { checkNightMode } from "lib/nightmode";
+import { checkNightMode } from "../lib/nightmode";
 
 import CongratsPage from "./CongratsPage.svelte";
 

ts/congrats/lib.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 { Scheduler } from "lib/proto";
+import { Scheduler } from "../lib/proto";
-import { postRequest } from "lib/postrequest";
+import { postRequest } from "../lib/postrequest";
-import { naturalUnit, unitAmount, unitName } from "lib/time";
+import { naturalUnit, unitAmount, unitName } from "../lib/time";
 
-import * as tr from "lib/i18n";
+import * as tr from "../lib/i18n";
 
 export async function getCongratsInfo(): Promise<Scheduler.CongratsInfoResponse> {
     return Scheduler.CongratsInfoResponse.decode(

ts/congrats/tsconfig.json

@@ -0,0 +1,5 @@
+{
+    "extends": "../tsconfig.json",
+    "include": ["*"],
+    "references": [{ "path": "../lib" }]
+}

ts/deck-options/Addons.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/Addons.svelte.d.ts

ts/deck-options/AdvancedOptions.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 * as tr from "lib/i18n";
+    import * as tr from "../lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
-    import Item from "components/Item.svelte";
+    import Item from "../components/Item.svelte";
     import SpinBoxRow from "./SpinBoxRow.svelte";
     import SpinBoxFloatRow from "./SpinBoxFloatRow.svelte";
     import type { DeckOptionsState } from "./lib";

ts/deck-options/AdvancedOptions.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/AdvancedOptions.svelte.d.ts

ts/deck-options/AudioOptions.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 * as tr from "lib/i18n";
+    import * as tr from "../lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
-    import Item from "components/Item.svelte";
+    import Item from "../components/Item.svelte";
     import SwitchRow from "./SwitchRow.svelte";
     import type { DeckOptionsState } from "./lib";
 

ts/deck-options/AudioOptions.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/AudioOptions.svelte.d.ts

ts/deck-options/BUILD.bazel

@@ -1,4 +1,3 @@
-load("@npm//@bazel/typescript:index.bzl", "ts_library")
 load("//ts:prettier.bzl", "prettier_test")
 load("//ts:eslint.bzl", "eslint_test")
 load("//ts/svelte:svelte.bzl", "compile_svelte", "svelte", "svelte_check")
@@ -6,6 +5,7 @@ load("//ts:esbuild.bzl", "esbuild")
 load("//ts:vendor.bzl", "copy_bootstrap_icons")
 load("//ts:compile_sass.bzl", "compile_sass")
 load("//ts:jest.bzl", "jest_test")
+load("//ts:typescript.bzl", "typescript")
 
 compile_sass(
     srcs = ["deck-options-base.scss"],
@@ -18,58 +18,23 @@ compile_sass(
     ],
 )
 
-svelte_files = glob(["*.svelte"])
+compile_svelte()
 
-svelte_names = [f.replace(".svelte", "") for f in svelte_files]
+typescript(
-
-compile_svelte(
-    name = "svelte",
-    srcs = svelte_files,
-    deps = [
-        "//ts/components",
-        "//ts/sveltelib",
-        "@npm//@types/bootstrap",
-        "@npm//@types/marked",
-    ],
-)
-
-copy_bootstrap_icons(
-    name = "bootstrap-icons",
-    icons = [
-        "arrow-counterclockwise.svg",
-        "info-circle.svg",
-        "gear.svg",
-    ],
-)
-
-ts_library(
     name = "index",
-    srcs = ["index.ts"],
+    srcs = glob(
+        ["*.ts"],
+        exclude = ["*.svelte.d.ts"],
+    ),
     deps = [
-        "DeckOptionsPage",
+        ":svelte",
-        "lib",
         "//ts/components",
         "//ts/lib",
         "//ts/sveltelib",
+        "@npm//@fluent",
         "@npm//@popperjs",
-        "@npm//svelte2tsx",
+        "@npm//@types/jest",
-    ],
+        "@npm//bootstrap-icons",
-)
-
-ts_library(
-    name = "lib",
-    srcs = [
-        "icons.ts",
-        "lib.ts",
-        "steps.ts",
-        "strings.ts",
-    ],
-    module_name = "deckoptions",
-    deps = [
-        "//ts:image_module_support",
-        "//ts/components",
-        "//ts/lib",
-        "//ts/sveltelib",
         "@npm//lodash-es",
         "@npm//svelte",
     ],
@@ -77,27 +42,24 @@ ts_library(
 
 esbuild(
     name = "deck-options",
-    args = [
+    args = {
-        "--global-name=anki",
+        "globalName": "anki",
-        "--resolve-extensions=.mjs,.js",
+        "loader": {".svg": "text"},
-        "--log-level=warning",
+    },
-        "--loader:.svg=text",
-    ],
     entry_point = "index.ts",
     output_css = "deck-options.css",
     visibility = ["//visibility:public"],
     deps = [
         "index",
-        ":bootstrap-icons",
         ":base_css",
+        ":svelte",
+        "//ts/components",
+        "//ts/lib",
+        "//ts/sveltelib",
         "@npm//bootstrap",
         "@npm//marked",
         "@npm//protobufjs",
-        "//ts/lib",
+    ],
-        "//ts/sveltelib",
-        "//ts/components",
-        "//ts/components:svelte_components",
-    ] + svelte_names,
 )
 
 exports_files(["deck-options.html"])
@@ -105,20 +67,9 @@ exports_files(["deck-options.html"])
 # Tests
 ################
 
-prettier_test(
+prettier_test()
-    name = "format_check",
-    srcs = glob([
-        "*.ts",
-        "*.svelte",
-    ]),
-)
 
-eslint_test(
+eslint_test()
-    name = "eslint",
-    srcs = glob([
-        "*.ts",
-    ]),
-)
 
 svelte_check(
     name = "svelte_check",
@@ -133,15 +84,13 @@ svelte_check(
         "@npm//@types/lodash-es",
         "@npm//@types/marked",
         "//ts/components",
+        "//ts/sveltelib:sveltelib_pkg",
     ],
 )
 
 jest_test(
     protobuf = True,
     deps = [
-        ":lib",
+        ":index",
-        "//ts/lib",
-        "@npm//protobufjs",
-        "@npm//svelte",
     ],
 )

ts/deck-options/BuryOptions.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 * as tr from "lib/i18n";
+    import * as tr from "../lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
-    import Item from "components/Item.svelte";
+    import Item from "../components/Item.svelte";
     import SwitchRow from "./SwitchRow.svelte";
     import type { DeckOptionsState } from "./lib";
 

ts/deck-options/BuryOptions.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/BuryOptions.svelte.d.ts

ts/deck-options/CardStateCustomizer.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 * as tr from "lib/i18n";
+    import * as tr from "../lib/i18n";
     import TooltipLabel from "./TooltipLabel.svelte";
     import RevertButton from "./RevertButton.svelte";
     import Row from "./Row.svelte";

ts/deck-options/CardStateCustomizer.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/CardStateCustomizer.svelte.d.ts

ts/deck-options/CheckBox.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/CheckBox.svelte.d.ts

ts/deck-options/CheckBoxRow.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/CheckBoxRow.svelte.d.ts

ts/deck-options/Col.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/Col.svelte.d.ts

ts/deck-options/ConfigSelector.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/i18n";
+    import * as tr from "../lib/i18n";
     import { getContext } from "svelte";
-    import { modalsKey } from "components/context-keys";
+    import { modalsKey } from "../components/context-keys";
     import type { DeckOptionsState, ConfigListEntry } from "./lib";
     import type Modal from "bootstrap/js/dist/modal";
 
     import TextInputModal from "./TextInputModal.svelte";
-    import StickyHeader from "components/StickyHeader.svelte";
+    import StickyHeader from "../components/StickyHeader.svelte";
-    import ButtonToolbar from "components/ButtonToolbar.svelte";
+    import ButtonToolbar from "../components/ButtonToolbar.svelte";
-    import Item from "components/Item.svelte";
+    import Item from "../components/Item.svelte";
-    import ButtonGroup from "components/ButtonGroup.svelte";
+    import ButtonGroup from "../components/ButtonGroup.svelte";
-    import ButtonGroupItem from "components/ButtonGroupItem.svelte";
+    import ButtonGroupItem from "../components/ButtonGroupItem.svelte";
 
-    import SelectButton from "components/SelectButton.svelte";
+    import SelectButton from "../components/SelectButton.svelte";
-    import SelectOption from "components/SelectOption.svelte";
+    import SelectOption from "../components/SelectOption.svelte";
     import SaveButton from "./SaveButton.svelte";
 
     export let state: DeckOptionsState;

ts/deck-options/ConfigSelector.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/ConfigSelector.svelte.d.ts

ts/deck-options/DailyLimits.svelte

@@ -3,9 +3,9 @@
     License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
-    import * as tr from "lib/i18n";
+    import * as tr from "../lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
-    import Item from "components/Item.svelte";
+    import Item from "../components/Item.svelte";
     import SpinBoxRow from "./SpinBoxRow.svelte";
     import Warning from "./Warning.svelte";
     import type { DeckOptionsState } from "./lib";

ts/deck-options/DailyLimits.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/DailyLimits.svelte.d.ts

ts/deck-options/DeckOptionsPage.svelte

@@ -4,8 +4,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import ConfigSelector from "./ConfigSelector.svelte";
-    import Container from "components/Container.svelte";
+    import Container from "../components/Container.svelte";
-    import Item from "components/Item.svelte";
+    import Item from "../components/Item.svelte";
     import DailyLimits from "./DailyLimits.svelte";
     import DisplayOrder from "./DisplayOrder.svelte";
     import NewOptions from "./NewOptions.svelte";
@@ -19,7 +19,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type { DeckOptionsState } from "./lib";
     import type { Writable } from "svelte/store";
     import HtmlAddon from "./HtmlAddon.svelte";
-    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+    import type { DynamicSvelteComponent } from "../sveltelib/dynamicComponent";
 
     export let state: DeckOptionsState;
     let addons = state.addonComponents;

ts/deck-options/DeckOptionsPage.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/DeckOptionsPage.svelte.d.ts

ts/deck-options/DisplayOrder.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 * as tr from "lib/i18n";
+    import * as tr from "../lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
-    import Item from "components/Item.svelte";
+    import Item from "../components/Item.svelte";
     import EnumSelectorRow from "./EnumSelectorRow.svelte";
 
     import type { DeckOptionsState } from "./lib";

ts/deck-options/DisplayOrder.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/DisplayOrder.svelte.d.ts

ts/deck-options/EnumSelector.svelte

@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import { getContext } from "svelte";
-    import { nightModeKey } from "components/context-keys";
+    import { nightModeKey } from "../components/context-keys";
 
     export let choices: string[];
     export let value: number = 0;

ts/deck-options/EnumSelector.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/EnumSelector.svelte.d.ts

ts/deck-options/EnumSelectorRow.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/EnumSelectorRow.svelte.d.ts

ts/deck-options/HtmlAddon.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/HtmlAddon.svelte.d.ts

ts/deck-options/Label.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/Label.svelte.d.ts

ts/deck-options/LapseOptions.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 * as tr from "lib/i18n";
+    import * as tr from "../lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
-    import Item from "components/Item.svelte";
+    import Item from "../components/Item.svelte";
     import StepsInputRow from "./StepsInputRow.svelte";
     import SpinBoxRow from "./SpinBoxRow.svelte";
     import EnumSelectorRow from "./EnumSelectorRow.svelte";

ts/deck-options/LapseOptions.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/LapseOptions.svelte.d.ts

ts/deck-options/NewOptions.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 * as tr from "lib/i18n";
+    import * as tr from "../lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
-    import Item from "components/Item.svelte";
+    import Item from "../components/Item.svelte";
     import StepsInputRow from "./StepsInputRow.svelte";
     import SpinBoxRow from "./SpinBoxRow.svelte";
     import EnumSelectorRow from "./EnumSelectorRow.svelte";

ts/deck-options/NewOptions.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/NewOptions.svelte.d.ts

ts/deck-options/RevertButton.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 * as tr from "lib/i18n";
+    import * as tr from "../lib/i18n";
     import type Dropdown from "bootstrap/js/dist/dropdown";
-    import WithDropdown from "components/WithDropdown.svelte";
+    import WithDropdown from "../components/WithDropdown.svelte";
-    import DropdownMenu from "components/DropdownMenu.svelte";
+    import DropdownMenu from "../components/DropdownMenu.svelte";
-    import DropdownItem from "components/DropdownItem.svelte";
+    import DropdownItem from "../components/DropdownItem.svelte";
-    import Badge from "components/Badge.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 { touchDeviceKey } from "../components/context-keys";
     import { getContext } from "svelte";
 
     type T = unknown;

ts/deck-options/RevertButton.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/RevertButton.svelte.d.ts

ts/deck-options/Row.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/Row.svelte.d.ts

ts/deck-options/SaveButton.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/i18n";
+    import * as tr from "../lib/i18n";
     import { createEventDispatcher } from "svelte";
     import type { DeckOptionsState } from "./lib";
     import type Dropdown from "bootstrap/js/dist/dropdown";
-    import { withButton } from "components/helpers";
+    import { withButton } from "../components/helpers";
 
-    import ButtonGroup from "components/ButtonGroup.svelte";
+    import ButtonGroup from "../components/ButtonGroup.svelte";
-    import ButtonGroupItem from "components/ButtonGroupItem.svelte";
+    import ButtonGroupItem from "../components/ButtonGroupItem.svelte";
 
-    import LabelButton from "components/LabelButton.svelte";
+    import LabelButton from "../components/LabelButton.svelte";
-    import DropdownMenu from "components/DropdownMenu.svelte";
+    import DropdownMenu from "../components/DropdownMenu.svelte";
-    import DropdownItem from "components/DropdownItem.svelte";
+    import DropdownItem from "../components/DropdownItem.svelte";
-    import DropdownDivider from "components/DropdownDivider.svelte";
+    import DropdownDivider from "../components/DropdownDivider.svelte";
-    import WithDropdown from "components/WithDropdown.svelte";
+    import WithDropdown from "../components/WithDropdown.svelte";
-    import WithShortcut from "components/WithShortcut.svelte";
+    import WithShortcut from "../components/WithShortcut.svelte";
 
     const dispatch = createEventDispatcher();
 

ts/deck-options/SaveButton.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/SaveButton.svelte.d.ts

ts/deck-options/SpinBox.svelte

@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import { getContext } from "svelte";
-    import { nightModeKey } from "components/context-keys";
+    import { nightModeKey } from "../components/context-keys";
 
     export let value: number;
     export let min = 1;

ts/deck-options/SpinBox.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/SpinBox.svelte.d.ts

ts/deck-options/SpinBoxFloat.svelte

@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import { getContext } from "svelte";
-    import { nightModeKey } from "components/context-keys";
+    import { nightModeKey } from "../components/context-keys";
 
     export let value: number;
     export let min = 1;

ts/deck-options/SpinBoxFloat.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/SpinBoxFloat.svelte.d.ts

ts/deck-options/SpinBoxFloatRow.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/SpinBoxFloatRow.svelte.d.ts

ts/deck-options/SpinBoxRow.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/SpinBoxRow.svelte.d.ts

ts/deck-options/StepsInput.svelte

@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import { getContext } from "svelte";
-    import { nightModeKey } from "components/context-keys";
+    import { nightModeKey } from "../components/context-keys";
     import { stepsToString, stringToSteps } from "./steps";
 
     export let value: number[];

ts/deck-options/StepsInput.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/StepsInput.svelte.d.ts

ts/deck-options/StepsInputRow.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/StepsInputRow.svelte.d.ts

ts/deck-options/Switch.svelte

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

ts/deck-options/Switch.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/Switch.svelte.d.ts

ts/deck-options/SwitchRow.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/SwitchRow.svelte.d.ts

ts/deck-options/TextInputModal.svelte

@@ -7,7 +7,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     @typescript-eslint/no-non-null-assertion: "off",
     */
     import { onMount, onDestroy, getContext } from "svelte";
-    import { nightModeKey, modalsKey } from "components/context-keys";
+    import { nightModeKey, modalsKey } from "../components/context-keys";
     import Modal from "bootstrap/js/dist/modal";
 
     export let title: string;

ts/deck-options/TextInputModal.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/TextInputModal.svelte.d.ts

ts/deck-options/TimerOptions.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 * as tr from "lib/i18n";
+    import * as tr from "../lib/i18n";
     import TitledContainer from "./TitledContainer.svelte";
-    import Item from "components/Item.svelte";
+    import Item from "../components/Item.svelte";
     import SpinBoxRow from "./SpinBoxRow.svelte";
     import SwitchRow from "./SwitchRow.svelte";
     import type { DeckOptionsState } from "./lib";

ts/deck-options/TimerOptions.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/TimerOptions.svelte.d.ts

ts/deck-options/TitledContainer.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 Section from "components/Section.svelte";
+    import Section from "../components/Section.svelte";
 
     export let title: string;
     export let api: Record<string, never> | undefined = undefined;

ts/deck-options/TitledContainer.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/TitledContainer.svelte.d.ts

ts/deck-options/TooltipLabel.svelte

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

ts/deck-options/TooltipLabel.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/TooltipLabel.svelte.d.ts

ts/deck-options/Warning.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/deck-options/Warning.svelte.d.ts

ts/deck-options/icons.ts

@@ -1,8 +1,9 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-// Import icons from bootstrap
+/// <reference types="../lib/image-import" />
 
-export { default as revertIcon } from "./arrow-counterclockwise.svg";
+// Import icons from bootstrap
-export { default as infoCircle } from "./info-circle.svg";
+export { default as revertIcon } from "bootstrap-icons/icons/arrow-counterclockwise.svg";
-export { default as gearIcon } from "./gear.svg";
+export { default as infoCircle } from "bootstrap-icons/icons/info-circle.svg";
+export { default as gearIcon } from "bootstrap-icons/icons/gear.svg";

ts/deck-options/index.ts

@@ -5,13 +5,13 @@
 @typescript-eslint/no-explicit-any: "off",
  */
 
-import "sveltelib/export-runtime";
+import "../sveltelib/export-runtime";
 
 import { getDeckOptionsInfo, DeckOptionsState } from "./lib";
-import { setupI18n, ModuleName } from "lib/i18n";
+import { setupI18n, ModuleName } from "../lib/i18n";
-import { checkNightMode } from "lib/nightmode";
+import { checkNightMode } from "../lib/nightmode";
 import DeckOptionsPage from "./DeckOptionsPage.svelte";
-import { nightModeKey, touchDeviceKey, modalsKey } from "components/context-keys";
+import { nightModeKey, touchDeviceKey, modalsKey } from "../components/context-keys";
 
 export async function deckOptions(
     target: HTMLDivElement,

ts/deck-options/lib.test.ts

@@ -5,7 +5,7 @@
 @typescript-eslint/no-explicit-any: "off",
  */
 
-import { DeckConfig } from "lib/proto";
+import { DeckConfig } from "../lib/proto";
 import { DeckOptionsState } from "./lib";
 import { get } from "svelte/store";
 

ts/deck-options/lib.ts

@@ -5,12 +5,12 @@
 @typescript-eslint/no-non-null-assertion: "off",
  */
 
-import { DeckConfig } from "lib/proto";
+import { DeckConfig } from "../lib/proto";
-import { postRequest } from "lib/postrequest";
+import { postRequest } from "../lib/postrequest";
 import { Writable, writable, get, Readable, readable } from "svelte/store";
 import { isEqual, cloneDeep } from "lodash-es";
-import * as tr from "lib/i18n";
+import * as tr from "../lib/i18n";
-import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+import type { DynamicSvelteComponent } from "../sveltelib/dynamicComponent";
 
 export async function getDeckOptionsInfo(
     deckId: 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 { TimespanUnit, naturalWholeUnit, unitAmount, unitSeconds } from "../lib/time";
 
 function unitSuffix(unit: TimespanUnit): string {
     switch (unit) {

ts/deck-options/strings.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 * as tr from "lib/i18n";
+import * as tr from "../lib/i18n";
 
 export const reviewMixChoices = (): string[] => [
     tr.deckConfigReviewMixMixWithReviews(),

ts/deck-options/tsconfig.json

@@ -0,0 +1,12 @@
+{
+    "extends": "../tsconfig.json",
+    "include": ["*"],
+    "references": [
+        { "path": "../lib" },
+        { "path": "../sveltelib" },
+        { "path": "../components" }
+    ],
+    "compilerOptions": {
+        "types": ["jest"]
+    }
+}

ts/editable/BUILD.bazel

@@ -1,29 +1,9 @@
-load("@npm//@bazel/typescript:index.bzl", "ts_library")
 load("//ts/svelte:svelte.bzl", "compile_svelte", "svelte_check")
 load("//ts:prettier.bzl", "prettier_test")
 load("//ts:eslint.bzl", "eslint_test")
 load("//ts:esbuild.bzl", "esbuild")
-load("//ts:vendor.bzl", "copy_mdi_icons")
 load("//ts:compile_sass.bzl", "compile_sass")
-
+load("//ts:typescript.bzl", "typescript")
-svelte_files = glob(["*.svelte"])
-
-svelte_names = [f.replace(".svelte", "") for f in svelte_files]
-
-filegroup(
-    name = "svelte_components",
-    srcs = svelte_names,
-    visibility = ["//visibility:public"],
-)
-
-compile_svelte(
-    name = "svelte",
-    srcs = svelte_files,
-    visibility = ["//visibility:public"],
-    deps = [
-        "//ts/components",
-    ],
-)
 
 compile_sass(
     srcs = [
@@ -37,48 +17,38 @@ compile_sass(
     ],
 )
 
-copy_mdi_icons(
+compile_svelte()
-    name = "mdi-icons",
-    icons = [
-        "math-integral-box.svg",
-    ],
-    visibility = ["//visibility:public"],
-)
 
-ts_library(
+typescript(
     name = "editable",
-    srcs = glob(["*.ts"]),
+    srcs = glob(
-    module_name = "editable",
+        ["*.ts"],
-    tsconfig = "//ts:tsconfig.json",
+        exclude = ["*.svelte.d.ts"],
-    visibility = ["//visibility:public"],
+    ),
     deps = [
+        ":svelte",
+        "//ts/components",
         "//ts/lib",
         "//ts/sveltelib",
-        "//ts/components",
-        "//ts:image_module_support",
-        "@npm//svelte",
-        "@npm//mathjax-full",
         "@npm//mathjax",
-    ] + svelte_names,
+        "@npm//mathjax-full",
+        "@npm//svelte",
+    ],
 )
 
 esbuild(
     name = "editable-build",
-    args = [
+    args = {
-        "--loader:.svg=text",
+        "loader": {".svg": "text"},
-        "--resolve-extensions=.mjs,.js",
+    },
-        "--log-level=warning",
-    ],
     entry_point = "index.ts",
     output_css = "editable-build.css",
     visibility = ["//visibility:public"],
     deps = [
-        "mdi-icons",
         "editable",
         "editable_scss",
-        "svelte_components",
         "//ts/components",
-        "//ts/components:svelte_components",
+        "@npm//@mdi",
         "@npm//protobufjs",
     ],
 )
@@ -86,22 +56,9 @@ esbuild(
 # Tests
 ################
 
-prettier_test(
+prettier_test()
-    name = "format_check",
-    srcs = glob([
-        "*.ts",
-        "*.svelte",
-    ]),
-)
 
-eslint_test(
+eslint_test()
-    name = "eslint",
-    srcs = glob(
-        [
-            "*.ts",
-        ],
-    ),
-)
 
 svelte_check(
     name = "svelte_check",

ts/editable/Mathjax.svelte

@@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import { onMount, onDestroy, getContext, tick } from "svelte";
-    import { nightModeKey } from "components/context-keys";
+    import { nightModeKey } from "../components/context-keys";
     import { convertMathjax } from "./mathjax";
 
     export let mathjax: string;

ts/editable/Mathjax.svelte.d.ts

@@ -0,0 +1 @@
+../../bazel-bin/ts/editable/Mathjax.svelte.d.ts

ts/editable/editable-base.scss

@@ -1,4 +1,4 @@
-@use 'scrollbar';
+@use "scrollbar";
 
 anki-editable {
     display: block;

ts/editable/editable.ts

@@ -1,15 +1,17 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
+/// <reference types="../lib/shadow-dom" />
+
 /* eslint
 @typescript-eslint/no-non-null-assertion: "off",
  */
 
 import type { DecoratedElement } from "./decorated";
 import { decoratedComponents } from "./decorated";
-import { bridgeCommand } from "lib/bridgecommand";
+import { bridgeCommand } from "../lib/bridgecommand";
-import { elementIsBlock, getBlockElement } from "lib/dom";
+import { elementIsBlock, getBlockElement } from "../lib/dom";
-import { wrapInternal } from "lib/wrap";
+import { wrapInternal } from "../lib/wrap";
 
 export function caretToEnd(node: Node): void {
     const range = document.createRange();

ts/editable/icons.ts

@@ -1,4 +1,6 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
-export { default as mathIcon } from "./math-integral-box.svg";
+/// <reference types="../lib/image-import" />
+
+export { default as mathIcon } from "@mdi/svg/svg/math-integral-box.svg";

ts/editable/mathjax-component.ts

@@ -10,8 +10,8 @@ import "mathjax/es5/tex-svg-full";
 
 import type { DecoratedElement, DecoratedElementConstructor } from "./decorated";
 import { decoratedComponents } from "./decorated";
-import { nodeIsElement } from "lib/dom";
+import { nodeIsElement } from "../lib/dom";
-import { nightModeKey } from "components/context-keys";
+import { nightModeKey } from "../components/context-keys";
 
 import Mathjax_svelte from "./Mathjax.svelte";
 

ts/editable/tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "extends": "../tsconfig.json",
+    "include": ["*"],
+    "references": [
+        { "path": "../components" },
+        { "path": "../lib" },
+        { "path": "../sveltelib" }
+    ]
+}