Fix most of svelte-check issues for editor-toolbar

ts/deckconfig/BUILD.bazel

@@ -7,8 +7,8 @@ load("//ts:vendor.bzl", "copy_bootstrap_icons")
 load("//ts:compile_sass.bzl", "compile_sass")
 
 compile_sass(
-    srcs = ["deckconfig-base.scss"],
     group = "base_css",
+    srcs = ["deckconfig-base.scss"],
     visibility = ["//visibility:public"],
     deps = [
         "//ts/sass:base_lib",

ts/editor-toolbar/BUILD.bazel

@@ -23,6 +23,7 @@ compile_sass(
         "bootstrap.scss",
     ],
     deps = [
+        "//ts/bootstrap:scss",
         "//ts/sass:button_mixins_lib",
     ],
     visibility = ["//visibility:public"],
@@ -55,6 +56,7 @@ ts_library(
         "@npm//svelte",
         "@npm//bootstrap",
         "@npm//@popperjs/core",
+        "@npm//@types/bootstrap",
     ],
 )
 

ts/editor-toolbar/ButtonGroup.svelte

@@ -7,7 +7,7 @@
     export let className = "";
     export let buttons: ToolbarItem[];
 
-    function filterHidden({ hidden, ...props }) {
+    function filterHidden({ hidden = false, ...props }) {
         return props;
     }
 

ts/editor-toolbar/CommandIconButton.svelte

@@ -36,11 +36,11 @@
 <script lang="typescript">
     import SquareButton from "./SquareButton.svelte";
 
-    export let id;
+    export let id: string;
     export let className = "";
     export let tooltip: string;
 
-    export let icon;
+    export let icon: string;
     export let command: string;
     export let activatable = true;
     export let disables = true;

ts/editor-toolbar/DropdownMenu.svelte

@@ -1,12 +1,12 @@
 <script lang="typescript">
-    import type { SvelteComponentDefinition } from "./types";
+    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
     import { getContext } from "svelte";
     import { nightModeKey } from "./contextKeys";
 
     export let id: string;
-    export let menuItems: SvelteComponentDefinition[];
+    export let menuItems: DynamicSvelteComponent[];
 
-    const nightMode = getContext(nightModeKey);
+    const nightMode = getContext<boolean>(nightModeKey);
 </script>
 
 <style lang="scss">

ts/editor-toolbar/LabelButton.svelte

@@ -1,4 +1,5 @@
 <script lang="typescript">
+    import type { Readable } from "svelte/store";
     import { onMount, createEventDispatcher, getContext } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
 
@@ -24,10 +25,10 @@
         return `btn ${className}`;
     }
 
-    const disabled = getContext(disabledKey);
+    const disabled = getContext<Readable<boolean>>(disabledKey);
     $: _disabled = disables && $disabled;
 
-    const nightMode = getContext(nightModeKey);
+    const nightMode = getContext<boolean>(nightModeKey);
 
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));

ts/editor-toolbar/SelectButton.svelte

@@ -1,4 +1,5 @@
 <script lang="typescript">
+    import type { Readable } from "svelte/store";
     import { onMount, createEventDispatcher, getContext } from "svelte";
     import { disabledKey } from "./contextKeys";
     import SelectOption from "./SelectOption.svelte";
@@ -25,7 +26,7 @@
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));
 
-    const disabled = getContext(disabledKey);
+    const disabled = getContext<Readable<boolean>>(disabledKey);
     $: _disabled = disables && $disabled;
 </script>
 

ts/editor-toolbar/SquareButton.svelte

@@ -25,10 +25,10 @@
         return `btn ${className}`;
     }
 
-    const disabled = getContext(disabledKey);
+    const disabled = getContext<Readable<boolean>>(disabledKey);
     $: _disabled = disables && $disabled;
 
-    const nightMode = getContext(nightModeKey);
+    const nightMode = getContext<boolean>(nightModeKey);
 
     const dispatch = createEventDispatcher();
     onMount(() => dispatch("mount", { button: buttonRef }));

ts/editor-toolbar/WithDropdownMenu.svelte

@@ -1,5 +1,7 @@
 <script lang="typescript">
+    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
     import type { ToolbarItem } from "./types";
+
     import Dropdown from "bootstrap/js/dist/dropdown";
 
     /* Bootstrap dropdown are normally declared alongside the associated button
@@ -30,13 +32,13 @@
          * be displayed outside of the visible area
          */
         const dropdown = new Dropdown(button);
-        const menu = button.getRootNode().getElementById(menuId);
+        const menu = (button.getRootNode() as Document /* or shadow root */).getElementById(menuId);
 
         if (!menu) {
             console.log(`Could not find menu "${menuId}" for dropdown menu.`);
         }
 
-        dropdown._menu = menu;
+        (dropdown as any)._menu = menu;
     }
 </script>
 

ts/editor-toolbar/bootstrap.scss

@@ -1,8 +1,8 @@
-@import "ts/node_modules/bootstrap/scss/functions";
+@import "ts/bootstrap/functions";
-@import "ts/node_modules/bootstrap/scss/variables";
+@import "ts/bootstrap/variables";
-@import "ts/node_modules/bootstrap/scss/mixins";
+@import "ts/bootstrap/mixins";
 
 $btn-disabled-opacity: 0.4;
 
-@import "ts/node_modules/bootstrap/scss/buttons";
+@import "ts/bootstrap/buttons";
-@import "ts/node_modules/bootstrap/scss/dropdown";
+@import "ts/bootstrap/dropdown";

ts/package.json

@@ -11,6 +11,7 @@
         "@pyoner/svelte-types": "^3.4.4-2",
         "@sqltools/formatter": "^1.2.2",
         "@tsconfig/svelte": "^1.0.10",
+        "@types/bootstrap": "^5.0.12",
         "@types/d3": "^6.3.0",
         "@types/diff": "^5.0.0",
         "@types/jest": "^26.0.22",

ts/sveltelib/dynamicComponent.ts

@@ -4,6 +4,7 @@ export interface DynamicSvelteComponent<
     T extends typeof SvelteComponentDev = typeof SvelteComponentDev
 > {
     component: T;
+    [k: string]: unknown;
 }
 
 export const dynamicComponent = <

ts/yarn.lock

@@ -524,6 +524,11 @@
   resolved "https://registry.yarnpkg.com/@mdi/svg/-/svg-5.9.55.tgz#7cba058135afd5d8a3da977f51b71ffc6a3a3699"
   integrity sha512-gO0ZpKIeCn9vFg46QduK9MM+n1fuCNwSdcdlBTtbafnnuvwLveK2uj+byhdLtg/8VJGXDhp+DJ35QUMbeWeULA==
 
+"@popperjs/core@2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.6.0.tgz#f022195afdfc942e088ee2101285a1d31c7d727f"
+  integrity sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==
+
 "@popperjs/core@^2.9.2":
   version "2.9.2"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.2.tgz#adea7b6953cbb34651766b0548468e743c6a2353"
@@ -644,6 +649,14 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/bootstrap@^5.0.12":
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/@types/bootstrap/-/bootstrap-5.0.12.tgz#d044b6404bf3c89fc90df2822a86dfcd349db522"
+  integrity sha512-iowwPfp9Au6aoxS2hOgeRjXE25xdfLrTpmxzQSUs21z5qY3UZpmjSIWF4h8jPYPEXgZioIKLB2OSU8oWzzJAcQ==
+  dependencies:
+    "@popperjs/core" "2.6.0"
+    "@types/jquery" "*"
+
 "@types/d3-array@*":
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-2.9.0.tgz#fb6c3d7d7640259e68771cd90cc5db5ac1a1a012"