Remove circular import between MultiSelect and index.ts (#230)

* update deps

* move lib types to new src/lib/types.ts

* MultiSelect don't import from src/lib/index.ts

* rename GenericOption -> T

package.json

@@ -23,37 +23,37 @@
     "update-coverage": "vitest tests/unit --run --coverage && npx istanbul-badges-readme"
   },
   "dependencies": {
-    "svelte": "^3.58.0"
+    "svelte": "^3.59.1"
   },
   "devDependencies": {
     "@iconify/svelte": "^3.1.3",
     "@playwright/test": "^1.33.0",
     "@sveltejs/adapter-static": "^2.0.2",
-    "@sveltejs/kit": "^1.15.9",
+    "@sveltejs/kit": "^1.16.3",
     "@sveltejs/package": "2.0.2",
-    "@sveltejs/vite-plugin-svelte": "^2.1.1",
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.1",
-    "@vitest/coverage-c8": "^0.30.1",
-    "eslint": "^8.39.0",
+    "@sveltejs/vite-plugin-svelte": "^2.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/parser": "^5.59.5",
+    "@vitest/coverage-c8": "^0.31.0",
+    "eslint": "^8.40.0",
     "eslint-plugin-svelte3": "^4.0.0",
     "hastscript": "^7.2.0",
     "highlight.js": "^11.8.0",
-    "jsdom": "^21.1.1",
+    "jsdom": "^22.0.0",
     "mdsvex": "^0.10.6",
     "mdsvexamples": "^0.3.3",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.1.0",
-    "svelte-check": "^3.2.0",
+    "svelte-check": "^3.3.2",
     "svelte-preprocess": "^5.0.3",
     "svelte-toc": "^0.5.5",
     "svelte-zoo": "^0.4.5",
-    "svelte2tsx": "^0.6.11",
+    "svelte2tsx": "^0.6.14",
     "typescript": "5.0.4",
-    "vite": "^4.3.3",
-    "vitest": "^0.30.1"
+    "vite": "^4.3.6",
+    "vitest": "^0.31.0"
   },
   "keywords": [
     "svelte",

src/lib/MultiSelect.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import { createEventDispatcher, tick } from 'svelte'
   import { flip } from 'svelte/animate'
-  import { CircleSpinner, Wiggle } from '.'
-  import type { DispatchEvents, Option as GenericOption, MultiSelectEvents } from './'
+  import CircleSpinner from './CircleSpinner.svelte'
+  import Wiggle from './Wiggle.svelte'
   import { CrossIcon, DisabledIcon, ExpandIcon } from './icons'
+  import type { DispatchEvents, MultiSelectEvents, Option as T } from './types'
   type Option = $$Generic<GenericOption>
 
   export let activeIndex: number | null = null
@@ -19,7 +20,7 @@
   export let disabledInputTitle: string = `This input is disabled`
   // case-insensitive equality comparison after string coercion (looking only at the `label` key of object options)
   // prettier-ignore
-  export let duplicateFunc: (op1: GenericOption, op2: GenericOption) => boolean = (op1, op2) =>
+  export let duplicateFunc: (op1: T, op2: T) => boolean = (op1, op2) =>
     `${get_label(op1)}`.toLowerCase() === `${get_label(op2)}`.toLowerCase()
   export let duplicateOptionMsg: string = `This option is already selected`
   export let duplicates: boolean = false // whether to allow duplicate options
@@ -72,7 +73,7 @@
   export let value: Option | Option[] | null = null
 
   // get the label key from an option object or the option itself if it's a string or number
-  export const get_label = (op: GenericOption) => {
+  export const get_label = (op: T) => {
     if (op instanceof Object) {
       if (op.label === undefined) {
         console.error(
@@ -249,7 +250,7 @@
       )
     }
 
-    selected = [...selected] // remove option from selected list
+    selected = [...selected] // trigger Svelte rerender
 
     invalid = false // reset error status whenever items are removed
     form_input?.setCustomValidity(``)

src/lib/index.ts

@@ -2,49 +2,7 @@ export { default as CircleSpinner } from './CircleSpinner.svelte'
 export { default as CmdPalette } from './CmdPalette.svelte'
 export { default as MultiSelect, default } from './MultiSelect.svelte'
 export { default as Wiggle } from './Wiggle.svelte'
-
-export type Option = string | number | ObjectOption
-
-export type ObjectOption = {
-  label: string | number // user-displayed text
-  value?: unknown // associated value, can be anything incl. objects (defaults to label if undefined)
-  title?: string // on-hover tooltip
-  disabled?: boolean // make this option unselectable
-  preselected?: boolean // make this option selected on page load (before any user interaction)
-  disabledTitle?: string // override the default disabledTitle = 'This option is disabled'
-  selectedTitle?: string // tooltip to display when this option is selected and hovered
-  [key: string]: unknown // allow any other keys users might want
-}
-
-export type DispatchEvents<T = Option> = {
-  add: { option: T }
-  create: { option: T }
-  remove: { option: T }
-  removeAll: { options: T[] }
-  change: {
-    option?: T
-    options?: T[]
-    type: 'add' | 'remove' | 'removeAll'
-  }
-  open: { event: Event }
-  close: { event: Event }
-}
-
-export type MultiSelectEvents = {
-  [key in keyof DispatchEvents]: CustomEvent<DispatchEvents[key]>
-} & {
-  blur: FocusEvent
-  click: MouseEvent
-  focus: FocusEvent
-  keydown: KeyboardEvent
-  keyup: KeyboardEvent
-  mouseenter: MouseEvent
-  mouseleave: MouseEvent
-  touchcancel: TouchEvent
-  touchend: TouchEvent
-  touchmove: TouchEvent
-  touchstart: TouchEvent
-}
+export * from './types'
 
 // Firefox lacks support for scrollIntoViewIfNeeded (https://caniuse.com/scrollintoviewifneeded).
 // See https://github.com/janosh/svelte-multiselect/issues/87

src/lib/types.ts

@@ -0,0 +1,42 @@
+export type Option = string | number | ObjectOption
+
+export type ObjectOption = {
+  label: string | number // user-displayed text
+  value?: unknown // associated value, can be anything incl. objects (defaults to label if undefined)
+  title?: string // on-hover tooltip
+  disabled?: boolean // make this option unselectable
+  preselected?: boolean // make this option selected on page load (before any user interaction)
+  disabledTitle?: string // override the default disabledTitle = 'This option is disabled'
+  selectedTitle?: string // tooltip to display when this option is selected and hovered
+  [key: string]: unknown // allow any other keys users might want
+}
+
+export type DispatchEvents<T = Option> = {
+  add: { option: T }
+  create: { option: T }
+  remove: { option: T }
+  removeAll: { options: T[] }
+  change: {
+    option?: T
+    options?: T[]
+    type: 'add' | 'remove' | 'removeAll'
+  }
+  open: { event: Event }
+  close: { event: Event }
+}
+
+export type MultiSelectEvents = {
+  [key in keyof DispatchEvents]: CustomEvent<DispatchEvents[key]>
+} & {
+  blur: FocusEvent
+  click: MouseEvent
+  focus: FocusEvent
+  keydown: KeyboardEvent
+  keyup: KeyboardEvent
+  mouseenter: MouseEvent
+  mouseleave: MouseEvent
+  touchcancel: TouchEvent
+  touchend: TouchEvent
+  touchmove: TouchEvent
+  touchstart: TouchEvent
+}