motion-start 0.0.1 → 0.1.0

package/src/utils/errors.ts

@@ -1,22 +0,0 @@
-import { noop } from "./noop"
-
-export type DevMessage = (check: boolean, message: string) => void
-
-let warning: DevMessage = noop
-let invariant: DevMessage = noop
-
-if (process.env.NODE_ENV !== "production") {
-    warning = (check, message) => {
-        if (!check && typeof console !== "undefined") {
-            console.warn(message)
-        }
-    }
-
-    invariant = (check, message) => {
-        if (!check) {
-            throw new Error(message)
-        }
-    }
-}
-
-export { invariant, warning }

package/src/utils/fix-process-env.ts

@@ -1,22 +0,0 @@
-
-const fix = ()=>{
-    try{
-        
-        if (!process.env){
-            process.env={};
-        }
-        return true;;
-    }catch(e){}
-    
-    if (!window || (window.process && window.process.env)){
-        return false;
-    }
-    
-    if (!window.process){
-        window.process = <any>{}
-    }
-    window.process.env={};
-    return true;    
-}
-
-export const fixed = fix();

package/src/utils/is-ref-object.ts

@@ -1,16 +0,0 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import type { MutableRefObject } from "react";
-
-/** 
-based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V.
-*/
-function isRefObject<E = any>(ref: any): ref is MutableRefObject<E> {
-    return (typeof ref === "object" &&
-        Object.prototype.hasOwnProperty.call(ref, "current"));
-}
-
-export { isRefObject };

package/src/utils/subscription-manager.ts

@@ -1,49 +0,0 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-type GenericHandler = (...args: any) => void;
-class SubscriptionManager<Handler extends GenericHandler> {
-    private subscriptions: Function[] = [];
-    add(handler: Handler) {
-        addUniqueItem(this.subscriptions, handler);
-        return () => { return removeItem(this.subscriptions, handler); };
-    }
-    notify(a?: Parameters<Handler>[0], b?: Parameters<Handler>[1], c?: Parameters<Handler>[2]) {
-        var numSubscriptions = this.subscriptions.length;
-        if (!numSubscriptions)
-            return;
-        if (numSubscriptions === 1) {
-            /**
-             * If there's only a single handler we can just call it without invoking a loop.
-             */
-            this.subscriptions[0](a, b, c);
-        }
-        else {
-            for (var i = 0; i < numSubscriptions; i++) {
-                /**
-                 * Check whether the handler exists before firing as it's possible
-                 * the subscriptions were modified during this loop running.
-                 */
-                var handler = this.subscriptions[i];
-                handler && handler(a, b, c);
-            }
-        }
-    }
-    getSize() {
-        return this.subscriptions.length;
-    }
-    clear() {
-        this.subscriptions.length = 0;
-    }
-}
-
-/** 
-based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V.
-*/
-import { addUniqueItem, removeItem } from './array.js';
-
-
-export { SubscriptionManager };
-

package/src/utils/use-constant.ts

@@ -1,23 +0,0 @@
-/** 
-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-force-update.ts

@@ -1,7 +0,0 @@
-/** 
-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

@@ -1,8 +0,0 @@
-/** 
-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/value/scroll/use-element-scroll.ts

@@ -1,73 +0,0 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import type { ScrollMotionValues } from "./utils";
-
-
-/** 
-based on framer-motion@4.1.16,
-Copyright (c) 2018 Framer B.V.
-*/
-import {
-    createScrollMotionValues,
-    createScrollUpdater,
-} from "./utils"
-import { addDomEvent } from "../../events/use-dom-event"
-import type { RefObject } from "react";
-
-
-const getElementScrollOffsets = (element) => () => {
-    return {
-        xOffset: element.scrollLeft,
-        yOffset: element.scrollTop,
-        xMaxOffset: element.scrollWidth - element.offsetWidth,
-        yMaxOffset: element.scrollHeight - element.offsetHeight,
-    }
-}
-
-export const useElementScroll = (ref: RefObject<HTMLElement>) => {
-
-    const values = <any>{}
-
-    const setScroll = async () => {
-        if (typeof window === "undefined") return ()=>{}
-
-        let times = 10
-        while ( (!ref || !ref.current) && !values.ref ){
-            if(times-- < 1){
-                return ()=>{};
-            };
-            
-            await new Promise(r=>setTimeout(()=>r(),200));
-        }
-        const element = (ref && ref.current) ? ref : values.ref;
-
-        const updateScrollValues = createScrollUpdater(
-            values,
-            getElementScrollOffsets(element)
-        )
-
-        const scrollListener = addDomEvent(
-            element,
-            "scroll",
-            updateScrollValues,
-            { passive: true }
-        )
-
-        const resizeListener = addDomEvent(
-            element,
-            "resize",
-            updateScrollValues
-        )
-        return ()=>{
-            scrollListener && scrollListener()
-            resizeListener && resizeListener()
-        }
-    }
-    Object.assign(values,createScrollMotionValues(setScroll));
-
-    return values as ScrollMotionValues;
-}
-
-//export { default as UseElementScroll } from './UseElementScroll.svelte';

package/src/value/scroll/utils.ts

@@ -1,76 +0,0 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import { MotionValue } from "../index.js";
-/**
- * @public
- */
-export interface ScrollMotionValues {
-    scrollX: MotionValue<number>;
-    scrollY: MotionValue<number>;
-    scrollXProgress: MotionValue<number>;
-    scrollYProgress: MotionValue<number>;
-}
-export interface ScrollOffsets {
-    xOffset: number;
-    yOffset: number;
-    xMaxOffset: number;
-    yMaxOffset: number;
-}
-export type GetScrollOffsets = () => ScrollOffsets;
-
-/** 
-based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V.
-*/
-import { motionValue } from '../index.js';
-
-function createScrollMotionValues(startStopNotifier?: any): ScrollMotionValues {
-    const hasListener = { x: false, y: false, xp: false, yp: false }
-    let stop
-    const jointNotifier = startStopNotifier ? (type) => ()=>{
-        if (!hasListener.x && !hasListener.y && !hasListener.xp && !hasListener.yp) {
-            stop = startStopNotifier();
-        }
-        hasListener[type] = true;
-        return () => {
-            hasListener[type] = false;
-            if (!hasListener.x && !hasListener.y && !hasListener.xp && !hasListener.yp) {
-                if (stop){
-                    stop.then(v=>v())
-                }
-            }
-        }
-
-
-    } : ()=>() => { }
-
-    const smvs = {
-        scrollX: motionValue(0,jointNotifier("x")),
-        scrollY: motionValue(0,jointNotifier("y")),
-        scrollXProgress: motionValue(0,jointNotifier("xp")),
-        scrollYProgress: motionValue(0,jointNotifier("yp")),
-    };
-
-    return smvs;
-}
-function setProgress(offset, maxOffset, value) {
-    value.set(!offset || !maxOffset ? 0 : offset / maxOffset);
-}
-function createScrollUpdater(values: ScrollMotionValues, getOffsets: GetScrollOffsets) {
-    var update = function () {
-        var _a = getOffsets(), xOffset = _a.xOffset, yOffset = _a.yOffset, xMaxOffset = _a.xMaxOffset, yMaxOffset = _a.yMaxOffset;
-        // Set absolute positions
-        values.scrollX.set(xOffset);
-        values.scrollY.set(yOffset);
-        // Set 0-1 progress
-        setProgress(xOffset, xMaxOffset, values.scrollXProgress);
-        setProgress(yOffset, yMaxOffset, values.scrollYProgress);
-    };
-    update();
-    return update;
-}
-
-export { createScrollMotionValues, createScrollUpdater };
-

package/src/value/use-combine-values.ts

@@ -1,53 +0,0 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import { MotionValue } from ".";
-
-/** 
-based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V.
-*/
-import sync from 'framesync';
-import { motionValue } from '.';
-
-export const useCombineMotionValues = <R>(values: MotionValue[], combineValues: () => R) => {
-
-  let subscriptions: Function[] = <any>[];
-  let vals = values;
-
-  
-  const unsubscribe = ()=>{
-    subscriptions.forEach((unsubscribe) => unsubscribe())
-  }
-  const subscribe = () => {
-    subscriptions = vals.map((val) => val.onChange(handler))
-    updateValue();
-  }
-  const value = motionValue(combineValues(), () => {
-    unsubscribe()
-    subscribe()
-    return unsubscribe;
-  }) as MotionValue<R> & { reset: ( values:MotionValue[], combineValues:()=>R ) => void };
-
-  let updateValue = () => {
-    value.set(combineValues());
-  }
-
-  const handler = () => {
-    sync.update(updateValue, false, true);
-  }
-
-  value.reset = (_values, _combineValues) => {
-    vals=_values;
-    //cleanup and reset
-    unsubscribe()
-    updateValue = () => {
-      value.set(_combineValues())
-    }
-    subscribe()
-  }
-
-  return value;
-}
-// export { default as UseCombineMotionValues } from "./UseCombineValues.svelte";

package/src/value/use-transform.ts

@@ -1,216 +0,0 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import { MotionValue } from "../value";
-import type { TransformOptions } from "../utils/transform";
-
-import { transform } from "../utils/transform"
-import { useCombineMotionValues } from "./use-combine-values"
-
-export type InputRange = number[];
-type SingleTransformer<I, O> = (input: I) => O;
-type MultiTransformer<I, O> = (input: I[]) => O;
-type Transformer<I, O> =
-    | SingleTransformer<I, O>
-    /**
-     * Ideally, this would be typed <I, O> in all instances, but to type this
-     * more accurately requires the tuple support in TypeScript 4:
-     * https://gist.github.com/InventingWithMonster/c4d23752a0fae7888596c4ff6d92733a
-     */
-    | MultiTransformer<string | number, O>
-/**
- * Create a `MotionValue` that transforms the output of another `MotionValue` by mapping it from one range of values into another.
- *
- * @remarks
- *
- * Given an input range of `[-200, -100, 100, 200]` and an output range of
- * `[0, 1, 1, 0]`, the returned `MotionValue` will:
- *
- * - When provided a value between `-200` and `-100`, will return a value between `0` and  `1`.
- * - When provided a value between `-100` and `100`, will return `1`.
- * - When provided a value between `100` and `200`, will return a value between `1` and  `0`
- *
- *
- * The input range must be a linear series of numbers. The output range
- * can be any value type supported by Framer Motion: numbers, colors, shadows, etc.
- *
- * Every value in the output range must be of the same type and in the same format.
- *
-  * @motion
- *
- * ```jsx
- * <script>
- *   const x = useMotionValue(0)
- *   const xRange = [-200, -100, 100, 200]
- *   const opacityRange = [0, 1, 1, 0]
- *   const opacity = useTransform(x, xRange, opacityRange)
- * </script>
- * 
- * <Motion let:motion 
- *      animate={{ x: 200 }}
- *      style={{ opacity, x }}
- *  >
- *     <div use:motion/>
- *  </Motion>
- * ```
- *
- * @param inputValue - `MotionValue`
- * @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: boolean. Clamp values to within the given range. Defaults to `true`
- *  - ease: EasingFunction[]. 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.
- *
- * @returns `MotionValue & { reset: (value: MotionValue<number>, inputRange: InputRange, outputRange: O[], options?: TransformOptions<O>) => void }`
- *
- * @public
- */
-export function useTransform<I, O>(value: MotionValue<number>, inputRange: InputRange, outputRange: O[], options?: TransformOptions<O>): 
-    MotionValue<O> & { reset: (value: MotionValue<number>, inputRange: InputRange, outputRange: O[], options?: TransformOptions<O>) => void };
-/**
- * Create a `MotionValue` that transforms the output of another `MotionValue` through a function.
- * In this example, `y` will always be double `x`.
- *
- * @motion
- *
- * ```jsx
- * <script>
- *   const x = useMotionValue(10)
- *   const y = useTransform(x, value => value * 2)
- * </script>
- * 
- * <Motion let:motion style={{ x, y }}>
- *   <div use:motion/>
- * </Motion>
- * ```
- *
- * @param input - A `MotionValue` that will pass its latest value through `transform` to update the returned `MotionValue`.
- * @param transform - A function that accepts the latest value from `input` and returns a new value.
- * @returns `MotionValue`
- *
- * @public
- */
-export function useTransform<I, O>(input: MotionValue<I>, transformer: SingleTransformer<I, O>): 
-    MotionValue<O> & { reset: (input: MotionValue<I>, transformer: SingleTransformer<I, O>) => void};
-/**
- * Pass an array of `MotionValue`s and a function to combine them. In this example, `z` will be the `x` multiplied by `y`.
- *
- * @motion
- *
- * ```jsx
- * <script>
- *   const x = useMotionValue(0)
- *   const y = useMotionValue(0)
- *   const z = useTransform([x, y], [latestX, latestY] => latestX * latestY)
- * </script>
- * 
- * <Motion let:motion style={{ x, y, z }}>
- *   return <div use:motion/>
- * </Motion>
- * ```
- *
- * @param input - An array of `MotionValue`s that will pass their latest values through `transform` to update the returned `MotionValue`.
- * @param transform - A function that accepts the latest values from `input` and returns a new value.
- * @returns `MotionValue`
- *
- * @public
- */
-// export function useTransform<I, O>(input: MotionValue<string | number>[], transformer: MultiTransformer<I, O>):
-//     MotionValue<O> & { reset: (input: MotionValue<string | number>[], transformer: MultiTransformer<I, O>) => void };
-// export function useTransform<I, O>(
-// 	input: MotionValue<string>[] | MotionValue<number>[] | MotionValue<string | number>[],
-// 	transformer: MultiTransformer<I, O>
-// ): MotionValue<O> & { reset: (input: MotionValue<string>[] | MotionValue<number>[] | MotionValue<string | number>[], transformer: MultiTransformer<I, O>) => void };
-// export function useTransform<I, O>(transformer: () => O): MotionValue<O>;
-/**
- * Pass an array of `MotionValue`s and a function to combine them. In this example, `z` will be the `x` multiplied by `y`.
- *
- * ```jsx
- * export const MyComponent = () => {
- *   const x = useMotionValue(0)
- *   const y = useMotionValue(0)
- *   const z = useTransform([x, y], ([latestX, latestY]) => latestX * latestY)
- *
- *   return <motion.div style={{ x, y, z }} />
- * }
- * ```
- *
- * @param input - An array of `MotionValue`s that will pass their latest values through `transform` to update the returned `MotionValue`.
- * @param transform - A function that accepts the latest values from `input` and returns a new value.
- * @returns `MotionValue`
- *
- * @public
- */
-export function useTransform<I, O>(
-    input:
-        | MotionValue<I>
-        | MotionValue<string>[]
-        | MotionValue<number>[]
-        | MotionValue<string | number>[]
-        | (() => O),
-    inputRangeOrTransformer?: InputRange | Transformer<I, O>,
-    outputRange?: O[],
-    options?: TransformOptions<O>
-): any {
-
-    const latest = <I[]>[];
-
-    const update = (
-        input:
-        | MotionValue<I>
-        | MotionValue<string>[]
-        | MotionValue<number>[]
-        | MotionValue<string | number>[]
-        | (() => O),
-        inputRangeOrTransformer?: InputRange | Transformer<I,O>,
-        outputRange?: O[],
-        options?: TransformOptions<O>
-    ) => {
-        const transformer = typeof inputRangeOrTransformer === "function"
-            ? inputRangeOrTransformer
-            : transform(inputRangeOrTransformer!, outputRange!, options);
-        const values = Array.isArray(input) ? input : [input];
-        const _transformer = Array.isArray(input) ? transformer :
-            ([latest]) =>
-                transformer(latest);
-        return [values, () => {
-            latest.length = 0
-            const numValues = values.length
-            for (let i = 0; i < numValues; i++) {
-                latest[i] = values[i].get()
-            }
-
-            return _transformer(latest)
-        }]
-
-    }
-    const comb = useCombineMotionValues(...update(input,
-        inputRangeOrTransformer,
-        outputRange,
-        options)) as any;
-
-    comb.updateInner = comb.reset;
-
-    comb.reset = (
-        input:
-        | MotionValue<I>
-        | MotionValue<string>[]
-        | MotionValue<number>[]
-        | MotionValue<string | number>[]
-        | (() => O),
-        inputRangeOrTransformer?: InputRange | Transformer<I,O>,
-        outputRange?: O[],
-        options?: TransformOptions<O>
-    ) => comb.updateInner(
-        ...update(
-            input,
-            inputRangeOrTransformer,
-            outputRange,
-            options
-        )
-    )
-    return comb;
-}
-// export { default as UseTransform } from './UseTransform.svelte';

package/src/value/utils/is-motion-value.ts

@@ -1,15 +0,0 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import type { MotionValue } from "../";
-
-/** 
-based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V.
-*/
-var isMotionValue = function (value: any): value is MotionValue {
-    return value !== null && typeof value === "object" && value.getVelocity;
-};
-
-export { isMotionValue };