Skip to content

Commit 1465adb

Browse files
committed
Update README, package.json
1 parent 4332f3b commit 1465adb

File tree

3 files changed

+56
-3
lines changed

3 files changed

+56
-3
lines changed

README.md

Lines changed: 54 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,54 @@
1-
# Svelte Cleanable Store
1+
# svelte-cleanable-store
2+
3+
Custom Svelte store with built-in cleanup support on `subscribe`. Inspired by React's `useEffect` cleanup mechanism.
4+
5+
**While the core functionality is simple and complete, this package is still pre-1.0 until I get feedback on the API shape.** (e.g. Is `cleanable` a confusing name? Do we need a `readable` equivalent as well?)
6+
7+
## Usage
8+
9+
```ts
10+
const state = cleanable(0);
11+
12+
state.subscribe((value) => {
13+
console.log(`state = ${value}`);
14+
return () => console.log(`cleaning up ${value}...`);
15+
});
16+
```
17+
18+
Console output:
19+
20+
```ts
21+
state = 0
22+
23+
// state++
24+
cleaning up 0...
25+
state = 1
26+
27+
// state = 5
28+
cleaning up 1...
29+
state = 5
30+
```
31+
32+
## Example
33+
34+
### Closing a WebSocket connection
35+
36+
```ts
37+
const path = cleanable("https://example.com/stream");
38+
path.subscribe((value) => {
39+
const webSocket = new WebSocket(value);
40+
webSocket.onmessage = (event) => console.log(event);
41+
42+
return () => webSocket.close();
43+
});
44+
```
45+
46+
## But what about Svelte 5's `$effect`?
47+
48+
It's absolutely great! In fact, it inspired me to create this package.
49+
50+
However, Svelte 5 is still in beta now, and while there are many workarounds for Svelte 4, this package provides a clean, store-based solution that works with Svelte 4 (and 5), can be used anywhere (in plain `.js`/`.ts` files!), and is compatible with auto-subscriptions in `.svelte` files (with the `$` prefix), all without feeling like a hack.
51+
52+
## License
53+
54+
[MIT License](./LICENSE.md). Copyright (c) 2024 Houssam Elbadissi.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "svelte-cleanable-store",
3-
"version": "0.0.1",
3+
"version": "0.1.0",
44
"description": "Custom Svelte store with built-in cleanup support on `subscribe` (like React's `useEffect`).",
55
"license": "MIT",
66
"author": {

src/routes/+page.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<script lang="ts">
33
import { cleanable } from "$lib/index.js";
44
5-
let parent = cleanable(0);
5+
const parent = cleanable(0);
66
77
parent.subscribe((value) => {
88
console.log("parent changed", value);

0 commit comments

Comments
 (0)