@kitlangton/solid-motion 0.1.0

package/dist/source/components/AnimatePresence.jsx

@@ -0,0 +1,444 @@
+import { batch, children, createEffect, createMemo, createSignal, For, Index, mergeProps, on, onMount, splitProps, untrack, useContext } from "solid-js";
+import { PresenceContext } from "../context/PresenceContext";
+let presenceCounter = 0;
+let autoKeyIndex = 0;
+const autoKeyMap = new WeakMap();
+/**
+ * AnimatePresence for Solid.js
+ *
+ * Enables exit animations by keeping elements in the DOM
+ * until their exit animations complete.
+ *
+ * @example
+ * ```solid
+ * <AnimatePresence>
+ *   {show() && (
+ *     <motion.div
+ *       exit={{ opacity: 0 }}
+ *     />
+ *   )}
+ * </AnimatePresence>
+ * ```
+ */
+export function AnimatePresence(props) {
+    const merged = mergeProps({
+        initial: true,
+        mode: "sync",
+        presenceAffectsLayout: true,
+    }, props);
+    const [local, others] = splitProps(merged, [
+        "children",
+        "when",
+        "presenceKey",
+        "initial",
+        "onExitComplete",
+        "mode",
+        "presenceAffectsLayout",
+        "custom",
+        "anchorX",
+        "root",
+    ]);
+    // Track if this is the initial render
+    let isInitialRender = true;
+    let didWarn = false;
+    const warnNonFactory = () => {
+        if (didWarn)
+            return;
+        didWarn = true;
+        console.warn("[AnimatePresence] Solid requires children to be a function for exit animations to work reliably. " +
+            "Use <AnimatePresence when={condition}>{() => <motion.div .../>}</AnimatePresence>.");
+    };
+    if (local.when !== undefined) {
+        const currentChild = createMemo(() => {
+            if (!local.when)
+                return undefined;
+            const childrenValue = local.children;
+            const getChild = () => {
+                let value = typeof childrenValue === "function" ? childrenValue() : childrenValue;
+                if (typeof value === "function" && value.length === 0) {
+                    value = value();
+                }
+                return value;
+            };
+            if (typeof childrenValue !== "function") {
+                warnNonFactory();
+            }
+            return { key: local.presenceKey ?? "index-0", getChild };
+        });
+        const initialChild = currentChild();
+        const [rendered, setRendered] = createSignal(initialChild ? [initialChild] : []);
+        createEffect(on(currentChild, (next) => {
+            const previous = untrack(rendered);
+            const exiting = previous.filter((child) => child.key !== next?.key);
+            // Reuse the mounted record on reentry, so its exit can reverse in place.
+            const present = next && (previous.find((child) => child.key === next.key) ?? next);
+            setRendered(local.mode === "wait" && exiting.length
+                ? exiting
+                : present ? [present, ...exiting] : exiting);
+        }, { defer: true }));
+        onMount(() => { isInitialRender = false; });
+        return (<For each={rendered()}>
+        {(child) => {
+                const isPresent = () => currentChild()?.key === child.key;
+                const onExitComplete = () => {
+                    const next = untrack(currentChild);
+                    const previous = untrack(rendered);
+                    if (next?.key === child.key || !previous.includes(child))
+                        return;
+                    const remaining = previous.filter((item) => item !== child);
+                    const hasExits = remaining.some((item) => item.key !== next?.key);
+                    setRendered(!hasExits && next
+                        ? [remaining.find((item) => item.key === next.key) ?? next]
+                        : remaining);
+                    if (!hasExits)
+                        local.onExitComplete?.();
+                };
+                return (<PresenceChild key={child.key} isPresent={isPresent} onExitComplete={isPresent() ? undefined : onExitComplete} initial={isInitialRender && !local.initial ? false : undefined} custom={local.custom} presenceAffectsLayout={local.presenceAffectsLayout} getChild={child.getChild} childKey={child.key} mode={local.mode} anchorX={local.anchorX} root={local.root}/>);
+            }}
+      </For>);
+    }
+    const resolveChildrenList = () => {
+        const childrenValue = local.children;
+        if (local.when !== undefined) {
+            if (!local.when)
+                return [];
+            if (typeof childrenValue !== "function") {
+                warnNonFactory();
+            }
+            const getChild = typeof childrenValue === "function" ? childrenValue : () => childrenValue;
+            const key = local.presenceKey ?? "index-0";
+            return [{ key, getChild }];
+        }
+        const child = typeof childrenValue === "function" ? childrenValue() : childrenValue;
+        if (!child || child === true)
+            return [];
+        const list = Array.isArray(child) ? child : [child];
+        return list
+            .filter((item) => item !== false && item != null)
+            .map((item, index) => ({
+            key: getChildKey(item, index),
+            getChild: () => item,
+        }));
+    };
+    // Track present children (filtered to elements only)
+    const presentChildren = createMemo(() => resolveChildrenList());
+    // Track which keys are currently present
+    const presentKeys = createMemo(() => {
+        return presentChildren().map((child) => child.key);
+    });
+    // Track all children that should be rendered (including exiting ones)
+    const [allChildren, setAllChildren] = createSignal([], { equals: false });
+    // Track exit completion status per key
+    const [exitStatus, setExitStatus] = createSignal(new Map(), { equals: false });
+    // Handle child changes
+    createEffect(() => {
+        const current = presentChildren();
+        const currentKeys = presentKeys();
+        const prev = untrack(allChildren);
+        const prevExitStatus = untrack(exitStatus);
+        let nextExitStatus = prevExitStatus;
+        let exitStatusChanged = false;
+        // Identify exiting children
+        const exitingChildren = prev.filter((child) => !currentKeys.includes(child.key));
+        // Clear exit tracking for children that re-entered
+        prevExitStatus.forEach((_, key) => {
+            if (currentKeys.includes(key)) {
+                if (!exitStatusChanged) {
+                    nextExitStatus = new Map(prevExitStatus);
+                    exitStatusChanged = true;
+                }
+                nextExitStatus.delete(key);
+            }
+        });
+        // Mark exiting children
+        exitingChildren.forEach((child) => {
+            if (!prevExitStatus.has(child.key)) {
+                if (!exitStatusChanged) {
+                    nextExitStatus = new Map(prevExitStatus);
+                    exitStatusChanged = true;
+                }
+                nextExitStatus.set(child.key, false);
+            }
+        });
+        if (exitStatusChanged) {
+            setExitStatus(nextExitStatus);
+        }
+        // Build new allChildren array
+        const nextChildren = [];
+        // Add all current children
+        for (let i = 0; i < current.length; i++) {
+            const child = current[i];
+            nextChildren.push({
+                key: child.key,
+                getChild: child.getChild,
+                isPresent: true,
+                index: i,
+            });
+        }
+        // In "wait" mode, only show exiting children until they're all done
+        if (local.mode === "wait" && exitingChildren.length > 0) {
+            nextChildren.length = 0;
+            exitingChildren.forEach((child) => {
+                nextChildren.push({
+                    ...child,
+                    isPresent: false,
+                });
+            });
+        }
+        else {
+            // In "sync" and "popLayout" modes, include exiting children alongside present ones
+            exitingChildren.forEach((child) => {
+                nextChildren.push({
+                    ...child,
+                    isPresent: false,
+                });
+            });
+        }
+        const isSame = prev.length === nextChildren.length &&
+            prev.every((child, index) => {
+                const next = nextChildren[index];
+                return child.key === next.key && child.getChild === next.getChild && child.isPresent === next.isPresent;
+            });
+        if (!isSame) {
+            setAllChildren(nextChildren);
+        }
+    });
+    // Check if all exits are complete
+    const allExitsComplete = createMemo(() => {
+        const status = exitStatus();
+        if (!status.size)
+            return false;
+        for (const isComplete of status.values()) {
+            if (!isComplete)
+                return false;
+        }
+        return true;
+    });
+    // Handle completion
+    createEffect(() => {
+        if (allExitsComplete()) {
+            // All exits done, clean up and notify
+            batch(() => {
+                setExitStatus(new Map());
+                // Filter to only present children
+                const current = presentChildren();
+                const keys = presentKeys();
+                setAllChildren(current.map((child, i) => ({
+                    key: child.key,
+                    getChild: child.getChild,
+                    isPresent: true,
+                    index: i,
+                })));
+            });
+            local.onExitComplete?.();
+        }
+    });
+    // Mark initial render complete after first mount
+    onMount(() => {
+        isInitialRender = false;
+    });
+    return (<Index each={allChildren()}>
+      {(childState) => {
+            const state = childState;
+            const isPresent = () => state().isPresent;
+            const onExitComplete = () => {
+                const status = untrack(exitStatus);
+                const key = state().key;
+                if (!status.has(key))
+                    return;
+                batch(() => {
+                    setExitStatus((map) => {
+                        const newMap = new Map(map);
+                        if (!newMap.has(key))
+                            return newMap;
+                        newMap.set(key, true);
+                        return newMap;
+                    });
+                });
+            };
+            return (<PresenceChild key={state().key} isPresent={isPresent} onExitComplete={isPresent() ? undefined : onExitComplete} initial={isInitialRender && !local.initial ? false : undefined} custom={local.custom} presenceAffectsLayout={local.presenceAffectsLayout} getChild={state().getChild} childKey={state().key} mode={local.mode} anchorX={local.anchorX} root={local.root}/>);
+        }}
+    </Index>);
+}
+function PopChild(props) {
+    let container;
+    let wasPresent = props.isPresent;
+    const [style, setStyle] = createSignal({ display: "contents" });
+    createEffect(() => {
+        const now = props.isPresent;
+        if (wasPresent && !now) {
+            const target = container?.firstElementChild ?? container;
+            if (target) {
+                const rect = target.getBoundingClientRect();
+                const parent = target.offsetParent;
+                const parentRect = parent ? parent.getBoundingClientRect() : { left: 0, top: 0, width: 0 };
+                const top = rect.top - parentRect.top;
+                const left = rect.left - parentRect.left;
+                const right = parent ? parentRect.width - rect.width - left : 0;
+                const x = props.anchorX === "right"
+                    ? { right: `${right}px`, left: "auto" }
+                    : { left: `${left}px`, right: "auto" };
+                setStyle({
+                    position: "absolute",
+                    top: `${top}px`,
+                    width: `${rect.width}px`,
+                    height: `${rect.height}px`,
+                    ...x,
+                });
+            }
+        }
+        else if (now) {
+            setStyle({ display: "contents" });
+        }
+        wasPresent = now;
+    });
+    return (<div ref={(el) => (container = el)} style={style()}>
+      {props.children}
+    </div>);
+}
+/**
+ * Individual presence child wrapper
+ */
+function PresenceChild(props) {
+    const presenceId = String(presenceCounter++);
+    const [local, others] = splitProps(props, [
+        "isPresent",
+        "getChild",
+        "childKey",
+        "onExitComplete",
+        "initial",
+        "custom",
+        "presenceAffectsLayout",
+        "mode",
+        "anchorX",
+        "root",
+    ]);
+    // Track registered exit handlers from child motion components
+    const [registeredChildren, setRegisteredChildren] = createSignal(new Map());
+    // Create presence context for this child
+    const register = (childId) => {
+        const key = String(childId);
+        batch(() => {
+            setRegisteredChildren((map) => {
+                const newMap = new Map(map);
+                newMap.set(key, false);
+                return newMap;
+            });
+        });
+        return () => {
+            batch(() => {
+                setRegisteredChildren((map) => {
+                    const newMap = new Map(map);
+                    newMap.delete(key);
+                    return newMap;
+                });
+            });
+        };
+    };
+    const onExitComplete = (childId) => {
+        if (!local.onExitComplete)
+            return;
+        const key = String(childId);
+        batch(() => {
+            setRegisteredChildren((map) => {
+                const newMap = new Map(map);
+                newMap.set(key, true);
+                return newMap;
+            });
+        });
+        const allComplete = Array.from(registeredChildren().values()).every(Boolean);
+        if (allComplete) {
+            local.onExitComplete?.();
+        }
+    };
+    createEffect(on(local.isPresent, (present) => {
+        const current = untrack(registeredChildren);
+        if (current.size) {
+            setRegisteredChildren((map) => {
+                const newMap = new Map(map);
+                newMap.forEach((_, key) => newMap.set(key, false));
+                return newMap;
+            });
+        }
+        if (!present && current.size === 0) {
+            local.onExitComplete?.();
+        }
+    }, { defer: true }));
+    const resolvedInitial = () => {
+        if (local.initial === false)
+            return false;
+        if (typeof local.initial === "string" || Array.isArray(local.initial))
+            return local.initial;
+        return undefined;
+    };
+    const presenceContext = createMemo(() => ({
+        id: () => presenceId,
+        isPresent: local.isPresent,
+        initial: () => resolvedInitial(),
+        custom: () => local.custom,
+        onExitComplete,
+        register,
+    }));
+    return (<PresenceContext.Provider value={presenceContext()}>
+      <PresenceChildContent getChild={local.getChild} childKey={local.childKey} isPresent={local.isPresent} mode={local.mode} anchorX={local.anchorX} root={local.root}/>
+    </PresenceContext.Provider>);
+}
+function PresenceChildContent(props) {
+    const resolved = children(() => {
+        props.childKey;
+        return untrack(() => props.getChild());
+    });
+    if (props.mode === "popLayout") {
+        return (<PopChild isPresent={props.isPresent()} anchorX={props.anchorX} root={props.root}>
+        {resolved()}
+      </PopChild>);
+    }
+    return resolved();
+}
+/**
+ * Get a unique key for a child element
+ */
+function getChildKey(child, index) {
+    if (!child)
+        return "";
+    const directKey = child.key ?? child.id ?? child?.props?.key;
+    if (directKey != null && directKey !== "")
+        return directKey;
+    if (typeof child === "string" || typeof child === "number")
+        return child;
+    if (typeof child === "object" || typeof child === "function") {
+        const cached = autoKeyMap.get(child);
+        if (cached)
+            return cached;
+    }
+    const nextKey = `index-${index}`;
+    if (typeof child === "object" || typeof child === "function") {
+        autoKeyMap.set(child, nextKey);
+    }
+    return nextKey;
+}
+/**
+ * Hook to access presence state and signal safe removal
+ */
+export function usePresence() {
+    const context = useContext(PresenceContext);
+    if (!context) {
+        return [true, null];
+    }
+    const isPresent = context.isPresent();
+    const safeToRemove = () => {
+        if (context.onExitComplete) {
+            context.onExitComplete(context.id());
+        }
+    };
+    return [!isPresent ? false : true, !isPresent ? safeToRemove : null];
+}
+/**
+ * Simple hook to check if component is present
+ */
+export function useIsPresent() {
+    const context = useContext(PresenceContext);
+    if (!context)
+        return true;
+    return context.isPresent();
+}

package/dist/source/components/AnimatePresenceContext.jsx

@@ -0,0 +1,20 @@
+import { createContext, useContext } from "solid-js";
+export const AnimatePresenceContext = createContext(null);
+export function AnimatePresenceProvider(props) {
+    return (<AnimatePresenceContext.Provider value={props.value}>
+      {props.children}
+    </AnimatePresenceContext.Provider>);
+}
+export function createPresenceState(config) {
+    return {
+        id: config.id,
+        isPresent: config.isPresent,
+        initial: config.initial,
+        custom: config.custom || (() => undefined),
+        onExitComplete: config.onExitComplete,
+        register: config.register || (() => () => { }),
+    };
+}
+export function usePresenceInternal() {
+    return useContext(AnimatePresenceContext);
+}

package/dist/source/components/AnimatePresenceTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/source/components/MotionConfig.jsx

@@ -0,0 +1,13 @@
+import { createContext, splitProps, useContext } from "solid-js";
+const defaultContext = {
+    transformPagePoint: ((p) => p),
+    isStatic: false,
+    reducedMotion: "never",
+};
+export const MotionConfigContext = createContext(defaultContext);
+export function MotionConfig(props) {
+    const parent = useContext(MotionConfigContext);
+    const [local, contextProps] = splitProps(props, ["children"]);
+    const value = { ...parent, ...contextProps };
+    return <MotionConfigContext.Provider value={value}>{local.children}</MotionConfigContext.Provider>;
+}

package/dist/source/context/MotionContext/create.js

@@ -0,0 +1,19 @@
+import { createEffect, createSignal } from "solid-js";
+import { getCurrentTreeVariants } from "./utils";
+export function createMotionContext(props, parentContext) {
+    const [initial, setInitial] = createSignal();
+    const [animate, setAnimate] = createSignal();
+    createEffect(() => {
+        const variants = getCurrentTreeVariants(props, parentContext);
+        setInitial(variants.initial);
+        setAnimate(variants.animate);
+    });
+    return {
+        get initial() {
+            return initial();
+        },
+        get animate() {
+            return animate();
+        },
+    };
+}

package/dist/source/context/MotionContext/utils.js

@@ -0,0 +1,11 @@
+import { isControllingVariants, isVariantLabel } from "motion-dom";
+export function getCurrentTreeVariants(props, context) {
+    if (isControllingVariants(props)) {
+        const { initial, animate } = props;
+        return {
+            initial: initial === false || isVariantLabel(initial) ? initial : undefined,
+            animate: isVariantLabel(animate) ? animate : undefined,
+        };
+    }
+    return props.inherit !== false ? context : {};
+}

package/dist/source/context/MotionContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "solid-js";
+export const MotionContext = createContext({});

package/dist/source/context/PresenceContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "solid-js";
+export const PresenceContext = createContext(null);

package/dist/source/events/add-pointer-event.js

@@ -0,0 +1,5 @@
+import { addDomEvent } from "motion-dom";
+import { addPointerInfo } from "./event-info";
+export function addPointerEvent(target, eventName, handler, options) {
+    return addDomEvent(target, eventName, addPointerInfo(handler), options);
+}

package/dist/source/events/event-info.js

@@ -0,0 +1,16 @@
+import { isPrimaryPointer } from "motion-dom";
+export function extractEventInfo(event) {
+    return {
+        point: {
+            x: event.pageX,
+            y: event.pageY,
+        },
+    };
+}
+export const addPointerInfo = (handler) => {
+    return (event) => {
+        const pointer = event;
+        if (isPrimaryPointer(pointer))
+            handler(pointer, extractEventInfo(pointer));
+    };
+};