motion-start 0.0.1

package/src/animation/utils/easing.ts

@@ -0,0 +1,55 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+// TODO: import type { EasingFunction } from "svelte/transition"; future idea, maybe use svelte built in easing function...
+import type { Easing, EasingFunction } from "../../types";
+// export declare const easingDefinitionToFunction: (definition: Easing) => import("../../types").EasingFunction;
+// export declare const isEasingArray: (ease: any) => ease is Easing[];
+
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { anticipate, backIn, backInOut, backOut, bounceIn, bounceInOut, bounceOut, circIn, circInOut, circOut, cubicBezier, easeIn, easeInOut, easeOut, linear } from 'popmotion';
+import { __read } from 'tslib';
+// import { invariant } from '../../utils/errors.js';
+
+var easingLookup = {
+    linear: linear,
+    easeIn: easeIn,
+    easeInOut: easeInOut,
+    easeOut: easeOut,
+    circIn: circIn,
+    circInOut: circInOut,
+    circOut: circOut,
+    backIn: backIn,
+    backInOut: backInOut,
+    backOut: backOut,
+    anticipate: anticipate,
+    bounceIn: bounceIn,
+    bounceInOut: bounceInOut,
+    bounceOut: bounceOut,
+};
+var easingDefinitionToFunction = function (definition: Easing): EasingFunction {
+    if (Array.isArray(definition)) {
+        // If cubic bezier definition, create bezier curve
+        //invariant(definition.length === 4, "Cubic bezier arrays must contain four numerical values.");
+        var _a = __read(definition, 4), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3];
+        return cubicBezier(x1, y1, x2, y2);
+    }
+    else if (typeof definition === "string") {
+        // Else lookup from table
+        //invariant(easingLookup[definition] !== undefined, "Invalid easing type '" + definition + "'");
+        return easingLookup[definition];
+    }
+    return definition;
+};
+const isEasingArray = (ease: any): ease is Easing[] => {
+    return Array.isArray(ease) && typeof ease[0] !== "number";
+};
+
+export { easingDefinitionToFunction, isEasingArray };
+

package/src/animation/utils/is-animatable.ts

@@ -0,0 +1,42 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { ResolvedValueTarget } from "../../types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import {fixed} from '../../utils/fix-process-env';
+import { complex } from 'style-value-types';
+
+/**
+ * Check if a value is animatable. Examples:
+ *
+ * ✅: 100, "100px", "#fff"
+ * ❌: "block", "url(2.jpg)"
+ * @param value
+ *
+ * @internal
+ */
+var isAnimatable = function (key: string, value: ResolvedValueTarget) {
+    // If the list of keys tat might be non-animatable grows, replace with Set
+    if (key === "zIndex")
+        return false;
+    // If it's a number or a keyframes array, we can animate it. We might at some point
+    // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,
+    // but for now lets leave it like this for performance reasons
+    if (typeof value === "number" || Array.isArray(value))
+        return true;
+    if (typeof value === "string" && // It's animatable if we have a string
+        complex.test(value) && // And it contains numbers and/or colors
+        !value.startsWith("url(") // Unless it starts with "url("
+    ) {
+        return true;
+    }
+    return false;
+};
+
+export { isAnimatable };

package/src/animation/utils/is-animation-controls.ts

@@ -0,0 +1,17 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { AnimationControls } from "../types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+
+const isAnimationControls = (v?: any): v is AnimationControls => {
+    return typeof v === "object" && typeof (v)?.start === "function"
+};
+
+export { isAnimationControls };

package/src/animation/utils/is-keyframes-target.ts

@@ -0,0 +1,17 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { ValueTarget, KeyframesTarget } from "../../types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+
+const isKeyframesTarget = (v: ValueTarget): v is KeyframesTarget => {
+    return Array.isArray(v);
+};
+
+export { isKeyframesTarget };

package/src/animation/utils/transitions.ts

@@ -0,0 +1,218 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { AnimationOptions } from "popmotion";
+import type { PermissiveTransitionDefinition, ResolvedValueTarget, Transition } from "../../types";
+import { MotionValue } from "../../value";
+
+
+/** 
+based on framer-motion@4.1.15,
+Copyright (c) 2018 Framer B.V.
+*/
+import { animate, inertia } from 'popmotion';
+import { __assign, __read, __rest, __spreadArray } from 'tslib';
+import { getAnimatableNone } from '../../render/dom/value-types/animatable-none.js';
+import { warning } from '../../utils/errors.js';
+import { secondsToMilliseconds } from '../../utils/time-conversion.js';
+import { getDefaultTransition } from './default-transitions.js';
+import { easingDefinitionToFunction, isEasingArray } from './easing.js';
+import { isAnimatable } from './is-animatable.js';
+
+/**
+ * Decide whether a transition is defined on a given Transition.
+ * This filters out orchestration options and returns true
+ * if any options are left.
+ */
+function isTransitionDefined(_a: Transition) {
+    _a.when; _a.delay; _a.delayChildren; _a.staggerChildren; _a.staggerDirection; _a.repeat; _a.repeatType; _a.repeatDelay; _a.from; var transition = __rest(_a, ["when", "delay", "delayChildren", "staggerChildren", "staggerDirection", "repeat", "repeatType", "repeatDelay", "from"]);
+    return !!Object.keys(transition).length;
+}
+var legacyRepeatWarning = false;
+/**
+ * Convert Framer Motion's Transition type into Popmotion-compatible options.
+ */
+function convertTransitionToAnimationOptions<T>(_a: PermissiveTransitionDefinition): AnimationOptions<T> {
+    var ease = _a.ease, times = _a.times, yoyo = _a.yoyo, flip = _a.flip, loop = _a.loop, transition = __rest(_a, ["ease", "times", "yoyo", "flip", "loop"]);
+    var options = __assign({}, transition);
+    if (times)
+        options["offset"] = times;
+    /**
+     * Convert any existing durations from seconds to milliseconds
+     */
+    if (transition.duration)
+        options["duration"] = secondsToMilliseconds(transition.duration);
+    if (transition.repeatDelay)
+        options.repeatDelay = secondsToMilliseconds(transition.repeatDelay);
+    /**
+     * Map easing names to Popmotion's easing functions
+     */
+    if (ease) {
+        options["ease"] = isEasingArray(ease)
+            ? ease.map(easingDefinitionToFunction)
+            : easingDefinitionToFunction(ease);
+    }
+    /**
+     * Support legacy transition API
+     */
+    if (transition.type === "tween")
+        options.type = "keyframes";
+    /**
+     * TODO: These options are officially removed from the API.
+     */
+    if (yoyo || loop || flip) {
+        warning(!legacyRepeatWarning, "yoyo, loop and flip have been removed from the API. Replace with repeat and repeatType options.");
+        legacyRepeatWarning = true;
+        if (yoyo) {
+            options.repeatType = "reverse";
+        }
+        else if (loop) {
+            options.repeatType = "loop";
+        }
+        else if (flip) {
+            options.repeatType = "mirror";
+        }
+        options.repeat = loop || yoyo || flip || transition.repeat;
+    }
+    /**
+     * TODO: Popmotion 9 has the ability to automatically detect whether to use
+     * a keyframes or spring animation, but does so by detecting velocity and other spring options.
+     * It'd be good to introduce a similar thing here.
+     */
+    if (transition.type !== "spring")
+        options.type = "keyframes";
+    return options;
+}
+/**
+ * Get the delay for a value by checking Transition with decreasing specificity.
+ */
+function getDelayFromTransition(transition: Transition, key: keyof Transition | "layoutX" | "layoutY" | "" | string) {
+    var _a;
+    var valueTransition = getValueTransition(transition, key) || {};
+    return (_a = valueTransition.delay) !== null && _a !== void 0 ? _a : 0;
+}
+function hydrateKeyframes(options: PermissiveTransitionDefinition) {
+    if (Array.isArray(options.to) && options.to[0] === null) {
+        options.to = __spreadArray([], __read(options.to));
+        options.to[0] = options.from;
+    }
+    return options;
+}
+function getPopmotionAnimationOptions(transition: PermissiveTransitionDefinition, options: any, key: string) {
+    var _a;
+    if (Array.isArray(options.to)) {
+        (_a = transition.duration) !== null && _a !== void 0 ? _a : (transition.duration = 0.8);
+    }
+    hydrateKeyframes(options);
+    /**
+     * Get a default transition if none is determined to be defined.
+     */
+    if (!isTransitionDefined(transition)) {
+        transition = __assign(__assign({}, transition), getDefaultTransition(key, options.to));
+    }
+    return __assign(__assign({}, options), convertTransitionToAnimationOptions(transition));
+}
+/**
+ *
+ */
+function getAnimation(key: string, value: MotionValue, target: ResolvedValueTarget, transition: Transition, onComplete) {
+    var _a;
+    var valueTransition = getValueTransition(transition, key);
+    var origin = (_a = valueTransition.from) !== null && _a !== void 0 ? _a : value.get();
+    var isTargetAnimatable = isAnimatable(key, target);
+    if (origin === "none" && isTargetAnimatable && typeof target === "string") {
+        /**
+         * If we're trying to animate from "none", try and get an animatable version
+         * of the target. This could be improved to work both ways.
+         */
+        origin = getAnimatableNone(key, target);
+    }
+    else if (isZero(origin) && typeof target === "string") {
+        origin = getZeroUnit(target);
+    }
+    else if (!Array.isArray(target) &&
+        isZero(target) &&
+        typeof origin === "string") {
+        target = getZeroUnit(origin);
+    }
+    var isOriginAnimatable = isAnimatable(key, origin);
+    warning(isOriginAnimatable === isTargetAnimatable, "You are trying to animate " + key + " from \"" + origin + "\" to \"" + target + "\". " + origin + " is not an animatable value - to enable this animation set " + origin + " to a value animatable to " + target + " via the `style` property.");
+    function start() {
+        var options = {
+            from: origin,
+            to: target,
+            velocity: value.getVelocity(),
+            onComplete: onComplete,
+            onUpdate: function (v) { return value.set(v); },
+        };
+        return valueTransition.type === "inertia" ||
+            valueTransition.type === "decay"
+            ? inertia(__assign(__assign({}, options), valueTransition))
+            : animate(__assign(__assign({}, getPopmotionAnimationOptions(valueTransition, options, key)), { onUpdate: function (v) {
+                    var _a;
+                    options.onUpdate(v);
+                    (_a = valueTransition.onUpdate) === null || _a === void 0 ? void 0 : _a.call(valueTransition, v);
+                }, onComplete: function () {
+                    var _a;
+                    options.onComplete();
+                    (_a = valueTransition.onComplete) === null || _a === void 0 ? void 0 : _a.call(valueTransition);
+                } }));
+    }
+    function set() {
+        var _a;
+        value.set(target);
+        onComplete();
+        (_a = valueTransition === null || valueTransition === void 0 ? void 0 : valueTransition.onComplete) === null || _a === void 0 ? void 0 : _a.call(valueTransition);
+        return { stop: function () { } };
+    }
+    return !isOriginAnimatable ||
+        !isTargetAnimatable ||
+        valueTransition.type === false
+        ? set
+        : start;
+}
+function isZero(value: string | number) {
+    return (value === 0 ||
+        (typeof value === "string" &&
+            parseFloat(value) === 0 &&
+            value.indexOf(" ") === -1));
+}
+function getZeroUnit(potentialUnitType: string | number) {
+    return typeof potentialUnitType === "number"
+        ? 0
+        : getAnimatableNone("", potentialUnitType);
+}
+function getValueTransition(transition: Transition, key: string) {
+    let tran = transition as any
+    return tran[key] || tran["default"] || tran;
+}
+/**
+ * Start animation on a MotionValue. This function is an interface between
+ * Framer Motion and Popmotion
+ *
+ * @internal
+ */
+function startAnimation(key: string, value: MotionValue, target: ResolvedValueTarget, transition?: Transition) {
+    if (transition === void 0) { transition = {}; }
+    return value.start(function (onComplete) {
+        var delayTimer;
+        var controls;
+        var animation = getAnimation(key, value, target, transition, onComplete);
+        var delay = getDelayFromTransition(transition, key);
+        var start = function () { return (controls = animation()); };
+        if (delay) {
+            delayTimer = setTimeout(start, secondsToMilliseconds(delay));
+        }
+        else {
+            start();
+        }
+        return function () {
+            clearTimeout(delayTimer);
+            controls === null || controls === void 0 ? void 0 : controls.stop();
+        };
+    });
+}
+
+export { convertTransitionToAnimationOptions, getDelayFromTransition, getPopmotionAnimationOptions, getValueTransition, getZeroUnit, hydrateKeyframes, isTransitionDefined, isZero, startAnimation };
+

package/src/animation/utils/variant-resolvers.ts

@@ -0,0 +1,15 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import { MotionValue } from "../../value";
+type VariantNameList = string[];
+type VariantName = string | VariantNameList;
+type UnresolvedVariant = VariantName | MotionValue;
+export type resolveVariantLabels = (variant?: UnresolvedVariant | undefined) => VariantNameList;
+/**
+ * Hooks in React sometimes accept a dependency array as their final argument. (ie useEffect/useMemo)
+ * When values in this array change, React re-runs the dependency. However if the array
+ * contains a variable number of items, React throws an error.
+ */
+export type asDependencyList = (list: VariantNameList) => string[];

package/src/components/AnimatePresence/AnimatePresence.svelte

@@ -0,0 +1,180 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts" generics="T extends {key:any}">
+    import type { ConditionalGeneric, AnimatePresenceProps } from "./index.js";
+    import { getContext } from "svelte";
+    import {
+        SharedLayoutContext,
+        isSharedLayout,
+    } from "../../context/SharedLayoutContext.js";
+    import PresenceChild from "./PresenceChild/PresenceChild.svelte";
+
+    type $$Props = AnimatePresenceProps<ConditionalGeneric<T>>;
+
+    export let list: $$Props["list"] = undefined,
+        custom: $$Props["custom"] = undefined,
+        initial: $$Props["initial"] = true,
+        onExitComplete: $$Props["onExitComplete"] = undefined,
+        exitBeforeEnter: $$Props["exitBeforeEnter"] = undefined,
+        presenceAffectsLayout = true,
+        show: $$Props["show"] = undefined,
+        isCustom = false;
+
+    let _list = list !== undefined ? list : show ? [{ key: 1 }] : [];
+    $: _list = list !== undefined ? list : show ? [{ key: 1 }] : [];
+
+    const layoutContext =
+        getContext(SharedLayoutContext) || SharedLayoutContext(isCustom);
+
+    $: isl = isSharedLayout($layoutContext);
+
+    $: forceRender = () => {
+        if (isl) {
+            $layoutContext.forceUpdate();
+        }
+        _list = [..._list];
+    };
+
+    function getChildKey(child) {
+        return child.key || "";
+    }
+
+    let isInitialRender = true;
+    let filteredChildren = _list;
+    $: filteredChildren = _list;
+
+    let presentChildren = filteredChildren;
+    let allChildren = new Map();
+    let exiting = new Set();
+    const updateChildLookup = (children, allChild) => {
+        children.forEach((child) => {
+            const key = getChildKey(child);
+            allChild.set(key, child);
+        });
+    };
+    $: updateChildLookup(filteredChildren, allChildren);
+
+    let childrenToRender: {
+        present: boolean;
+        item: any;
+        key: any;
+        onExit: undefined | (() => void);
+    }[] = [
+        ...filteredChildren.map((v) => ({
+            present: true,
+            item: v,
+            key: v.key,
+            onExit: undefined,
+        })),
+    ];
+
+    $: if (!isInitialRender) {
+        // If this is a subsequent render, deal with entering and exiting children
+        childrenToRender = [
+            ...filteredChildren.map((v) => ({
+                present: true,
+                item: v,
+                key: v.key,
+                onExit: undefined,
+            })),
+        ];
+
+        // Diff the keys of the currently-present and target children to update our
+        // exiting list.
+        const presentKeys = presentChildren.map(getChildKey);
+        const targetKeys = filteredChildren.map(getChildKey);
+        // Diff the present children with our target children and mark those that are exiting
+        const numPresent = presentKeys.length;
+        for (let i = 0; i < numPresent; i++) {
+            const key = presentKeys[i];
+            if (targetKeys.indexOf(key) === -1) {
+                exiting.add(key);
+            } else {
+                // In case this key has re-entered, remove from the exiting list
+                exiting.delete(key);
+            }
+        }
+
+        // If we currently have exiting children, and we're deferring rendering incoming children
+        // until after all current children have exiting, empty the childrenToRender array
+        if (exitBeforeEnter && exiting.size) {
+            childrenToRender = [];
+        }
+        // Loop through all currently exiting components and clone them to overwrite `animate`
+        // with any `exit` prop they might have defined.
+        exiting.forEach((key) => {
+            // If this component is actually entering again, early return
+            if (targetKeys.indexOf(key) !== -1) return;
+
+            const child = allChildren.get(key);
+            if (!child) return;
+
+            const insertionIndex = presentKeys.indexOf(key);
+
+            const onExit = () => {
+                allChildren.delete(key);
+                exiting.delete(key);
+
+                // Remove this child from the present children
+                const removeIndex = presentChildren.findIndex(
+                    (presentChild) => presentChild.key === key,
+                );
+
+                if (removeIndex < 0) {
+                    return;
+                }
+                presentChildren.splice(removeIndex, 1);
+
+                // Defer re-rendering until all exiting children have indeed left
+                if (!exiting.size) {
+                    presentChildren = [...filteredChildren];
+                    forceRender();
+                    onExitComplete && onExitComplete();
+                }
+            };
+
+            childrenToRender.splice(insertionIndex, 0, {
+                present: false,
+                item: child,
+                key: getChildKey(child),
+                onExit,
+            });
+        });
+        // Add `MotionContext` even to children that don't need it to ensure we're rendering
+        // the same tree between renders
+
+        /*
+        childrenToRender = childrenToRender.map((child) => {
+            const key = child.key as string | number;
+            return exiting.has(key) ? (
+                child
+            ) : (
+                <PresenceChild
+                    key={getChildKey(child)}
+                    isPresent
+                    presenceAffectsLayout={presenceAffectsLayout}
+                >
+                    {child}
+                </PresenceChild>
+            );
+        });
+        */
+        presentChildren = childrenToRender;
+    } else {
+        isInitialRender = false;
+    }
+</script>
+
+{#each childrenToRender as child (getChildKey(child))}
+    <PresenceChild
+        isPresent={child.present}
+        initial={initial ? undefined : false}
+        custom={child.onExit ? custom : undefined}
+        {presenceAffectsLayout}
+        onExitComplete={child.onExit}
+        {isCustom}
+    >
+        <slot item={child.item} />
+    </PresenceChild>
+{/each}

package/src/components/AnimatePresence/PresenceChild/PresenceChild.svelte

@@ -0,0 +1,78 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script module>
+    let presenceId = 0;
+    function getPresenceId() {
+        const id = presenceId;
+        presenceId++;
+        return id;
+    }
+    function newChildrenMap() {
+        return new Map();
+    }
+</script>
+
+<script lang="ts">
+    import { afterUpdate, setContext, tick } from "svelte";
+    import { setDomContext } from "../../../context/DOMcontext.js";
+    import { PresenceContext } from "../../../context/PresenceContext.js";
+    import type { PresenceChildProps } from "./index.js";
+
+    type $$Props = PresenceChildProps;
+
+    export let isPresent: $$Props['isPresent'],
+        onExitComplete: $$Props['onExitComplete'] = undefined,
+        initial: $$Props['initial'] = undefined,
+        custom: $$Props['custom'] = undefined,
+        presenceAffectsLayout: $$Props['presenceAffectsLayout'],
+        isCustom: $$Props['isCustom'];
+
+    const presenceChildren = newChildrenMap();
+    const id = getPresenceId();
+
+    $: refresh = presenceAffectsLayout ? undefined : isPresent;
+
+    const memoContext = () => {
+        return {
+            id,
+            initial,
+            isPresent,
+            custom,
+            onExitComplete: (childId) => {
+                presenceChildren.set(childId, true);
+                let allComplete = true;
+                presenceChildren.forEach((isComplete) => {
+                    if (!isComplete) allComplete = false;
+                });
+
+                allComplete && onExitComplete?.();
+            },
+            register: (childId) => {
+                presenceChildren.set(childId, false);
+                return () => presenceChildren.delete(childId);
+            },
+        };
+    };
+    let context = PresenceContext();
+
+    afterUpdate(() => {
+        if (presenceAffectsLayout) {
+            context.set(memoContext());
+        }
+    });
+
+    $: context.set(memoContext(refresh));
+
+    const keyset = () => {
+        presenceChildren.forEach((_, key) => presenceChildren.set(key, false));
+    };
+    $: keyset(isPresent);
+    $: tick().then(() => {
+        !isPresent && !presenceChildren.size && onExitComplete?.();
+    });
+    setContext(PresenceContext, context);
+    setDomContext("Presence",isCustom,context)
+</script>
+
+<slot />

package/src/components/AnimatePresence/PresenceChild/index.ts

@@ -0,0 +1,7 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+
+export type { PresenceChildProps } from "./types.js";
+export {default as PresenceChild} from './PresenceChild.svelte';

package/src/components/AnimatePresence/PresenceChild/types.ts

@@ -0,0 +1,10 @@
+import type { VariantLabels } from "../../../motion/types";
+export interface PresenceChildProps {
+    // children: React.ReactElement<any>;
+    isPresent: boolean;
+    onExitComplete?: () => void;
+    initial?: false | VariantLabels;
+    custom?: any;
+    presenceAffectsLayout: boolean;
+    isCustom: boolean
+}