motion-start 0.0.1

package/src/utils/transform.ts

@@ -0,0 +1,120 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { Easing } from "popmotion";
+/**
+ * @public
+ */
+export interface TransformOptions<T> {
+    /**
+     * Clamp values to within the given range. Defaults to `true`
+     *
+     * @public
+     */
+    clamp?: boolean;
+    /**
+     * Easing functions to use on the interpolations between each value in the input and output ranges.
+     *
+     * If provided as an array, the array must be one item shorter than the input and output ranges, as the easings apply to the transition **between** each.
+     *
+     * @public
+     */
+    ease?: Easing | Easing[];
+    /**
+     * @internal
+     */
+    mixer?: (from: T, to: T) => (v: number) => any;
+}
+/**
+ * Transforms numbers into other values by mapping them from an input range to an output range.
+ * Returns the type of the input provided.
+ *
+ * @remarks
+ *
+ * Given an input range of `[0, 200]` and an output range of
+ * `[0, 1]`, this function will return a value between `0` and `1`.
+ * The input range must be a linear series of numbers. The output range
+ * can be any supported value type, such as numbers, colors, shadows, arrays, objects and more.
+ * Every value in the output range must be of the same type and in the same format.
+ *
+ * @motion
+ *
+ * ```jsx
+ * import { transform } from "svelte-motion"
+ *
+ * 
+ *    const inputRange = [0, 200]
+ *    const outputRange = [0, 1]
+ *    const output = transform(100, inputRange, outputRange)
+ *    
+ *    console.log(output) // Returns 0.5
+ * ```
+ *
+ * @param inputValue - A number to transform between the input and output ranges.
+ * @param inputRange - A linear series of numbers (either all increasing or decreasing).
+ * @param outputRange - A series of numbers, colors, strings, or arrays/objects of those. Must be the same length as `inputRange`.
+ * @param options - Clamp: Clamp values to within the given range. Defaults to `true`.
+ *
+ * @public
+ */
+function transform<T>(inputValue: number, inputRange: number[], outputRange: T[], options?: TransformOptions<T>): T;
+/**
+ * @motion
+ *
+ * Transforms numbers into other values by mapping them from an input range to an output range.
+ *
+ * Given an input range of `[0, 200]` and an output range of
+ * `[0, 1]`, this function will return a value between `0` and `1`.
+ * The input range must be a linear series of numbers. The output range
+ * can be any supported value type, such as numbers, colors, shadows, arrays, objects and more.
+ * Every value in the output range must be of the same type and in the same format.
+ *
+ * ```jsx
+
+ * import { transform } from "svelte-motion"
+ *
+ * const inputRange = [-200, -100, 100, 200]
+ * const outputRange = [0, 1, 1, 0]
+ * const convertRange = transform(inputRange, outputRange)
+ * const output = convertRange(-150)
+ *
+ * console.log(output) // Returns 0.5
+ * ```
+ *
+ * @param inputRange - A linear series of numbers (either all increasing or decreasing).
+ * @param outputRange - A series of numbers, colors or strings. Must be the same length as `inputRange`.
+ * @param options - Clamp: clamp values to within the given range. Defaults to `true`.
+ *
+ * @public
+ */
+function transform<T>(inputRange: number[], outputRange: T[], options?: TransformOptions<T>): (inputValue: number) => T;
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import {fixed} from './fix-process-env';
+import { __assign } from 'tslib';
+import { interpolate } from 'popmotion';
+import type { CustomValueType } from "../types";
+
+var isCustomValueType = function (v: any): v is CustomValueType {
+    return typeof v === "object" && v.mix;
+};
+var getMixer = function (v: any) { return (isCustomValueType(v) ? v.mix : undefined); };
+function transform<T>(...args: [number, number[], T[], TransformOptions<T>?]
+    | [number[], T[], TransformOptions<T>?]
+) {
+    var useImmediate = !Array.isArray(args[0]);
+    var argOffset = useImmediate ? 0 : -1;
+    var inputValue = args[0 + argOffset] as number;
+    var inputRange = args[1 + argOffset] as number[];
+    var outputRange = args[2 + argOffset] as T[];
+    var options = args[3 + argOffset] as TransformOptions<T>;
+    var interpolator = interpolate(inputRange, outputRange, __assign({ mixer: getMixer(outputRange[0]) }, options));
+    return useImmediate ? interpolator(inputValue) : interpolator;
+}
+
+export { transform };

package/src/utils/use-constant.ts

@@ -0,0 +1,23 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+type Init<T> = () => T;
+/**
+ * Creates a constant value over the lifecycle of a component.
+ *
+ * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer
+ * a guarantee that it won't re-run for performance reasons later on. By using `useConstant`
+ * you can ensure that initialisers don't execute twice or more.
+ */
+export function useConstant<T>(init: Init<T>): T;
+
+/**
+ * Creates a constant value over the lifecycle of a component.
+ *
+ * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer
+ * a guarantee that it won't re-run for performance reasons later on. By using `useConstant`
+ * you can ensure that initialisers don't execute twice or more.
+ */
+
+// export { default as UseConstant } from './UseConstant.svelte';

package/src/utils/use-cycle.ts

@@ -0,0 +1,78 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { Writable } from 'svelte/store';
+type Cycle = (i?: number) => void;
+type CycleState<T> = [T, Cycle];
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+/**
+ * Cycles through a series of visual properties. Can be used to toggle between or cycle through animations. It works similar to `useState` in React. It is provided an initial array of possible states, and returns an array of two arguments.
+ *
+ * @library
+ *
+ * ```jsx
+ * import * as React from "react"
+ * import { Frame, useCycle } from "framer"
+ *
+ * export function MyComponent() {
+ *   const [x, cycleX] = useCycle(0, 50, 100)
+ *
+ *   return (
+ *     <Frame
+ *       animate={{ x: x }}
+ *       onTap={() => cycleX()}
+ *      />
+ *    )
+ * }
+ * ```
+ *
+ * @motion
+ *
+ * An index value can be passed to the returned `cycle` function to cycle to a specific index.
+ *
+ * ```jsx
+ * import * as React from "react"
+ * import { motion, useCycle } from "framer-motion"
+ *
+ * export const MyComponent = () => {
+ *   const [x, cycleX] = useCycle(0, 50, 100)
+ *
+ *   return (
+ *     <MotionDiv
+ *       animate={{ x: x }}
+ *       onTap={() => cycleX()}
+ *      />
+ *    )
+ * }
+ * ```
+ *
+ * @param items - items to cycle through
+ * @returns [currentState, cycleState]
+ *
+ * @public
+ */
+// export { default as UseCycle } from './UseCycle.svelte';
+import { wrap } from "popmotion";
+import { writable } from 'svelte/store';
+
+export const useCycle = <T>(...items: T[]) => {
+    let index = 0;
+    const x = writable(items[index]) as Writable<T> & {
+        /** Cycle through to next value or set the next value by index. */
+        next: ( index?: number ) => void
+    }
+    const next = (i?: number) => {
+        index = typeof i !== "number" ?
+            wrap(0, items.length, index + 1) :
+            i;
+        x.set(items[index])
+    }
+    x.next=next;
+    return x;
+}

package/src/utils/use-force-update.ts

@@ -0,0 +1,7 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+export function useForceUpdate(): () => void;
+
+// export {default as UseForceUpdate} from './UseForceUpdate.svelte'

package/src/utils/use-isomorphic-effect.ts

@@ -0,0 +1,8 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import { useEffect } from "react";
+export const useIsomorphicLayoutEffect: typeof useEffect;
+
+// export { default as UseIsomorphicLayoutEffect } from './UseIsomorphicLayoutEffect.svelte';

package/src/utils/use-reduced-motion.ts

@@ -0,0 +1,70 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { Writable, Readable } from 'svelte/store'
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { motionValue } from "../value";
+import { derived } from "svelte/store";
+// Does this device prefer reduced motion? Returns `null` server-side.
+let prefersReducedMotion: Writable<boolean | null>;
+
+function initPrefersReducedMotion() {
+    prefersReducedMotion = motionValue(null);
+
+    if (typeof window === "undefined") return;
+
+    if (window.matchMedia) {
+        const motionMediaQuery = window.matchMedia(
+            "(prefers-reduced-motion)"
+        );
+
+        const setReducedMotionPreferences = () =>
+            prefersReducedMotion.set(motionMediaQuery.matches);
+
+        motionMediaQuery.addListener(setReducedMotionPreferences);
+
+        setReducedMotionPreferences();
+    } else {
+        prefersReducedMotion.set(false);
+    }
+}
+
+
+
+/**
+* A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
+*
+* This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
+* `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
+*
+* It will actively respond to changes and re-render your components with the latest setting.
+*
+* ```jsx
+* export function Sidebar({ isOpen }) {
+*   const shouldReduceMotion = useReducedMotion()
+*   const closedX = shouldReduceMotion ? 0 : "-100%"
+*
+*   return (
+*     <MotionDiv animate={{
+*       opacity: isOpen ? 1 : 0,
+*       x: isOpen ? 0 : closedX
+*     }} />
+*   )
+* }
+* ```
+*
+* @return boolean
+*
+* @public
+*/
+export const useReducedMotion = () => {
+    !prefersReducedMotion && initPrefersReducedMotion()
+
+    return derived(prefersReducedMotion,$v=>$v)    
+}

package/src/utils/use-unmount-effect.ts

@@ -0,0 +1,8 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+export type useUnmountEffect = (callback: () => void) => void;
+
+export { default as UseUnmountEffect } from './UseUnmountEffect.svelte';
+