Skip to content

Instantly share code, notes, and snippets.

@gone

gone/gist:f4f33aca7571304960bc295fa26ac63f

Created June 28, 2022 16:46
Show Gist options
  • Save gone/f4f33aca7571304960bc295fa26ac63f to your computer and use it in GitHub Desktop.
Save gone/f4f33aca7571304960bc295fa26ac63f to your computer and use it in GitHub Desktop.
Download ZIP
Hx merge
Raw
gistfile1.txt
Core swap idea - node with id is present on both new and old document.
in isolation:
existing element:
```<ul id=messages>
<li> bar </li>
</ul>```
New element:
```
<ul id=messages>
<li> foo</li>
</ul>
```
desired:
```
<ul id=messages>
<li> foo</li>
<li> bar</li>
</ul>
```
Boosted example
Existing:
```
<body>
<div id=content>
foo
bar
baz
</div>
<ul id=messages hx-swap="merge">
<li> foo</li>
<ul id="forbo">
<li> foo</li>
</ul>
</ul>
</ody>
```
New:
```
<body>
<div id=content>
a
b
c
</div>
<ul id=messages hx-merge >
<li> bar</li>
<ul id="forbo" >
<li> bax</li>
</ul>
</ul>
</body>
</html>
```
<ul id=messages hx-swap="merge">
<li> foo</li>
<li> bar</li>
<ul id="forbo">
<li> foo</li>
<li> bax</li>
</ul>
</ul>
htmx swap comes back
find all hx-merge attrs
for each hx-merge
mergedtree = merge(oldtree, newtree)
replace(newtree, mergedtree)
bodyswap
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment