Streams harness
Animate elements inside a phx-update=stream container — insert, delete, reset, reorder, and overflow a limited stream.
Stream — 5 item(s)
1
2
3
4
5
Limited stream (keeps last 8)
Streams — insert / delete / reset / limit
- What
- phx-update="stream" adds/removes/moves elements client-side. Stream reflows move siblings without firing the hook's updated(), and stagger is computed once from sibling index at mount.
- Why risky
- stream_delete mid-animation, stream reset, and a :limit that drops off-screen items each interact with entrance/exit/stagger/FLIP. New items may miss their entrance, or get the wrong stagger.
- How to trigger
- Prepend / append single items, delete a random one, reset the whole stream, and overflow a limited stream.
- Expected
- New items get an entrance; deleted items get an exit; limit-dropped items are removed cleanly; reset clears and re-enters. Reorders FLIP instead of jumping.
- Failure looks like
- Missing entrance on streamed items, wrong/duplicated stagger, exit skipped on delete, or FLIP jumping on reflow.
- Code
-
assets/js/live_animate.js:187 (stagger at mount)assets/js/live_animate.js:366 (stream reflow note)