humanspeak / svelte-motion / 26118440534

68%

main: 3%

push

github

feat(variants): custom prop + function-form variants (#350)

* feat(variants): custom prop + function-form variants

Adds framer-motion's `custom` prop on motion components and threads it
through variant resolution. Variant values can now be either a static
keyframes object or a `(custom) => keyframes` factory — pattern used for
staggered lists where each child needs its own offset or delay.

```svelte
<motion.li
    custom={i}
    variants={{
        hidden:  { opacity: 0, x: -100 },
        visible: (i) => ({ opacity: 1, x: 0, transition: { delay: i * 0.1 } })
    }}
    initial="hidden"
    animate="visible"
/>
```

Propagation: children with no `custom` prop inherit the nearest motion
ancestor's value through a Svelte context store (writable, so a parent
updating `custom` after mount re-resolves descendants). Closes #308 and
unblocks #309 (custom on AnimatePresence) + #305 (usePresenceData).

Changes:
  - src/lib/types.ts: `Variant` adds the function arm; `Variants`
    widened; new `custom?: unknown` field on `MotionProps`
  - src/lib/utils/variants.ts: `resolveVariant` / `resolveInitial` /
    `resolveAnimate` / `resolveExit` each gain a `custom?` arg and
    invoke function-form entries with it
  - src/lib/components/variantContext.context.ts: new
    `setCustomContext` / `getCustomContext` (store-based) for descendant
    inheritance
  - src/lib/html/_MotionContainer.svelte: receives `custom` prop, reads
    the parent store, publishes its own `effectiveCustom`, threads it
    into the three resolver calls

Tests (372/372 passing, +21 new):
  - src/lib/utils/variants.spec.ts (new) — 19 cases covering function
    + object forms, falsy-zero passthrough, undefined custom, all four
    resolvers
  - src/lib/html/_MotionContainer.spec.ts — 2 new cases: own custom
    forwarded to function-form variant on animate; child inherits
    parent's custom through nested context

Docs / discoverability:
  - README.md: extended Variants section with functio... (continued)

463 of 615 branches covered (75.28%)

Branch coverage included in aggregate %.

33 of 39 new or added lines in 3 files covered. (84.62%)

1752 of 2622 relevant lines covered (66.82%)

10.26 hits per line