v9.0.0

* eslint pre-commit hook set  --resolve-plugins-relative-to ~/.cache/pre-commit

* add v9 note to readme Breaking changes section

* fix eslint

* try fix playwright test

* test 'opens dropdown on focus': await page.waitForTimeout(100)

* add v9 to changelog

* revert to await page.waitForTimeout(100), test failing without

.github/workflows/gh-pages.yml

@@ -8,3 +8,5 @@ on:
 jobs:
   build:
     uses: janosh/workflows/.github/workflows/nodejs-gh-pages.yml@main
+    with:
+      install-cmd: npm install -f

.pre-commit-config.yaml

@@ -34,16 +34,17 @@ repos:
       - id: codespell
         stages: [commit, commit-msg]
         args: [--ignore-words-list, falsy]
+        exclude: changelog\.md
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v8.38.0
+    rev: v8.41.0
     hooks:
       - id: eslint
         types: [file]
-        files: \.(svelte|js|ts)$
+        args: [--fix, --resolve-plugins-relative-to, ~/.cache/pre-commit]
+        files: \.(js|ts|svelte)$
         additional_dependencies:
           - eslint
-          - svelte
           - typescript
           - eslint-plugin-svelte3
           - '@typescript-eslint/eslint-plugin'

package.json

@@ -5,7 +5,7 @@
   "homepage": "https://janosh.github.io/svelte-multiselect",
   "repository": "https://github.com/janosh/svelte-multiselect",
   "license": "MIT",
-  "version": "8.6.2",
+  "version": "9.0.0",
   "type": "module",
   "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
@@ -19,11 +19,11 @@
     "test": "vitest --run --coverage tests/unit/*.ts && playwright test tests/*.test.ts",
     "test:unit": "vitest tests/unit/*.ts",
     "test:e2e": "playwright test tests/*.test.ts",
-    "changelog": "npx auto-changelog --package --output changelog.md --unreleased-only --hide-credit --commit-limit false",
+    "changelog": "npx auto-changelog --package --output changelog.md --hide-empty-releases --hide-credit --commit-limit false",
     "update-coverage": "vitest tests/unit --run --coverage && npx istanbul-badges-readme"
   },
   "dependencies": {
-    "svelte": "4.0.0-next.0"
+    "svelte": "^4.0.0-next.0"
   },
   "devDependencies": {
     "@iconify/svelte": "^3.1.3",

readme.md

@@ -42,10 +42,22 @@
 
 ## 📜   Breaking changes
 
-- **8.0.0** 
+- **8.0.0** (2022-10-22) 
   - Props `selectedLabels` and `selectedValues` were removed. If you were using them, they were equivalent to assigning `bind:selected` to a local variable and then running `selectedLabels = selected.map(option => option.label)` and `selectedValues = selected.map(option => option.value)` if your options were objects with `label` and `value` keys. If they were simple strings/numbers, there was no point in using `selected{Labels,Values}` anyway. [PR 138](https://github.com/janosh/svelte-multiselect/pull/138)
   - Prop `noOptionsMsg` was renamed to `noMatchingOptionsMsg`. [PR 133](https://github.com/janosh/svelte-multiselect/pull/133).
-- **v8.3.0**  `addOptionMsg` was renamed to `createOptionMsg` (no major since version since it's rarely used) [sha](https://github.com/janosh/svelte-multiselect/commits).
+- **v8.3.0** (2023-01-25)  `addOptionMsg` was renamed to `createOptionMsg` (no major since version since it's rarely used) [sha](https://github.com/janosh/svelte-multiselect/commits).
+- **v9.0.0** (2023-06-01)  Svelte bumped from v3 to v4. Also, not breaking but noteworthy: MultiSelect received a default slot that functions as both `"option"` and `"selected"`. If you previously had two identical slots for `"option"` and `"selected"`, you can now remove the `name` from one of them and drop the other:
+
+  ```diff
+  <MultiSelect
+    {options}
+  + let:option
+  >
+  - <SlotComponent let:option {option} slot="selected" />
+  - <SlotComponent let:option {option} slot="option" />
+  + <SlotComponent {option} />
+  </MultiSelect>
+  ```
 
 ## 🔨 &thinsp; Installation
 

src/routes/+layout.svelte

@@ -9,16 +9,16 @@
   import '../app.css'
 
   afterNavigate(() => {
-    for (const node of document.querySelectorAll('pre > code')) {
+    for (const node of document.querySelectorAll(`pre > code`)) {
       // skip if <pre> already contains a button (presumably for copy)
       const pre = node.parentElement
       if (!pre || pre.querySelector(`button`)) continue
 
       new CopyButton({
         target: pre,
         props: {
-          content: node.textContent ?? '',
-          style: 'position: absolute; top: 1ex; right: 1ex;',
+          content: node.textContent ?? ``,
+          style: `position: absolute; top: 1ex; right: 1ex;`,
         },
       })
     }

src/routes/changelog/+page.server.ts

@@ -0,0 +1,18 @@
+import changelog from '$root/changelog.md?raw'
+import { compile } from 'mdsvex'
+
+const brace_to_paren = (str: string) =>
+  str.replaceAll(`{`, `(`).replaceAll(`}`, `)`)
+
+const backticks_to_lt_gt = (str: string) =>
+  str.replaceAll(`>`, `\`>`).replaceAll(`<`, `\`<`)
+
+const section_level = (str: string) =>
+  // turn 1st heading into h1
+  str.replace(`###`, `#`).replaceAll(`##`, `#`)
+
+export const load = async () => ({
+  changelog: compile(
+    backticks_to_lt_gt(brace_to_paren(section_level(changelog)))
+  ),
+})

src/routes/changelog/+page.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
-  import Changelog from '$root/changelog.md'
   import Toc from 'svelte-toc'
+
+  export let data
 </script>
 
 <main>
-  <Changelog />
+  {@html data.changelog?.code}
 </main>
 
-<Toc headingSelector="main > :where(h3, h4)" breakpoint={1250} />
+<Toc breakpoint={1250} />

tests/MultiSelect.test.ts

@@ -15,10 +15,9 @@ test.describe(`input`, async () => {
 
     expect(await page.$(`div.multiselect.open > ul.options.hidden`)).toBeNull()
 
-    const visible_dropdown = await page.waitForSelector(
-      `div.multiselect.open > ul.options:visible`
-    )
-    expect(visible_dropdown).toBeTruthy()
+    await page.waitForTimeout(100)
+    const options = page.locator(`div.multiselect.open > ul.options`)
+    await expect(options).toBeVisible()
   })
 
   test(`closes dropdown on tab out`, async ({ page }) => {