update to svelte-package v2

.github/workflows/test.yml

@@ -44,6 +44,6 @@ jobs:
           npm install
           npm run package
           npm login
-          npm publish ./package
+          npm publish
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -4,7 +4,7 @@ node_modules
 # production build
 .svelte-kit
 build
-package
+dist
 
 # test coverage reports
 coverage

contributing.md

@@ -75,4 +75,4 @@ Push the release commit and tag to `origin/main`:
 git push && git push --tags
 ```
 
-Finally [publish a new release on GitHub](https://github.com/janosh/svelte-multiselect/releases/new).
+Finally, [publish a new release on GitHub](https://github.com/janosh/svelte-multiselect/releases/new).

package.json

@@ -7,31 +7,34 @@
   "license": "MIT",
   "version": "8.3.0",
   "type": "module",
-  "svelte": "index.js",
+  "svelte": "./dist/index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
     "package": "svelte-package",
     "serve": "vite build && vite preview",
-    "check": "svelte-check --ignore package",
+    "check": "svelte-check --ignore dist",
     "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",
     "update-coverage": "vitest tests/unit --run --coverage && npx istanbul-badges-readme"
   },
+  "dependencies": {
+    "svelte": "^3.55.1"
+  },
   "devDependencies": {
     "@iconify/svelte": "^3.1.0",
-    "@playwright/test": "^1.30.0",
+    "@playwright/test": "^1.31.0",
     "@sveltejs/adapter-static": "^2.0.1",
-    "@sveltejs/kit": "^1.5.5",
-    "@sveltejs/package": "1.0.2",
+    "@sveltejs/kit": "^1.8.3",
+    "@sveltejs/package": "2.0.2",
     "@sveltejs/vite-plugin-svelte": "^2.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.51.0",
-    "@typescript-eslint/parser": "^5.51.0",
-    "@vitest/coverage-c8": "^0.28.4",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
+    "@vitest/coverage-c8": "^0.28.5",
     "eslint": "^8.34.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.2.0",
@@ -43,15 +46,14 @@
     "prettier-plugin-svelte": "^2.9.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.1.0",
-    "svelte": "^3.55.1",
     "svelte-check": "^3.0.3",
     "svelte-preprocess": "^5.0.1",
     "svelte-toc": "^0.5.2",
-    "svelte-zoo": "^0.2.4",
+    "svelte-zoo": "^0.3.4",
     "svelte2tsx": "^0.6.1",
     "typescript": "^4.9.5",
-    "vite": "^4.1.1",
-    "vitest": "^0.28.4"
+    "vite": "^4.1.4",
+    "vitest": "^0.28.5"
   },
   "keywords": [
     "svelte",
@@ -62,5 +64,20 @@
   ],
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "exports": {
+    "./MultiSelect.svelte": {
+      "types": "./dist/MultiSelect.svelte.d.ts",
+      "svelte": "./dist/MultiSelect.svelte",
+      "default": "./dist/MultiSelect.svelte"
+    },
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ]
 }

src/lib/MultiSelect.svelte

@@ -140,7 +140,7 @@
     throw `Run time error, activeIndex=${activeIndex} is out of bounds, matchingOptions.length=${matchingOptions.length}`
   }
   // update activeOption when activeIndex changes
-  $: activeOption = activeIndex !== null ? matchingOptions[activeIndex] : null
+  $: activeOption = matchingOptions[activeIndex ?? -1] ?? null
 
   // add an option to selected list
   function add(label: string | number, event: Event) {
@@ -257,7 +257,7 @@
   function close_dropdown(event: Event) {
     open = false
     input?.blur()
-    activeOption = null
+    activeIndex = null
     dispatch(`close`, { event })
   }
 

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

@@ -23,7 +23,7 @@
   placeholder="What languages do you know?"
   bind:selected={$language_store}
 >
-  <LanguageSlot let:option {option} slot="selected" />
+  <LanguageSlot let:option {option} let:idx {idx} slot="selected" />
 </MultiSelect>
 ```
 

src/site/Examples.svx

@@ -19,8 +19,8 @@
   placeholder="Take your pick..."
   bind:selected
 >
-  <LanguageSlot let:option {option} slot="selected" />
-  <LanguageSlot let:option {option} slot="option" />
+  <LanguageSlot let:idx {idx} let:option {option} slot="selected" />
+  <LanguageSlot let:idx {idx} let:option {option} slot="option" gap="1em" />
 </MultiSelect>
 ```
 

src/site/LanguageSlot.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   export let option: string
+  export let idx: number | undefined = undefined
   export let height = `20px`
   export let gap = '5pt'
 
@@ -13,8 +14,10 @@
 </script>
 
 <span style:gap>
+  {#if idx !== undefined}
+    <strong>{idx + 1}</strong>
+  {/if}
   <img {src} {height} alt={option} {hidden} on:error={() => (hidden = true)} />
-
   {option}
 </span>
 

svelte.config.js

@@ -51,12 +51,6 @@ export default {
     },
   },
 
-  package: {
-    // exclude icon and helper component files from package.json "exports"
-    exports: (filepath) =>
-      [`MultiSelect.svelte`, `index.ts`, `package.json`].includes(filepath),
-  },
-
   compilerOptions: {
     // https://github.com/janosh/svelte-multiselect/issues/196
     immutable: true,

tests/multiselect.test.ts

@@ -297,7 +297,7 @@ test.describe(`multiselect`, async () => {
 
     await page.reload()
 
-    const selected_text = await page.textContent(`text=Haskell JavaScript`)
+    const selected_text = await page.textContent(`text=4 Haskell 5 JavaScript`)
     expect(selected_text).toContain(`JavaScript`)
     expect(selected_text).toContain(`Haskell`)
   })
@@ -563,12 +563,12 @@ test(`dragging selected options across each other changes their order`, async ({
   // https://github.com/janosh/svelte-multiselect/issues/176
   await page.goto(`/persistent`, { waitUntil: `networkidle` })
   let selected = await page.textContent(`ul.selected`)
-  expect(selected?.trim()).toBe(`Python  TypeScript  C  Haskell`)
+  expect(selected?.trim()).toBe(`1  Python 2  TypeScript 3  C 4  Haskell`)
 
   // swap selected options 1 and 2
   const li1 = await page.locator(`ul.selected li:nth-child(1)`)
   const li2 = await page.locator(`ul.selected li:nth-child(2)`)
   await li1?.dragTo(li2)
   selected = await page.textContent(`ul.selected`)
-  expect(selected?.trim()).toBe(`TypeScript  Python  C  Haskell`)
+  expect(selected?.trim()).toBe(`1  TypeScript 2  Python 3  C 4  Haskell`)
 })

vite.config.ts

@@ -1,10 +1,10 @@
 import { sveltekit } from '@sveltejs/kit/vite'
-import examples from 'mdsvexamples/vite'
+import mdsvexamples from 'mdsvexamples/vite'
 import type { UserConfig } from 'vite'
 import type { UserConfig as VitestConfig } from 'vitest'
 
 const vite_config: UserConfig & { test: VitestConfig } = {
-  plugins: [sveltekit(), examples],
+  plugins: [sveltekit(), mdsvexamples],
 
   test: {
     environment: `jsdom`,