svelte-multiselect - npm Package Compare versions

Comparing version 8.2.3 to 8.2.4

changelog.md

@@ -5,2 +5,17 @@ ### Changelog
 
+#### [v8.2.4](https://github.com/janosh/svelte-multiselect/compare/v8.2.3...v8.2.4)
+
+> 8 January 2023
+
+- Coverage badges [`#190`](https://github.com/janosh/svelte-multiselect/pull/190)
+- feat: add type inference for the `options` prop [`#189`](https://github.com/janosh/svelte-multiselect/pull/189)
+- feat: add type inference for the `options` prop (#189) [`#78`](https://github.com/janosh/svelte-multiselect/issues/78)
+- merge ExampleCode.svelte with CollapsibleCode.svelte [`56ff99b`](https://github.com/janosh/svelte-multiselect/commit/56ff99bcc378c5582b303aa1c03302cdbceb3076)
+- pnpm add -D svelte-zoo to outsource some site components and icons [`6ee64f3`](https://github.com/janosh/svelte-multiselect/commit/6ee64f376dfe166b993c94a36d376d1dce5f44f5)
+- restore reactive searchText block in loading example [`846da66`](https://github.com/janosh/svelte-multiselect/commit/846da66af058ac1f448c8aaa513d12fb4c2ac4cc)
+- fix bunch of TS errors, add playwright test for dragging selected options to reorder [`a483217`](https://github.com/janosh/svelte-multiselect/commit/a4832176f6fceb5346af2d4cd8ecc01a5626ab43)
+- add update-coverage package.json script [`1094f08`](https://github.com/janosh/svelte-multiselect/commit/1094f08cec9d6fd2f54b058af05022ab35ec4ac9)
+- add vite alias $root to clean up package.json, readme|contributing|changelog.md imports [`c19cbe4`](https://github.com/janosh/svelte-multiselect/commit/c19cbe4e38413bbcd04d4e35eddcd4cd88c67662)
+- mv src/components src/site [`3683ed7`](https://github.com/janosh/svelte-multiselect/commit/3683ed70f19498070ffe9e95c0261c688fb2f7c7)
+
 <!-- auto-changelog-above -->
@@ -120,3 +135,3 @@
 - Add SCSS preprocessing [`#126`](https://github.com/janosh/svelte-multiselect/pull/126)
-- [pre-commit.ci] pre-commit autoupdate [`#124`](https://github.com/janosh/svelte-multiselect/pull/124)
+- pre-commit autoupdate [`#124`](https://github.com/janosh/svelte-multiselect/pull/124)
 - more unit tests [`1adbc99`](https://github.com/janosh/svelte-multiselect/commit/1adbc994b746b39c4ad081dc2573bf37f27c96c0)
@@ -191,3 +206,3 @@ - test required but empty MultiSelect fails form validity check (i.e. causes unsubmittable form) and filled one passes it [`fd8b377`](https://github.com/janosh/svelte-multiselect/commit/fd8b37782cd508aacfc8125c6647cefe56144b80)
 - Add new slot `'remove-icon'` [`#93`](https://github.com/janosh/svelte-multiselect/pull/93)
-- [pre-commit.ci] pre-commit autoupdate [`#92`](https://github.com/janosh/svelte-multiselect/pull/92)
+- pre-commit autoupdate [`#92`](https://github.com/janosh/svelte-multiselect/pull/92)
 
@@ -230,3 +245,3 @@ #### [v5.0.3](https://github.com/janosh/svelte-multiselect/compare/v5.0.2...v5.0.3)
 - Several fixes for `allowUserOptions` [`#69`](https://github.com/janosh/svelte-multiselect/pull/69)
-- [pre-commit.ci] pre-commit autoupdate [`#70`](https://github.com/janosh/svelte-multiselect/pull/70)
+- pre-commit autoupdate [`#70`](https://github.com/janosh/svelte-multiselect/pull/70)
 
@@ -354,3 +369,3 @@ #### [v4.0.5](https://github.com/janosh/svelte-multiselect/compare/v4.0.4...v4.0.5)
 - update readme + svelte-toc@0.2.0 [`40013ba`](https://github.com/janosh/svelte-multiselect/commit/40013badd61dd0fcade7ab295dabd26693e3cc51)
-- [pre-commit.ci] pre-commit autoupdate [`0d05864`](https://github.com/janosh/svelte-multiselect/commit/0d05864d19987460dd30d667eb22deb91a520668)
+- pre-commit autoupdate [`0d05864`](https://github.com/janosh/svelte-multiselect/commit/0d05864d19987460dd30d667eb22deb91a520668)
 - iOS Safari prevent zoom into page on focus MultiSelect input [`44f17be`](https://github.com/janosh/svelte-multiselect/commit/44f17be53378e38f4a8748b815737d25cdebc85f)
@@ -406,3 +421,3 @@
 - add pre-commit hooks [`dfb6399`](https://github.com/janosh/svelte-multiselect/commit/dfb6399a77b705f8e5979eb887d345a5f52ff929)
-- [pre-commit.ci] pre-commit autoupdate [`b69425d`](https://github.com/janosh/svelte-multiselect/commit/b69425d18473122f1af889d2f48c60d02e43b99f)
+- pre-commit autoupdate [`b69425d`](https://github.com/janosh/svelte-multiselect/commit/b69425d18473122f1af889d2f48c60d02e43b99f)
 
@@ -499,3 +514,3 @@ #### [v1.1.11](https://github.com/janosh/svelte-multiselect/compare/v1.1.10...v1.1.11)
 
-#### v1.0.0
+### v1.0.0
 
@@ -502,0 +517,0 @@ > 7 May 2021

icons/ChevronExpand.svelte.d.ts

@@ -5,3 +5,3 @@ /** @typedef {typeof __propDef.props}  ChevronExpandProps */
 export default class ChevronExpand extends SvelteComponentTyped<{
-    [x: string]: never;
+    [x: string]: any;
 }, {
@@ -17,3 +17,3 @@ [evt: string]: CustomEvent<any>;
     props: {
-        [x: string]: never;
+        [x: string]: any;
     };
@@ -20,0 +20,0 @@ events: {

icons/Cross.svelte.d.ts

@@ -5,3 +5,3 @@ /** @typedef {typeof __propDef.props}  CrossProps */
 export default class Cross extends SvelteComponentTyped<{
-    [x: string]: never;
+    [x: string]: any;
 }, {
@@ -17,3 +17,3 @@ [evt: string]: CustomEvent<any>;
     props: {
-        [x: string]: never;
+        [x: string]: any;
     };
@@ -20,0 +20,0 @@ events: {

icons/Disabled.svelte.d.ts

@@ -5,3 +5,3 @@ /** @typedef {typeof __propDef.props}  DisabledProps */
 export default class Disabled extends SvelteComponentTyped<{
-    [x: string]: never;
+    [x: string]: any;
 }, {
@@ -17,3 +17,3 @@ [evt: string]: CustomEvent<any>;
     props: {
-        [x: string]: never;
+        [x: string]: any;
     };
@@ -20,0 +20,0 @@ events: {

icons/Octocat.svelte.d.ts

@@ -5,3 +5,3 @@ /** @typedef {typeof __propDef.props}  OctocatProps */
 export default class Octocat extends SvelteComponentTyped<{
-    [x: string]: never;
+    [x: string]: any;
 }, {
@@ -17,3 +17,3 @@ [evt: string]: CustomEvent<any>;
     props: {
-        [x: string]: never;
+        [x: string]: any;
     };
@@ -20,0 +20,0 @@ events: {

index.d.ts

@@ -50,1 +50,2 @@ export { default } from './MultiSelect.svelte';
 };
+export declare function scroll_into_view_if_needed_polyfill(centerIfNeeded?: boolean): IntersectionObserver;

index.js

@@ -6,19 +6,23 @@ export { default } from './MultiSelect.svelte';
 // https://github.com/nuxodin/lazyfill/blob/a8e63/polyfills/Element/prototype/scrollIntoViewIfNeeded.js
+// exported for testing
+export function scroll_into_view_if_needed_polyfill(centerIfNeeded = true) {
+    const el = this;
+    const observer = new IntersectionObserver(function ([entry]) {
+        const ratio = entry.intersectionRatio;
+        if (ratio < 1) {
+            const place = ratio <= 0 && centerIfNeeded ? `center` : `nearest`;
+            el.scrollIntoView({
+                block: place,
+                inline: place,
+            });
+        }
+        this.disconnect();
+    });
+    observer.observe(this);
+    return observer; // return for testing
+}
 if (typeof Element !== `undefined` &&
     !Element.prototype?.scrollIntoViewIfNeeded &&
     typeof IntersectionObserver !== `undefined`) {
-    Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded = true) {
-        const el = this;
-        new IntersectionObserver(function ([entry]) {
-            const ratio = entry.intersectionRatio;
-            if (ratio < 1) {
-                const place = ratio <= 0 && centerIfNeeded ? `center` : `nearest`;
-                el.scrollIntoView({
-                    block: place,
-                    inline: place,
-                });
-            }
-            this.disconnect();
-        }).observe(this);
-    };
+    Element.prototype.scrollIntoViewIfNeeded = scroll_into_view_if_needed_polyfill;
 }

MultiSelect.svelte.d.ts

 import { SvelteComponentTyped } from "svelte";
-import type { MultiSelectEvents, Option } from './';
-declare const __propDef: {
-    props: {
+import type { MultiSelectEvents, Option as GenericOption } from './';
+declare class __sveltets_Render<Option extends GenericOption> {
+    props(): {
         activeIndex?: number | null | undefined;
@@ -15,3 +15,3 @@ activeOption?: Option | null | undefined;
         disabledInputTitle?: string | undefined;
-        duplicateFunc?: ((op1: Option, op2: Option) => boolean) | undefined;
+        duplicateFunc?: ((op1: GenericOption, op2: GenericOption) => boolean) | undefined;
         duplicateOptionMsg?: string | undefined;
@@ -57,3 +57,4 @@ duplicates?: boolean | undefined;
     };
-    slots: {
+    events(): MultiSelectEvents;
+    slots(): {
         'expand-icon': {
@@ -74,9 +75,8 @@ open: boolean;
     };
-    events: MultiSelectEvents;
-};
-export type MultiSelectProps = typeof __propDef.props;
-export type MultiSelectEvents = typeof __propDef.events;
-export type MultiSelectSlots = typeof __propDef.slots;
-export default class MultiSelect extends SvelteComponentTyped<MultiSelectProps, MultiSelectEvents, MultiSelectSlots> {
 }
+export type MultiSelectProps<Option extends GenericOption> = ReturnType<__sveltets_Render<Option>['props']>;
+export type MultiSelectEvents<Option extends GenericOption> = ReturnType<__sveltets_Render<Option>['events']>;
+export type MultiSelectSlots<Option extends GenericOption> = ReturnType<__sveltets_Render<Option>['slots']>;
+export default class MultiSelect<Option extends GenericOption> extends SvelteComponentTyped<MultiSelectProps<Option>, MultiSelectEvents<Option>, MultiSelectSlots<Option>> {
+}
 export {};

package.json

@@ -8,25 +8,24 @@ {
   "license": "MIT",
-  "version": "8.2.3",
+  "version": "8.2.4",
   "type": "module",
   "svelte": "index.js",
-  "main": "index.js",
   "bugs": "https://github.com/janosh/svelte-multiselect/issues",
   "devDependencies": {
     "@iconify/svelte": "^3.0.1",
-    "@playwright/test": "^1.29.0",
-    "@sveltejs/adapter-static": "1.0.0",
-    "@sveltejs/kit": "1.0.1",
-    "@sveltejs/package": "1.0.1",
+    "@playwright/test": "^1.29.2",
+    "@sveltejs/adapter-static": "1.0.1",
+    "@sveltejs/kit": "1.0.7",
+    "@sveltejs/package": "1.0.2",
     "@sveltejs/vite-plugin-svelte": "^2.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.46.1",
-    "@typescript-eslint/parser": "^5.46.1",
-    "@vitest/coverage-c8": "^0.25.8",
-    "eslint": "^8.30.0",
+    "@typescript-eslint/eslint-plugin": "^5.48.0",
+    "@typescript-eslint/parser": "^5.48.0",
+    "@vitest/coverage-c8": "^0.26.3",
+    "eslint": "^8.31.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "hastscript": "^7.1.0",
+    "hastscript": "^7.2.0",
     "highlight.js": "^11.7.0",
-    "jsdom": "^20.0.3",
+    "jsdom": "^21.0.0",
     "mdsvex": "^0.10.6",
     "mdsvexamples": "^0.3.3",
-    "prettier": "^2.8.1",
+    "prettier": "^2.8.2",
     "prettier-plugin-svelte": "^2.9.0",
@@ -36,11 +35,12 @@ "rehype-autolink-headings": "^6.1.1",
     "svelte": "^3.55.0",
-    "svelte-check": "^2.10.2",
-    "svelte-github-corner": "^0.1.0",
+    "svelte-check": "^3.0.1",
+    "svelte-github-corner": "^0.2.0",
     "svelte-preprocess": "^5.0.0",
-    "svelte-toc": "^0.5.0",
-    "svelte2tsx": "^0.5.22",
+    "svelte-toc": "^0.5.1",
+    "svelte-zoo": "^0.1.4",
+    "svelte2tsx": "^0.6.0",
     "tslib": "^2.4.1",
     "typescript": "^4.9.4",
-    "vite": "^4.0.1",
-    "vitest": "^0.25.8"
+    "vite": "^4.0.4",
+    "vitest": "^0.26.3"
   },
@@ -47,0 +47,0 @@ "keywords": [

readme.md

@@ -24,3 +24,3 @@ <h1 align="center">
 
-## 💡 &nbsp; Features
+## 💡 &thinsp; Features
 
@@ -38,4 +38,10 @@ - **Bindable:** `bind:selected` gives you an array of the currently selected options. Thanks to Svelte's 2-way binding, it can also control the component state externally through assignment `selected = ['foo', 42]`.
 
-## 📜 &nbsp; Breaking changes
+## 🧪 &thinsp; Coverage
 
+| Statements                                                                                 | Branches                                                                             | Lines                                                                            |
+| ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------- |
+| ![Statements](https://img.shields.io/badge/statements-92.95%25-brightgreen.svg?style=flat) | ![Branches](https://img.shields.io/badge/branches-100%25-brightgreen.svg?style=flat) | ![Lines](https://img.shields.io/badge/lines-92.95%25-brightgreen.svg?style=flat) |
+
+## 📜 &thinsp; Breaking changes
+
 - **6.1.0**&nbsp; The `dispatch` events `focus` and `blur` were renamed to `open` and `close`, respectively. These actions refer to the dropdown list, i.e. `<MultiSelect on:open={(event) => console.log(event)}>` will trigger when the dropdown list opens. The focus and blur events are now regular DOM (not Svelte `dispatch`) events emitted by the `<input>` node. [PR 120](https://github.com/janosh/svelte-multiselect/pull/120).
@@ -47,11 +53,11 @@ - **v7.0.0**&nbsp; `selected` (as well `selectedLabels` and `selectedValues`) used to be arrays always. Now, if `maxSelect=1`, they will no longer be a length-1 array but simply a single a option (label/value respectively) or `null` if no option is selected. [PR 123](https://github.com/janosh/svelte-multiselect/pull/123).
 
-## 🔨 &nbsp; Installation
+## 🔨 &thinsp; Installation
 
 ```sh
-npm install -D svelte-multiselect
-pnpm add -D svelte-multiselect
-yarn add -D svelte-multiselect
+npm install --dev svelte-multiselect
+pnpm add --dev svelte-multiselect
+yarn add --dev svelte-multiselect
 ```
 
-## 📙 &nbsp; Usage
+## 📙 &thinsp; Usage
 
@@ -74,3 +80,3 @@ ```svelte
 
-## 🔣 &nbsp; Props
+## 🔣 &thinsp; Props
 
@@ -142,3 +148,3 @@ Full list of props/bindable variables for this component. The `Option` type you see below is defined in [`src/lib/index.ts`](https://github.com/janosh/svelte-multiselect/blob/main/src/lib/index.ts) and can be imported as `import { type Option } from 'svelte-multiselect'`.
 1. ```ts
-   duplicateFunc: (op1: Option, op2: Option) => boolean = (op1, op2) =>
+   duplicateFunc: (op1: GenericOption, op2: GenericOption) => boolean = (op1, op2) =>
     `${get_label(op1)}`.toLowerCase() === `${get_label(op2)}`.toLowerCase()
@@ -352,3 +358,3 @@ ```
 
-## 🎰 &nbsp; Slots
+## 🎰 &thinsp; Slots
 
@@ -385,3 +391,3 @@ `MultiSelect.svelte` accepts the following named slots:
 
-## 🎬 &nbsp; Events
+## 🎬 &thinsp; Events
 
@@ -449,21 +455,32 @@ `MultiSelect.svelte` dispatches the following events:
 
-## 🦺 &nbsp; TypeScript
+## 🦺 &thinsp; TypeScript
 
-TypeScript users can import the types used for internal type safety:
+The type of `options` is inferred automatically from the data you pass. E.g.
 
-```svelte
-<script lang="ts">
-  import MultiSelect from 'svelte-multiselect'
-  import type { Option, ObjectOption } from 'svelte-multiselect'
+```ts
+const options = [
+   { label: `foo`, value: 42 }
+   { label: `bar`, value: 69 }
+]
+// type Option = { label: string, value: number }
+const options = [`foo`, `bar`]
+// type Option = string
+const options = [42, 69]
+// type Option = number
+```
 
-  const myOptions: ObjectOption[] = [
-    { label: 'foo', value: 42 },
-    { label: 'bar', value: 69 },
-  ]
-  // an Option can be string | number | ObjectOption
-  const myNumbers: Option[] = [42, 69]
-</script>
+The inferred type of `Option` is used to enforce type-safety on derived props like `selected` as well as slot components. E.g. you'll get an error when trying to use a slot component that expects a string if your options are objects (see [this comment](https://github.com/janosh/svelte-multiselect/pull/189/files#r1058853697) for example screenshots).
+
+You can also import [the types this component uses](https://github.com/janosh/svelte-multiselect/blob/main/src/lib/index.ts) for downstream applications:
+
+```ts
+import {
+  Option,
+  ObjectOption,
+  DispatchEvents,
+  MultiSelectEvents,
+} from 'svelte-multiselect'
 ```
 
-## ✨ &nbsp; Styling
+## ✨ &thinsp; Styling
 
@@ -619,8 +636,8 @@ There are 3 ways to style this component. To understand which options do what, it helps to keep in mind this simplified DOM structure of the component:
 
-## 🆕 &nbsp; Changelog
+## 🆕 &thinsp; Changelog
 
 [View the changelog](changelog.md).
 
-## 🙏 &nbsp; Contributing
+## 🙏 &thinsp; Contributing
 
 Here are some steps to [get you started](contributing.md) if you'd like to contribute to this project!

No alert changes

Improved metrics

Total package byte prevSize

106196

increased by3.45%

Lines of code

299

increased by1.7%

Number of lines in readme file

635

increased by2.75%

Worsened metrics

Dev dependency count

31

increased by3.33%

No dependency changes