motion-start 0.0.1

package/src/components/AnimateSharedLayout/utils/crossfader.ts

@@ -0,0 +1,260 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { PlaybackControls } from "popmotion";
+import type { ResolvedValues, VisualElement } from "../../../render/types";
+import type { Transition } from "../../../types";
+export interface Crossfader {
+    isActive(): boolean;
+    getCrossfadeState(element: VisualElement): ResolvedValues | undefined;
+    toLead(transition?: Transition): PlaybackControls;
+    fromLead(transition?: Transition): PlaybackControls;
+    setOptions(options: CrossfadeAnimationOptions): void;
+    reset(): void;
+    stop(): void;
+    getLatestValues(): ResolvedValues;
+}
+export interface CrossfadeAnimationOptions {
+    lead?: VisualElement;
+    follow?: VisualElement;
+    prevValues?: ResolvedValues;
+    crossfadeOpacity?: boolean;
+    preserveFollowOpacity?: boolean;
+}
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import {fixed} from '../../../utils/fix-process-env.js';
+import { __assign } from 'tslib';
+import sync, { getFrameData } from 'framesync';
+import { mix, progress, linear, mixColor, circOut } from 'popmotion';
+import { animate } from '../../../animation/animate.js';
+import { getValueTransition } from '../../../animation/utils/transitions.js';
+import { motionValue } from '../../../value/index.js';
+
+function createCrossfader(): Crossfader {
+    /**
+     * The current state of the crossfade as a value between 0 and 1
+     */
+    var progress = motionValue(1);
+    var options = {
+        lead: undefined,
+        follow: undefined,
+        crossfadeOpacity: false,
+        preserveFollowOpacity: false,
+    };
+    var prevOptions = __assign({}, options);
+    var leadState = {};
+    var followState = {};
+    /**
+     *
+     */
+    var isActive = false;
+    /**
+     *
+     */
+    var finalCrossfadeFrame = null;
+    /**
+     * Framestamp of the last frame we updated values at.
+     */
+    var prevUpdate = 0;
+    function startCrossfadeAnimation(target, transition) {
+        var lead = options.lead, follow = options.follow;
+        isActive = true;
+        finalCrossfadeFrame = null;
+        var hasUpdated = false;
+        var onUpdate = function () {
+            hasUpdated = true;
+            lead && lead.scheduleRender();
+            follow && follow.scheduleRender();
+        };
+        var onComplete = function () {
+            isActive = false;
+            /**
+             * If the crossfade animation is no longer active, flag a frame
+             * that we're still allowed to crossfade
+             */
+            finalCrossfadeFrame = getFrameData().timestamp;
+        };
+        transition = transition && getValueTransition(transition, "crossfade");
+        return animate(progress, target, __assign(__assign({}, transition), { onUpdate: onUpdate, onComplete: function () {
+                if (!hasUpdated) {
+                    progress.set(target);
+                    /**
+                     * If we never ran an update, for instance if this was an instant transition, fire a
+                     * simulated final frame to ensure the crossfade gets applied correctly.
+                     */
+                    sync.read(onComplete);
+                }
+                else {
+                    onComplete();
+                }
+                onUpdate();
+            } }));
+    }
+    function updateCrossfade() {
+        var _a, _b;
+        /**
+         * We only want to compute the crossfade once per frame, so we
+         * compare the previous update framestamp with the current frame
+         * and early return if they're the same.
+         */
+        var timestamp = getFrameData().timestamp;
+        var lead = options.lead, follow = options.follow;
+        if (timestamp === prevUpdate || !lead)
+            return;
+        prevUpdate = timestamp;
+        /**
+         * Merge each component's latest values into our crossfaded state
+         * before crossfading.
+         */
+        var latestLeadValues = lead.getLatestValues();
+        Object.assign(leadState, latestLeadValues);
+        var latestFollowValues = follow
+            ? follow.getLatestValues()
+            : options.prevValues;
+        Object.assign(followState, latestFollowValues);
+        var p = progress.get();
+        /**
+         * Crossfade the opacity between the two components. This will result
+         * in a different opacity for each component.
+         */
+        var leadTargetOpacity = (_a = latestLeadValues.opacity) !== null && _a !== void 0 ? _a : 1;
+        var followTargetOpacity = (_b = latestFollowValues === null || latestFollowValues === void 0 ? void 0 : latestFollowValues.opacity) !== null && _b !== void 0 ? _b : 1;
+        if (options.crossfadeOpacity && follow) {
+            leadState.opacity = mix(
+            /**
+             * If the follow child has been completely hidden we animate
+             * this opacity from its previous opacity, but otherwise from completely transparent.
+             */
+            follow.isVisible !== false ? 0 : followTargetOpacity, leadTargetOpacity, easeCrossfadeIn(p));
+            followState.opacity = options.preserveFollowOpacity
+                ? followTargetOpacity
+                : mix(followTargetOpacity, 0, easeCrossfadeOut(p));
+        }
+        else if (!follow) {
+            leadState.opacity = mix(followTargetOpacity, leadTargetOpacity, p);
+        }
+        mixValues(leadState, followState, latestLeadValues, latestFollowValues || {}, Boolean(follow), p);
+    }
+    return {
+        isActive: function () {
+            return leadState &&
+                (isActive || getFrameData().timestamp === finalCrossfadeFrame);
+        },
+        fromLead: function (transition) {
+            return startCrossfadeAnimation(0, transition);
+        },
+        toLead: function (transition) {
+            var initialProgress = 0;
+            if (!options.prevValues && !options.follow) {
+                /**
+                 * If we're not coming from anywhere, start at the end of the animation.
+                 */
+                initialProgress = 1;
+            }
+            else if (prevOptions.lead === options.follow &&
+                prevOptions.follow === options.lead) {
+                /**
+                 * If we're swapping follow/lead we can reverse the progress
+                 */
+                initialProgress = 1 - progress.get();
+            }
+            progress.set(initialProgress);
+            return startCrossfadeAnimation(1, transition);
+        },
+        reset: function () { return progress.set(1); },
+        stop: function () { return progress.stop(); },
+        getCrossfadeState: function (element) {
+            updateCrossfade();
+            if (element === options.lead) {
+                return leadState;
+            }
+            else if (element === options.follow) {
+                return followState;
+            }
+        },
+        setOptions: function (newOptions) {
+            prevOptions = options;
+            options = newOptions;
+            leadState = {};
+            followState = {};
+        },
+        getLatestValues: function () {
+            return leadState;
+        },
+    };
+}
+var easeCrossfadeIn = compress(0, 0.5, circOut);
+var easeCrossfadeOut = compress(0.5, 0.95, linear);
+function compress(min, max, easing) {
+    return function (p) {
+        // Could replace ifs with clamp
+        if (p < min)
+            return 0;
+        if (p > max)
+            return 1;
+        return easing(progress(min, max, p));
+    };
+}
+var borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
+var numBorders = borders.length;
+function mixValues(leadState, followState, latestLeadValues, latestFollowValues, hasFollowElement, p) {
+    /**
+     * Mix border radius
+     */
+    for (var i = 0; i < numBorders; i++) {
+        var borderLabel = "border" + borders[i] + "Radius";
+        var followRadius = getRadius(latestFollowValues, borderLabel);
+        var leadRadius = getRadius(latestLeadValues, borderLabel);
+        if (followRadius === undefined && leadRadius === undefined)
+            continue;
+        followRadius || (followRadius = 0);
+        leadRadius || (leadRadius = 0);
+        /**
+         * Currently we're only crossfading between numerical border radius.
+         * It would be possible to crossfade between percentages for a little
+         * extra bundle size.
+         */
+        if (typeof followRadius === "number" &&
+            typeof leadRadius === "number") {
+            var radius = Math.max(mix(followRadius, leadRadius, p), 0);
+            leadState[borderLabel] = followState[borderLabel] = radius;
+        }
+    }
+    /**
+     * Mix rotation
+     */
+    if (latestFollowValues.rotate || latestLeadValues.rotate) {
+        var rotate = mix(latestFollowValues.rotate || 0, latestLeadValues.rotate || 0, p);
+        leadState.rotate = followState.rotate = rotate;
+    }
+    /**
+     * We only want to mix the background color if there's a follow element
+     * that we're not crossfading opacity between. For instance with switch
+     * AnimateSharedLayout animations, this helps the illusion of a continuous
+     * element being animated but also cuts down on the number of paints triggered
+     * for elements where opacity is doing that work for us.
+     */
+    if (!hasFollowElement &&
+        latestLeadValues.backgroundColor &&
+        latestFollowValues.backgroundColor) {
+        /**
+         * This isn't ideal performance-wise as mixColor is creating a new function every frame.
+         * We could probably create a mixer that runs at the start of the animation but
+         * the idea behind the crossfader is that it runs dynamically between two potentially
+         * changing targets (ie opacity or borderRadius may be animating independently via variants)
+         */
+        leadState.backgroundColor = followState.backgroundColor = mixColor(latestFollowValues.backgroundColor, latestLeadValues.backgroundColor)(p);
+    }
+}
+function getRadius(values, radiusName) {
+    var _a;
+    return (_a = values[radiusName]) !== null && _a !== void 0 ? _a : values.borderRadius;
+}
+
+export { createCrossfader };

package/src/components/AnimateSharedLayout/utils/rotate.ts

@@ -0,0 +1,48 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { VisualElement } from "../../../render/types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+
+import { transformAxes } from '../../../render/html/utils/transform.js';
+
+function resetRotate(child: VisualElement): void {
+    // If there's no detected rotation values, we can early return without a forced render.
+    var hasRotate = false;
+    // Keep a record of all the values we've reset
+    var resetValues = {};
+    // Check the rotate value of all axes and reset to 0
+    for (var i = 0; i < transformAxes.length; i++) {
+        var axis = transformAxes[i];
+        var key = "rotate" + axis;
+        // If this rotation doesn't exist as a motion value, then we don't
+        // need to reset it
+        if (!child.hasValue(key) || child.getStaticValue(key) === 0)
+            continue;
+        hasRotate = true;
+        // Record the rotation and then temporarily set it to 0
+        resetValues[key] = child.getStaticValue(key);
+        child.setStaticValue(key, 0);
+    }
+    // If there's no rotation values, we don't need to do any more.
+    if (!hasRotate)
+        return;
+    // Force a render of this element to apply the transform with all rotations
+    // set to 0.
+    child.syncRender();
+    // Put back all the values we reset
+    for (var key in resetValues) {
+        child.setStaticValue(key, resetValues[key]);
+    }
+    // Schedule a render for the next frame. This ensures we won't visually
+    // see the element with the reset rotate value applied.
+    child.scheduleRender();
+}
+
+export { resetRotate };

package/src/components/AnimateSharedLayout/utils/stack.ts

@@ -0,0 +1,160 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { VisualElement } from "../../../render/types";
+export type LeadAndFollow = [
+    VisualElement | undefined,
+    VisualElement | undefined
+];
+export interface LayoutStack {
+    add(element: VisualElement): void;
+    remove(element: VisualElement): void;
+    getLead(): VisualElement | undefined;
+    updateSnapshot(): void;
+    clearSnapshot(): void;
+    animate(element: VisualElement, crossfade: boolean): void;
+    updateLeadAndFollow(): void;
+}
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+
+import { __assign } from 'tslib';
+import { elementDragControls } from '../../../gestures/drag/VisualElementDragControls.js';
+import { Presence } from '../types.js';
+import { createCrossfader } from './crossfader.js';
+
+function layoutStack(): LayoutStack {
+    var stack = new Set();
+    var state = { leadIsExiting: false };
+    var prevState = __assign({}, state);
+    var prevValues;
+    var prevViewportBox;
+    var prevDragCursor;
+    var crossfader = createCrossfader();
+    var needsCrossfadeAnimation = false;
+    function getFollowViewportBox() {
+        return state.follow ? state.follow.prevViewportBox : prevViewportBox;
+    }
+    function getFollowLayout() {
+        var _a;
+        return (_a = state.follow) === null || _a === void 0 ? void 0 : _a.getLayoutState().layout;
+    }
+    return {
+        add: function (element) {
+            element.setCrossfader(crossfader);
+            stack.add(element);
+            /**
+             * Hydrate new element with previous drag position if we have one
+             */
+            if (prevDragCursor)
+                element.prevDragCursor = prevDragCursor;
+            if (!state.lead)
+                state.lead = element;
+        },
+        remove: function (element) {
+            stack.delete(element);
+        },
+        getLead: function () { return state.lead; },
+        updateSnapshot: function () {
+            if (!state.lead)
+                return;
+            prevValues = crossfader.isActive()
+                ? crossfader.getLatestValues()
+                : state.lead.getLatestValues();
+            prevViewportBox = state.lead.prevViewportBox;
+            var dragControls = elementDragControls.get(state.lead);
+            if (dragControls && dragControls.isDragging) {
+                prevDragCursor = dragControls.cursorProgress;
+            }
+        },
+        clearSnapshot: function () {
+            prevDragCursor = prevViewportBox = undefined;
+        },
+        updateLeadAndFollow: function () {
+            var _a;
+            prevState = __assign({}, state);
+            var lead;
+            var follow;
+            var order = Array.from(stack);
+            for (var i = order.length; i--; i >= 0) {
+                var element = order[i];
+                if (lead)
+                    follow !== null && follow !== void 0 ? follow : (follow = element);
+                lead !== null && lead !== void 0 ? lead : (lead = element);
+                if (lead && follow)
+                    break;
+            }
+            state.lead = lead;
+            state.follow = follow;
+            state.leadIsExiting = ((_a = state.lead) === null || _a === void 0 ? void 0 : _a.presence) === Presence.Exiting;
+            crossfader.setOptions({
+                lead: lead,
+                follow: follow,
+                prevValues: prevValues,
+                crossfadeOpacity: (follow === null || follow === void 0 ? void 0 : follow.isPresenceRoot) || (lead === null || lead === void 0 ? void 0 : lead.isPresenceRoot),
+            });
+            if (
+            // Don't crossfade if we've just animated back from lead and switched the
+            // old follow to the new lead.
+            state.lead !== prevState.follow &&
+                (prevState.lead !== state.lead ||
+                    prevState.leadIsExiting !== state.leadIsExiting)) {
+                needsCrossfadeAnimation = true;
+            }
+        },
+        animate: function (child, shouldCrossfade) {
+            var _a;
+            if (shouldCrossfade === void 0) { shouldCrossfade = false; }
+            if (child === state.lead) {
+                if (shouldCrossfade) {
+                    /**
+                     * Point a lead to itself in case it was previously pointing
+                     * to a different visual element
+                     */
+                    child.pointTo(state.lead);
+                }
+                else {
+                    child.setVisibility(true);
+                }
+                var config = {};
+                var prevParent = (_a = state.follow) === null || _a === void 0 ? void 0 : _a.getProjectionParent();
+                if (prevParent) {
+                    /**
+                     * We'll use this to determine if the element or its layoutId has been reparented.
+                     */
+                    config.prevParent = prevParent;
+                }
+                if (child.presence === Presence.Entering) {
+                    config.originBox = getFollowViewportBox();
+                }
+                else if (child.presence === Presence.Exiting) {
+                    config.targetBox = getFollowLayout();
+                }
+                if (needsCrossfadeAnimation) {
+                    needsCrossfadeAnimation = false;
+                    var transition = child.getDefaultTransition();
+                    child.presence === Presence.Entering
+                        ? crossfader.toLead(transition)
+                        : crossfader.fromLead(transition);
+                }
+                child.notifyLayoutReady(config);
+            }
+            else {
+                if (shouldCrossfade) {
+                    state.lead && child.pointTo(state.lead);
+                }
+                else {
+                    child.setVisibility(false);
+                }
+            }
+        },
+    };
+}
+
+export { layoutStack };
+

package/src/components/LazyMotion/LazyMotion.svelte

@@ -0,0 +1,82 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import { onMount, setContext } from "svelte";
+  import { writable } from "svelte/store";
+  import { setDomContext } from "../../context/DOMcontext";
+  import type { LazyProps } from "./index.js";
+
+  import { LazyContext } from "../../context/LazyContext";
+  import { loadFeatures } from "../../motion/features/definitions";
+
+  type $$Props = LazyProps;
+
+  /**
+   * Used in conjunction with the `m` component to reduce bundle size.
+   *
+   * `m` is a version of the `motion` component that only loads functionality
+   * critical for the initial render.
+   *
+   * `LazyMotion` can then be used to either synchronously or asynchronously
+   * load animation and gesture support.
+   *
+   * ```jsx
+   * // Synchronous loading
+   * import { LazyMotion, m, domAnimations } from "framer-motion"
+   *
+   * function App() {
+   *   return (
+   *     <LazyMotion features={domAnimations}>
+   *       <m.div animate={{ scale: 2 }} />
+   *     </LazyMotion>
+   *   )
+   * }
+   *
+   * // Asynchronous loading
+   * import { LazyMotion, m } from "framer-motion"
+   *
+   * function App() {
+   *   return (
+   *     <LazyMotion features={() => import('./path/to/domAnimations')}>
+   *       <m.div animate={{ scale: 2 }} />
+   *     </LazyMotion>
+   *   )
+   * }
+   * ```
+   *
+   * @public
+   */
+  export let features: $$Props["features"],
+    strict: $$Props["strict"] = false,
+    isCustom = false;
+
+  let _ = !isLazyBundle(features);
+  let loadedRenderer = undefined;
+  /**
+   * If this is a synchronous load, load features immediately
+   */
+  $: if (!isLazyBundle(features, _)) {
+    const { renderer, ...loadedFeatures } = features;
+    loadedRenderer.current = renderer;
+    loadFeatures(loadedFeatures);
+  }
+  function isLazyBundle(features) {
+    return typeof features === "function";
+  }
+  onMount(() => {
+    if (isLazyBundle(features)) {
+      features().then(({ renderer, ...loadedFeatures }) => {
+        loadFeatures(loadedFeatures);
+        loadedRenderer.current = renderer;
+        setIsLoaded(true);
+      });
+    }
+  });
+  let context = writable({ renderer: loadedRenderer.current, strict });
+  setContext(LazyContext, context);
+  setDomContext("Lazy", isCustom, context);
+  $: context.set({ renderer: loadedRenderer.current, strict });
+</script>
+
+<slot />

package/src/components/LazyMotion/index.ts

@@ -0,0 +1,42 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+export type { LazyProps } from "./types";
+/**
+ * Used in conjunction with the `m` component to reduce bundle size.
+ *
+ * `m` is a version of the `motion` component that only loads functionality
+ * critical for the initial render.
+ *
+ * `LazyMotion` can then be used to either synchronously or asynchronously
+ * load animation and gesture support.
+ *
+ * ```jsx
+ * // Synchronous loading
+ * import { LazyMotion, m, domAnimations } from "framer-motion"
+ *
+ * function App() {
+ *   return (
+ *     <LazyMotion features={domAnimations}>
+ *       <m.div animate={{ scale: 2 }} />
+ *     </LazyMotion>
+ *   )
+ * }
+ *
+ * // Asynchronous loading
+ * import { LazyMotion, m } from "framer-motion"
+ *
+ * function App() {
+ *   return (
+ *     <LazyMotion features={() => import('./path/to/domAnimations')}>
+ *       <m.div animate={{ scale: 2 }} />
+ *     </LazyMotion>
+ *   )
+ * }
+ * ```
+ *
+ * @public
+ */
+export {default as LazyMotion} from './LazyMotion.svelte';
+

package/src/components/LazyMotion/types.ts

@@ -0,0 +1,58 @@
+/// <reference types="react" />
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { FeatureBundle } from "../../motion/features/types";
+export type LazyFeatureBundle = () => Promise<FeatureBundle>;
+/**
+ * @public
+ */
+export interface LazyProps {
+    // children?: React.ReactNode;
+    /**
+     * Can be used to provide a feature bundle synchronously or asynchronously.
+     *
+     * ```jsx
+     * // features.js
+     * import { domAnimations } from "framer-motion"
+     * export default domAnimations
+     *
+     * // index.js
+     * import { LazyMotion, m } from "framer-motion"
+     *
+     * const loadFeatures = import("./features.js")
+     *   .then(res => res.default)
+     *
+     * function Component() {
+     *   return (
+     *     <LazyMotion features={loadFeatures}>
+     *       <m.div animate={{ scale: 1.5 }} />
+     *     </LazyMotion>
+     *   )
+     * }
+     * ```
+     *
+     * @public
+     */
+    features: FeatureBundle | LazyFeatureBundle;
+    /**
+     * If `true`, will throw an error if a `motion` component renders within
+     * a `LazyMotion` component.
+     *
+     * ```jsx
+     * // This component will throw an error that explains using a motion component
+     * // instead of the m component will break the benefits of code-splitting.
+     * function Component() {
+     *   return (
+     *     <LazyMotion features={domAnimation} strict>
+     *       <MotionDiv />
+     *     </LazyMotion>
+     *   )
+     * }
+     * ```
+     *
+     * @public
+     */
+    strict?: boolean;
+}