humanspeak / svelte-motion / 28118668988

57%

main: 57%

push

github

fix(html): default ref to $bindable() so bind:ref={$state()} works (#420)

Binding a freshly-declared `$state()` ref (the idiomatic
`let el = $state()` -> `bind:ref={el}`) to any motion element crashed
at mount with Svelte's `props_invalid_value`, because `ref` defaulted
to `$bindable(null)` and Svelte rejects a `bind:` target that resolves
to `undefined` when the prop has a non-undefined fallback.

- Default `ref` to `$bindable()` in both html templates and regenerate
  the ~170 generated components.
- In `_MotionContainer`, decouple the public `ref` bindable (now
  `$bindable()`, undefined) from an internal `element` node that keeps
  its `null` default and mirrors into `ref` via an effect. The animate
  effects depend on the exact `null -> element` reactive timing;
  defaulting the internal node to `undefined` reorders effect runs and
  breaks re-running animations on prop change. The effect resets `ref`
  to `null` on teardown so consumers see the same unmount semantics as
  native `bind:this` (no stale node reference).
- Add a regression test covering `bind:ref={$state()}` on a regular
  element, a void element, and `_MotionContainer` directly, plus the
  unmount path that resets each bound ref to null.
- Extract the duplicated `flushTimers` test helper into a shared
  `src/lib/__tests__/flushTimers.ts` (adopting the most thorough
  variant) and reuse it across the motion specs.

Closes #417

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

769 of 1571 branches covered (48.95%)

Branch coverage included in aggregate %.

9 of 175 new or added lines in 170 files covered. (5.14%)

3024 of 5041 relevant lines covered (59.99%)

16.09 hits per line