Fix svelte-check errors (#223)

* update deps

* hideStyle: true in mdsvexamples

* fix bunch of svelte-check errors

before 44, after 25

* restore eslint-disable-next-line no-undef for CSS.highlights

* down to 14 errors

.pre-commit-config.yaml

@@ -19,7 +19,7 @@ repos:
       - id: trailing-whitespace
 
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v3.0.0-alpha.4
+    rev: v3.0.0-alpha.6
     hooks:
       - id: prettier
         args: [--write] # edit files in-place
@@ -29,14 +29,14 @@ repos:
           - svelte
 
   - repo: https://github.com/codespell-project/codespell
-    rev: v2.2.2
+    rev: v2.2.4
     hooks:
       - id: codespell
         stages: [commit, commit-msg]
         args: [--ignore-words-list, falsy]
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v8.31.0
+    rev: v8.38.0
     hooks:
       - id: eslint
         types: [file]

package.json

@@ -26,34 +26,34 @@
     "svelte": "^3.58.0"
   },
   "devDependencies": {
-    "@iconify/svelte": "^3.1.1",
-    "@playwright/test": "^1.32.2",
-    "@sveltejs/adapter-static": "^2.0.1",
-    "@sveltejs/kit": "^1.15.2",
+    "@iconify/svelte": "^3.1.3",
+    "@playwright/test": "^1.33.0",
+    "@sveltejs/adapter-static": "^2.0.2",
+    "@sveltejs/kit": "^1.15.9",
     "@sveltejs/package": "2.0.2",
-    "@sveltejs/vite-plugin-svelte": "^2.0.4",
-    "@typescript-eslint/eslint-plugin": "^5.58.0",
-    "@typescript-eslint/parser": "^5.58.0",
-    "@vitest/coverage-c8": "^0.30.0",
-    "eslint": "^8.38.0",
+    "@sveltejs/vite-plugin-svelte": "^2.1.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.1",
+    "@typescript-eslint/parser": "^5.59.1",
+    "@vitest/coverage-c8": "^0.30.1",
+    "eslint": "^8.39.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.2.0",
-    "highlight.js": "^11.7.0",
+    "highlight.js": "^11.8.0",
     "jsdom": "^21.1.1",
     "mdsvex": "^0.10.6",
     "mdsvexamples": "^0.3.3",
-    "prettier": "^2.8.7",
+    "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.1.0",
     "svelte-check": "^3.2.0",
     "svelte-preprocess": "^5.0.3",
-    "svelte-toc": "^0.5.4",
-    "svelte-zoo": "^0.4.3",
+    "svelte-toc": "^0.5.5",
+    "svelte-zoo": "^0.4.5",
     "svelte2tsx": "^0.6.11",
     "typescript": "5.0.4",
-    "vite": "^4.2.1",
-    "vitest": "^0.30.0"
+    "vite": "^4.3.3",
+    "vitest": "^0.30.1"
   },
   "keywords": [
     "svelte",

src/app.d.ts

@@ -3,3 +3,13 @@
 
 declare module '*.md'
 declare module '*package.json'
+
+// temporary until TS recognizes CSS highlight API
+// https://caniuse.com/mdn-api_css_highlights
+declare class Highlight {
+  constructor(...ranges: Range[])
+}
+
+interface Element {
+  scrollIntoViewIfNeeded(centerIfNeeded?: boolean): void
+}

src/lib/MultiSelect.svelte

@@ -2,7 +2,7 @@
   import { createEventDispatcher, tick } from 'svelte'
   import { flip } from 'svelte/animate'
   import { CircleSpinner, Wiggle } from '.'
-  import type { DispatchEvents, MultiSelectEvents, Option as GenericOption } from './'
+  import type { DispatchEvents, Option as GenericOption, MultiSelectEvents } from './'
   import { CrossIcon, DisabledIcon, ExpandIcon } from './icons'
   type Option = $$Generic<GenericOption>
 
@@ -154,7 +154,7 @@
   function add(option: Option, event: Event) {
     if (maxSelect && maxSelect > 1 && selected.length >= maxSelect) wiggle = true
     if (!isNaN(Number(option)) && typeof selected.map(get_label)[0] === `number`) {
-      option = Number(option) // convert to number if possible
+      option = Number(option) as Option // convert to number if possible
     }
     const is_duplicate = selected.some((op) => duplicateFunc(op, option))
 
@@ -380,14 +380,14 @@
   }
 
   let ul_options: HTMLUListElement
-  function highlight_matching_options(event: KeyboardEvent) {
+  function highlight_matching_options(event: InputEvent) {
     if (!highlightMatches || typeof CSS == `undefined` || !CSS.highlights) return // don't try if CSS highlight API not supported
 
     // clear previous ranges from HighlightRegistry
     CSS.highlights.clear()
 
     // get input's search query
-    const query = event?.target?.value.trim().toLowerCase()
+    const query = (event?.target as HTMLInputElement)?.value.trim().toLowerCase()
     if (!query) return
 
     const tree_walker = document.createTreeWalker(ul_options, NodeFilter.SHOW_TEXT, {
@@ -406,10 +406,10 @@
 
     // iterate over all text nodes and find matches
     const ranges = text_nodes.map((el) => {
-      const text = el.textContent.toLowerCase()
+      const text = el.textContent?.toLowerCase()
       const indices = []
       let start_pos = 0
-      while (start_pos < text.length) {
+      while (text && start_pos < text.length) {
         const index = text.indexOf(query, start_pos)
         if (index === -1) break
         indices.push(index)
@@ -452,7 +452,7 @@
   <input
     {name}
     required={Boolean(required)}
-    value={selected.length >= required ? JSON.stringify(selected) : null}
+    value={selected.length >= Number(required) ? JSON.stringify(selected) : null}
     tabindex="-1"
     aria-hidden="true"
     aria-label="ignore this, used only to prevent form submission if select is required but empty"
@@ -461,9 +461,9 @@
     on:invalid={() => {
       invalid = true
       let msg
-      if (maxSelect && maxSelect > 1 && required > 1) {
+      if (maxSelect && maxSelect > 1 && Number(required) > 1) {
         msg = `Please select between ${required} and ${maxSelect} options`
-      } else if (required > 1) {
+      } else if (Number(required) > 1) {
         msg = `Please select at least ${required} options`
       } else {
         msg = `Please select an option`

src/lib/index.ts

@@ -1,6 +1,6 @@
 export { default as CircleSpinner } from './CircleSpinner.svelte'
 export { default as CmdPalette } from './CmdPalette.svelte'
-export { default, default as MultiSelect } from './MultiSelect.svelte'
+export { default as MultiSelect, default } from './MultiSelect.svelte'
 export { default as Wiggle } from './Wiggle.svelte'
 
 export type Option = string | number | ObjectOption
@@ -46,27 +46,27 @@ export type MultiSelectEvents = {
   touchstart: TouchEvent
 }
 
-// Firefox lacks support for scrollIntoViewIfNeeded, see
-// https://github.com/janosh/svelte-multiselect/issues/87
-// this polyfill was copied from
+// Firefox lacks support for scrollIntoViewIfNeeded (https://caniuse.com/scrollintoviewifneeded).
+// See https://github.com/janosh/svelte-multiselect/issues/87
+// Polyfill copied from
 // https://github.com/nuxodin/lazyfill/blob/a8e63/polyfills/Element/prototype/scrollIntoViewIfNeeded.js
 // exported for testing
 export function scroll_into_view_if_needed_polyfill(
   centerIfNeeded: boolean = true
 ) {
-  const el = this as Element
+  const elem = this as Element
   const observer = new IntersectionObserver(function ([entry]) {
     const ratio = entry.intersectionRatio
     if (ratio < 1) {
       const place = ratio <= 0 && centerIfNeeded ? `center` : `nearest`
-      el.scrollIntoView({
+      elem.scrollIntoView({
         block: place,
         inline: place,
       })
     }
     this.disconnect()
   })
-  observer.observe(this)
+  observer.observe(elem)
 
   return observer // return for testing
 }

src/routes/(demos)/kit-form-actions/+page.server.ts

@@ -9,6 +9,9 @@ export const _actions: Actions = {
     const data = await request.formData()
     let colors = data.get(`colors`)
 
+    if (!colors || typeof colors !== `string`)
+      return fail(400, { colors, error: `missing` })
+
     try {
       colors = JSON.parse(colors)
     } catch (err) {

svelte.config.js

@@ -29,6 +29,7 @@ const defaults = {
   Wrapper: `svelte-zoo/CodeExample.svelte`,
   pkg: pkg.name,
   repo: pkg.repository,
+  hideStyle: true,
 }
 const remarkPlugins = [[mdsvexamples, { defaults }]]