yippee.fun
Precise DOM morphing
morphing
typescript
dom
Add options to readme
joel.drapper.me
+43
-2
+43
-2
README.md
+43
-2
README.md
···
24
24
import { morph, morphInner } from "morphlex"
25
25
26
26
// Morph the entire element
27
-
morph(currentNode, referenceNode)
27
+
morph(currentNode, newNode)
28
28
29
29
// Morph only the children of the current node
30
-
morphInner(currentNode, referenceNode)
30
+
morphInner(currentNode, newNode)
31
+
32
+
// Morph the entire document
33
+
morphDocument(document, newDocument)
34
+
```
35
+
36
+
## Options
37
+
38
+
Both `morph` and `morphInner` accept an optional third parameter for configuration:
39
+
40
+
```javascript
41
+
morph(currentNode, newNode, {
42
+
preserveChanges: true,
43
+
beforeNodeAdded: (parent, node, insertionPoint) => {
44
+
console.log("Adding node:", node)
45
+
return true // return false to prevent addition
46
+
},
47
+
})
31
48
```
49
+
50
+
### Available Options
51
+
52
+
- **`preserveChanges`**: When `true`, preserves modified form inputs during morphing. This prevents user-entered data from being overwritten. Default: `false`
53
+
54
+
- **`beforeNodeVisited`**: Called before a node is visited during morphing. Return `false` to skip morphing this node.
55
+
56
+
- **`afterNodeVisited`**: Called after a node has been visited and morphed.
57
+
58
+
- **`beforeNodeAdded`**: Called before a new node is added to the DOM. Return `false` to prevent adding the node.
59
+
60
+
- **`afterNodeAdded`**: Called after a node has been added to the DOM.
61
+
62
+
- **`beforeNodeRemoved`**: Called before a node is removed from the DOM. Return `false` to prevent removal.
63
+
64
+
- **`afterNodeRemoved`**: Called after a node has been removed from the DOM.
65
+
66
+
- **`beforeAttributeUpdated`**: Called before an attribute is updated on an element. Return `false` to prevent the update.
67
+
68
+
- **`afterAttributeUpdated`**: Called after an attribute has been updated on an element.
69
+
70
+
- **`beforeChildrenVisited`**: Called before an element's children are visited during morphing. Return `false` to skip visiting children.
71
+
72
+
- **`afterChildrenVisited`**: Called after an element's children have been visited and morphed.
32
73
33
74
## What makes Morphlex different?
34
75