janosh · janosh · Feb 17, 2024 · Feb 17, 2024 · Feb 17, 2024 · Feb 17, 2024
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
@@ -10,5 +10,3 @@ on:
 jobs:
   build:
     uses: janosh/workflows/.github/workflows/nodejs-gh-pages.yml@main
-    with:
-      install-cmd: npm install -f
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
@@ -19,7 +19,7 @@ repos:
       - id: trailing-whitespace
 
   - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v3.1.0
+    rev: v4.0.0-alpha.8
     hooks:
       - id: prettier
         args: [--write] # edit files in-place
@@ -37,7 +37,7 @@ repos:
         exclude: changelog\.md
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v8.53.0
+    rev: v9.0.0-beta.0
     hooks:
       - id: eslint
         types: [file]

diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "svelte-check": "^3.6.3",
+    "svelte-multiselect": "^10.2.0",
     "svelte-preprocess": "^5.1.3",
     "svelte-toc": "^0.5.6",
     "svelte-zoo": "^0.4.9",

diff --git a/src/lib/MultiSelect.svelte b/src/lib/MultiSelect.svelte
@@ -412,7 +412,7 @@
   let ul_options: HTMLUListElement
   // highlight text matching user-entered search text in available options
   function highlight_matching_options(event: InputEvent) {
-    if (!highlightMatches || typeof CSS == `undefined` || !CSS.highlights) return // don't try if CSS highlight API not supported
+    if (!highlightMatches || typeof CSS == `undefined` || !CSS.highlights) return // abort if CSS highlight API not supported
 
     // clear previous ranges from HighlightRegistry
     CSS.highlights.clear()

diff --git a/src/routes/(demos)/allow-user-options/+page.svx b/src/routes/(demos)/allow-user-options/+page.svx
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { foods, languages } from '$site/options'
   import { LanguageSlot } from '$site'
 
@@ -12,7 +12,7 @@
 
 ```svelte example stackblitz id="foods"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { foods } from '$site/options'
   import { Toggle } from 'svelte-zoo'
 
@@ -41,7 +41,7 @@
 
 ```svelte example stackblitz id="languages"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { languages } from '$site/options'
   import { LanguageSlot } from '$site'
 
@@ -67,7 +67,7 @@ You can start with no options and let users populate MultiSelect from scratch. I
 
 ```svelte example stackblitz id="no-default-options"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
 
   let selected = []
 </script>

diff --git a/src/routes/(demos)/css-classes/+page.svx b/src/routes/(demos)/css-classes/+page.svx
@@ -2,7 +2,7 @@
 
 ```svelte example stackblitz id="foods"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
 
   const options = [...Array(7).keys()].map((idx) => `Option ${idx + 1}`)
 </script>

diff --git a/src/routes/(demos)/disabled/+page.svx b/src/routes/(demos)/disabled/+page.svx
@@ -5,7 +5,7 @@
 
 ```svelte example stackblitz id="disabled-input-title"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
 </script>
 
 <MultiSelect

diff --git a/src/routes/(demos)/duplicates/+page.md b/src/routes/(demos)/duplicates/+page.md
@@ -4,7 +4,7 @@
 
 ```svelte example stackblitz id="disabled-input-title"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { Toggle } from 'svelte-zoo'
 
   let duplicates = true

diff --git a/src/routes/(demos)/form/+page.svx b/src/routes/(demos)/form/+page.svx
@@ -6,7 +6,7 @@ This example shows the JavaScript way of handling MultiSelect fields in form sub
 
 ```svelte example stackblitz
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { ColorSlot } from '$site'
   import { colors } from '$site/options'
 

diff --git a/src/routes/(demos)/kit-form-actions/+page.svx b/src/routes/(demos)/kit-form-actions/+page.svx
@@ -14,7 +14,7 @@ HTML.
 
 ```svelte example stackblitz
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { ColorSlot } from '$site'
   import { colors } from '$site/options'
   import { repository } from '$root/package.json'

diff --git a/src/routes/(demos)/min-max-select/+page.svx b/src/routes/(demos)/min-max-select/+page.svx
@@ -10,7 +10,7 @@
 
 ```svelte example stackblitz id="languages"
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { languages } from '$site/options'
   import { LanguageSlot } from '$site'
 </script>
@@ -41,7 +41,7 @@ When setting an integer value for `maxSelect` Multiselect will
 
 ```svelte example stackblitz
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
 
   function handle_submit(event: SubmitEvent) {
     const form_data = new FormData(event.target)
@@ -61,7 +61,7 @@ Of course, you can combine `maxSelect={n}` and `required={m}` where `n>=m`.
 
 ```svelte example stackblitz
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
 
   function handle_submit(event: SubmitEvent) {
     const form_data = new FormData(event.target)
@@ -84,7 +84,7 @@ Of course, you can combine `maxSelect={n}` and `required={m}` where `n>=m`.
 ```svelte example stackblitz
 <script>
   // for https://github.com/janosh/svelte-multiselect/issues/249
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { onMount } from 'svelte'
 
   const red_pill = `🔴  &ensp; Red Pill (<a href="https://wikipedia.org/wiki/Red_pill_and_blue_pill">what?</a>)`

diff --git a/src/routes/(demos)/parse-labels-as-html/+page.svx b/src/routes/(demos)/parse-labels-as-html/+page.svx
@@ -4,7 +4,7 @@ When `parseLabelsAsHtml={true}`, MultiSelect renders HTML in option labels.
 
 ```svelte example stackblitz
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
 
   const red_pill = `🔴  &ensp; Red Pill (<a href="https://wikipedia.org/wiki/Red_pill_and_blue_pill">what?</a>)`
   const blue_pill = `🔵  &ensp; Blue Pill &nbsp; <img height="35px" style="vertical-align: middle;" src="https://upload.wikimedia.org/wikipedia/en/a/ab/Morpheus.jpg" />`

diff --git a/src/routes/(demos)/persistent/+page.svx b/src/routes/(demos)/persistent/+page.svx
@@ -12,7 +12,7 @@
 
 ```svelte example stackblitz id="languages"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { languages } from '$site/options'
   import { LanguageSlot } from '$site'
   import { language_store } from '$site/stores'

diff --git a/src/routes/(demos)/slots/+page.svx b/src/routes/(demos)/slots/+page.svx
@@ -8,7 +8,7 @@
 
 ```svelte example stackblitz id="languages-1"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { languages } from '$site/options'
   import { LanguageSlot, MinusIcon } from '$site'
   import { Icon } from 'svelte-zoo'
@@ -33,7 +33,7 @@
 
 ```svelte example stackblitz id="languages-2"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { languages } from '$site/options'
   import { LanguageSlot } from '$site'
   import { Icon } from 'svelte-zoo'
@@ -69,7 +69,7 @@
 
 ```svelte example stackblitz id="languages-2"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { languages } from '$site/options'
   import { LanguageSlot } from '$site'
   import { Icon } from 'svelte-zoo'

diff --git a/src/routes/(demos)/sort-selected/+page.svx b/src/routes/(demos)/sort-selected/+page.svx
@@ -8,7 +8,7 @@
 
 ```svelte example stackblitz id="default-sort"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { frontend_libs } from '$site/options'
 </script>
 

diff --git a/src/routes/(demos)/ui/+page.svx b/src/routes/(demos)/ui/+page.svx
@@ -5,7 +5,7 @@
 
 ```svelte example stackblitz id="foods"
 <script>
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { foods } from '$site/options'
 
   function random_color() {

diff --git a/src/site/Examples.svx b/src/site/Examples.svx
@@ -4,7 +4,7 @@
 
 ```svelte example collapsible repl="https://svelte.dev/repl/e3b88f59f62b498d943ecf7756ab75d7" stackblitz="src/site/Examples.svx"
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { languages } from '$site/options'
   import LanguageSlot from './LanguageSlot.svelte'
 
@@ -29,7 +29,7 @@
 
 ```svelte example collapsible repl="https://svelte.dev/repl/79e22e1905c94456aa21564b4d5f8759" stackblitz="src/site/Examples.svx"
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { ml_libs } from '$site/options'
 
   let value: { label: string, disabled: boolean, preselected: boolean }
@@ -64,7 +64,7 @@
 
 ```svelte example collapsible repl="https://svelte.dev/repl/516279bd62ec424986115263c2cdc169" stackblitz="src/site/Examples.svx"
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { frontend_libs } from '$site/options'
   import RepoSlot from './RepoSlot.svelte'
   import { Confetti } from 'svelte-zoo'
@@ -105,7 +105,7 @@
 
 ```svelte example collapsible repl="https://svelte.dev/repl/3a217c39932047a09f61d6425b04a7c3" stackblitz="src/site/Examples.svx"
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { colors } from '$site/options'
   import ColorSlot from './ColorSlot.svelte'
 
@@ -143,7 +143,7 @@
 
 ```svelte example collapsible repl="https://svelte.dev/repl/4ff40862436e4bfbb2bd55d234352bb1" stackblitz="src/site/Examples.svx"
 <script lang="ts">
-  import MultiSelect from '$lib'
+  import MultiSelect from 'svelte-multiselect'
   import { countries } from '$site/options'
 
   let selected: string[]

diff --git a/src/site/LanguageSlot.svelte b/src/site/LanguageSlot.svelte
@@ -25,4 +25,7 @@
   span {
     display: flex;
   }
+  img[alt='Rust'] {
+    filter: invert(1);
+  }
 </style>
diff --git a/svelte.config.js b/svelte.config.js
@@ -27,7 +27,6 @@ const { default: pkg } = await import(`./package.json`, {
 })
 const defaults = {
   Wrapper: `svelte-zoo/CodeExample.svelte`,
-  pkg: pkg.name,
   repo: pkg.repository,
   hideStyle: true,
 }
@@ -48,6 +47,7 @@ export default {
     alias: {
       $root: `.`,
       $site: `./src/site`,
+      $lib: `svelte-multiselect`,
     },
 
     prerender: {
@@ -65,4 +65,10 @@ export default {
     // enable direct prop access for vitest unit tests
     accessors: process.env.TEST,
   },
+
+  vitePlugin: {
+    experimental: {
+      inspector: true,
+    },
+  },
 }
diff --git a/tests/MultiSelect.test.ts b/tests/MultiSelect.test.ts
@@ -46,10 +46,9 @@ test.describe(`input`, async () => {
 
     await page.fill(`#foods input[autocomplete]`, `Pineapple`)
 
-    expect(
-      await page.$$(`div.multiselect.open > ul.options > li`),
-    ).toHaveLength(1)
-    const text = await page.textContent(`div.multiselect.open > ul.options`)
+    const ul_selector = `div.multiselect.open > ul.options`
+    expect(await page.$$(`${ul_selector} > li`)).toHaveLength(1)
+    const text = await page.textContent(ul_selector)
     expect(text?.trim()).toBe(`🍍 Pineapple`)
   })
 })

diff --git a/tsconfig.json b/tsconfig.json
@@ -11,6 +11,6 @@
     "sourceMap": true,
 
     "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true
-  }
+    "resolveJsonModule": true,
+  },
 }