Skip to content

Commit 6ad6237

Browse files
committed
Prep for minor
1 parent 22df3ed commit 6ad6237

File tree

3 files changed

+2071
-8462
lines changed

3 files changed

+2071
-8462
lines changed

README.md

Lines changed: 65 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,29 +8,16 @@
88

99
> Simple elegant toast notifications.
1010
11-
A lightweight, unopinionated and performant toast notification component for modern web frontends in
12-
[very](https://github.com/zerodevx/svelte-toast/blob/master/src/SvelteToast.svelte)
13-
[little](https://github.com/zerodevx/svelte-toast/blob/master/src/ToastItem.svelte)
14-
[lines](https://github.com/zerodevx/svelte-toast/blob/master/src/stores.js)
15-
[of](https://github.com/zerodevx/svelte-toast/blob/master/src/index.js)
16-
[code](https://github.com/zerodevx/svelte-toast/blob/master/src/index.d.ts). Compiled (into UMD),
11+
A feather-light and well-tested toast notification component for modern web frontends in
12+
[very](https://github.com/zerodevx/svelte-toast/blob/master/src/lib/SvelteToast.svelte)
13+
[little](https://github.com/zerodevx/svelte-toast/blob/master/src/lib/ToastItem.svelte)
14+
[lines](https://github.com/zerodevx/svelte-toast/blob/master/src/lib/stores.js) of
15+
[code](https://github.com/zerodevx/svelte-toast/blob/master/src/lib/index.js). Compiled (into UMD),
1716
it's only **19kb** minified (**8kb** gzipped) and can be used in Vanilla JS, or as a Svelte
1817
component.
1918

2019
Because a demo helps better than a thousand API docs: https://zerodevx.github.io/svelte-toast/
2120

22-
**:warning: IMPORTANT NOTICE!**
23-
24-
If you're using the latest SvelteKit, install this component with the `@next` tag:
25-
26-
```
27-
$ npm i --save-exact @zerodevx/svelte-toast@next
28-
```
29-
30-
That's because of a [breaking change](https://github.com/sveltejs/kit/pull/7489) that landed in
31-
SvelteKit. Background of the issue [here](https://github.com/zerodevx/svelte-toast/issues/60). Track
32-
progress as we work towards `v1` [here](https://github.com/zerodevx/svelte-toast/pull/63).
33-
3421
## Usage
3522

3623
Install the package:
@@ -42,7 +29,7 @@ $ npm i -D @zerodevx/svelte-toast
4229
The following are exported:
4330

4431
- `SvelteToast` as the toast container;
45-
- `toast` as the toast emitter.
32+
- `toast` as the toast controller.
4633

4734
### Svelte
4835

@@ -66,7 +53,7 @@ root layout.
6653
<SvelteToast {options} />
6754
```
6855

69-
Use anywhere in your app - just import the toast emitter.
56+
Use anywhere in your app - just import the toast controller.
7057

7158
`MyComponent.svelte`:
7259

@@ -75,15 +62,16 @@ Use anywhere in your app - just import the toast emitter.
7562
import { toast } from '@zerodevx/svelte-toast'
7663
</script>
7764

78-
<button on:click={() => toast.push('Hello world!')}>EMIT TOAST</button>
65+
<button on:click={() => toast.push('Hello world!')}>SHOW TOAST</button>
7966
```
8067

8168
### Vanilla JS
8269

8370
For any other application with a bundler, something like this should work:
8471

8572
```js
86-
import { SvelteToast, toast } from '@zerodevx/svelte-toast'
73+
// Import the compiled code from `/dist`
74+
import { SvelteToast, toast } from '@zerodevx/svelte-toast/dist'
8775

8876
const app = new SvelteToast({
8977
// Set where the toast container should be appended into
@@ -348,13 +336,15 @@ It's now easy to send toasts to different container targets within your app. For
348336
</div>
349337
```
350338

351-
#### Removing Multiple Toasts
339+
#### Removing Multiple Toasts (Outdated)
352340

353-
`pop()` now accepts a filter function.
341+
~~`pop()` now accepts a filter function.~~ This has been deprecated, but will remain for backward
342+
compatibility until the next major. The recommended way to remove all toasts from a container target
343+
[has changed from `v0.9`](#removing-multiple-toasts).
354344

355345
```js
356346
// Remove all toasts from "new" container
357-
toast.pop((i) => i.target !== 'new')
347+
toast.pop((i) => i.target !== 'new') // DEPRECATED
358348

359349
// Or remove ALL active toasts from ALL containers
360350
toast.pop(0)
@@ -470,11 +460,39 @@ or inline icons.
470460
}
471461
</script>
472462

473-
<button on:click={() => toast.push('Ping!')}>PONG</button>
463+
<button on:click={() => toast.push('Hello!')}>SHOW TOAST</button>
474464

475465
<SvelteToast {options} />
476466
```
477467

468+
### New from `v0.9`
469+
470+
#### Removing Multiple Toasts
471+
472+
Removing all toasts from a particular container target has just become more _targeted_. Simply call
473+
`pop()` with param `{ target: 'containerName' }`, or call `pop(0)` to clear everything.
474+
475+
```js
476+
// Remove all toasts from "new" container
477+
toast.pop({ target: 'new' })
478+
479+
// Or remove ALL active toasts from ALL containers
480+
toast.pop(0)
481+
```
482+
483+
#### Big Tooling Upgrade
484+
485+
Under the hood, the project's been migrated to
486+
[`svelte-package`](https://github.com/sveltejs/kit/tree/master/packages/package). For Svelte
487+
consumers, this helps keep in sync with breaking changes that happen in Svelte-world. For other
488+
consumers, there's a change in import path:
489+
490+
```js
491+
// Import the compiled code.
492+
import { toast, SvelteToast } from '@zerodevx/svelte-toast/dist' // ESM
493+
const { toast, SvelteToast } = require('@zerodevx/svelte-toast/dist') // CJS
494+
```
495+
478496
## Toast Options
479497

480498
<!-- prettier-ignore -->
@@ -496,9 +514,26 @@ const options = {
496514
## Toast Methods
497515

498516
```js
499-
const id = toast.push(msg, { ...options })
500-
toast.pop(id || fn || undefined)
501-
toast.set(id, { ...options })
517+
/**
518+
* Send a new toast
519+
* @param {(string|SvelteToastOptions)} msg
520+
* @param {SvelteToastOptions} [opts]
521+
* @returns {number}
522+
*/
523+
function push(msg, opts) { ... }
524+
525+
/**
526+
* Remove toast(s)
527+
* @param {(number|Object.<'target', string>)} [id]
528+
*/
529+
function pop(id) { ... }
530+
531+
/**
532+
* Update an existing toast
533+
* @param {(number|SvelteToastOptions)} id
534+
* @param {SvelteToastOptions} [opts]
535+
*/
536+
function set(id, opts) { ... }
502537
```
503538

504539
## Development
@@ -509,7 +544,7 @@ applies.
509544

510545
### Tests
511546

512-
Testing is through [Cypress](https://www.cypress.io/). To run the tests headlessly:
547+
Testing is through [Playwright](https://playwright.dev/). To run the tests headlessly:
513548

514549
```
515550
$ npm run test

0 commit comments

Comments
 (0)