removeAll event timing: clear selected before events fire (#313)

* removeAll event timing: clear selected before events fire (closes #300)

* update package.json deps and refactor demo navigation

- drop writable store for demo navigation, use `demo_pages` array from newly created (demoos)/index.ts
- simplify code fence buttons in +layout.svelte with <CopyButton global />
- update persistent demo page to use sessionStorage directly, not through persisted_store

* pnpm remove globals @iconify/svelte

1st not needed, 2nd replaced with SVG symbols in app.html

* tweak toc styles

Author: janosh

.pre-commit-config.yaml

@@ -38,7 +38,7 @@ repos:
         exclude: changelog\.md
 
   - repo: https://github.com/pre-commit/mirrors-eslint
-    rev: v9.27.0
+    rev: v9.28.0
     hooks:
       - id: eslint
         types: [file]
@@ -48,7 +48,6 @@ repos:
           - 'typescript-eslint'
           - eslint
           - eslint-plugin-svelte
-          - globals
           - svelte
           - typescript
           - '@stylistic/eslint-plugin'

package.json

@@ -26,18 +26,16 @@
     "svelte": "^5.8.0"
   },
   "devDependencies": {
-    "@iconify/svelte": "^5.0.0",
-    "@playwright/test": "^1.52.0",
-    "@stylistic/eslint-plugin": "^4.2.0",
+    "@playwright/test": "^1.53.0",
+    "@stylistic/eslint-plugin": "^4.4.1",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.21.1",
+    "@sveltejs/kit": "^2.21.5",
     "@sveltejs/package": "2.3.11",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@types/node": "^22.15.20",
-    "@vitest/coverage-v8": "^3.1.4",
-    "eslint": "^9.27.0",
-    "eslint-plugin-svelte": "^3.8.2",
-    "globals": "^16.1.0",
+    "@sveltejs/vite-plugin-svelte": "^5.1.0",
+    "@types/node": "^24.0.1",
+    "@vitest/coverage-v8": "^3.2.3",
+    "eslint": "^9.28.0",
+    "eslint-plugin-svelte": "^3.9.2",
     "hastscript": "^9.0.1",
     "highlight.js": "^11.11.1",
     "jsdom": "^26.1.0",
@@ -47,16 +45,16 @@
     "prettier-plugin-svelte": "^3.4.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "svelte": "^5.32.1",
+    "svelte": "^5.34.1",
     "svelte-check": "^4.2.1",
     "svelte-preprocess": "^6.0.3",
     "svelte-toc": "^0.6.1",
-    "svelte-zoo": "^0.4.18",
+    "svelte-zoo": "^0.4.19",
     "svelte2tsx": "^0.7.39",
     "typescript": "5.8.3",
-    "typescript-eslint": "^8.32.1",
+    "typescript-eslint": "^8.34.0",
     "vite": "^6.3.5",
-    "vitest": "^3.1.4"
+    "vitest": "^3.2.3"
   },
   "keywords": [
     "svelte",

src/app.css

@@ -149,3 +149,10 @@ nav:has(+ div.code-example) > a,
 section > aside > a.btn {
   margin: 0;
 }
+
+/* target reusable icons like <svg><use href="#icon-info"></use></svg> */
+svg:has(use:only-child) {
+  width: 1em;
+  height: 1em;
+  vertical-align: middle;
+}

src/app.html

@@ -43,6 +43,30 @@
           d="M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25a2 2 0 1 1 2.83 2.83l-2.5 2.5a2 2 0 0 1-2.83 0 .75.75 0 0 0-1.06 1.06 3.5 3.5 0 0 0 4.95 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 0 1 0-2.83l2.5-2.5a2 2 0 0 1 2.83 0 .75.75 0 0 0 1.06-1.06 3.5 3.5 0 0 0-4.95 0l-2.5 2.5a3.5 3.5 0 0 0 4.95 4.95l1.25-1.25a.75.75 0 0 0-1.06-1.06l-1.25 1.25a2 2 0 0 1-2.83 0z"
         />
       </symbol>
+
+      <symbol viewBox="0 0 16 16" id="octicon-mark-github">
+        <!-- Icon from Octicons by GitHub - https://github.com/primer/octicons/blob/main/LICENSE -->
+        <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>
+      </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>
+      </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>
+      </symbol>
     </svg>
 
     <div>%sveltekit.body%</div>

src/lib/MultiSelect.svelte

@@ -403,10 +403,12 @@
 
   function remove_all(event: Event) {
     event.stopPropagation()
+    selected = [] // Set selected first
+    searchText = ``
+
+    // Now trigger change events
     onremoveAll?.({ options: selected })
     onchange?.({ options: selected, type: `removeAll` })
-    selected = []
-    searchText = ``
   }
 
   let is_selected = $derived((label: string | number) =>

src/routes/(demos)/+layout.svelte

@@ -2,9 +2,9 @@
   import { page } from '$app/state'
   import { name } from '$root/package.json'
   import { DemoNav } from '$site'
-  import { demos } from '$site/stores'
   import type { Snippet } from 'svelte'
   import { PrevNext } from 'svelte-zoo'
+  import { demo_pages } from '.'
 
   interface Props {
     children?: Snippet
@@ -21,12 +21,11 @@
 
   {@render children?.()}
 
-  <!-- TODO pass onkeyup=null in next version of svelte-zoo -->
   <PrevNext
-    items={$demos}
+    items={demo_pages}
     current={page.url.pathname}
     style="max-width: var(--main-max-width); margin: auto;"
-    on_keyup={() => ({})}
+    on_keyup={null}
   />
 </main>
 

src/routes/(demos)/index.ts

@@ -0,0 +1,12 @@
+export const routes = Object.keys(
+  import.meta.glob(`./**/+page.{svx,svelte,md}`),
+).map((filename) => {
+  const parts = filename.split(`/`).filter((part) => !part.startsWith(`(`)) // remove hidden route segments
+  return { route: `/${parts.slice(1, -1).join(`/`)}`, filename }
+})
+
+if (routes.length < 3) {
+  console.error(`Too few demo routes found: ${routes.length}`)
+}
+
+export const demo_pages = routes.map(({ route }) => route)

src/routes/(demos)/persistent/+page.md

@@ -1,12 +1,6 @@
-<script lang="ts">
-  import hljs from 'highlight.js/lib/common'
-  import 'highlight.js/styles/vs2015.css'
-  import store_src from '$site/stores.ts?raw'
-</script>
-
 ## Page-Reload Persistent MultiSelect
 
-`language_store` is a Svelte [`writable`](https://svelte.dev/docs/svelte/svelte-store#writable) that's bound to the browser's `sessionStorage`. This example shows how MultiSelect retains its `selected` state on page reload.
+This example shows how to combine MultiSelect with `sessionStorage` to persist the `selected` state across page reloads.
 
 <br />
 
@@ -15,20 +9,27 @@
   import MultiSelect from '$lib'
   import { languages } from '$site/options'
   import { LanguageSnippet } from '$site'
-  import { language_store } from '$site/stores'
+  import { onMount } from 'svelte'
+
+  let selected = $state([])
+
+  onMount(() => {
+    const stored = sessionStorage[`languages`]
+    selected = stored ? JSON.parse(stored) : `Python TypeScript C Haskell`.split(` `)
+  })
+
+  $effect(() => {
+    if (sessionStorage) sessionStorage[`languages`] = JSON.stringify(selected)
+  })
 </script>
 
 <MultiSelect
   options={languages}
   placeholder="What languages do you know?"
-  bind:selected={$language_store}
+  bind:selected
 >
   {#snippet selectedItem({ idx, option })}
     <LanguageSnippet {option} {idx} />
   {/snippet}
 </MultiSelect>
 ```
-
-`language_store` uses custom initialization logic and a wrapper around `set` method to update `sessionStorage` on new values:
-
-<pre><code>{@html hljs.highlight(store_src, { language: 'typescript' }).value}</code></pre>

src/routes/+error.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { page } from '$app/state'
   import { homepage, name } from '$root/package.json'
-  import Icon from '@iconify/svelte'
 
   let online: boolean = $state(false)
 </script>
@@ -25,8 +24,8 @@
   {#if online === false}
     Looks like you're offline. If you think your connection is fine, check the
     <a href="https://githubstatus.com">GitHub status page</a>
-    as this site is hosted by &thinsp;<Icon icon="octicon:mark-github" inline />&thinsp;
-    GitHub Pages.
+    as this site is hosted by &thinsp;<svg><use href="#octicon-mark-github" /></svg
+    >&thinsp; GitHub Pages.
   {/if}
 
   <p>

src/routes/+layout.svelte

@@ -1,58 +1,29 @@
 <script lang="ts">
-  import { afterNavigate, goto } from '$app/navigation'
+  import { goto } from '$app/navigation'
   import { page } from '$app/state'
   import { CmdPalette } from '$lib'
   import { repository } from '$root/package.json'
   import { Footer } from '$site'
-  import { demos } from '$site/stores'
-  import { mount, type Snippet } from 'svelte'
+  import { type Snippet } from 'svelte'
   import Toc from 'svelte-toc'
   import { CopyButton, GitHubCorner } from 'svelte-zoo'
   import '../app.css'
+  import { routes } from './(demos)'
 
   interface Props {
     children?: Snippet
   }
   let { children }: Props = $props()
 
-  afterNavigate(() => {
-    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
-
-      mount(CopyButton, {
-        target: pre,
-        props: {
-          content: node.textContent ?? ``,
-          style: `position: absolute; top: 1ex; right: 1ex;`,
-        },
-      })
-    }
-  })
-
-  const routes = Object.keys(import.meta.glob(`./**/+page.{svx,svelte,md}`)).map(
-    (filename) => {
-      const parts = filename.split(`/`).filter((part) => !part.startsWith(`(`)) // remove hidden route segments
-      return { route: `/${parts.slice(1, -1).join(`/`)}`, filename }
-    },
-  )
-
-  if (routes.length < 3) {
-    console.error(`Too few demo routes found: ${routes.length}`)
-  }
-
-  $demos = routes
-    .filter(({ filename }) => filename.includes(`/(demos)/`))
-    .map(({ route }) => route)
-
   const actions = routes.map(({ route }) => ({ label: route, action: () => goto(route) }))
 </script>
 
 <CmdPalette {actions} placeholder="Go to..." />
 
 <GitHubCorner href={repository} />
 
+<CopyButton global />
+
 {#if !page.error && page.url.pathname !== `/`}
   <a href="." aria-label="Back to index page">&laquo; home</a>
 {/if}
@@ -64,11 +35,12 @@
     headingSelector="main > :where(h2, h3)"
     breakpoint={1250}
     --toc-mobile-bg="#1c0e3e"
-    --toc-font-size="9pt"
     --toc-li-padding="3pt 1ex"
     --toc-mobile-btn-color="white"
-    --toc-max-width="20em"
-    --toc-desktop-nav-margin="0 0 0 17em"
+    --toc-desktop-nav-margin="0 0 0 14em"
+    aside_style="max-width: 24em;"
+    title_element_style="font-size: 16pt; padding: 0 0 0.5em 0.5em;"
+    ol_style="font-size: 8pt"
   />
 {/if}