motion-start 0.0.1 → 0.0.3

package/README.md

@@ -1,8 +1,19 @@
 # Motion Start
 
-An animation library based on [framer-motion](https://www.framer.com/motion/). 
+this is in alpha expect bugs and please report or make PRs to fix bugs.
 
-[Visit Project Page](https://svelte-motion.gradientdescent.de)
+fyi this is svelte-motion ported to typescript currently.
+
+plan is to evolve it to include modern features in framer-motion and to use svelte/motion to implement animations in the future
+# Motion Start
+
+this is in alpha expect bugs and please report or make PRs to fix bugs.
+
+fyi this is svelte-motion ported to typescript currently.
+
+plan is to evolve it to include modern features in framer-motion and to use svelte/motion to implement animations in the future
+
+An animation library based on [framer-motion](https://www.framer.com/motion/).
 
 ## Installation
 
@@ -18,6 +29,19 @@ pnpm install --save-dev motion-start
 yarn install --save-dev motion-start
 ```
 
+```bash
+bun install --save-dev motion-start
+npm install --save-dev motion-start
+```
+
+```bash
+pnpm install --save-dev motion-start
+```
+
+```bash
+yarn install --save-dev motion-start
+```
+
 ```bash
 bun install --save-dev motion-start
 ```
@@ -28,6 +52,7 @@ Corresponding to a `MotionDiv` in framer-motion is this:
 
 ```javascript
 import { Motion } from 'motion-start'
+import { Motion } from 'motion-start'
 
 <Motion let:motion><div use:motion/></Motion>
 ```

package/{src → dist}/animation/UseAnimatedState.svelte

@@ -46,7 +46,7 @@ Copyright (c) 2018 Framer B.V. -->
 
   let animationState = initialState;
   const sve = stateVisualElement;
-  $: element = sve({ props: {}, visualState: state });
+  $:( element = sve({ props: {}, visualState: state }));
   onMount(() => {
     element.mount({});
     return () => element.unmount();

package/dist/animation/UseAnimatedState.svelte.d.ts

@@ -0,0 +1,34 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const UseAnimatedState: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    initialState: any;
+}, {
+    default: {
+        animatedState: any[];
+    };
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        animatedState: any[];
+    };
+}, {}, string>;
+type UseAnimatedState = InstanceType<typeof UseAnimatedState>;
+export default UseAnimatedState;
+//# sourceMappingURL=UseAnimatedState.svelte.d.ts.map

package/dist/animation/UseAnimatedState.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UseAnimatedState.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/animation/UseAnimatedState.svelte.ts"],"names":[],"mappings":"AAgGA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,gBAAgB;;;;;;;;;;;;cAAmF,CAAC;AACxF,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAChE,eAAe,gBAAgB,CAAC"}

package/dist/animation/UseAnimation.svelte.d.ts

@@ -0,0 +1,29 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const UseAnimation: $$__sveltets_2_IsomorphicComponent<any, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        controls: {
+            subscribe: (visualElement: import("../index.js").VisualElement<any, any>) => () => void;
+            start: (definition: import("./types.js").ControlsAnimationDefinition, transitionOverride: import("../types.js").Transition | undefined) => Promise<any>;
+            set: (definition: import("./types.js").ControlsAnimationDefinition) => void;
+            stop: () => void;
+            mount: () => () => void;
+        };
+    };
+}, {}, string>;
+type UseAnimation = InstanceType<typeof UseAnimation>;
+export default UseAnimation;
+//# sourceMappingURL=UseAnimation.svelte.d.ts.map

package/dist/animation/UseAnimation.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UseAnimation.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/animation/UseAnimation.svelte.ts"],"names":[],"mappings":"AAsEA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,YAAY;;;;;;;;;;;;cAAmF,CAAC;AACpF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}

package/{src/animation/animate.ts → dist/animation/animate.d.ts}

@@ -1,78 +1,59 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import type { ResolvedValueTarget, Spring, Tween } from "../types";
-import { MotionValue } from "../value";
-/**
- * @public
- */
-export interface AnimationPlaybackControls {
-    stop: () => void;
-}
-/**
- * @public
- */
-export interface AnimationPlaybackLifecycles<V> {
-    onUpdate?: (latest: V) => void;
-    onPlay?: () => void;
-    onComplete?: () => void;
-    onRepeat?: () => void;
-    onStop?: () => void;
-}
-/**
- * @public
- */
-export type AnimationOptions<V> = (Tween | Spring) & AnimationPlaybackLifecycles<V> & {
-    delay?: number;
-    type?: "tween" | "spring";
-};
-
-
-/** 
-based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V.
-*/
-
-import { motionValue } from '../value/index.js';
-import { isMotionValue } from '../value/utils/is-motion-value.js';
-import { startAnimation } from './utils/transitions.js';
-
-/**
- * Animate a single value or a `MotionValue`.
- *
- * The first argument is either a `MotionValue` to animate, or an initial animation value.
- *
- * The second is either a value to animate to, or an array of keyframes to animate through.
- *
- * The third argument can be either tween or spring options, and optional lifecycle methods: `onUpdate`, `onPlay`, `onComplete`, `onRepeat` and `onStop`.
- *
- * Returns `AnimationPlaybackControls`, currently just a `stop` method.
- *
- * ```javascript
- * const x = useMotionValue(0)
- *
- * useEffect(() => {
- *   const controls = animate(x, 100, {
- *     type: "spring",
- *     stiffness: 2000,
- *     onComplete: v => {}
- *   })
- *
- *   return controls.stop
- * })
- * ```
- *
- * @public
- */
-function animate<V>(from: MotionValue<V> | V, to: ResolvedValueTarget, transition?: AnimationOptions<V>) {
-    if (transition === void 0) { transition = {}; }
-    var value = isMotionValue(from) ? from : motionValue(from);
-    startAnimation("", value, to, transition);
-    return {
-        stop: function () { return value.stop(); },
-    } as AnimationPlaybackControls;
-}
-
-export { animate };
-
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { ResolvedValueTarget, Spring, Tween } from "../types";
+import { MotionValue } from "../value";
+/**
+ * @public
+ */
+export interface AnimationPlaybackControls {
+    stop: () => void;
+}
+/**
+ * @public
+ */
+export interface AnimationPlaybackLifecycles<V> {
+    onUpdate?: (latest: V) => void;
+    onPlay?: () => void;
+    onComplete?: () => void;
+    onRepeat?: () => void;
+    onStop?: () => void;
+}
+/**
+ * @public
+ */
+export type AnimationOptions<V> = (Tween | Spring) & AnimationPlaybackLifecycles<V> & {
+    delay?: number;
+    type?: "tween" | "spring";
+};
+/**
+ * Animate a single value or a `MotionValue`.
+ *
+ * The first argument is either a `MotionValue` to animate, or an initial animation value.
+ *
+ * The second is either a value to animate to, or an array of keyframes to animate through.
+ *
+ * The third argument can be either tween or spring options, and optional lifecycle methods: `onUpdate`, `onPlay`, `onComplete`, `onRepeat` and `onStop`.
+ *
+ * Returns `AnimationPlaybackControls`, currently just a `stop` method.
+ *
+ * ```javascript
+ * const x = useMotionValue(0)
+ *
+ * useEffect(() => {
+ *   const controls = animate(x, 100, {
+ *     type: "spring",
+ *     stiffness: 2000,
+ *     onComplete: v => {}
+ *   })
+ *
+ *   return controls.stop
+ * })
+ * ```
+ *
+ * @public
+ */
+declare function animate<V>(from: MotionValue<V> | V, to: ResolvedValueTarget, transition?: AnimationOptions<V>): AnimationPlaybackControls;
+export { animate };
+//# sourceMappingURL=animate.d.ts.map

package/dist/animation/animate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/animation/animate.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACtC,IAAI,EAAE,MAAM,IAAI,CAAC;CACpB;AACD;;GAEG;AACH,MAAM,WAAW,2BAA2B,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AACD;;GAEG;AACH,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,GAAG,2BAA2B,CAAC,CAAC,CAAC,GAAG;IAClF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B,CAAC;AAYF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,iBAAS,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,mBAAmB,EAAE,UAAU,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAM9F,yBAAyB,CACjC;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/animation/animate.js

@@ -0,0 +1,46 @@
+import { MotionValue } from "../value";
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { motionValue } from '../value/index.js';
+import { isMotionValue } from '../value/utils/is-motion-value.js';
+import { startAnimation } from './utils/transitions.js';
+/**
+ * Animate a single value or a `MotionValue`.
+ *
+ * The first argument is either a `MotionValue` to animate, or an initial animation value.
+ *
+ * The second is either a value to animate to, or an array of keyframes to animate through.
+ *
+ * The third argument can be either tween or spring options, and optional lifecycle methods: `onUpdate`, `onPlay`, `onComplete`, `onRepeat` and `onStop`.
+ *
+ * Returns `AnimationPlaybackControls`, currently just a `stop` method.
+ *
+ * ```javascript
+ * const x = useMotionValue(0)
+ *
+ * useEffect(() => {
+ *   const controls = animate(x, 100, {
+ *     type: "spring",
+ *     stiffness: 2000,
+ *     onComplete: v => {}
+ *   })
+ *
+ *   return controls.stop
+ * })
+ * ```
+ *
+ * @public
+ */
+function animate(from, to, transition) {
+    if (transition === void 0) {
+        transition = {};
+    }
+    var value = isMotionValue(from) ? from : motionValue(from);
+    startAnimation("", value, to, transition);
+    return {
+        stop: function () { return value.stop(); },
+    };
+}
+export { animate };

package/dist/animation/animation-controls.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @public
+ */
+declare function animationControls(startStopNotifier?: () => () => void): {
+    subscribe: (visualElement: import("..").VisualElement<any, any>) => () => void;
+    start: (definition: import("./types").ControlsAnimationDefinition, transitionOverride: import("..").Transition | undefined) => Promise<any>;
+    set: (definition: import("./types").ControlsAnimationDefinition) => void;
+    stop: () => void;
+    mount: () => () => void;
+};
+export { animationControls };
+//# sourceMappingURL=animation-controls.d.ts.map

package/dist/animation/animation-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation-controls.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/animation/animation-controls.ts"],"names":[],"mappings":"AAgBA;;GAEG;AACH,iBAAS,iBAAiB,CAAC,iBAAiB,CAAC,EAAE,MAAM,MAAM,IAAI;;;;;;EA6E9D;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/{src/animation/animation-controls.ts → dist/animation/animation-controls.js}

@@ -1,101 +1,89 @@
-/** 
-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.
-*/
-
-import { __read, __spreadArray } from 'tslib';
-// import { invariant } from '../utils/errors.js';
-import { animateVisualElement, stopAnimation } from '../render/utils/animation.js';
-import { setValues } from '../render/utils/setters.js';
-
-/**
- * @public
- */
-function animationControls(startStopNotifier?: () => () => void ) {
-    /**
-     * Track whether the host component has mounted.
-     */
-    var hasMounted = false;
-    /**
-     * Pending animations that are started before a component is mounted.
-     * TODO: Remove this as animations should only run in effects
-     */
-    var pendingAnimations: any[] = [];
-    /**
-     * A collection of linked component animation controls.
-     */
-    var subscribers = new Set<any>();
-    var stopNotification: undefined | (() => void);
-    var controls = {
-        subscribe: function (visualElement) {
-            if (subscribers.size === 0){
-                stopNotification = startStopNotifier?.();
-            }
-            subscribers.add(visualElement);
-            return function () { 
-                subscribers.delete(visualElement); 
-                if (subscribers.size===0){
-                    stopNotification?.()
-                }
-            };
-        },
-        start: function (definition, transitionOverride) {
-            /**
-             * TODO: We only perform this hasMounted check because in Framer we used to
-             * encourage the ability to start an animation within the render phase. This
-             * isn't behaviour concurrent-safe so when we make Framer concurrent-safe
-             * we can ditch this.
-             */
-            if (hasMounted) {
-                var animations_1: any[] = [];
-                subscribers.forEach(function (visualElement) {
-                    animations_1.push(animateVisualElement(visualElement, definition, {
-                        transitionOverride: transitionOverride,
-                    }));
-                });
-                return Promise.all(animations_1);
-            }
-            else {
-                return new Promise(function (resolve) {
-                    pendingAnimations.push({
-                        animation: [definition, transitionOverride],
-                        resolve: resolve,
-                    });
-                });
-            }
-        },
-        set: function (definition) {
-            //invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
-            return subscribers.forEach(function (visualElement) {
-                setValues(visualElement, definition);
-            });
-        },
-        stop: function () {
-            subscribers.forEach(function (visualElement) {
-                stopAnimation(visualElement);
-            });
-        },
-        mount: function () {
-            hasMounted = true;
-            pendingAnimations.forEach(function (_a) {
-                var animation = _a.animation, resolve = _a.resolve;
-                controls.start.apply(controls, __spreadArray([], __read(animation))).then(resolve);
-            });
-            return function () {
-                hasMounted = false;
-                controls.stop();
-            };
-        },
-    } as AnimationControls;
-    return controls;
-}
-
-export { animationControls };
-
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+// import { invariant } from '../utils/errors.js';
+import { animateVisualElement, stopAnimation } from '../render/utils/animation.js';
+import { setValues } from '../render/utils/setters.js';
+/**
+ * @public
+ */
+function animationControls(startStopNotifier) {
+    /**
+     * Track whether the host component has mounted.
+     */
+    var hasMounted = false;
+    /**
+     * Pending animations that are started before a component is mounted.
+     * TODO: Remove this as animations should only run in effects
+     */
+    var pendingAnimations = [];
+    /**
+     * A collection of linked component animation controls.
+     */
+    var subscribers = new Set();
+    var stopNotification;
+    var controls = {
+        subscribe: function (visualElement) {
+            if (subscribers.size === 0) {
+                stopNotification = startStopNotifier?.();
+            }
+            subscribers.add(visualElement);
+            return function () {
+                subscribers.delete(visualElement);
+                if (subscribers.size === 0) {
+                    stopNotification?.();
+                }
+            };
+        },
+        start: function (definition, transitionOverride) {
+            /**
+             * TODO: We only perform this hasMounted check because in Framer we used to
+             * encourage the ability to start an animation within the render phase. This
+             * isn't behaviour concurrent-safe so when we make Framer concurrent-safe
+             * we can ditch this.
+             */
+            if (hasMounted) {
+                var animations_1 = [];
+                subscribers.forEach(function (visualElement) {
+                    animations_1.push(animateVisualElement(visualElement, definition, {
+                        transitionOverride: transitionOverride,
+                    }));
+                });
+                return Promise.all(animations_1);
+            }
+            else {
+                return new Promise(function (resolve) {
+                    pendingAnimations.push({
+                        animation: [definition, transitionOverride],
+                        resolve: resolve,
+                    });
+                });
+            }
+        },
+        set: function (definition) {
+            //invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
+            return subscribers.forEach(function (visualElement) {
+                setValues(visualElement, definition);
+            });
+        },
+        stop: function () {
+            subscribers.forEach(function (visualElement) {
+                stopAnimation(visualElement);
+            });
+        },
+        mount: function () {
+            hasMounted = true;
+            pendingAnimations.forEach(function (_a) {
+                var animation = _a.animation, resolve = _a.resolve;
+                controls.start.apply(controls, ...[animation]).then(resolve);
+            });
+            return function () {
+                hasMounted = false;
+                controls.stop();
+            };
+        },
+    };
+    return controls;
+}
+export { animationControls };