update deps, set TS moduleResolution=bundler

add PrevNext links to demo layout

.github/workflows/gh-pages.yml

@@ -28,7 +28,7 @@ jobs:
           cache-dependency-path: package.json
 
       - name: Install dependencies
-        run: npm install
+        run: npm install --force
 
       - name: Build site
         run: npm run build

.github/workflows/test.yml

@@ -24,7 +24,7 @@ jobs:
 
       - name: Install dependencies
         run: |
-          npm install
+          npm install --force
           npx playwright install chromium
 
       - name: Run tests
@@ -41,7 +41,7 @@ jobs:
 
       - name: Build package and publish to NPM
         run: |
-          npm install
+          npm install --force
           npm run package
           npm login --auth-type=legacy
           npm publish

package.json

@@ -32,8 +32,8 @@
     "@sveltejs/kit": "^1.11.0",
     "@sveltejs/package": "2.0.2",
     "@sveltejs/vite-plugin-svelte": "^2.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.54.1",
-    "@typescript-eslint/parser": "^5.54.1",
+    "@typescript-eslint/eslint-plugin": "^5.55.0",
+    "@typescript-eslint/parser": "^5.55.0",
     "@vitest/coverage-c8": "^0.29.2",
     "eslint": "^8.36.0",
     "eslint-plugin-svelte3": "^4.0.0",
@@ -46,12 +46,12 @@
     "prettier-plugin-svelte": "^2.9.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.1.0",
-    "svelte-check": "^3.1.2",
-    "svelte-preprocess": "^5.0.1",
+    "svelte-check": "^3.1.4",
+    "svelte-preprocess": "^5.0.2",
     "svelte-toc": "^0.5.3",
-    "svelte-zoo": "^0.3.4",
-    "svelte2tsx": "^0.6.7",
-    "typescript": "^4.9.5",
+    "svelte-zoo": "^0.4.3",
+    "svelte2tsx": "^0.6.9",
+    "typescript": "5.0.1-rc",
     "vite": "^4.1.4",
     "vitest": "^0.29.2"
   },

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

@@ -1,6 +1,9 @@
 <script lang="ts">
+  import { page } from '$app/stores'
   import { name } from '$root/package.json'
   import { DemoNav } from '$site'
+  import { demos } from '$site/stores'
+  import { PrevNext } from 'svelte-zoo'
 </script>
 
 <h1>
@@ -11,6 +14,12 @@
   <DemoNav style="place-content: center;" />
 
   <slot />
+
+  <PrevNext
+    items={$demos}
+    current={$page.url.pathname}
+    style="max-width: 55em; margin: auto;"
+  />
 </main>
 
 <style>

src/routes/(demos)/allow-user-options/+page.svx

@@ -1,6 +1,6 @@
 <script lang="ts">
   import MultiSelect from '$lib'
-  import { foods, languages } from '$src/options'
+  import { foods, languages } from '$site/options'
   import { LanguageSlot } from '$site'
 
   let selected_empty = []
@@ -13,7 +13,7 @@
 ```svelte example stackblitz id="foods"
 <script>
   import MultiSelect from '$lib'
-  import { foods } from '$src/options'
+  import { foods } from '$site/options'
 
   let selected = '🍇 Grapes, 🍈 Melon, 🍉 Watermelon, 🍊 Tangerine'.split(', ')
 </script>
@@ -34,7 +34,7 @@
 ```svelte example stackblitz id="languages"
 <script>
   import MultiSelect from '$lib'
-  import { languages } from '$src/options'
+  import { languages } from '$site/options'
   import { LanguageSlot } from '$site'
 
   let selected_append = ['Haskell', 'TypeScript']

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

@@ -8,7 +8,7 @@ This example shows the JavaScript way of handling MultiSelect fields in form sub
 <script lang="ts">
   import MultiSelect from '$lib'
   import { ColorSlot } from '$site'
-  import { colors } from '$src/options'
+  import { colors } from '$site/options'
 
   async function handle_submit(event: SubmitEvent) {
     // use bind:this={form} or event.target as arg to new FormData()

src/routes/(demos)/kit-form-actions/+page.svx

@@ -16,7 +16,7 @@ HTML.
 <script lang="ts">
   import MultiSelect from '$lib'
   import { ColorSlot } from '$site'
-  import { colors } from '$src/options'
+  import { colors } from '$site/options'
   import { repository } from '$root/package.json'
   import type { ActionData, PageServerData } from './$types'
 

src/routes/(demos)/min-max-select/+page.svx

@@ -5,7 +5,7 @@
 ```svelte example stackblitz id="languages"
 <script lang="ts">
   import MultiSelect from '$lib'
-  import { languages } from '$src/options'
+  import { languages } from '$site/options'
   import { LanguageSlot } from '$site'
 </script>
 

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

@@ -1,7 +1,7 @@
 <script lang="ts">
   import hljs from 'highlight.js/lib/common'
   import 'highlight.js/styles/vs2015.css'
-  import store_code from '/src/stores.ts?raw'
+  import store_code from '$site/stores.ts?raw'
 </script>
 
 ## Page-Reload Persistent MultiSelect
@@ -13,9 +13,9 @@
 ```svelte example stackblitz id="languages"
 <script>
   import MultiSelect from '$lib'
-  import { languages } from '$src/options'
+  import { languages } from '$site/options'
   import { LanguageSlot } from '$site'
-  import { language_store } from '$src/stores'
+  import { language_store } from '$site/stores'
 </script>
 
 <MultiSelect

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

@@ -5,7 +5,7 @@
 ```svelte example stackblitz id="languages-1"
 <script>
   import MultiSelect from '$lib'
-  import { languages } from '$src/options'
+  import { languages } from '$site/options'
   import { LanguageSlot, MinusIcon } from '$site'
   import { Icon } from 'svelte-zoo'
 </script>
@@ -28,7 +28,7 @@
 ```svelte example stackblitz id="languages-2"
 <script>
   import MultiSelect from '$lib'
-  import { languages } from '$src/options'
+  import { languages } from '$site/options'
   import { LanguageSlot } from '$site'
   import { Icon } from 'svelte-zoo'
 

src/routes/(demos)/sort-selected/+page.svx

@@ -5,7 +5,7 @@
 ```svelte example stackblitz id="default-sort"
 <script>
   import MultiSelect from '$lib'
-  import { frontend_libs } from '$src/options'
+  import { frontend_libs } from '$site/options'
 </script>
 
 <MultiSelect
@@ -22,7 +22,7 @@
 ```svelte example stackblitz id="custom-sort"
 <script lang="ts">
   import MultiSelect, { type Option } from '$lib'
-  import { frontend_libs } from '$src/options'
+  import { frontend_libs } from '$site/options'
 
   const sortSelected = (op1: Option, op2: Option) => {
     if (op1.lang !== op2.lang) return op1.lang.localeCompare(op2.lang)

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

@@ -6,7 +6,7 @@
 ```svelte example stackblitz id="foods"
 <script>
   import MultiSelect from '$lib'
-  import { foods } from '$src/options'
+  import { foods } from '$site/options'
 </script>
 
 <MultiSelect

src/routes/+layout.svelte

@@ -3,18 +3,27 @@
   import { page } from '$app/stores'
   import { CmdPalette } from '$lib'
   import { repository } from '$root/package.json'
+  import { Footer } from '$site'
+  import { demos } from '$site/stores'
   import { GitHubCorner } from 'svelte-zoo'
   import '../app.css'
-  import Footer from '../site/Footer.svelte'
 
-  const actions = Object.keys(import.meta.glob(`./**/+page.{svx,svelte,md}`)).map(
+  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
-      const route = `/${parts.slice(1, -1).join(`/`)}`
-
-      return { label: route, action: () => goto(route) }
+      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..." />

src/site/DemoNav.svelte

@@ -1,24 +1,17 @@
 <script lang="ts">
   import { page } from '$app/stores'
+  import { demos } from './stores'
 
   export let style: string | null = null
 
-  const routes = Object.keys(
-    // eslint-disable-next-line @typescript-eslint/quotes
-    import.meta.glob('/src/routes/\\(demos\\)/*/+page*.{svx,md,svelte}')
-  ).map((filename) => filename.split(`/`)[4])
-
-  if (routes.length < 3) {
-    throw new Error(`Too few demo routes found: ${routes.length}`)
-  }
   $: is_current = (path: string) => {
     if (`/${path}` == $page.url.pathname) return `page`
     return undefined
   }
 </script>
 
 <nav {style}>
-  {#each routes as href, idx}
+  {#each $demos as href, idx}
     {#if idx > 0}<strong>&bull;</strong>{/if}
     <a {href} aria-current={is_current(href)}>{href}</a>
   {/each}

src/site/Examples.svx

@@ -5,7 +5,7 @@
 ```svelte example collapsible repl="https://svelte.dev/repl/e3b88f59f62b498d943ecf7756ab75d7" stackblitz="src/site/Examples.svx"
 <script lang="ts">
   import MultiSelect from '$lib'
-  import { languages } from '../options'
+  import { languages } from '$site/options'
   import LanguageSlot from './LanguageSlot.svelte'
 
   let selected: string[]
@@ -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 { ml_libs } from '../options'
+  import { ml_libs } from '$site/options'
 
   let value: { label: string, disabled: boolean, preselected: boolean }
   let searchText = ''
@@ -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 { frontend_libs } from '../options'
+  import { frontend_libs } from '$site/options'
   import RepoSlot from './RepoSlot.svelte'
   import { Confetti } from 'svelte-zoo'
   import type { ObjectOption } from '$lib'
@@ -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 { colors } from '../options'
+  import { colors } from '$site/options'
   import ColorSlot from './ColorSlot.svelte'
 
   let selected: string[]
@@ -142,7 +142,7 @@
 ```svelte example collapsible repl="https://svelte.dev/repl/4ff40862436e4bfbb2bd55d234352bb1" stackblitz="src/site/Examples.svx"
 <script lang="ts">
   import MultiSelect from '$lib'
-  import { countries } from '../options'
+  import { countries } from '$site/options'
 
   let selected: string[]
   // required={1} means form validation will prevent submission if no option selected

src/site/stores.ts

@@ -0,0 +1,9 @@
+import { session_store } from 'svelte-zoo'
+import { writable } from 'svelte/store'
+
+export const language_store = session_store<string[]>(
+  `language-store`,
+  `Python TypeScript C Haskell`.split(` `)
+)
+
+export const demos = writable<string[]>([])

tests/MultiSelect.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test'
-import { foods } from '../src/options.ts'
+import { foods } from '../src/site/options.ts'
 import { wait_for_animation_end } from './index.ts'
 
 // to run tests in this file, use `npm run test:e2e`

tsconfig.json

@@ -4,7 +4,7 @@
     "strict": true,
     "module": "esnext",
     "target": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
 
     // Svelte Preprocess cannot figure out whether you have a value or a type, so tell TypeScript
     // to enforce using `import type` instead of `import` for Types.