Snapshot

Takes a snapshot of an element. Inspired by

SvelteKit Snapshot
.

Usage

<script>
    import {snapshot} from "@sveu/actions"

    function restore(state) {
        // Your code here
    }

    function capture(target) {
        // Your code here
        return "Return the state of the node."
    }

    options = {
        restore
        capture
    }
</script>

<form use:snapshot="{options}">
    <input type="text" />

    <button>Submit</button>
</form>
<script>
    import {snapshot} from "@sveu/actions"

    function restore(state) {
        // Your code here
    }

    function capture(target) {
        // Your code here
        return "Return the state of the node."
    }

    options = {
        restore
        capture
    }
</script>

<form use:snapshot="{options}">
    <input type="text" />

    <button>Submit</button>
</form>
svelte

Example

Try type something and refresh the page

 
<script lang="ts">
    import { snapshot } from "@sveu/actions"

    interface SnapshotForm {
        name: string
        expires_on?: number
    }

    let snapshot_form: SnapshotForm = {
        name: "Svelte U is Awesome",
    }

    function restore(node: SnapshotForm) {
        if (node.expires_on && Date.now() < node.expires_on)
            snapshot_form = node
    }

    function capture() {
        snapshot_form.expires_on = Date.now() + 1 * 60 * 1000
        return snapshot_form
    }
</script>

 <!--   -->
<form
    use:snapshot="{{ 
        capture,
        restore,
        fallback: snapshot_form,
    }}"
    class="flex flex-col items-center">
    <note class="border border-4 rounded-2xl shadow-lg mb-9 p-2">
        <p>Try type something and refresh the page</p>
    </note>

    <input
        type="text"
        name="name"
        bind:value="{snapshot_form.name}"
    />
</form>
<script lang="ts">
    import { snapshot } from "@sveu/actions"

    interface SnapshotForm {
        name: string
        expires_on?: number
    }

    let snapshot_form: SnapshotForm = {
        name: "Svelte U is Awesome",
    }

    function restore(node: SnapshotForm) {
        if (node.expires_on && Date.now() < node.expires_on)
            snapshot_form = node
    }

    function capture() {
        snapshot_form.expires_on = Date.now() + 1 * 60 * 1000
        return snapshot_form
    }
</script>

 <!--   -->
<form
    use:snapshot="{{ 
        capture,
        restore,
        fallback: snapshot_form,
    }}"
    class="flex flex-col items-center">
    <note class="border border-4 rounded-2xl shadow-lg mb-9 p-2">
        <p>Try type something and refresh the page</p>
    </note>

    <input
        type="text"
        name="name"
        bind:value="{snapshot_form.name}"
    />
</form>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
Click fold/expand code

API

Arguments

Name Description Type Default
key The key to use for storing the snapshot data string snapshot
fallback The fallback value for the snapshot data unknown
store The storage to use for storing the snapshot cookie/local/session local
capture A function that captures the state of the node (target: T) => unknown undefined
restore A function that restores the state of the node (state: any) => void () => noop()


TIP

If you use typescript, you need to add ./node_modules/@sveu/actions/events.d.ts to your tsconfig.json file.

{
    ...

    "include": [
        ...
        "./node_modules/@sveu/actions/events.d.ts"
    ]
    ...
}
{
    ...

    "include": [
        ...
        "./node_modules/@sveu/actions/events.d.ts"
    ]
    ...
}
json
Last update at: Invalid Date