@zerodevx/svelte-toast - npm Package Compare versions

Comparing version 1.0.0-rc.1 to 1.0.0-rc.2

index.d.ts

@@ -1,58 +0,2 @@
-// index.d.ts
-import type { SvelteComponent } from 'svelte'
-import type { FlyParams } from 'svelte/types/runtime/transition/index'
-import type { Subscriber, Unsubscriber } from 'svelte/types/runtime/store/index'
-
-declare module '@zerodevx/svelte-toast'
-
-/**
- * Default Toast Options
- * ```typescript
- * {
- *   duration: 4000,       // duration of progress bar tween to the `next` value
- *   initial: 1,           // initial progress bar value
- *   next: 0,              // next progress value
- *   pausable: false,      // pause progress bar tween on mouse hover
- *   dismissable: true,    // allow dismiss with close button
- *   reversed: false,      // insert new toast to bottom of stack
- *   intro: { x: 256 },    // toast intro fly animation settings
- *   theme: {},            // css var overrides
- *   classes: []           // user-defined classes
- * }
- * ```
- */
-export interface SvelteToastOptions {
-  id?: number
-  target?: string
-  msg?: string
-  duration?: number
-  initial?: number
-  next?: number
-  progress?: number
-  pausable?: boolean
-  dismissable?: boolean
-  reversed?: boolean
-  intro?: FlyParams
-  theme?: { [key: string]: string | number }
-  classes?: string[]
-  component?: {
-    src: typeof SvelteComponent
-    props?: { [key: string]: any }
-    sendIdTo?: string
-  }
-  onpop?(id?: number): any
-}
-
-export class SvelteToast extends SvelteComponent {
-  options: SvelteToastOptions
-  target: string
-}
-
-declare namespace toast {
-  export function push(msg: string, options?: SvelteToastOptions): number
-  export function push(options: SvelteToastOptions): number
-  export function pop(arg?: any): void
-  export function set(id: number, options?: SvelteToastOptions): void
-  export function set(options: SvelteToastOptions): void
-  export function subscribe(run: Subscriber<any>): Unsubscriber
-}
+export { default as SvelteToast } from "./SvelteToast.svelte";
+export { toast } from "./stores";

package.json

 {
   "name": "@zerodevx/svelte-toast",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.2",
   "description": "Simple elegant toast notifications",
   "author": "Jason Lee <[e-mail]>",
+  "peerDependencies": {
+    "svelte": "^3.55.1"
+  },
   "devDependencies": {
-    "@fontsource/inter": "4.5.14",
-    "@playwright/test": "1.28.1",
-    "@sveltejs/adapter-static": "1.0.0-next.48",
-    "@sveltejs/kit": "1.0.0-next.567",
-    "@sveltejs/package": "1.0.0-next.6",
-    "@sveltejs/vite-plugin-svelte": "1.3.1",
-    "autoprefixer": "10.4.13",
-    "camelcase": "7.0.0",
-    "eslint": "8.28.0",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-svelte3": "4.0.0",
-    "npm-run-all": "4.1.5",
-    "postcss": "8.4.19",
-    "postcss-load-config": "4.0.1",
-    "prettier": "2.8.0",
-    "prettier-plugin-svelte": "2.8.1",
-    "prismjs": "1.29.0",
-    "svelte": "3.53.1",
-    "svelte-check": "2.10.0",
-    "svelte-preprocess": "4.10.7",
-    "tailwindcss": "3.2.4",
-    "terser": "5.16.0",
-    "tslib": "2.4.1",
-    "typescript": "4.9.3",
-    "vite": "3.2.4"
+    "@fontsource/inter": "^4.5.15",
+    "@playwright/test": "^1.31.1",
+    "@sveltejs/adapter-static": "^2.0.1",
+    "@sveltejs/kit": "^1.8.5",
+    "@sveltejs/package": "^2.0.2",
+    "@sveltejs/vite-plugin-svelte": "^2.0.3",
+    "autoprefixer": "^10.4.13",
+    "camelcase": "^7.0.1",
+    "daisyui": "^2.51.1",
+    "eslint": "^8.35.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "is-port-reachable": "^4.0.0",
+    "postcss": "^8.4.21",
+    "postcss-load-config": "^4.0.1",
+    "prettier": "^2.8.4",
+    "prettier-plugin-svelte": "^2.9.0",
+    "prismjs": "^1.29.0",
+    "svelte-check": "^3.0.4",
+    "svelte-preprocess": "^5.0.1",
+    "tailwindcss": "^3.2.7",
+    "terser": "^5.16.5",
+    "tslib": "^2.5.0",
+    "typescript": "^4.9.5",
+    "vite": "^4.1.4"
   },
   "type": "module",
-  "main": "./dist/index.umd.cjs",
   "exports": {
-    "./package.json": "./package.json",
+    ".": {
+      "types": "./index.d.ts",
+      "svelte": "./index.js"
+    },
     "./dist": {
-      "import": "./dist/index.js",
+      "import": "./dist/index.es.js",
       "require": "./dist/index.umd.cjs"
-    },
-    "./SvelteToast.svelte": "./SvelteToast.svelte",
-    "./ToastItem.svelte": "./ToastItem.svelte",
-    ".": "./index.js",
-    "./stores": "./stores.js"
+    }
   },
+  "svelte": "./index.js",
+  "jsdelivr": "./dist/index.umd.js",
   "files": [
@@ -57,4 +60,3 @@ "**/*"
     "notifications"
-  ],
-  "svelte": "./index.js"
-}
+  ]
+}

README.md

 [![npm (scoped)](https://img.shields.io/npm/v/@zerodevx/svelte-toast/latest)](https://www.npmjs.com/package/@zerodevx/svelte-toast)
-[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
-[![Lines of code](https://img.shields.io/tokei/lines/github/zerodevx/svelte-toast?label=lines%20of%20code)](https://github.com/XAMPPRocky/tokei)
-[![Size minified](https://img.shields.io/bundlephobia/min/@zerodevx/svelte-toast?label=minified)](https://bundlephobia.com/)
-[![Size gzipped](https://img.shields.io/bundlephobia/minzip/@zerodevx/svelte-toast?label=gzipped)](https://bundlephobia.com/)
+[![Lines of code](https://img.shields.io/endpoint?url=https%3A%2F%2Fzerodevx.github.io%2Fsvelte-toast%2F_loc.json)](https://github.com/AlDanial/cloc)
+[![Size minified](https://img.shields.io/endpoint?url=https%3A%2F%2Fzerodevx.github.io%2Fsvelte-toast%2F_min.json)](https://cdn.jsdelivr.net/npm/@zerodevx/svelte-toast)
+[![Size gzipped](https://img.shields.io/endpoint?url=https%3A%2F%2Fzerodevx.github.io%2Fsvelte-toast%2F_gzip.json)](https://cdn.jsdelivr.net/npm/@zerodevx/svelte-toast)
 
@@ -11,8 +10,7 @@ # svelte-toast
 
-A lightweight, unopinionated and performant toast notification component for modern web frontends in
-[very](https://github.com/zerodevx/svelte-toast/blob/master/src/SvelteToast.svelte)
-[little](https://github.com/zerodevx/svelte-toast/blob/master/src/ToastItem.svelte)
-[lines](https://github.com/zerodevx/svelte-toast/blob/master/src/stores.js)
-[of](https://github.com/zerodevx/svelte-toast/blob/master/src/index.js)
-[code](https://github.com/zerodevx/svelte-toast/blob/master/src/index.d.ts). Compiled (into UMD),
+A feather-light and well-tested toast notification component for modern web frontends in
+[very](https://github.com/zerodevx/svelte-toast/blob/master/src/lib/SvelteToast.svelte)
+[little](https://github.com/zerodevx/svelte-toast/blob/master/src/lib/ToastItem.svelte)
+[lines](https://github.com/zerodevx/svelte-toast/blob/master/src/lib/stores.js) of
+[code](https://github.com/zerodevx/svelte-toast/blob/master/src/lib/index.js). Compiled (into UMD),
 it's only **19kb** minified (**8kb** gzipped) and can be used in Vanilla JS, or as a Svelte
@@ -34,3 +32,3 @@ component.
 - `SvelteToast` as the toast container;
-- `toast` as the toast emitter.
+- `toast` as the toast controller.
 
@@ -59,3 +57,3 @@ ### Svelte
 
-Use anywhere in your app - just import the toast emitter.
+Use anywhere in your app - just import the toast controller.
 
@@ -69,3 +67,3 @@ `MyComponent.svelte`:
 
-<button on:click={() => toast.push('Hello world!')}>EMIT TOAST</button>
+<button on:click={() => toast.push('Hello world!')}>SHOW TOAST</button>
 ```
@@ -78,3 +76,4 @@
 ```js
-import { SvelteToast, toast } from '@zerodevx/svelte-toast'
+// Import the compiled code from `/dist`
+import { SvelteToast, toast } from '@zerodevx/svelte-toast/dist'
 
@@ -344,9 +343,11 @@ const app = new SvelteToast({
 
-#### Removing Multiple Toasts
+#### Removing Multiple Toasts (Outdated)
 
-`pop()` now accepts a filter function.
+~~`pop()` now accepts a filter function.~~ This has been deprecated, but will remain for backward
+compatibility until the next major. The recommended way to remove all toasts from a container target
+[has changed from `v0.9`](#removing-multiple-toasts).
 
 ```js
 // Remove all toasts from "new" container
-toast.pop((i) => i.target !== 'new')
+toast.pop((i) => i.target !== 'new') // DEPRECATED
 
@@ -467,3 +468,3 @@ // Or remove ALL active toasts from ALL containers
 
-<button on:click={() => toast.push('Ping!')}>PONG</button>
+<button on:click={() => toast.push('Hello!')}>SHOW TOAST</button>
 
@@ -473,2 +474,30 @@ <SvelteToast {options} />
 
+### New from `v0.9`
+
+#### Removing Multiple Toasts
+
+Removing all toasts from a particular container target has just become more _targeted_. Simply call
+`pop()` with param `{ target: 'containerName' }`, or call `pop(0)` to clear everything.
+
+```js
+// Remove all toasts from "new" container
+toast.pop({ target: 'new' })
+
+// Or remove ALL active toasts from ALL containers
+toast.pop(0)
+```
+
+#### Big Tooling Upgrade
+
+Under the hood, the project's been migrated to
+[`svelte-package`](https://github.com/sveltejs/kit/tree/master/packages/package). For Svelte
+consumers, this helps keep in sync with breaking changes that happen in Svelte-world. For other
+consumers, there's a change in import path:
+
+```js
+// For non-Svelte users, import the compiled code
+import { toast, SvelteToast } from '@zerodevx/svelte-toast/dist' // ESM
+const { toast, SvelteToast } = require('@zerodevx/svelte-toast/dist') // CJS
+```
+
 ## Toast Options
@@ -495,5 +524,22 @@
 ```js
-const id = toast.push(msg, { ...options })
-toast.pop(id || fn || undefined)
-toast.set(id, { ...options })
+/**
+ * Send a new toast
+ * @param {(string|SvelteToastOptions)} msg
+ * @param {SvelteToastOptions} [opts]
+ * @returns {number}
+ */
+function push(msg, opts) { ... }
+
+/**
+ * Remove toast(s)
+ * @param {(number|Object.<'target', string>)} [id]
+ */
+function pop(id) { ... }
+
+/**
+ * Update an existing toast
+ * @param {(number|SvelteToastOptions)} id
+ * @param {SvelteToastOptions} [opts]
+ */
+function set(id, opts) { ... }
 ```
@@ -509,3 +555,3 @@
 
-Testing is through [Cypress](https://www.cypress.io/). To run the tests headlessly:
+Testing is through [Playwright](https://playwright.dev/). To run the tests headlessly:
 
@@ -512,0 +558,0 @@ ```

stores.js

 import { writable } from 'svelte/store'
 
+/**
+ * @typedef {import('svelte').ComponentType} SvelteComponent
+ */
+
+/**
+ * @typedef {import('svelte/types/runtime/transition/index').FlyParams} FlyParams
+ */
+
+/**
+ * @typedef {Object} SvelteToastCustomComponent
+ * @property {SvelteComponent} src - custom Svelte Component
+ * @property {Object.<string, *>} [props] - props to pass into custom component
+ * @property {string} [sendIdTo] - forward toast id to prop name
+ */
+
+/**
+ * @callback SvelteToastOnPopCallback
+ * @param {number} [id] - optionally get the toast id if needed
+ */
+
+/**
+ * @typedef {Object} SvelteToastOptions
+ * @property {number} [id] - unique id generated for every toast
+ * @property {string} [target] - container target name to send toast to
+ * @property {string} [msg] - toast message
+ * @property {number} [duration] - duration of progress bar tween from initial to next
+ * @property {number} [initial] - initial progress bar value
+ * @property {number} [next] - next progress bar value
+ * @property {boolean} [pausable] - pause progress bar tween on mouse hover
+ * @property {boolean} [dismissable] - allow dissmiss with close button
+ * @property {boolean} [reversed] - display toasts in reverse order
+ * @property {FlyParams} [intro] - toast intro fly animation settings
+ * @property {Object.<string, string|number>} [theme] - css var overrides
+ * @property {string[]} [classes] - user-defined classes
+ * @property {SvelteToastOnPopCallback} [onpop] - callback that runs on toast dismiss
+ * @property {SvelteToastCustomComponent} [component] - send custom Svelte Component as a message
+ * @property {number} [progress] - DEPRECATED
+ */
+
+/** @type {SvelteToastOptions} */
 const defaults = {
@@ -15,7 +55,27 @@ duration: 4000,
   const { subscribe, update } = writable([])
+  /** @type {Object.<string, SvelteToastOptions>} */
+  const options = {}
   let count = 0
-  const options = {}
-  const _obj = (obj) => obj instanceof Object
-  const push = (msg, opts = {}) => {
-    const param = { target: 'default', ...(_obj(msg) ? msg : { ...opts, msg }) }
+
+  /** @param {*} obj */
+  function _obj(obj) {
+    return obj instanceof Object
+  }
+
+  function _init(target = 'default', opts = {}) {
+    options[target] = opts
+    return options
+  }
+
+  /**
+   * Send a new toast
+   * @param {(string|SvelteToastOptions)} msg
+   * @param {SvelteToastOptions} [opts]
+   * @returns {number}
+   */
+  function push(msg, opts) {
+    const param = {
+      target: 'default',
+      ...(_obj(msg) ? /** @type {SvelteToastOptions} */ (msg) : { ...opts, msg })
+    }
     const conf = options[param.target] || {}
@@ -33,12 +93,30 @@ const entry = {
   }
-  const pop = (id) => {
+
+  /**
+   * Remove toast(s)
+   * - toast.pop() // removes the last toast
+   * - toast.pop(0) // remove all toasts
+   * - toast.pop(id) // removes the toast with specified `id`
+   * - toast.pop({ target: 'foo' }) // remove all toasts from target `foo`
+   * @param {(number|Object.<'target', string>)} [id]
+   */
+  function pop(id) {
     update((n) => {
       if (!n.length || id === 0) return []
-      if (_obj(id)) return n.filter((i) => id(i))
-      const target = id || Math.max(...n.map((i) => i.id))
-      return n.filter((i) => i.id !== target)
+      // Filter function is deprecated; shim added for backward compatibility
+      if (typeof id === 'function') return n.filter((i) => id(i))
+      if (_obj(id)) return n.filter((i) => i.target !== id.target)
+      const found = id || Math.max(...n.map((i) => i.id))
+      return n.filter((i) => i.id !== found)
     })
   }
-  const set = (id, opts = {}) => {
-    const param = _obj(id) ? { ...id } : { ...opts, id }
+
+  /**
+   * Update an existing toast
+   * @param {(number|SvelteToastOptions)} id
+   * @param {SvelteToastOptions} [opts]
+   */
+  function set(id, opts) {
+    /** @type {object} */
+    const param = _obj(id) ? id : { ...opts, id }
     update((n) => {
@@ -52,6 +130,3 @@ const idx = n.findIndex((i) => i.id === param.id)
   }
-  const _init = (target = 'default', opts = {}) => {
-    options[target] = opts
-    return options
-  }
+
   return { subscribe, push, pop, set, _init }
@@ -58,0 +133,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

117306

increased by31.97%

Number of package files

14

increased by27.27%

Lines of code

2141

increased by22.48%

Number of lines in readme file

559

increased by8.97%

Worsened metrics

Dependency count

1

increased byInfinity%

No dependency changes