solidjs-motion 0.1.4 → 0.1.6

package/CHANGELOG.md

@@ -5,6 +5,64 @@ All notable changes to `solidjs-motion` / `@solidjs-motion/motion` are documente
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.1.6] — 2026-05-21
+
+### Fixed
+
+- **Nested motion inside `<Presence>` now reliably runs its first
+  animate.** Previously, motion's enter-readiness gate flipped true via
+  Presence's `beforeMount` callback unconditionally — but for nested
+  motion elements inside a deeper `<Presence>` whose `onEnter` fires
+  synchronously during render (while the surrounding tracked subtree is
+  still off-DOM in a wait-mode holding pen), this caused the diff
+  effect's first `animate(el, ...)` to fire against a disconnected
+  element. WAAPI ran the animation to completion off-DOM and silently
+  dropped `commitStyles`, so the element painted at its `initial` target
+  with no visible transition.
+
+  Both signals that could trip readiness now route through a shared
+  `isConnected` check: Presence's `beforeMount` callback AND the
+  microtask fallback flip ready only when `el.isConnected === true`,
+  otherwise schedule a `requestAnimationFrame` retry until connectedness
+  flips (or the owner is disposed). This handles three previously-broken
+  scenarios:
+  - Nested motion descendants of a Presence's tracked subtree
+  - Initial children of `<Presence initial={false}>` (appear=false)
+  - Direct tracked children whose nested `<Presence>` fires
+    `beforeMount` synchronously while the parent subtree is still
+    off-DOM (the canonical case: a page-transition wrapper around
+    routes that themselves contain `<Presence>`)
+
+  New regression test in `tests/presence.test.tsx` asserts a nested
+  motion descendant's animate target reaches the animate spy on both
+  initial mount AND on a `<Presence>` swap.
+
+## [0.1.5] — 2026-05-21
+
+### Fixed
+
+- **Drag now sets `touch-action` upfront on the element** when `drag` is
+  configured, not just inside `handlePanStart` after threshold cross.
+  Previously, on mobile, the browser would arbitrate the gesture as
+  native scroll/zoom and fire `pointercancel` before motion's own
+  touch-action write could take effect — manifesting as missed drags
+  or, when the user's `onDragEnd` made a threshold-based decision off
+  stale `info.offset`, an immediate dismiss-on-touch (visible in the
+  swipe-stack demo: every press fired a left-swipe).
+
+  Axis mapping mirrors motion-react:
+  - `drag="x"` → `touch-action: pan-y` (browser keeps vertical scroll)
+  - `drag="y"` → `touch-action: pan-x`
+  - `drag={true}` → `touch-action: none`
+
+  User-supplied `style.touch-action` still overrides via natural
+  spread precedence — e.g., `style={{ touchAction: "auto" }}` opts back
+  into the browser's default arbitration. Three regression tests added.
+
+  Removes the need for users to remember to set `touch-action: none` on
+  every draggable element — `<motion.div drag="x">` now Just Works on
+  touch devices.
+
 ## [0.1.4] — 2026-05-21
 
 ### Added

package/dist/index.js

@@ -2097,10 +2097,20 @@ function createMotion(el, getOpts, config) {
 	const inPresence = presence.registerEnter !== void 0;
 	const [enterReady, setEnterReady] = createSignal(!inPresence);
 	if (inPresence && presence.registerEnter) {
-		presence.registerEnter(el, () => setEnterReady(true));
-		queueMicrotask(() => {
-			if (el.isConnected) setEnterReady(true);
+		let live = true;
+		onCleanup(() => {
+			live = false;
 		});
+		const checkConnection = () => {
+			if (!live) return;
+			if (el.isConnected) {
+				setEnterReady(true);
+				return;
+			}
+			requestAnimationFrame(checkConnection);
+		};
+		presence.registerEnter(el, checkConnection);
+		queueMicrotask(checkConnection);
 	}
 	const { setActive, onceExitComplete } = createGestureStateMachine({
 		el,
@@ -2308,12 +2318,18 @@ function useMotion(opts) {
 		return mergeProps$1(userProps ?? {}, {
 			get style() {
 				const cleaned = stripStyleEntriesOwnedByRegistry(userProps?.style);
-				if (renderedOnce) return cleaned;
+				const dragOpts = getOpts().drag;
+				const dragTouchAction = dragOpts ? dragOpts === "x" ? "pan-y" : dragOpts === "y" ? "pan-x" : "none" : void 0;
+				const baseWithDefaults = dragTouchAction ? {
+					"touch-action": dragTouchAction,
+					...cleaned
+				} : cleaned;
+				if (renderedOnce) return baseWithDefaults;
 				const composed = composeFirstPaintStyle(userProps?.style);
 				return composed ? {
-					...cleaned,
+					...baseWithDefaults,
 					...composed
-				} : cleaned;
+				} : baseWithDefaults;
 			},
 			ref: mergeRefs(userProps?.ref, motionRef),
 			...wroteFirstPaintStyle ? { "data-motion-hydrated": "" } : {}