Swap node for deno (#319)

* swap node for deno

* migrate to deno reusable GH workflows

* fix .github/workflows/test.yml, add explicit width example for #255 on /ui page

* fix maxSelect playwright test

Author: janosh

.github/workflows/gh-pages.yml

@@ -9,6 +9,4 @@ on:
 
 jobs:
   build:
-    uses: janosh/workflows/.github/workflows/nodejs-gh-pages.yml@main
-    with:
-      install-cmd: npm install --force
+    uses: janosh/workflows/.github/workflows/deno-gh-pages.yml@main

.github/workflows/test.yml

@@ -11,8 +11,8 @@ on:
 
 jobs:
   tests:
-    uses: janosh/workflows/.github/workflows/npm-test.yml@main
+    uses: janosh/workflows/.github/workflows/deno-test.yml@main
     with:
-      test-cmd: npm run test:unit
-      install-e2e: npx playwright install chromium
-      e2e-test-cmd: npx playwright test tests/*.ts
+      test-cmd: deno task vitest --run
+      e2e-install-cmd: npx playwright install chromium
+      e2e-test-cmd: npx playwright test

.pre-commit-config.yaml

@@ -1,6 +1,6 @@
 ci:
   autoupdate_schedule: quarterly
-  skip: [eslint]
+  skip: [eslint, deno-lint, deno-fmt]
 
 default_stages: [pre-commit]
 
@@ -19,15 +19,20 @@ repos:
       - id: mixed-line-ending
       - id: trailing-whitespace
 
-  - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: v4.0.0-alpha.8
+  - repo: local
     hooks:
-      - id: prettier
-        args: [--write] # edit files in-place
-        additional_dependencies:
-          - prettier
-          - prettier-plugin-svelte
-          - svelte
+      - id: deno-fmt
+        name: Deno format
+        entry: deno fmt
+        types_or: [file]
+        language: system
+        args: [--config, deno.jsonc]
+      - id: deno-lint
+        name: Deno lint
+        entry: deno lint
+        types_or: [file]
+        language: system
+        args: [--config, deno.jsonc, --permit-no-files, --fix]
 
   - repo: https://github.com/codespell-project/codespell
     rev: v2.4.1
@@ -38,7 +43,7 @@ repos:
         exclude: changelog\.md
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v9.28.0
+    rev: v9.30.0
     hooks:
       - id: eslint
         types: [file]

.prettierrc.yml

@@ -0,0 +1,65 @@
+{
+  "tasks": {
+    "dev": "deno run -A --node-modules-dir npm:vite dev",
+    "build": "deno run -A --node-modules-dir npm:vite build",
+    "preview": "deno run -A --node-modules-dir npm:vite preview",
+    "serve": "deno task build && deno task preview",
+    "test": "deno task vitest --run && deno task e2e",
+    "vitest": "deno run -A --node-modules-dir npm:vitest",
+    "e2e": "npx playwright test",
+    "test:install": "npx playwright install chromium",
+    "package": "svelte-package",
+    "changelog": "deno run -A https://github.com/janosh/workflows/raw/refs/heads/main/scripts/make-release-notes.ts"
+  },
+  "lock": false,
+  "imports": {
+    "$lib": "./src/lib",
+    "$lib/": "./src/lib/",
+    "$site": "./src/site",
+    "$site/": "./src/site/"
+  },
+  "lint": {
+    "rules": {
+      "tags": ["recommended"],
+      "include": [
+        "ban-unused-ignore",
+        "default-param-last",
+        "eqeqeq",
+        "guard-for-in",
+        "jsx-key",
+        "jsx-no-duplicate-props",
+        "jsx-no-useless-fragment",
+        "no-async-promise-executor",
+        "no-await-in-loop",
+        // "no-boolean-literal-for-arguments", // TODO only disable this in test files or even just for .toBe(true)
+        "no-const-assign",
+        "no-eval",
+        "no-explicit-any",
+        "no-non-null-asserted-optional-chain",
+        "no-non-null-assertion",
+        "no-self-compare",
+        "no-sparse-arrays",
+        "no-sync-fn-in-async-fn",
+        "no-throw-literal",
+        "no-unused-vars",
+        "no-useless-rename",
+        "prefer-const",
+        "require-await",
+        "single-var-declarator"
+      ],
+      "exclude": ["no-sloppy-imports"]
+    }
+  },
+  "fmt": {
+    "indentWidth": 2,
+    "lineWidth": 90,
+    "semiColons": false,
+    "singleQuote": true,
+    "proseWrap": "preserve"
+  },
+  "unstable": ["fmt-component", "sloppy-imports"],
+  "compilerOptions": {
+    "lib": ["dom", "esnext"]
+  },
+  "nodeModulesDir": "auto"
+}

deno.jsonc

@@ -27,10 +27,10 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.53.0",
-    "@stylistic/eslint-plugin": "^4.4.1",
+    "@stylistic/eslint-plugin": "^5.1.0",
     "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.21.5",
-    "@sveltejs/package": "2.3.11",
+    "@sveltejs/package": "2.3.12",
     "@sveltejs/vite-plugin-svelte": "^5.1.0",
     "@types/node": "^24.0.1",
     "@vitest/coverage-v8": "^3.2.3",
@@ -41,8 +41,6 @@
     "jsdom": "^26.1.0",
     "mdsvex": "^0.12.6",
     "mdsvexamples": "^0.5.0",
-    "prettier": "^3.5.3",
-    "prettier-plugin-svelte": "^3.4.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "svelte": "^5.34.1",
@@ -53,7 +51,7 @@
     "svelte2tsx": "^0.7.39",
     "typescript": "5.8.3",
     "typescript-eslint": "^8.34.0",
-    "vite": "^6.3.5",
+    "vite": "^7.0.0",
     "vitest": "^3.2.3"
   },
   "keywords": [

package.json

@@ -66,13 +66,13 @@ Favorite Frontend Tools?
 <MultiSelect bind:selected options={ui_libs} />
 ```
 
-## 🧠 &thinsp; Mental Model & Core Concepts
+## 🧠 &thinsp; Mental Model
 
-| Prop            | Purpose                                        | Value                                                                               |
-| --------------- | ---------------------------------------------- | ----------------------------------------------------------------------------------- |
-| `options`       | What users can choose from                     | Array of strings, numbers, or objects with `label` property                         |
-| `bind:selected` | What they've chosen                            | Always an array: `[]`, `['Apple']` or `['Apple', 'Banana']`                         |
-| `bind:value`    | Single-select convenience for what users chose | Single item: `'Apple'` (or `null`) if `maxSelect={1}`, otherwise same as `selected` |
+| Prop            | Purpose                                                | Value                                                                               |
+| --------------- | ------------------------------------------------------ | ----------------------------------------------------------------------------------- |
+| `options`       | What users can choose from                             | Array of strings, numbers, or objects with `label` property                         |
+| `bind:selected` | Which options users have chosen                        | Always an array: `[]`, `['Apple']` or `['Apple', 'Banana']`                         |
+| `bind:value`    | Single-select convenience for the user-selected option | Single item: `'Apple'` (or `null`) if `maxSelect={1}`, otherwise same as `selected` |
 
 ### Common Patterns
 
@@ -83,11 +83,14 @@ Favorite Frontend Tools?
 <!-- Single-select -->
 <MultiSelect bind:value options={colors} maxSelect={1} />
 
-<!-- Object options (need 'label' property) -->
-<MultiSelect bind:selected options={[
-  { label: 'Red', value: '#ff0000' },
-  { label: 'Blue', value: '#0000ff' }
-]} />
+<!-- Object options (need 'label' property, can have arbitrary other keys, some like `value`, `disabled`, `preselected`, `style` have special meaning, see type ObjectOption) -->
+<MultiSelect
+  bind:selected
+  options={[
+    { label: 'Red', value: '#ff0000' },
+    { label: 'Blue', value: '#0000ff' },
+  ]}
+/>
 ```
 
 ### Troubleshooting
@@ -118,10 +121,12 @@ These are the core props you'll use in most cases:
    <MultiSelect options={['Red', 'Green', 'Blue']} />
 
    <!-- Object options -->
-   <MultiSelect options={[
-     { label: 'Red', value: '#ff0000', hex: true },
-     { label: 'Green', value: '#00ff00', hex: true }
-   ]} />
+   <MultiSelect
+     options={[
+       { label: 'Red', value: '#ff0000', hex: true },
+       { label: 'Green', value: '#00ff00', hex: true },
+     ]}
+   />
    ```
 
 1. ```ts
@@ -132,7 +137,7 @@ These are the core props you'll use in most cases:
 
    ```svelte
    <script>
-     let selected = $state(['Red'])  // Pre-select Red
+     let selected = $state(['Red']) // Pre-select Red
    </script>
    <MultiSelect bind:selected options={colors} />
    ```
@@ -250,12 +255,14 @@ These are the core props you'll use in most cases:
 
    Whether to allow selecting the same option multiple times.
 
+<!-- deno-fmt-ignore -->
 1. ```ts
    filterFunc: (opt: Option, searchText: string) => boolean
    ```
 
    Custom function to filter options based on search text. Default filters by label.
 
+<!-- deno-fmt-ignore -->
 1. ```ts
    key: (opt: Option) => unknown
    ```
@@ -400,6 +407,7 @@ These are the core props you'll use in most cases:
 
    Tooltip for individual remove buttons.
 
+<!-- deno-fmt-ignore -->
 1. ```ts
    maxSelectMsg: ((current: number, max: number) => string) | null
    ```
@@ -567,10 +575,10 @@ Example using several snippets:
 ```svelte
 <MultiSelect options={[`Red`, `Green`, `Blue`, `Yellow`, `Purple`]}>
   {#snippet children({ idx, option })}
-    <span style="display: flex; align-items: center; gap: 6pt;">
+    <span style="display: flex; align-items: center; gap: 6pt">
       <span
         style:background={`${option}`}
-        style="border-radius: 50%; width: 1em; height: 1em;"
+        style="border-radius: 50%; width: 1em; height: 1em"
       ></span>
       {idx + 1}
       {option}
@@ -676,10 +684,10 @@ You can also import [the types this component uses](https://github.com/janosh/sv
 
 ```ts
 import {
-  Option,
-  ObjectOption,
   DispatchEvents,
   MultiSelectEvents,
+  ObjectOption,
+  Option,
 } from 'svelte-multiselect'
 ```
 

readme.md

@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <title>Svelte MultiSelect</title>
@@ -49,23 +49,26 @@
         <path
           fill="currentColor"
           d="M8 0c4.42 0 8 3.58 8 8a8.01 8.01 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38c0-.27.01-1.13.01-2.2c0-.75-.25-1.23-.54-1.48c1.78-.2 3.65-.88 3.65-3.95c0-.88-.31-1.59-.82-2.15c.08-.2.36-1.02-.08-2.12c0 0-.67-.22-2.2.82c-.64-.18-1.32-.27-2-.27s-1.36.09-2 .27c-1.53-1.03-2.2-.82-2.2-.82c-.44 1.1-.16 1.92-.08 2.12c-.51.56-.82 1.28-.82 2.15c0 3.06 1.86 3.75 3.64 3.95c-.23.2-.44.55-.51 1.07c-.46.21-1.61.55-2.33-.66c-.15-.24-.6-.83-1.23-.82c-.67.01-.27.38.01.53c.34.19.73.9.82 1.13c.16.45.68 1.31 2.69.94c0 .67.01 1.3.01 1.49c0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8"
-        ></path>
+        >
+        </path>
       </symbol>
 
       <symbol viewBox="0 0 24 24" id="material-symbols-auto-awesome">
         <!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE -->
         <path
           fill="currentColor"
           d="m19 9l-1.25-2.75L15 5l2.75-1.25L19 1l1.25 2.75L23 5l-2.75 1.25L19 9Zm0 14l-1.25-2.75L15 19l2.75-1.25L19 15l1.25 2.75L23 19l-2.75 1.25L19 23ZM9 20l-2.5-5.5L1 12l5.5-2.5L9 4l2.5 5.5L17 12l-5.5 2.5L9 20Z"
-        ></path>
+        >
+        </path>
       </symbol>
 
       <symbol viewBox="0 0 32 32" id="carbon-edit">
         <!-- Icon from Carbon by IBM - undefined -->
         <path
           fill="currentColor"
           d="M2 26h28v2H2zM25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4zm-5-5L24 7.6l-3 3L17.4 7zM6 22v-3.6l10-10l3.6 3.6l-10 10z"
-        ></path>
+        >
+        </path>
       </symbol>
     </svg>
 

src/app.html

@@ -13,7 +13,8 @@
   {color}"
   style:width={size}
   style:height={size}
-></div>
+>
+</div>
 
 <style>
   div {

src/lib/CircleSpinner.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
+  import { MultiSelect } from '$lib'
   import { fade } from 'svelte/transition'
-  import { MultiSelect } from '.'
   import type { MultiSelectProps, ObjectOption, Option } from './types'
 
   interface Action extends ObjectOption {