motion-start 0.0.1

package/src/components/AnimatePresence/index.ts

@@ -0,0 +1,46 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+export type { AnimatePresenceProps } from "./types.js";
+/**
+ * `AnimatePresence` enables the animation of components that have been removed from the tree.
+ *         
+ *  You can provide an array T[] to the `list` prop, where each item has to have a unique `key` attribute. Via slot prop `item` 
+ *  single items of the array are passed down to children, so that for each array item one component is rendered.
+ *           
+ *  Alternatively you can leave `list` undefined and supply a boolean to the `show` prop. If `true`, the child is rendered.
+ *
+ * @motion
+ *
+ * Any `motion` components that have an `exit` property defined will animate out when removed from
+ * the tree.
+ *
+ * ```jsx
+ * import { motion, AnimatePresence } from 'svelte-motion'
+ * const items = [
+ *  {key:1},
+ *  {key:2},
+ *  {key:3}
+ * ]
+ *   <AnimatePresence list={items}>
+ *       <MotionDiv
+ *         initial={{ opacity: 0 }}
+ *         animate={{ opacity: 1 }}
+ *         exit={{ opacity: 0 }}
+ *       />
+ *   </AnimatePresence>
+ * )
+ * ```
+ *
+ * You can sequence exit animations throughout a tree using variants.
+ *
+ * If a child contains multiple `Motion` components with `exit` props, it will only unmount the child
+ * once all `motion` components have finished animating out. Likewise, any components using
+ * `usePresence` all need to call `safeToRemove`.
+ *
+ * @public
+ */
+export type ConditionalGeneric<T> = T extends {key:any} ? T : { key: 1}; // Better handling of defaults and the optional list prop
+export { default as AnimatePresence } from './AnimatePresence.svelte';
+export { PresenceChild } from './PresenceChild/index.js';

package/src/components/AnimatePresence/types.ts

@@ -0,0 +1,79 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+/**
+ * @public
+ */
+export interface AnimatePresenceProps<T extends {key:any}> {
+    /**
+     * By passing `initial={false}`, `AnimatePresence` will disable any initial animations on children
+     * that are present when the component is first rendered.
+     *
+     * @motion
+     *
+     * ```jsx
+     * <AnimatePresence initial={false} show={isVisible}>
+     *     <MotionDiv
+     *       key="modal"
+     *       initial={{ opacity: 0 }}
+     *       animate={{ opacity: 1 }}
+     *       exit={{ opacity: 0 }}
+     *     />
+     * </AnimatePresence>
+     * ```
+     *
+     * @public
+     */
+    initial?: boolean;
+    /**
+     * When a component is removed, there's no longer a chance to update its props. So if a component's `exit`
+     * prop is defined as a dynamic variant and you want to pass a new `custom` prop, you can do so via `AnimatePresence`.
+     * This will ensure all leaving components animate using the latest data.
+     *
+     * @public
+     */
+    custom?: any;
+    /**
+     * Fires when all exiting nodes have completed animating out.
+     *
+     * @public
+     */
+    onExitComplete?: () => void;
+    /**
+     * If set to `true`, `AnimatePresence` will only render one component at a time. The exiting component
+     * will finished its exit animation before the entering component is rendered.
+     *
+     * @motion
+     *
+     * ```jsx
+     * const MyComponent = ({ currentItem }) => (
+     *   <AnimatePresence exitBeforeEnter>
+     *     <MotionDiv key={currentItem} exit={{ opacity: 0 }} />
+     *   </AnimatePresence>
+     * )
+     * ```
+     *
+     * @beta
+     */
+    exitBeforeEnter?: boolean;
+    /**
+     * Used in Framer to flag that sibling children *shouldn't* re-render as a result of a
+     * child being removed.
+     *
+     * @internal
+     */
+    presenceAffectsLayout?: boolean;
+    /**
+     * The data array for the items you want to render. Every Item needs a unique `key`.
+     * 
+     * Alternatively, you can leave this undefined and supply `show` prop.
+     */
+    list?:T[]
+    /**
+     * Render the child when this is set to `true`, exit it when changed to `false`.
+     * 
+     * Only used when list is undefined.
+     */
+    show?: boolean
+}

package/src/components/AnimatePresence/use-presence.ts

@@ -0,0 +1,90 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { Readable } from 'svelte/store';
+import type { PresenceContextProps } from "../../context/PresenceContext";
+
+import { derived, get, readable } from 'svelte/store';
+import { PresenceContext } from '../../context/PresenceContext.js';
+
+import { getContext, onMount } from "svelte";
+
+export type SafeToRemove = () => void;
+type AlwaysPresent = [true, null];
+type Present = [true];
+type NotPresent = [false, SafeToRemove];
+
+let counter = 0;
+const incrementId = () => counter++;
+
+export function isPresent(context: PresenceContextProps) {
+    return context === null ? true : context.isPresent
+}
+
+/**
+ * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.
+ * There is no `safeToRemove` function.
+ *
+ * ```jsx
+ * import { useIsPresent } from "framer-motion"
+ *
+ * export const Component = () => {
+ *   const isPresent = useIsPresent()
+ *
+ *   useEffect(() => {
+ *     !isPresent && console.log("I've been removed!")
+ *   }, [isPresent])
+ *
+ *   return <div />
+ * }
+ * ```
+ *
+ * @public
+ */
+export const useIsPresent = (isCustom=false): Readable<boolean> => {
+    let presenceContext = getContext(PresenceContext) || PresenceContext(isCustom);
+    return derived(presenceContext, $v => $v === null ? true : $v.isPresent)
+}
+
+/**
+ * When a component is the child of `AnimatePresence`, it can use `usePresence`
+ * to access information about whether it's still present in the React tree.
+ *
+ * ```jsx
+ * import { usePresence } from "framer-motion"
+ *
+ * const [isPresent, safeToRemove] = usePresence()
+ *
+ * 
+ *  $: !isPresent && setTimeout(safeToRemove, 1000)
+ * 
+ *
+ *   return <div />
+ * }
+ * ```
+ *
+ * If `isPresent` is `false`, it means that a component has been removed the tree, but
+ * `AnimatePresence` won't really remove it until `safeToRemove` has been called.
+ *
+ * @public
+ */
+export const usePresence = (isCustom=false): Readable<AlwaysPresent | Present | NotPresent> => {
+
+    const context = getContext(PresenceContext)||PresenceContext(isCustom);
+    const id = get(context) === null ? undefined : incrementId();
+    onMount(()=>{
+        if (get(context)!==null){
+            get(context).register(id);
+        }
+    })
+
+    if (get(context) === null){
+        return readable([true,null]);
+    }
+    return derived(context,$v=>
+        (!$v.isPresent && $v.onExitComplete) ? 
+            [false, ()=>$v.onExitComplete?.(id)] :
+            [true]
+    )
+}

package/src/components/AnimateSharedLayout/AnimateSharedLayout.svelte

@@ -0,0 +1,239 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import { SharedLayoutContext } from "../../context/SharedLayoutContext.js";
+  import type { Presence, SharedLayoutProps } from "./index.js";
+  import { createBatcher } from "./utils/batcher.js";
+
+  import { getContext, onMount, setContext, tick } from "svelte";
+  import { get, writable } from "svelte/store";
+  import { setDomContext } from "../../context/DOMcontext.js";
+  import { MotionContext } from "../../context/MotionContext/index.js";
+  import { snapshotViewportBox } from "../../render/dom/projection/utils.js";
+  import { resetRotate } from "./utils/rotate.js";
+  import { layoutStack } from "./utils/stack.js";
+
+  type $$Props = SharedLayoutProps;
+
+  export let type: $$Props["type"] = undefined,
+    isCustom = false;
+
+  const context = getContext(MotionContext) || MotionContext(isCustom);
+
+  /**
+   * Track whether the component has mounted. If it hasn't, the presence of added children
+   * are set to Present, whereas if it has they're considered Entering
+   */
+  let hasMounted = false;
+  /**
+   * A list of all the children in the shared layout
+   */
+  let children = new Set();
+  /**
+   * As animate components with a defined `layoutId` are added/removed to the tree,
+   * we store them in order. When one is added, it will animate out from the
+   * previous one, and when it's removed, it'll animate to the previous one.
+   */
+  let stacks = new Map();
+  /**
+   * Track whether we already have an update scheduled. If we don't, we'll run snapshots
+   * and schedule one.
+   */
+  let updateScheduled = false;
+  /**
+   * Tracks whether we already have a render scheduled. If we don't, we'll force one with this.forceRender
+   */
+  let renderScheduled = false;
+
+  let forced = false; /*
+    const resetForced = ()=>{
+        if (forced){
+            forced=false;
+        }
+    }
+    $: resetForced(forced);
+    */
+  /**
+   * The methods provided to all children in the shared layout tree.
+   */
+  let syncContext = {
+    ...createBatcher(),
+    syncUpdate: (force) => scheduleUpdate(force),
+    forceUpdate: () => {
+      // By copying syncContext to itself, when this component re-renders it'll also re-render
+      // all children subscribed to the SharedLayout context.
+      //syncContext = { ...syncContext }
+      //scheduleUpdate(true)
+      //syncContext = { ...syncContext }
+      //setSyncContext()
+      scheduleUpdate();
+
+      forced = true;
+    },
+    register: (child) => addChild(child),
+    remove: (child) => {
+      removeChild(child);
+    },
+  };
+
+  const startLayoutAnimation = () => {
+    /**
+     * Reset update and render scheduled status
+     */
+    renderScheduled = updateScheduled = false;
+
+    /**
+     * Update presence metadata based on the latest AnimatePresence status.
+     * This is a kind of goofy way of dealing with this, perhaps there's a better model to find.
+     */
+    children.forEach((child) => {
+      if (!child.isPresent) {
+        child.presence = Presence.Exiting;
+      } else if (child.presence !== Presence.Entering) {
+        child.presence =
+          child.presence === Presence.Exiting
+            ? Presence.Entering
+            : Presence.Present;
+      }
+    });
+
+    updateStacks();
+
+    /**
+     * Create a handler which we can use to flush the children animations
+     */
+    const handler = {
+      measureLayout: (child) => child.updateLayoutMeasurement(),
+      layoutReady: (child) => {
+        if (child.getLayoutId() !== undefined) {
+          const stack = getStack(child);
+          stack.animate(child, type === "crossfade");
+        } else {
+          child.notifyLayoutReady();
+        }
+      },
+      parent: get(context).visualElement,
+    };
+    /**
+     * Shared layout animations can be used without the AnimateSharedLayout wrapping component.
+     * This requires some co-ordination across components to stop layout thrashing
+     * and ensure measurements are taken at the correct time.
+     *
+     * Here we use that same mechanism of schedule/flush.
+     */
+    children.forEach((child) => syncContext.add(child));
+    syncContext.flush(handler);
+
+    /**
+     * Clear snapshots so subsequent rerenders don't retain memory of outgoing components
+     */
+    stacks.forEach((stack) => stack.clearSnapshot());
+  };
+
+  const updateStacks = () => {
+    stacks.forEach((stack) => stack.updateLeadAndFollow());
+  };
+
+  const scheduleUpdate = (force = false) => {
+    if (!(force || !updateScheduled)) return;
+
+    /**
+     * Flag we've scheduled an update
+     */
+    updateScheduled = true;
+
+    /**
+     * Write: Reset rotation transforms so bounding boxes can be accurately measured.
+     */
+    children.forEach((child) => resetRotate(child));
+
+    /**
+     * Read: Snapshot children
+     */
+    children.forEach((child) => snapshotViewportBox(child));
+
+    /**
+     * Every child keeps a local snapshot, but we also want to record
+     * snapshots of the visible children as, if they're are being removed
+     * in this render, we can still access them.
+     *
+     * TODO: What would be better here is doing a single loop where we
+     * only snapshotViewportBoxes of undefined layoutIds and then one for each stack
+     */
+    stacks.forEach((stack) => stack.updateSnapshot());
+
+    /**
+     * Force a rerender by setting state if we aren't already going to render.
+     */
+    if (force || !renderScheduled) {
+      renderScheduled = true;
+      forced = true;
+    }
+  };
+
+  const addChild = (child) => {
+    children.add(child);
+    addToStack(child);
+
+    child.presence = hasMounted ? Presence.Entering : Presence.Present;
+  };
+
+  const removeChild = (child) => {
+    scheduleUpdate();
+    children.delete(child);
+    removeFromStack(child);
+  };
+
+  const addToStack = (child) => {
+    const stack = getStack(child);
+    stack?.add(child);
+  };
+
+  const removeFromStack = (child) => {
+    const stack = getStack(child);
+    stack?.remove(child);
+  };
+
+  /**
+   * Return a stack of animate children based on the provided layoutId.
+   * Will create a stack if none currently exists with that layoutId.
+   */
+  const getStack = (child) => {
+    const id = child.getLayoutId();
+    if (id === undefined) return;
+
+    // Create stack if it doesn't already exist
+    !stacks.has(id) && stacks.set(id, layoutStack());
+
+    return stacks.get(id);
+  };
+  let sc = writable(syncContext);
+
+  const setSyncContext = () => {
+    syncContext = { ...syncContext };
+    sc.set(syncContext);
+    //forced = !forced
+  };
+  //$: sc.set(syncContext)
+  setContext(SharedLayoutContext, sc);
+  setDomContext("SharedLayout", isCustom, sc);
+
+  onMount(() => {
+    hasMounted = true;
+  });
+
+  //afterUpdate(()=>!forced && startLayoutAnimation())
+  //const falseForced = ()=>{forced=false;return true;}
+  //$: forced && renderScheduled && falseForced() && startLayoutAnimation()
+
+  $: if (renderScheduled) {
+    tick().then(() => {
+      startLayoutAnimation();
+    });
+  }
+
+  //afterUpdate(startLayoutAnimation)
+</script>
+
+<slot />

package/src/components/AnimateSharedLayout/index.ts

@@ -0,0 +1,11 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+
+export type { SharedLayoutProps, Presence } from "./types.js";
+/**
+ * Wrap several [#Motion] components with the \`layout\` or \`layoutId\` prop with this component, so that all react smoothly to the change of a single component.
+ * @public
+ */
+export {default as AnimateSharedLayout} from './AnimateSharedLayout.svelte'

package/src/components/AnimateSharedLayout/types.ts

@@ -0,0 +1,111 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { VisualElement } from "../../render/types";
+import type { Transition } from "../../types";
+import type { AxisBox2D } from "../../types/geometry";
+import { MotionValue } from "../../value";
+/**
+ * @public
+ */
+export enum Presence {
+    Entering = 0,
+    Present = 1,
+    Exiting = 2
+}
+/**
+ * @public
+ */
+export enum VisibilityAction {
+    Hide = 0,
+    Show = 1
+}
+/**
+ * @public
+ */
+export interface SharedLayoutProps {
+    /**
+     * @public
+     */
+    //children: React.ReactNode;
+    /**
+     * When combined with `AnimatePresence`, `SharedLayoutProps` can customise how to visually switch
+     * between `layoutId` components as new ones enter and leave the tree.
+     *
+     * - "switch" (default): The old `layoutId` component will be hidden instantly when a new one enters, and
+     * the new one will perform the full transition. When the newest one is removed, it will perform
+     * the full exit transition and then the old component will be shown instantly.
+     * - "crossfade": The root shared components will crossfade as `layoutId` children of both perform
+     * the same transition.
+     *
+     * @public
+     */
+    type?: "switch" | "crossfade";
+}
+export interface SharedLayoutAnimationConfig {
+    visibilityAction?: VisibilityAction;
+    originBox?: AxisBox2D;
+    targetBox?: AxisBox2D;
+    transition?: Transition;
+    crossfadeOpacity?: MotionValue<number>;
+    shouldStackAnimate?: boolean;
+    onComplete?: () => void;
+    isRelative?: boolean;
+    prevParent?: VisualElement;
+}
+/**
+ * Handlers for batching sync layout lifecycles. We batches these processes to cut
+ * down on layout thrashing
+ *
+ * @public
+ */
+export interface SyncLayoutLifecycles {
+    layoutReady: (child: VisualElement) => void;
+    parent?: VisualElement;
+}
+/**
+ * The exposed API for children to add themselves to the batcher and to flush it.
+ *
+ * @public
+ */
+export interface SyncLayoutBatcher {
+    add: (child: VisualElement) => void;
+    flush: (handler?: SyncLayoutLifecycles) => void;
+}
+/**
+ * Extra API methods available to children if they're a descendant of AnimateSharedLayout
+ */
+export interface SharedLayoutSyncMethods extends SyncLayoutBatcher {
+    syncUpdate: (force?: boolean) => void;
+    forceUpdate: () => void;
+    register: (child: VisualElement) => void;
+    remove: (child: VisualElement) => void;
+}
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+
+/**
+ * @public
+ */
+// var Presence;
+// (function (Presence) {
+//     Presence[Presence["Entering"] = 0] = "Entering";
+//     Presence[Presence["Present"] = 1] = "Present";
+//     Presence[Presence["Exiting"] = 2] = "Exiting";
+// })(Presence || (Presence = {}));
+// /**
+//  * @public
+//  */
+// var VisibilityAction;
+// (function (VisibilityAction) {
+//     VisibilityAction[VisibilityAction["Hide"] = 0] = "Hide";
+//     VisibilityAction[VisibilityAction["Show"] = 1] = "Show";
+// })(VisibilityAction || (VisibilityAction = {}));
+
+// export { Presence, VisibilityAction };
+

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

@@ -0,0 +1,96 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { SyncLayoutBatcher } from "../types";
+
+/** 
+based on framer-motion@4.1.15,
+Copyright (c) 2018 Framer B.V.
+*/
+
+import { __spreadArray, __read } from 'tslib';
+import sync, { flushSync } from 'framesync';
+import { collectProjectingAncestors, updateLayoutMeasurement } from '../../../render/dom/projection/utils.js';
+import { batchLayout, flushLayout } from '../../../render/dom/utils/batch-layout.js';
+import { compareByDepth } from '../../../render/utils/compare-by-depth.js';
+import { Presence } from '../types.js';
+
+/**
+ * Default handlers for batching VisualElements
+ */
+var defaultHandler = {
+    layoutReady: function (child) { return child.notifyLayoutReady(); },
+};
+/**
+ * Create a batcher to process VisualElements
+ */
+function createBatcher(): SyncLayoutBatcher {
+    var queue = new Set();
+    return {
+        add: function (child) { return queue.add(child); },
+        flush: function (_a) {
+            var _b = _a === void 0 ? defaultHandler : _a, layoutReady = _b.layoutReady, parent = _b.parent;
+            batchLayout(function (read, write) {
+                var order = Array.from(queue).sort(compareByDepth);
+                var ancestors = parent
+                    ? collectProjectingAncestors(parent)
+                    : [];
+                write(function () {
+                    var allElements = __spreadArray(__spreadArray([], __read(ancestors)), __read(order));
+                    allElements.forEach(function (element) { return element.resetTransform(); });
+                });
+                read(function () {
+                    order.forEach(updateLayoutMeasurement);
+                });
+                write(function () {
+                    ancestors.forEach(function (element) { return element.restoreTransform(); });
+                    order.forEach(layoutReady);
+                });
+                read(function () {
+                    /**
+                     * After all children have started animating, ensure any Entering components are set to Present.
+                     * If we add deferred animations (set up all animations and then start them in two loops) this
+                     * could be moved to the start loop. But it needs to happen after all the animations configs
+                     * are generated in AnimateSharedLayout as this relies on presence data
+                     */
+                    order.forEach(function (child) {
+                        if (child.isPresent)
+                            child.presence = Presence.Present;
+                    });
+                });
+                write(function () {
+                    /**
+                     * Starting these animations will have queued jobs on the frame loop. In some situations,
+                     * like when removing an element, these will be processed too late after the DOM is manipulated,
+                     * leaving a flash of incorrectly-projected content. By manually flushing these jobs
+                     * we ensure there's no flash.
+                     */
+                    flushSync.preRender();
+                    flushSync.render();
+                });
+                read(function () {
+                    /**
+                     * Schedule a callback at the end of the following frame to assign the latest projection
+                     * box to the prevViewportBox snapshot. Once global batching is in place this could be run
+                     * synchronously. But for now it ensures that if any nested `AnimateSharedLayout` top-level
+                     * child attempts to calculate its previous relative position against a prevViewportBox
+                     * it will be against its latest projection box instead, as the snapshot is useless beyond this
+                     * render.
+                     */
+                    sync.postRender(function () {
+                        return order.forEach(assignProjectionToSnapshot);
+                    });
+                    queue.clear();
+                });
+            });
+            // TODO: Need to find a layout-synchronous way of flushing this
+            flushLayout();
+        },
+    };
+}
+function assignProjectionToSnapshot(child) {
+    child.prevViewportBox = child.projection.target;
+}
+
+export { createBatcher };