Watchable

Is a writeable store that call the callback function when the value changed. This function is inspired from

Vue.js watch
function.

Usage

<script>
    import {watchable} from "@sveu/shared"

    let new_value,old_value

    function callback(_old_value, _new_value) {
            new_value = _new_value
            old_value = _old_value
    }

    const watched = watchable(0, callback)
</script>

<button on:click={() => $watched++}>Increment</button>

<button on:click={() => $watched--}>Decrement</button>

<hr/>

<h1>new Value: {new_value}</h1>
<hr/>
<h1>old Value: {old_value}</h1>
<script>
    import {watchable} from "@sveu/shared"

    let new_value,old_value

    function callback(_old_value, _new_value) {
            new_value = _new_value
            old_value = _old_value
    }

    const watched = watchable(0, callback)
</script>

<button on:click={() => $watched++}>Increment</button>

<button on:click={() => $watched--}>Decrement</button>

<hr/>

<h1>new Value: {new_value}</h1>
<hr/>
<h1>old Value: {old_value}</h1>
svelte

Example

new Value: undefined

old Value: undefined

<script>
    import { watchable } from "@sveu/shared"

    let new_value, old_value

    function callback(_old_value, _new_value) {
        new_value = _new_value
        old_value = _old_value
    }

    const watched = watchable(0, callback)
</script>

<button on:click="{() => $watched++}">Increment</button>

<button on:click="{() => $watched--}">Decrement</button>

<hr />

<h1>new Value: {new_value}</h1>
<hr />
<h1>old Value: {old_value}</h1>
<script>
    import { watchable } from "@sveu/shared"

    let new_value, old_value

    function callback(_old_value, _new_value) {
        new_value = _new_value
        old_value = _old_value
    }

    const watched = watchable(0, callback)
</script>

<button on:click="{() => $watched++}">Increment</button>

<button on:click="{() => $watched--}">Decrement</button>

<hr />

<h1>new Value: {new_value}</h1>
<hr />
<h1>old Value: {old_value}</h1>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Click fold/expand code

API

Arguments

Name Description Type Required
initialValue The initial value of the store. MaybeStore<T> Yes
fn A function to call when the value changes. (o: T, n: T) => void Yes
Last update at: Invalid Date