feat: update MultiSelect.svelte for Svelte5 compatibility (#293)

* feat: update MultiSelect.svelte for Svelte5 compatibility

* bump commit hooks

* update deps and fix build error Module package.json needs an import attribute of "type: json"

* update reusable wf path

* revert package.json to svelte 4 for now

bump unit tests to svelte 5 later

---------

Co-authored-by: Janosh Riebesell <[email protected]>

.github/workflows/test.yml

@@ -11,7 +11,6 @@ on:
 
 jobs:
   tests:
-    uses: janosh/workflows/.github/workflows/npm-test-release.yml@main
+    uses: janosh/workflows/.github/workflows/npm-test.yml@main
     with:
-      install-cmd: npm install --force
       test-cmd: npm run test:unit

.pre-commit-config.yaml

@@ -8,7 +8,7 @@ default_install_hook_types: [pre-commit, commit-msg]
 
 repos:
   - repo: https://github.com/pre-commit/pre-commit-hooks
-    rev: v4.6.0
+    rev: v5.0.0
     hooks:
       - id: check-case-conflict
       - id: check-symlinks
@@ -30,15 +30,15 @@ repos:
           - svelte
 
   - repo: https://github.com/codespell-project/codespell
-    rev: v2.2.6
+    rev: v2.3.0
     hooks:
       - id: codespell
         stages: [commit, commit-msg]
         args: [--ignore-words-list, falsy, --check-filenames]
         exclude: changelog\.md
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v9.0.0
+    rev: v9.13.0
     hooks:
       - id: eslint
         types: [file]

eslint.config.js

@@ -12,7 +12,7 @@ export default [
         `error`,
         { argsIgnorePattern: `^_`, varsIgnorePattern: `^_` },
       ],
-      '@typescript-eslint/quotes': [`error`, `backtick`, { avoidEscape: true }],
+      '@/quotes': [`error`, `backtick`, { avoidEscape: true }],
       'svelte/no-at-html-tags': `off`,
     },
   },

package.json

@@ -26,35 +26,35 @@
     "svelte": "4.2.12"
   },
   "devDependencies": {
-    "@iconify/svelte": "^3.1.6",
-    "@playwright/test": "^1.43.0",
-    "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/kit": "^2.5.5",
-    "@sveltejs/package": "2.3.1",
+    "@iconify/svelte": "^4.0.2",
+    "@playwright/test": "^1.48.1",
+    "@sveltejs/adapter-static": "^3.0.5",
+    "@sveltejs/kit": "^2.7.2",
+    "@sveltejs/package": "2.3.5",
     "@sveltejs/vite-plugin-svelte": "3.0.2",
-    "@vitest/coverage-v8": "^1.4.0",
-    "eslint": "^9.0.0",
-    "eslint-plugin-svelte": "^2.36.0",
-    "globals": "^15.0.0",
+    "@vitest/coverage-v8": "^2.1.3",
+    "eslint": "^9.13.0",
+    "eslint-plugin-svelte": "^2.46.0",
+    "globals": "^15.11.0",
     "hastscript": "^9.0.0",
-    "highlight.js": "^11.9.0",
-    "jsdom": "^24.0.0",
-    "mdsvex": "^0.11.0",
+    "highlight.js": "^11.10.0",
+    "jsdom": "^25.0.1",
+    "mdsvex": "^0.12.3",
     "mdsvexamples": "^0.4.1",
-    "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.2.2",
+    "prettier": "^3.3.3",
+    "prettier-plugin-svelte": "^3.2.7",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "svelte-check": "^3.6.9",
-    "svelte-multiselect": "^10.2.0",
-    "svelte-preprocess": "^5.1.3",
-    "svelte-toc": "^0.5.8",
-    "svelte-zoo": "^0.4.10",
-    "svelte2tsx": "^0.7.6",
-    "typescript": "5.4.4",
-    "typescript-eslint": "^7.5.0",
-    "vite": "^5.1.5",
-    "vitest": "^1.4.0"
+    "svelte-check": "^4.0.5",
+    "svelte-multiselect": "^10.3.0",
+    "svelte-preprocess": "^6.0.3",
+    "svelte-toc": "^0.5.9",
+    "svelte-zoo": "^0.4.13",
+    "svelte2tsx": "^0.7.22",
+    "typescript": "5.6.3",
+    "typescript-eslint": "^8.11.0",
+    "vite": "^5.4.9",
+    "vitest": "^2.1.3"
   },
   "keywords": [
     "svelte",

src/lib/MultiSelect.svelte

@@ -573,7 +573,7 @@
       {pattern}
       placeholder={selected.length == 0 ? placeholder : null}
       aria-invalid={invalid ? `true` : null}
-      ondrop="return false"
+      on:drop={() => false}
       on:blur
       on:change
       on:click

src/routes/(demos)/disabled/+page.svx

@@ -1,4 +1,3 @@
-
 ## Disabled MultiSelect
 
 <label for="disabled">Favorite frontend tool?</label>

src/routes/(demos)/ui/+page.svx

@@ -1,4 +1,3 @@
-
 ## User interface
 
 ### Food Picker (initially invalid)

svelte.config.js

@@ -4,7 +4,7 @@ import { mdsvex } from 'mdsvex'
 import mdsvexamples from 'mdsvexamples'
 import link_headings from 'rehype-autolink-headings'
 import heading_slugs from 'rehype-slug'
-import preprocess from 'svelte-preprocess'
+import { sveltePreprocess } from 'svelte-preprocess'
 
 const rehypePlugins = [
   heading_slugs,
@@ -23,7 +23,7 @@ const rehypePlugins = [
   ],
 ]
 const { default: pkg } = await import(`./package.json`, {
-  assert: { type: `json` },
+  with: { type: `json` },
 })
 const defaults = {
   Wrapper: `svelte-zoo/CodeExample.svelte`,
@@ -37,7 +37,7 @@ export default {
   extensions: [`.svelte`, `.svx`, `.md`],
 
   preprocess: [
-    preprocess(),
+    sveltePreprocess(),
     mdsvex({ rehypePlugins, remarkPlugins, extensions: [`.svx`, `.md`] }),
   ],
 
@@ -63,7 +63,7 @@ export default {
     // https://github.com/janosh/svelte-multiselect/issues/196
     immutable: true,
     // enable direct prop access for vitest unit tests
-    accessors: process.env.TEST,
+    accessors: Boolean(process.env.TEST),
   },
 
   vitePlugin: {