Precise DOM morphing
morphing
typescript
dom
Simplify README for now
+1
-38
+1
-38
README.md
+1
-38
README.md
···
2
2
<img src="https://github.com/phlex-ruby/morphlex/assets/246692/128ebe6a-bdf3-4b88-8a40-f29df64b3ac8" alt="Morphlex" width="481">
3
3
</p>
4
4
5
-
Morphlex is a 2KB DOM morphing library that transforms one DOM tree to match another while preserving element state and making minimal changes.
5
+
Morphlex is a ~2KB (gzipped) DOM morphing library that transforms one DOM tree to match another while preserving element state and making minimal changes.
6
6
7
7
## Installation
8
8
···
29
29
// Morph only the inner content
30
30
morphInner(currentNode, referenceNode)
31
31
```
32
-
33
-
The `currentNode` is transformed to match the `referenceNode`. The `referenceNode` remains unchanged.
34
-
35
-
## How it works
36
-
37
-
Morphlex uses a smart matching algorithm that produces minimal DOM operations for common patterns like inserts, deletes, and reordering.
38
-
39
-
### Matching strategy
40
-
41
-
When morphing child nodes, Morphlex tries multiple matching strategies in order of specificity:
42
-
43
-
1. **Exact match** — Nodes that are completely identical (`isEqualNode`)
44
-
2. **ID match** — Elements with the same `id` attribute
45
-
3. **ID set match** — Elements containing the same nested IDs (see below)
46
-
4. **Tag match** — Elements with the same tag name, or nodes with the same type
47
-
48
-
This cascading approach means most updates find optimal matches quickly, while still handling edge cases gracefully.
49
-
50
-
### ID sets
51
-
52
-
ID sets are inspired by [Idiomorph](https://github.com/bigskysoftware/idiomorph). Each element is tagged with the set of IDs it contains, including deeply nested ones. This helps match elements even when they've moved or been restructured.
53
-
54
-
For example, if you have a card with `id="card-123"` nested inside a container, the container's ID set includes `"card-123"`. When morphing, Morphlex can match the container based on that nested ID, even if the container itself has no ID.
55
-
56
-
### Minimal operations
57
-
58
-
After matching, Morphlex processes nodes in order and makes the minimum number of DOM operations:
59
-
60
-
- Matched elements are moved into position (if needed) and recursively morphed
61
-
- New nodes are inserted at the correct position
62
-
- Unmatched nodes are removed
63
-
64
-
This means operations like sorting a list or inserting items in the middle produce exactly the moves you'd expect, with no unnecessary removals or recreations.
65
-
66
-
## Contributing
67
-
68
-
Found a bug or have a feature request? Open an issue. Want to contribute? Open a pull request.