@any-tdf/react-motion 0.0.0-alpha.0

package/dist/interpolate.d.ts

@@ -0,0 +1 @@
+export declare const getInterpolator: <T>(a: T, b: T) => ((t: number) => T);

package/dist/interpolate.js

@@ -0,0 +1,40 @@
+const isDate = (value) => Object.prototype.toString.call(value) === '[object Date]';
+export const getInterpolator = (a, b) => {
+    if (Object.is(a, b) || a !== a)
+        return () => a;
+    const type = typeof a;
+    if (type !== typeof b || Array.isArray(a) !== Array.isArray(b)) {
+        throw new Error('Cannot interpolate values of different type');
+    }
+    if (Array.isArray(a) && Array.isArray(b)) {
+        const interpolators = b.map((item, index) => getInterpolator(a[index], item));
+        return ((t) => interpolators.map((interpolate) => interpolate(t)));
+    }
+    if (type === 'object') {
+        if (!a || !b) {
+            throw new Error('Object cannot be null');
+        }
+        if (isDate(a) && isDate(b)) {
+            const start = a.getTime();
+            const delta = b.getTime() - start;
+            return ((t) => new Date(start + t * delta));
+        }
+        const resultKeys = Object.keys(b);
+        const interpolators = new Map();
+        for (const key of resultKeys) {
+            interpolators.set(key, getInterpolator(a[key], b[key]));
+        }
+        return ((t) => {
+            const result = {};
+            for (const key of resultKeys) {
+                result[key] = interpolators.get(key)?.(t);
+            }
+            return result;
+        });
+    }
+    if (type === 'number') {
+        const delta = b - a;
+        return ((t) => a + t * delta);
+    }
+    return () => b;
+};

package/dist/motion.d.ts

@@ -0,0 +1,90 @@
+import { type EasingFunction } from './easing';
+export { getInterpolator } from './interpolate';
+export type Subscriber<T> = (value: T) => void;
+export type Unsubscriber = () => void;
+export type Updater<T> = (targetValue: T, value: T) => T;
+export interface Readable<T> {
+    subscribe(run: Subscriber<T>, invalidate?: () => void): Unsubscriber;
+}
+export interface SpringOptions {
+    stiffness?: number;
+    damping?: number;
+    precision?: number;
+}
+export interface SpringUpdateOptions {
+    hard?: any;
+    soft?: string | number | boolean;
+    instant?: boolean;
+    preserveMomentum?: number;
+}
+export interface TweenOptions<T> {
+    delay?: number;
+    duration?: number | ((from: T, to: T) => number);
+    easing?: EasingFunction;
+    interpolate?: (a: T, b: T) => (t: number) => T;
+}
+export interface Tweened<T> extends Readable<T> {
+    set(value: T, opts?: TweenOptions<T>): Promise<void>;
+    update(updater: Updater<T>, opts?: TweenOptions<T>): Promise<void>;
+}
+declare class ObservableValue<T> {
+    protected value: T;
+    private subscribers;
+    constructor(value: T);
+    protected publish(value: T): void;
+    subscribe(run: Subscriber<T>, _invalidate?: () => void): () => void;
+}
+export declare class Tween<T> extends ObservableValue<T> {
+    private task;
+    private defaults;
+    private targetValue;
+    constructor(value: T, options?: TweenOptions<T>);
+    static of<U>(fn: () => U, options?: TweenOptions<U>): Tween<U>;
+    set(value: T, options?: TweenOptions<T>): Promise<void>;
+    update(updater: Updater<T>, options?: TweenOptions<T>): Promise<void>;
+    get current(): T;
+    get target(): T;
+    set target(value: T);
+}
+export declare class Spring<T = unknown> extends ObservableValue<T> {
+    private task;
+    private lastValue;
+    private lastTime;
+    private inverseMass;
+    private inverseMassRecoveryRate;
+    private targetValue;
+    private resolveCurrent;
+    private rejectCurrent;
+    stiffness: number;
+    damping: number;
+    precision: number;
+    constructor(value: T, options?: SpringOptions);
+    static of<U>(fn: () => U, options?: SpringOptions): Spring<U>;
+    set(value: T, options?: SpringUpdateOptions): Promise<void>;
+    get current(): T;
+    get target(): T;
+    set target(value: T);
+}
+export interface Spring<T = unknown> extends Readable<T> {
+    update(updater: Updater<T>, options?: SpringUpdateOptions): Promise<void>;
+}
+export declare const tweened: <T>(value?: T, defaults?: TweenOptions<T>) => Tweened<T | undefined>;
+export declare const spring: <T = unknown>(value?: T, opts?: SpringOptions) => Spring<T | undefined>;
+declare class PrefersReducedMotion implements Readable<boolean> {
+    private query;
+    private subscribers;
+    current: boolean;
+    constructor();
+    private handleChange;
+    subscribe(run: Subscriber<boolean>, _invalidate?: () => void): () => void;
+}
+export declare const prefersReducedMotion: PrefersReducedMotion;
+export declare const usePrefersReducedMotion: () => boolean;
+export declare const useTween: <T>(target: T, options?: TweenOptions<T>) => {
+    current: T;
+    tween: Tween<T>;
+};
+export declare const useSpring: <T>(target: T, options?: SpringOptions) => {
+    current: T;
+    spring: Spring<T>;
+};

package/dist/motion.js

@@ -0,0 +1,452 @@
+import { useEffect, useRef, useState } from 'react';
+import { linear } from './easing';
+import { getInterpolator } from './interpolate';
+export { getInterpolator } from './interpolate';
+const now = () => (typeof performance === 'undefined' ? Date.now() : performance.now());
+const frame = (callback) => {
+    if (typeof requestAnimationFrame === 'undefined') {
+        const id = setTimeout(() => callback(now()), 16);
+        return id;
+    }
+    return requestAnimationFrame(callback);
+};
+const cancelFrame = (id) => {
+    if (typeof cancelAnimationFrame === 'undefined') {
+        clearTimeout(id);
+        return;
+    }
+    cancelAnimationFrame(id);
+};
+const isDateValue = (value) => Object.prototype.toString.call(value) === '[object Date]';
+class ObservableValue {
+    constructor(value) {
+        this.subscribers = new Set();
+        this.value = value;
+    }
+    publish(value) {
+        this.value = value;
+        for (const subscriber of this.subscribers) {
+            subscriber(value);
+        }
+    }
+    subscribe(run, _invalidate) {
+        this.subscribers.add(run);
+        run(this.value);
+        return () => {
+            this.subscribers.delete(run);
+        };
+    }
+}
+class WritableValue extends ObservableValue {
+    set(value) {
+        this.publish(value);
+    }
+}
+export class Tween extends ObservableValue {
+    constructor(value, options = {}) {
+        super(value);
+        this.task = null;
+        this.targetValue = value;
+        this.defaults = options;
+    }
+    static of(fn, options) {
+        return new Tween(fn(), options);
+    }
+    set(value, options) {
+        this.targetValue = value;
+        const merged = { ...this.defaults, ...options };
+        let { delay = 0, duration = 400, easing = linear, interpolate = getInterpolator } = merged;
+        const previousTask = this.task;
+        if (duration === 0) {
+            previousTask?.cancel();
+            if (this.task === previousTask)
+                this.task = null;
+            this.publish(value);
+            return Promise.resolve();
+        }
+        const startTime = now() + delay;
+        let started = false;
+        let interpolateValue = () => value;
+        let taskId = null;
+        let cancelled = false;
+        const task = {
+            cancel: () => {
+                cancelled = true;
+                if (taskId !== null) {
+                    cancelFrame(taskId);
+                    taskId = null;
+                }
+            }
+        };
+        this.task = task;
+        return new Promise((resolve) => {
+            const tick = (time) => {
+                if (cancelled)
+                    return;
+                if (time < startTime) {
+                    taskId = frame(tick);
+                    return;
+                }
+                if (!started) {
+                    started = true;
+                    const fromValue = this.value;
+                    interpolateValue = interpolate(this.value, value);
+                    if (typeof duration === 'function')
+                        duration = duration(fromValue, value);
+                    previousTask?.cancel();
+                }
+                const elapsed = time - startTime;
+                if (elapsed > duration) {
+                    if (this.task === task)
+                        this.task = null;
+                    this.publish(value);
+                    resolve();
+                    return;
+                }
+                this.publish(interpolateValue(easing(elapsed / duration)));
+                taskId = frame(tick);
+            };
+            taskId = frame(tick);
+        });
+    }
+    update(updater, options) {
+        return this.set(updater(this.targetValue, this.value), options);
+    }
+    get current() {
+        return this.value;
+    }
+    get target() {
+        return this.targetValue;
+    }
+    set target(value) {
+        void this.set(value);
+    }
+}
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+const tickSpring = (ctx, lastValue, currentValue, targetValue) => {
+    if (typeof currentValue === 'number' || isDateValue(currentValue)) {
+        const current = isDateValue(currentValue) ? currentValue.getTime() : currentValue;
+        const last = isDateValue(lastValue) ? lastValue.getTime() : lastValue;
+        const target = isDateValue(targetValue) ? targetValue.getTime() : targetValue;
+        const delta = target - current;
+        const velocity = (current - last) / (ctx.dt || 1 / 60);
+        const springForce = ctx.stiffness * delta;
+        const damper = ctx.damping * velocity;
+        const acceleration = (springForce - damper) * ctx.invMass;
+        const d = (velocity + acceleration) * ctx.dt;
+        if (Math.abs(d) < ctx.precision && Math.abs(delta) < ctx.precision) {
+            return targetValue;
+        }
+        ctx.settled = false;
+        const next = current + d;
+        return (isDateValue(currentValue) ? new Date(next) : next);
+    }
+    if (Array.isArray(currentValue) && Array.isArray(lastValue) && Array.isArray(targetValue)) {
+        return currentValue.map((_, index) => tickSpring(ctx, lastValue[index], currentValue[index], targetValue[index]));
+    }
+    if (typeof currentValue === 'object' && currentValue && typeof lastValue === 'object' && lastValue && typeof targetValue === 'object' && targetValue) {
+        const next = {};
+        for (const key of Object.keys(currentValue)) {
+            next[key] = tickSpring(ctx, lastValue[key], currentValue[key], targetValue[key]);
+        }
+        return next;
+    }
+    throw new Error(`Cannot spring ${typeof currentValue} values`);
+};
+export class Spring extends ObservableValue {
+    constructor(value, options = {}) {
+        super(value);
+        this.task = null;
+        this.lastTime = 0;
+        this.inverseMass = 1;
+        this.inverseMassRecoveryRate = Infinity;
+        this.resolveCurrent = null;
+        this.rejectCurrent = null;
+        this.targetValue = value;
+        this.lastValue = value;
+        this.stiffness = clamp(options.stiffness ?? 0.15, 0, 1);
+        this.damping = clamp(options.damping ?? 0.8, 0, 1);
+        this.precision = options.precision ?? 0.01;
+    }
+    static of(fn, options) {
+        return new Spring(fn(), options);
+    }
+    set(value, options = {}) {
+        this.targetValue = value;
+        this.rejectCurrent?.(new Error('Aborted'));
+        this.resolveCurrent = null;
+        this.rejectCurrent = null;
+        if (this.value === undefined || options.instant) {
+            if (this.task !== null) {
+                cancelFrame(this.task);
+                this.task = null;
+            }
+            this.lastTime = now();
+            this.lastValue = value;
+            this.publish(value);
+            return Promise.resolve();
+        }
+        if (options.preserveMomentum) {
+            this.inverseMassRecoveryRate = 1000 / (options.preserveMomentum * 60);
+            this.inverseMass = 0;
+        }
+        if (this.value === null) {
+            this.lastValue = value;
+            this.publish(value);
+        }
+        if (this.task === null) {
+            this.lastTime = now();
+            const run = (time) => {
+                this.inverseMass = Math.min(this.inverseMass + this.inverseMassRecoveryRate, 1);
+                const elapsed = Math.min(time - this.lastTime, 1000 / 30);
+                const ctx = {
+                    invMass: this.inverseMass,
+                    stiffness: this.stiffness,
+                    damping: this.damping,
+                    precision: this.precision,
+                    settled: true,
+                    dt: (elapsed * 60) / 1000
+                };
+                const nextValue = tickSpring(ctx, this.lastValue, this.value, this.targetValue);
+                this.lastTime = time;
+                this.lastValue = this.value;
+                this.publish(nextValue);
+                if (ctx.settled) {
+                    this.task = null;
+                    const resolve = this.resolveCurrent;
+                    this.resolveCurrent = null;
+                    this.rejectCurrent = null;
+                    resolve?.();
+                    return;
+                }
+                this.task = frame(run);
+            };
+            this.task = frame(run);
+        }
+        const promise = new Promise((resolve, reject) => {
+            this.resolveCurrent = resolve;
+            this.rejectCurrent = reject;
+        });
+        promise.catch(() => { });
+        return promise;
+    }
+    update(updater, options) {
+        return this.set(updater(this.targetValue, this.value), options);
+    }
+    get current() {
+        return this.value;
+    }
+    get target() {
+        return this.targetValue;
+    }
+    set target(value) {
+        void this.set(value);
+    }
+}
+export const tweened = (value, defaults) => {
+    const store = new WritableValue(value);
+    let currentValue = value;
+    let targetValue = value;
+    let task = null;
+    const set = (nextValue, opts) => {
+        targetValue = nextValue;
+        if (currentValue == null) {
+            store.set((currentValue = nextValue));
+            return Promise.resolve();
+        }
+        const previousTask = task;
+        let { delay = 0, duration = 400, easing = linear, interpolate = getInterpolator } = { ...defaults, ...opts };
+        if (duration === 0) {
+            previousTask?.cancel();
+            if (task === previousTask)
+                task = null;
+            store.set((currentValue = targetValue));
+            return Promise.resolve();
+        }
+        const startTime = now() + delay;
+        let started = false;
+        let interpolateValue = () => nextValue;
+        let taskId = null;
+        let cancelled = false;
+        const currentTask = {
+            cancel: () => {
+                cancelled = true;
+                if (taskId !== null) {
+                    cancelFrame(taskId);
+                    taskId = null;
+                }
+            }
+        };
+        task = currentTask;
+        return new Promise((resolve) => {
+            const tick = (time) => {
+                if (cancelled)
+                    return;
+                if (time < startTime) {
+                    taskId = frame(tick);
+                    return;
+                }
+                if (!started) {
+                    started = true;
+                    const fromValue = currentValue;
+                    interpolateValue = interpolate(fromValue, nextValue);
+                    if (typeof duration === 'function')
+                        duration = duration(fromValue, nextValue);
+                    previousTask?.cancel();
+                }
+                const elapsed = time - startTime;
+                if (elapsed > duration) {
+                    if (task === currentTask)
+                        task = null;
+                    store.set((currentValue = nextValue));
+                    resolve();
+                    return;
+                }
+                store.set((currentValue = interpolateValue(easing(elapsed / duration))));
+                taskId = frame(tick);
+            };
+            taskId = frame(tick);
+        });
+    };
+    return {
+        set,
+        update: (updater, opts) => set(updater(targetValue, currentValue), opts),
+        subscribe: (run, invalidate) => store.subscribe(run, invalidate)
+    };
+};
+export const spring = (value, opts = {}) => {
+    const store = new WritableValue(value);
+    let currentValue = value;
+    let targetValue = value;
+    let lastValue = value;
+    let lastTime = 0;
+    let task = null;
+    let currentToken = null;
+    let invMass = 1;
+    let invMassRecoveryRate = 0;
+    let cancelTask = false;
+    const springStore = {
+        stiffness: opts.stiffness ?? 0.15,
+        damping: opts.damping ?? 0.8,
+        precision: opts.precision ?? 0.01,
+        set: (nextValue, options = {}) => {
+            targetValue = nextValue;
+            const token = {};
+            currentToken = token;
+            if (currentValue == null || options.hard || (springStore.stiffness >= 1 && springStore.damping >= 1)) {
+                cancelTask = true;
+                if (task !== null) {
+                    cancelFrame(task);
+                    task = null;
+                }
+                lastTime = now();
+                lastValue = nextValue;
+                store.set((currentValue = targetValue));
+                return Promise.resolve();
+            }
+            if (options.soft) {
+                const rate = options.soft === true ? 0.5 : Number(options.soft);
+                invMassRecoveryRate = 1 / (rate * 60);
+                invMass = 0;
+            }
+            if (task === null) {
+                lastTime = now();
+                cancelTask = false;
+                const run = (time) => {
+                    if (cancelTask) {
+                        cancelTask = false;
+                        task = null;
+                        return;
+                    }
+                    invMass = Math.min(invMass + invMassRecoveryRate, 1);
+                    const elapsed = Math.min(time - lastTime, 1000 / 30);
+                    const ctx = {
+                        invMass,
+                        stiffness: springStore.stiffness,
+                        damping: springStore.damping,
+                        precision: springStore.precision,
+                        settled: true,
+                        dt: (elapsed * 60) / 1000
+                    };
+                    const next = tickSpring(ctx, lastValue, currentValue, targetValue);
+                    lastTime = time;
+                    lastValue = currentValue;
+                    store.set((currentValue = next));
+                    if (ctx.settled) {
+                        task = null;
+                        return;
+                    }
+                    task = frame(run);
+                };
+                task = frame(run);
+            }
+            return new Promise((resolve) => {
+                const wait = () => {
+                    if (task === null) {
+                        if (token === currentToken)
+                            resolve();
+                        return;
+                    }
+                    frame(wait);
+                };
+                wait();
+            });
+        },
+        update: (updater, options) => springStore.set(updater(targetValue, currentValue), options),
+        subscribe: (run, invalidate) => store.subscribe(run, invalidate)
+    };
+    return springStore;
+};
+class PrefersReducedMotion {
+    constructor() {
+        this.query = null;
+        this.subscribers = new Set();
+        this.current = false;
+        this.handleChange = (event) => {
+            this.current = event.matches;
+            for (const subscriber of this.subscribers) {
+                subscriber(this.current);
+            }
+        };
+        if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+            this.query = window.matchMedia('(prefers-reduced-motion: reduce)');
+            this.current = this.query.matches;
+            this.query.addEventListener('change', this.handleChange);
+        }
+    }
+    subscribe(run, _invalidate) {
+        this.subscribers.add(run);
+        run(this.current);
+        return () => {
+            this.subscribers.delete(run);
+        };
+    }
+}
+export const prefersReducedMotion = new PrefersReducedMotion();
+export const usePrefersReducedMotion = () => {
+    const [current, setCurrent] = useState(prefersReducedMotion.current);
+    useEffect(() => prefersReducedMotion.subscribe(setCurrent), []);
+    return current;
+};
+export const useTween = (target, options) => {
+    const tweenRef = useRef(null);
+    if (!tweenRef.current)
+        tweenRef.current = new Tween(target, options);
+    const [current, setCurrent] = useState(tweenRef.current.current);
+    useEffect(() => tweenRef.current?.subscribe(setCurrent), []);
+    useEffect(() => {
+        void tweenRef.current?.set(target, options);
+    }, [target, options]);
+    return { current, tween: tweenRef.current };
+};
+export const useSpring = (target, options) => {
+    const springRef = useRef(null);
+    if (!springRef.current)
+        springRef.current = new Spring(target, options);
+    const [current, setCurrent] = useState(springRef.current.current);
+    useEffect(() => springRef.current?.subscribe(setCurrent), []);
+    useEffect(() => {
+        void springRef.current?.set(target);
+    }, [target]);
+    return { current, spring: springRef.current };
+};

package/dist/react.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { type TransitionName, type TransitionFunction } from './transition';
+export type TransitionLike<P = unknown> = TransitionName | TransitionFunction<P> | null;
+export type TransitionMode = 'bidirectional' | 'separate';
+export type TransitionStatus = 'entering' | 'entered' | 'exiting' | 'exited';
+export interface UseTransitionOptions<P = unknown> {
+    transition?: TransitionLike<P>;
+    params?: P;
+    inTransition?: TransitionLike<P>;
+    outTransition?: TransitionLike<P>;
+    inParams?: P;
+    outParams?: P;
+    mode?: TransitionMode;
+    intro?: boolean;
+    onIntroStart?: () => void;
+    onIntroEnd?: () => void;
+    onOutroStart?: () => void;
+    onOutroEnd?: () => void;
+}
+export declare const useTransition: <T extends Element = HTMLDivElement, P = unknown>(visible: boolean, options?: UseTransitionOptions<P>) => {
+    ref: React.RefObject<T | null>;
+    shouldRender: boolean;
+    status: TransitionStatus;
+};
+export interface TransitionProps<P = unknown> extends UseTransitionOptions<P> {
+    visible: boolean;
+    as?: keyof React.JSX.IntrinsicElements;
+    children?: React.ReactNode;
+    className?: string;
+    style?: unknown;
+    [key: string]: unknown;
+}
+export declare const Transition: <P>({ visible, as, children, transition, params, inTransition, outTransition, inParams, outParams, mode, intro, onIntroStart, onIntroEnd, onOutroStart, onOutroEnd, ...rest }: TransitionProps<P>) => React.DOMElement<React.DOMAttributes<Element>, Element> | null;