@humanspeak/svelte-motion 0.3.4 → 0.3.6

package/dist/utils/presence.d.ts

@@ -35,6 +35,19 @@ export type AnimatePresenceContext = {
     updateChildAnimatedStyle: (key: string, opacity: string, transform: string) => void;
     /** Unregister a child. If it has an exit, clone and animate it out. */
     unregisterChild: (key: string) => void;
+    /**
+     * @internal Used by `PresenceChild` to participate in the same exit
+     * accounting as the clone-based motion-element exit path. Increments the
+     * in-flight exit counter and applies mode='wait' enter blocking. Not
+     * intended for direct consumer use.
+     */
+    notifyExitStart: () => void;
+    /**
+     * @internal Pairs with `notifyExitStart`. Decrements the in-flight exit
+     * counter, fires `onExitComplete` once it reaches zero, and unblocks
+     * pending enters in mode='wait'. Not intended for direct consumer use.
+     */
+    notifyExitComplete: () => void;
 };
 /**
  * Create a new `AnimatePresence` context instance.
@@ -113,20 +126,34 @@ export declare const getPresenceDepth: () => number | undefined;
  */
 export declare const setPresenceDepth: (depth: number) => void;
 /**
- * Hook used by motion elements to participate in presence.
- * Registers the element and ensures its exit animation runs on teardown.
+ * Per-`PresenceChild` Svelte context payload. Read by the `useIsPresent` and
+ * `usePresence` hooks (and consulted by motion elements so they can opt out of
+ * the outer `AnimatePresence` clone path when a `PresenceChild` is driving
+ * the exit themselves).
  *
- * Note: Svelte lifecycle wrapper - ignored for coverage.
+ * `isPresent` is exposed as a getter so consumers see live updates as the
+ * wrapper toggles between mounted, exiting, and re-entered states.
  */
+export type PresenceChildContext = {
+    /** Reactive flag — `true` while present, `false` once the exit hold begins. */
+    readonly isPresent: boolean;
+    /**
+     * Signal that the consumer's exit work is complete. Triggers actual
+     * unmount and decrements the parent `AnimatePresenceContext` exit count.
+     * Idempotent and versioned (calls from a canceled exit cycle are no-ops).
+     */
+    safeToRemove: () => void;
+};
 /**
- * Hook used by motion elements to participate in presence.
+ * Get the nearest `PresenceChild` context from Svelte component context, or
+ * `undefined` if the caller is not wrapped in one.
  *
- * Registers the element with the presence context and guarantees that the
- * exit animation is scheduled on teardown.
+ * Note: Trivial wrapper - ignored for coverage.
+ */
+export declare const getPresenceChildContext: () => PresenceChildContext | undefined;
+/**
+ * Install a `PresenceChild` context for descendants.
  *
- * @param key Unique identifier for the presence child.
- * @param element The DOM element to track.
- * @param exit The exit keyframes definition.
- * @param mergedTransition The element's merged transition for precedence.
+ * Note: Trivial wrapper - ignored for coverage.
  */
-export declare const usePresence: (key: string, element: HTMLElement | null, exit: MotionExit, mergedTransition?: MotionTransition) => void;
+export declare const setPresenceChildContext: (context: PresenceChildContext) => void;

package/dist/utils/presence.js

@@ -1,7 +1,7 @@
 import { mergeTransitions } from './animation';
 import { pwLog } from './log';
 import { animate } from 'motion';
-import { getContext, onDestroy, setContext } from 'svelte';
+import { getContext, setContext } from 'svelte';
 /**
  * Context key for `AnimatePresence`.
  *
@@ -195,6 +195,66 @@ export const createAnimatePresenceContext = (context) => {
     const children = new Map();
     // Track number of in-flight exit animations to invoke onExitComplete once
     let inFlightExits = 0;
+    /**
+     * Begin tracking an exit.
+     *
+     * Increments the `inFlightExits` counter and, in `mode='wait'`, raises the
+     * `enterBlocked` flag so sibling motion-element enters defer until every
+     * exit reports back via {@link finishExit}. Shared by the clone-based exit
+     * path in {@link unregisterChild} and the user-driven `PresenceChild` hold.
+     *
+     * Must be paired with exactly one {@link finishExit} call per invocation.
+     *
+     * @returns void
+     * @example
+     * ```ts
+     * // unregisterChild (clone path)
+     * startExit()
+     * requestAnimationFrame(() => {
+     *   animate(clone, exitKeyframes, transition).finished.finally(finishExit)
+     * })
+     *
+     * // PresenceChild (user-driven path) — exposed as `notifyExitStart`
+     * presenceContext.notifyExitStart()
+     * // ... later, on transitionend or user signal ...
+     * presenceContext.notifyExitComplete()
+     * ```
+     */
+    const startExit = () => {
+        if (mode === 'wait') {
+            enterBlocked = true;
+        }
+        inFlightExits += 1;
+    };
+    /**
+     * Mark an exit as finished.
+     *
+     * Decrements the `inFlightExits` counter. When the count reaches zero,
+     * fires the consumer's `onExitComplete` callback and, in `mode='wait'`,
+     * lowers `enterBlocked` plus notifies any deferred-enter callbacks
+     * registered via {@link onEnterUnblocked}.
+     *
+     * Must be called exactly once per matching {@link startExit}; double-fires
+     * underflow the counter and can permanently mis-route subsequent exits.
+     *
+     * @returns void
+     * @example
+     * ```ts
+     * startExit()
+     * // ... exit work ...
+     * finishExit() // fires onExitComplete if the last exit, unblocks waiters
+     * ```
+     */
+    const finishExit = () => {
+        inFlightExits -= 1;
+        if (inFlightExits === 0) {
+            context.onExitComplete?.();
+            if (mode === 'wait' && enterBlocked) {
+                enterBlocked = false;
+                notifyEnterUnblocked();
+            }
+        }
+    };
     /**
      * Register a child element and snapshot its initial rect/styles.
      */
@@ -275,11 +335,6 @@ export const createAnimatePresenceContext = (context) => {
             children.delete(key);
             return;
         }
-        // For mode='wait': block new enters while exit is in progress
-        if (mode === 'wait') {
-            enterBlocked = true;
-            pwLog('[presence] mode=wait: blocking enters during exit');
-        }
         const rect = child.lastRect;
         const computed = child.lastComputedStyle;
         // For sync/wait, preserve layout by inserting a hidden placeholder.
@@ -415,8 +470,8 @@ export const createAnimatePresenceContext = (context) => {
         // This prevents race conditions where re-entry registers a new element with the same key
         // before this exit animation completes
         const exitingElement = child.element;
-        // Start exit and track in-flight count
-        inFlightExits += 1;
+        // Start exit and track in-flight count (handles wait-mode blocking)
+        startExit();
         requestAnimationFrame(() => {
             animate(clone, exitKeyframes, finalTransition)
                 .finished.catch(() => { })
@@ -459,17 +514,7 @@ export const createAnimatePresenceContext = (context) => {
                     inFlightExits: inFlightExits - 1,
                     clonesInDOM: document.querySelectorAll('[data-clone="true"]').length
                 });
-                inFlightExits -= 1;
-                if (inFlightExits === 0) {
-                    pwLog('[presence] all exits complete, calling onExitComplete');
-                    context.onExitComplete?.();
-                    // For mode='wait': unblock enters now that all exits are complete
-                    if (mode === 'wait' && enterBlocked) {
-                        enterBlocked = false;
-                        pwLog('[presence] mode=wait: unblocking enters, notifying callbacks');
-                        notifyEnterUnblocked();
-                    }
-                }
+                finishExit();
             });
         });
     };
@@ -483,7 +528,9 @@ export const createAnimatePresenceContext = (context) => {
         registerChild,
         updateChildState,
         updateChildAnimatedStyle,
-        unregisterChild
+        unregisterChild,
+        notifyExitStart: startExit,
+        notifyExitComplete: finishExit
     };
 };
 /**
@@ -547,44 +594,23 @@ export const getPresenceDepth = () => getContext(PRESENCE_DEPTH_CONTEXT);
 export const setPresenceDepth = (depth) => {
     setContext(PRESENCE_DEPTH_CONTEXT, depth);
 };
+const PRESENCE_CHILD_CONTEXT = Symbol('presence-child-context');
 /**
- * Hook used by motion elements to participate in presence.
- * Registers the element and ensures its exit animation runs on teardown.
+ * Get the nearest `PresenceChild` context from Svelte component context, or
+ * `undefined` if the caller is not wrapped in one.
  *
- * Note: Svelte lifecycle wrapper - ignored for coverage.
+ * Note: Trivial wrapper - ignored for coverage.
  */
-/* c8 ignore start */
+/* c8 ignore next 3 */
+export const getPresenceChildContext = () => {
+    return getContext(PRESENCE_CHILD_CONTEXT);
+};
 /**
- * Hook used by motion elements to participate in presence.
- *
- * Registers the element with the presence context and guarantees that the
- * exit animation is scheduled on teardown.
+ * Install a `PresenceChild` context for descendants.
  *
- * @param key Unique identifier for the presence child.
- * @param element The DOM element to track.
- * @param exit The exit keyframes definition.
- * @param mergedTransition The element's merged transition for precedence.
+ * Note: Trivial wrapper - ignored for coverage.
  */
-export const usePresence = (key, element, exit, mergedTransition) => {
-    const context = getAnimatePresenceContext();
-    pwLog('[presence] usePresence called', {
-        key,
-        hasElement: !!element,
-        hasContext: !!context,
-        hasExit: !!exit,
-        exit
-    });
-    if (element && context && exit) {
-        context.registerChild(key, element, exit, mergedTransition);
-        onDestroy(() => {
-            pwLog('[presence] onDestroy triggered', { key });
-            context.unregisterChild(key);
-        });
-    }
-    else {
-        pwLog('[presence] usePresence - skipping registration', {
-            reason: !element ? 'no element' : !context ? 'no context' : 'no exit'
-        });
-    }
+/* c8 ignore next 3 */
+export const setPresenceChildContext = (context) => {
+    setContext(PRESENCE_CHILD_CONTEXT, context);
 };
-/* c8 ignore end */

package/dist/utils/usePresence.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Tuple returned by {@link usePresence}, matching framer-motion's shape:
+ * `[true, null]` while present (or when not inside a `PresenceChild`), and
+ * `[false, () => void]` after the wrapper enters its exit hold.
+ */
+export type UsePresenceState = [true, null] | [false, () => void];
+/**
+ * Returns whether the calling component is currently present in its parent
+ * `<PresenceChild>`. While the wrapper holds the component for an exit, this
+ * flips to `false` so the consumer can branch (render different markup, run
+ * a custom exit animation, etc.).
+ *
+ * Outside of a `<PresenceChild>` always returns `true`.
+ *
+ * Reactivity note: the boolean tracks the wrapper's state and updates in
+ * Svelte 5 reactive contexts (`$derived`, `$effect`, template). For non-
+ * reactive snapshots, prefer `usePresence()` which exposes the same state
+ * alongside the `safeToRemove` callback.
+ *
+ * @returns `true` while present, `false` while exiting.
+ * @see https://motion.dev/docs/react-use-is-present
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { useIsPresent } from '@humanspeak/svelte-motion'
+ *   const isPresent = $derived(useIsPresent())
+ * </script>
+ * <div class:exiting={!isPresent}>{isPresent ? 'live' : 'goodbye'}</div>
+ * ```
+ */
+export declare const useIsPresent: () => boolean;
+/**
+ * Returns `[isPresent, safeToRemove]`. `isPresent` reflects the wrapper's
+ * presence state; `safeToRemove` is the callback to invoke once a custom exit
+ * animation finishes. Calling it triggers the actual unmount and decrements
+ * the parent `<AnimatePresence>` exit-completion count.
+ *
+ * Outside of a `<PresenceChild>` returns `[true, null]` — the consumer is
+ * effectively always present and there is nothing to safely remove.
+ *
+ * `safeToRemove` is idempotent and versioned: a stale callback from a
+ * canceled exit cycle (re-entry before the consumer signaled completion) is
+ * a no-op.
+ *
+ * @returns `[true, null]` while present (or outside any `PresenceChild`),
+ *     `[false, () => void]` while the wrapper holds the component for exit.
+ * @see https://motion.dev/docs/react-use-presence
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { usePresence } from '@humanspeak/svelte-motion'
+ *
+ *   let node: HTMLElement | undefined = $state()
+ *   const presence = $derived(usePresence())
+ *
+ *   $effect(() => {
+ *     const [isPresent, safeToRemove] = presence
+ *     if (isPresent || !node) return
+ *     const onEnd = () => safeToRemove()
+ *     node.addEventListener('transitionend', onEnd, { once: true })
+ *     node.classList.add('exiting')
+ *     return () => node?.removeEventListener('transitionend', onEnd)
+ *   })
+ * </script>
+ *
+ * <div bind:this={node}>…</div>
+ * ```
+ */
+export declare const usePresence: () => UsePresenceState;

package/dist/utils/usePresence.js

@@ -0,0 +1,74 @@
+import { getPresenceChildContext } from './presence';
+/**
+ * Returns whether the calling component is currently present in its parent
+ * `<PresenceChild>`. While the wrapper holds the component for an exit, this
+ * flips to `false` so the consumer can branch (render different markup, run
+ * a custom exit animation, etc.).
+ *
+ * Outside of a `<PresenceChild>` always returns `true`.
+ *
+ * Reactivity note: the boolean tracks the wrapper's state and updates in
+ * Svelte 5 reactive contexts (`$derived`, `$effect`, template). For non-
+ * reactive snapshots, prefer `usePresence()` which exposes the same state
+ * alongside the `safeToRemove` callback.
+ *
+ * @returns `true` while present, `false` while exiting.
+ * @see https://motion.dev/docs/react-use-is-present
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { useIsPresent } from '@humanspeak/svelte-motion'
+ *   const isPresent = $derived(useIsPresent())
+ * </script>
+ * <div class:exiting={!isPresent}>{isPresent ? 'live' : 'goodbye'}</div>
+ * ```
+ */
+export const useIsPresent = () => {
+    const context = getPresenceChildContext();
+    return context ? context.isPresent : true;
+};
+/**
+ * Returns `[isPresent, safeToRemove]`. `isPresent` reflects the wrapper's
+ * presence state; `safeToRemove` is the callback to invoke once a custom exit
+ * animation finishes. Calling it triggers the actual unmount and decrements
+ * the parent `<AnimatePresence>` exit-completion count.
+ *
+ * Outside of a `<PresenceChild>` returns `[true, null]` — the consumer is
+ * effectively always present and there is nothing to safely remove.
+ *
+ * `safeToRemove` is idempotent and versioned: a stale callback from a
+ * canceled exit cycle (re-entry before the consumer signaled completion) is
+ * a no-op.
+ *
+ * @returns `[true, null]` while present (or outside any `PresenceChild`),
+ *     `[false, () => void]` while the wrapper holds the component for exit.
+ * @see https://motion.dev/docs/react-use-presence
+ *
+ * @example
+ * ```svelte
+ * <script lang="ts">
+ *   import { usePresence } from '@humanspeak/svelte-motion'
+ *
+ *   let node: HTMLElement | undefined = $state()
+ *   const presence = $derived(usePresence())
+ *
+ *   $effect(() => {
+ *     const [isPresent, safeToRemove] = presence
+ *     if (isPresent || !node) return
+ *     const onEnd = () => safeToRemove()
+ *     node.addEventListener('transitionend', onEnd, { once: true })
+ *     node.classList.add('exiting')
+ *     return () => node?.removeEventListener('transitionend', onEnd)
+ *   })
+ * </script>
+ *
+ * <div bind:this={node}>…</div>
+ * ```
+ */
+export const usePresence = () => {
+    const context = getPresenceChildContext();
+    if (!context)
+        return [true, null];
+    return context.isPresent ? [true, null] : [false, context.safeToRemove];
+};

package/dist/vite.js

@@ -1,3 +1,4 @@
+import { Parser } from 'acorn';
 /**
  * Tag-to-component name mapping. Each key is the lowercase HTML/SVG tag,
  * and the value is the PascalCase component filename (without .svelte).
@@ -318,16 +319,18 @@ export const svelteMotionOptimize = () => ({
         for (const [tag, localName] of tagToLocal) {
             const openRe = new RegExp(`<motion\\.${escapeRegExp(tag)}(?=[\\s/>])`, 'g');
             const closeRe = new RegExp(`</motion\\.${escapeRegExp(tag)}\\s*>`, 'g');
-            const scriptRe = new RegExp(`\\bmotion\\.${escapeRegExp(tag)}\\b`, 'g');
             transformed = transformed.replace(openRe, `<${localName}`);
             transformed = transformed.replace(closeRe, `</${localName}>`);
-            // Also replace script-block references (e.g., const Component = motion.div)
-            // But only outside of the import statement we already handled
-            const importEndIdx = transformed.indexOf(localName) + localName.length;
-            const beforeImport = transformed.slice(0, importEndIdx);
-            const afterImport = transformed.slice(importEndIdx);
-            transformed = beforeImport + afterImport.replace(scriptRe, localName);
         }
+        // Rewrite `motion.TAG` JS references (e.g. `const Component = motion.div`)
+        // inside <script> blocks only. A naive regex over the script body would
+        // also clobber the same substring in string literals (`"motion.div"`)
+        // and comments (`// motion.div`). Parse the script as JS instead and
+        // only rewrite real `motion.<tag>` MemberExpressions. For scripts that
+        // fail to parse as plain JS (e.g. `<script lang="ts">`), fall back to a
+        // string/comment-aware lexer that achieves the same correctness without
+        // needing a TS parser.
+        transformed = transformed.replace(/(<script\b[^>]*>)([\s\S]*?)(<\/script>)/g, (_full, open, content, close) => open + rewriteMotionRefsInScript(content, tagToLocal) + close);
         return {
             code: transformed,
             map: null
@@ -341,3 +344,169 @@ export const svelteMotionOptimize = () => ({
  * @returns The escaped string safe for use in a RegExp.
  */
 const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+/**
+ * Rewrite `motion.<tag>` member-expression references inside a `<script>`
+ * body to the matching `SvelteMotionTag` local. Preserves string literals
+ * and comments — they look like `motion.div` to a regex but must not be
+ * rewritten.
+ *
+ * Strategy: parse the body as JS with acorn and splice only real
+ * MemberExpression matches. If parsing fails (TypeScript, JSX, etc.) fall
+ * back to a string/comment-aware lexer that skips literals and comments.
+ *
+ * @param content - Raw script body (between `<script ...>` and `</script>`).
+ * @param tagToLocal - Map of lowercase tag → local component identifier.
+ * @returns The rewritten body, ready to splice back into the source.
+ */
+const rewriteMotionRefsInScript = (content, tagToLocal) => {
+    try {
+        return rewriteViaAst(content, tagToLocal);
+    }
+    catch {
+        return rewriteViaLexer(content, tagToLocal);
+    }
+};
+const isIdentifier = (n) => !!n && n.type === 'Identifier';
+const isMemberExpression = (n) => !!n && n.type === 'MemberExpression';
+/**
+ * Walk an acorn AST and collect every `motion.<tag>` MemberExpression range
+ * we should rewrite. Splice from end to start so earlier indices stay valid.
+ */
+const rewriteViaAst = (content, tagToLocal) => {
+    const ast = Parser.parse(content, {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        allowImportExportEverywhere: true,
+        allowReturnOutsideFunction: true,
+        allowAwaitOutsideFunction: true,
+        allowHashBang: true
+    });
+    const edits = [];
+    const visit = (node) => {
+        if (!node || typeof node !== 'object' || typeof node.type !== 'string')
+            return;
+        if (isMemberExpression(node) &&
+            !node.computed &&
+            isIdentifier(node.object) &&
+            node.object.name === 'motion' &&
+            isIdentifier(node.property)) {
+            const localName = tagToLocal.get(node.property.name);
+            if (localName) {
+                edits.push({ start: node.start, end: node.end, replacement: localName });
+                return;
+            }
+        }
+        for (const key of Object.keys(node)) {
+            if (key === 'type' || key === 'start' || key === 'end' || key === 'loc')
+                continue;
+            const value = node[key];
+            if (Array.isArray(value))
+                value.forEach((v) => visit(v));
+            else if (value && typeof value === 'object')
+                visit(value);
+        }
+    };
+    visit(ast);
+    if (edits.length === 0)
+        return content;
+    edits.sort((a, b) => b.start - a.start);
+    let out = content;
+    for (const edit of edits) {
+        out = out.slice(0, edit.start) + edit.replacement + out.slice(edit.end);
+    }
+    return out;
+};
+/**
+ * Fallback for scripts acorn can't parse (TS, JSX). Walks the source
+ * character-by-character, skipping string literals (`'`, `"`, backtick incl.
+ * `${…}` substitutions) and line/block comments, then applies a `motion.<tag>`
+ * regex to the remaining "code" regions. Less precise than AST but covers
+ * the same correctness contract for literal/comment preservation.
+ */
+const rewriteViaLexer = (content, tagToLocal) => {
+    const len = content.length;
+    const out = [];
+    let i = 0;
+    const isIdStart = (ch) => /[A-Za-z_$]/.test(ch);
+    const isIdPart = (ch) => /[A-Za-z0-9_$-]/.test(ch);
+    while (i < len) {
+        const ch = content[i];
+        const next = content[i + 1];
+        // Line comment
+        if (ch === '/' && next === '/') {
+            const end = content.indexOf('\n', i);
+            const stop = end === -1 ? len : end;
+            out.push(content.slice(i, stop));
+            i = stop;
+            continue;
+        }
+        // Block comment
+        if (ch === '/' && next === '*') {
+            const end = content.indexOf('*/', i + 2);
+            const stop = end === -1 ? len : end + 2;
+            out.push(content.slice(i, stop));
+            i = stop;
+            continue;
+        }
+        // String literals (single/double)
+        if (ch === '"' || ch === "'") {
+            const quote = ch;
+            let j = i + 1;
+            while (j < len) {
+                if (content[j] === '\\') {
+                    j += 2;
+                    continue;
+                }
+                if (content[j] === quote) {
+                    j++;
+                    break;
+                }
+                j++;
+            }
+            out.push(content.slice(i, j));
+            i = j;
+            continue;
+        }
+        // Template literal — naive: skip to matching backtick, no `${…}` parsing
+        // is needed for our use case (we only need to NOT rewrite the literal
+        // text; substitutions still look like code but `motion.<tag>` inside
+        // a template substitution is vanishingly rare and acorn would normally
+        // handle it).
+        if (ch === '`') {
+            let j = i + 1;
+            while (j < len) {
+                if (content[j] === '\\') {
+                    j += 2;
+                    continue;
+                }
+                if (content[j] === '`') {
+                    j++;
+                    break;
+                }
+                j++;
+            }
+            out.push(content.slice(i, j));
+            i = j;
+            continue;
+        }
+        // Possible `motion.<tag>` identifier — require word boundary on left
+        if ((i === 0 || !isIdPart(content[i - 1])) &&
+            isIdStart(ch) &&
+            content.slice(i, i + 7) === 'motion.') {
+            let j = i + 7;
+            const tagStart = j;
+            while (j < len && isIdPart(content[j]))
+                j++;
+            const tag = content.slice(tagStart, j);
+            const localName = tagToLocal.get(tag);
+            if (localName && (j === len || !isIdPart(content[j]))) {
+                out.push(localName);
+                i = j;
+                continue;
+            }
+        }
+        out.push(ch);
+        i++;
+    }
+    return out.join('');
+};