humanspeak / svelte-motion / 28622636502

59%

main: 57%

push

github

feat(view): animateView — View Transitions API with Svelte flushSync (#431)

* test(e2e): pin the preview webServer to a project-specific port

Vite's default preview port (4173) is shared by every repo on a
machine, so a concurrent e2e session in a sibling project reuses and
then kills our server mid-run (reuseExistingServer can't tell whose
server it found) — local full-suite runs died at 147/131/102 of 292
with ERR_CONNECTION_REFUSED. svelte-motion now owns port 4198.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* feat(view): add animateView — View Transitions API with Svelte flushSync

Port of Motion 12.41's animateView (motion-dom ViewTransitionBuilder):
whole-page crossfades, shared-element morphs via .add(old, new),
enter/exit/new/old layer animations, crop/class/group controls, and
spring-capable timing — with one Svelte-specific improvement: $state
mutations inside the update callback are flushSync-flushed before the
new snapshot is captured, so plain assignment works with no tick()
ceremony. Browsers without startViewTransition still run the update
and resolve, so call sites need no feature gating.

- src/lib/utils/animateView.ts wrapper (isPromiseLike-aware for async
  updates) + type re-exports from the package root
- Test pages: /tests/view/{basic, shared-element, filter-gallery},
  linked from the test index
- 5 unit specs (jsdom fallback contract, async updates, rejection,
  builder chaining, flushSync behavior via a mounted component) and
  5 e2e specs with shared view-transition helpers in e2e/_helpers/view
  (real-transition detection, interrupt queueing, name cleanup)
- Docs page /docs/view incl. the .layout() root opt-in gotcha and the
  percentage-radius rule for same-aspect shared-element morphs
  (snapshots bake corner rounding in as transparency — upstream crop
  can't hide a same-aspect silhouette)
- Examples page /examples/view with shared-element + filter-gallery
  demos; fixed-height demo stages so view swaps do... (continued)

841 of 1642 branches covered (51.22%)

Branch coverage included in aggregate %.

7 of 7 new or added lines in 1 file covered. (100.0%)

3247 of 5265 relevant lines covered (61.67%)

21.32 hits per line