yippee.fun
Precise DOM morphing
morphing
typescript
dom
Add documentation for the options
joel.drapper.me
+71
src/morphlex.ts
+71
src/morphlex.ts
···
10
type PairOfNodes<N extends Node> = [N, N]
11
type PairOfMatchingElements<E extends Element> = Branded<PairOfNodes<E>, "MatchingElementPair">
12
13
export interface Options {
14
preserveModified?: boolean
15
beforeNodeVisited?: (fromNode: Node, toNode: Node) => boolean
16
afterNodeVisited?: (fromNode: Node, toNode: Node) => void
17
beforeNodeAdded?: (parent: ParentNode, node: Node, insertionPoint: ChildNode | null) => boolean
18
afterNodeAdded?: (node: Node) => void
19
beforeNodeRemoved?: (node: Node) => boolean
20
afterNodeRemoved?: (node: Node) => void
21
beforeAttributeUpdated?: (element: Element, attributeName: string, newValue: string | null) => boolean
22
afterAttributeUpdated?: (element: Element, attributeName: string, previousValue: string | null) => void
23
beforeChildrenVisited?: (parent: ParentNode) => boolean
24
afterChildrenVisited?: (parent: ParentNode) => void
25
}
26
···
10
type PairOfNodes<N extends Node> = [N, N]
11
type PairOfMatchingElements<E extends Element> = Branded<PairOfNodes<E>, "MatchingElementPair">
12
13
+
/**
14
+
* Configuration options for morphing operations.
15
+
*/
16
export interface Options {
17
+
/**
18
+
* When `true`, preserves modified form inputs during morphing.
19
+
* This prevents user-entered data from being overwritten.
20
+
* @default false
21
+
*/
22
preserveModified?: boolean
23
+
24
+
/**
25
+
* Called before a node is visited during morphing.
26
+
* @param fromNode The existing node in the DOM
27
+
* @param toNode The new node to morph to
28
+
* @returns `false` to skip morphing this node, `true` to continue
29
+
*/
30
beforeNodeVisited?: (fromNode: Node, toNode: Node) => boolean
31
+
32
+
/**
33
+
* Called after a node has been visited and morphed.
34
+
* @param fromNode The morphed node in the DOM
35
+
* @param toNode The source node that was morphed from
36
+
*/
37
afterNodeVisited?: (fromNode: Node, toNode: Node) => void
38
+
39
+
/**
40
+
* Called before a new node is added to the DOM.
41
+
* @param parent The parent node where the child will be added
42
+
* @param node The node to be added
43
+
* @param insertionPoint The node before which the new node will be inserted, or `null` to append
44
+
* @returns `false` to prevent adding the node, `true` to continue
45
+
*/
46
beforeNodeAdded?: (parent: ParentNode, node: Node, insertionPoint: ChildNode | null) => boolean
47
+
48
+
/**
49
+
* Called after a node has been added to the DOM.
50
+
* @param node The node that was added
51
+
*/
52
afterNodeAdded?: (node: Node) => void
53
+
54
+
/**
55
+
* Called before a node is removed from the DOM.
56
+
* @param node The node to be removed
57
+
* @returns `false` to prevent removal, `true` to continue
58
+
*/
59
beforeNodeRemoved?: (node: Node) => boolean
60
+
61
+
/**
62
+
* Called after a node has been removed from the DOM.
63
+
* @param node The node that was removed
64
+
*/
65
afterNodeRemoved?: (node: Node) => void
66
+
67
+
/**
68
+
* Called before an attribute is updated on an element.
69
+
* @param element The element whose attribute will be updated
70
+
* @param attributeName The name of the attribute
71
+
* @param newValue The new value for the attribute, or `null` if being removed
72
+
* @returns `false` to prevent the update, `true` to continue
73
+
*/
74
beforeAttributeUpdated?: (element: Element, attributeName: string, newValue: string | null) => boolean
75
+
76
+
/**
77
+
* Called after an attribute has been updated on an element.
78
+
* @param element The element whose attribute was updated
79
+
* @param attributeName The name of the attribute
80
+
* @param previousValue The previous value of the attribute, or `null` if it didn't exist
81
+
*/
82
afterAttributeUpdated?: (element: Element, attributeName: string, previousValue: string | null) => void
83
+
84
+
/**
85
+
* Called before an element's children are visited during morphing.
86
+
* @param parent The parent node whose children will be visited
87
+
* @returns `false` to skip visiting children, `true` to continue
88
+
*/
89
beforeChildrenVisited?: (parent: ParentNode) => boolean
90
+
91
+
/**
92
+
* Called after an element's children have been visited and morphed.
93
+
* @param parent The parent node whose children were visited
94
+
*/
95
afterChildrenVisited?: (parent: ParentNode) => void
96
}
97