-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.ts
72 lines (65 loc) · 1.55 KB
/
index.ts
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import { on, storage } from "@sveu/browser"
import { noop, unstore } from "@sveu/shared"
import type { SnapshotOptions } from "../utils"
import type { ActionReturn } from "svelte/action"
/**
* Takes a snapshot of the state of a node and restores it
*
* @param node - The node to take a snapshot of.
*
* @example
* ```html
*
* <script>
* function capture(node) {
* return 'hello' // return the value to store
* }
*
* function restore(value) {
* // do something with the value
* }
*
* </script>
*
* <form use:snapshot="{{ capture, restore }}">
*
* <input type="text" name="name" />
* <button type="submit">Submit</button>
*
* </form>
* ```
*
* @param options - The options to use.
* - `key` - The key to use storing the snapshot data.
* - `store` - The storage to use for storing the snapshot data. Defaults to "local".
* - `fallback` - The fallback value to use if no data is found.
* - `capture` - A function that captures the state of the node.
* - `restore` - A function that restores the state of the node.
*
*/
export function snapshot<T extends HTMLElement | Window>(
node: T,
options: SnapshotOptions<T> = {},
): ActionReturn<SnapshotOptions<T>> {
const {
key = "snapshot",
capture,
restore = () => noop,
fallback = {},
store = "local",
} = options
const state = storage(key, fallback, { store })
restore(unstore(state))
function _capture() {
if (capture) {
state.set(capture(node))
}
}
const cleanup = on(window, "beforeunload", _capture)
return {
destroy() {
_capture()
cleanup()
},
}
}