@hanzogui/animations-moti 8.3.1 → 8.3.2

package/dist/cjs/createAnimations.js

@@ -0,0 +1,304 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createAnimations = createAnimations;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-nocheck - deprecated package, moti dependency intentionally not included
+const use_presence_1 = require("@hanzogui/use-presence");
+// we need core for hooks.usePropsTransform
+const core_1 = require("@hanzogui/core");
+// Helper to resolve dynamic theme values like {dynamic: {dark: "value", light: undefined}}
+const resolveDynamicValue = (value, isDark) => {
+    if (value && typeof value === 'object' && 'dynamic' in value) {
+        const dynamicValue = isDark ? value.dynamic.dark : value.dynamic.light;
+        return dynamicValue;
+    }
+    return value;
+};
+const author_1 = require("moti/author");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_native_reanimated_1 = tslib_1.__importStar(require("react-native-reanimated"));
+// fix for building with type module
+// see https://github.com/evanw/esbuild/issues/2480#issuecomment-1833104754
+const safeESModule = (a) => {
+    const b = a;
+    const out = b.__esModule || b[Symbol.toStringTag] === 'Module' ? b.default : b;
+    // add metro support
+    return out || a;
+};
+const Animated = safeESModule(react_native_reanimated_1.default);
+// this is our own custom reanimated animated component so we can allow data- attributes, className etc
+// this should ultimately be merged with react-native-web-lite
+function createGuiAnimatedComponent(defaultTag = 'div') {
+    const isText = defaultTag === 'span';
+    const Component = Animated.createAnimatedComponent((0, react_1.forwardRef)((propsIn, ref) => {
+        const { forwardedRef, animation, render = defaultTag, ...propsRest } = propsIn;
+        const hostRef = (0, react_1.useRef)(null);
+        const composedRefs = (0, core_1.useComposedRefs)(forwardedRef, ref, hostRef);
+        const stateRef = (0, react_1.useRef)(null);
+        if (!stateRef.current) {
+            stateRef.current = {
+                get host() {
+                    return hostRef.current;
+                },
+            };
+        }
+        const [_, state] = (0, core_1.useThemeWithState)({});
+        // get styles but only inline style
+        const result = (0, core_1.getSplitStyles)(propsRest, isText ? core_1.Text.staticConfig : core_1.View.staticConfig, state?.theme, state?.name, {
+            unmounted: false,
+        }, {
+            isAnimated: false,
+            noClass: true,
+        });
+        const props = result?.viewProps || {};
+        const Element = render;
+        const transformedProps = core_1.hooks.usePropsTransform?.(render, props, stateRef, false);
+        return (0, jsx_runtime_1.jsx)(Element, { ...transformedProps, ref: composedRefs });
+    }));
+    Component['acceptRenderProp'] = true;
+    return Component;
+}
+const AnimatedView = createGuiAnimatedComponent('div');
+const AnimatedText = createGuiAnimatedComponent('span');
+// const AnimatedView = styled(View, {
+//   disableClassName: true,
+// })
+// const AnimatedText = styled(Text, {
+//   disableClassName: true,
+// })
+const onlyAnimateKeys = {
+    transform: true,
+    opacity: true,
+    height: true,
+    width: true,
+    backgroundColor: true,
+    borderColor: true,
+    borderLeftColor: true,
+    borderRightColor: true,
+    borderTopColor: true,
+    borderBottomColor: true,
+    borderRadius: true,
+    borderTopLeftRadius: true,
+    borderTopRightRadius: true,
+    borderBottomLeftRadius: true,
+    borderBottomRightRadius: true,
+    borderLeftWidth: true,
+    borderRightWidth: true,
+    borderTopWidth: true,
+    borderBottomWidth: true,
+    color: true,
+    left: true,
+    right: true,
+    top: true,
+    bottom: true,
+    fontSize: true,
+    fontWeight: true,
+    lineHeight: true,
+    letterSpacing: true,
+};
+function createAnimations(animations) {
+    return {
+        needsCustomComponent: true,
+        View: core_1.isWeb ? AnimatedView : Animated.View,
+        Text: core_1.isWeb ? AnimatedText : Animated.Text,
+        // View: Animated.View,
+        // Text: Animated.Text,
+        isReactNative: true,
+        inputStyle: 'value',
+        outputStyle: 'inline',
+        animations,
+        usePresence: use_presence_1.usePresence,
+        ResetPresence: use_presence_1.ResetPresence,
+        useAnimatedNumber(initial) {
+            const sharedValue = (0, react_native_reanimated_1.useSharedValue)(initial);
+            return react_1.default.useMemo(() => ({
+                getInstance() {
+                    'worklet';
+                    return sharedValue;
+                },
+                getValue() {
+                    'worklet';
+                    return sharedValue.value;
+                },
+                setValue(next, config = { type: 'spring' }, onFinish) {
+                    'worklet';
+                    if (config.type === 'direct') {
+                        sharedValue.value = next;
+                        onFinish?.();
+                    }
+                    else if (config.type === 'spring') {
+                        sharedValue.value = (0, react_native_reanimated_1.withSpring)(next, config, onFinish
+                            ? () => {
+                                'worklet';
+                                (0, react_native_reanimated_1.runOnJS)(onFinish)();
+                            }
+                            : undefined);
+                    }
+                    else {
+                        sharedValue.value = (0, react_native_reanimated_1.withTiming)(next, config, onFinish
+                            ? () => {
+                                'worklet';
+                                (0, react_native_reanimated_1.runOnJS)(onFinish)();
+                            }
+                            : undefined);
+                    }
+                },
+                stop() {
+                    'worklet';
+                    (0, react_native_reanimated_1.cancelAnimation)(sharedValue);
+                },
+            }), [sharedValue]);
+        },
+        useAnimatedNumberReaction({ value }, onValue) {
+            const instance = value.getInstance();
+            return (0, react_native_reanimated_1.useAnimatedReaction)(() => {
+                return instance.value;
+            }, (next, prev) => {
+                if (prev !== next) {
+                    // @nate what is the point of this hook? is this necessary?
+                    // without runOnJS, onValue would need to be a worklet
+                    (0, react_native_reanimated_1.runOnJS)(onValue)(next);
+                }
+            }, 
+            // dependency array is very important here
+            [onValue, instance]);
+        },
+        /**
+         * `getStyle` must be a worklet
+         */
+        useAnimatedNumberStyle(val, getStyle) {
+            const instance = val.getInstance();
+            // this seems wrong but it works
+            const derivedValue = (0, react_native_reanimated_1.useDerivedValue)(() => {
+                return instance.value;
+                // dependency array is very important here
+            }, [instance, getStyle]);
+            return (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+                return getStyle(derivedValue.value);
+                // dependency array is very important here
+            }, [val, getStyle, derivedValue, instance]);
+        },
+        useAnimations: (animationProps) => {
+            const { props, presence, style, componentState } = animationProps;
+            const animationKey = Array.isArray(props.transition)
+                ? props.transition[0]
+                : props.transition;
+            const isHydrating = componentState.unmounted === true;
+            const disableAnimation = isHydrating || !animationKey;
+            const presenceContext = react_1.default.useContext(use_presence_1.PresenceContext);
+            const [, themeState] = (0, core_1.useThemeWithState)({});
+            // Check scheme first, then fall back to checking theme name for 'dark'
+            const isDark = themeState?.scheme === 'dark' || themeState?.name?.startsWith('dark');
+            // this memo is very important for performance, there's a big cost to
+            // updating these values every render
+            const { dontAnimate, motiProps } = (0, react_1.useMemo)(() => {
+                let animate = {};
+                let dontAnimate = {};
+                if (disableAnimation) {
+                    // Resolve dynamic objects based on current theme
+                    for (const key in style) {
+                        const rawValue = style[key];
+                        const value = resolveDynamicValue(rawValue, isDark);
+                        if (value === undefined)
+                            continue;
+                        dontAnimate[key] = value;
+                    }
+                }
+                else {
+                    const animateOnly = props.animateOnly;
+                    for (const key in style) {
+                        const rawValue = style[key];
+                        // Resolve dynamic theme values (like $theme-dark)
+                        const value = resolveDynamicValue(rawValue, isDark);
+                        if (value === undefined)
+                            continue;
+                        if (!onlyAnimateKeys[key] ||
+                            value === 'auto' ||
+                            (typeof value === 'string' && value.startsWith('calc')) ||
+                            (animateOnly && !animateOnly.includes(key))) {
+                            dontAnimate[key] = value;
+                        }
+                        else {
+                            animate[key] = value;
+                        }
+                    }
+                }
+                // if we don't do this moti seems to flicker a frame before applying animation
+                if (componentState.unmounted === 'should-enter') {
+                    // Resolve dynamic objects based on current theme
+                    for (const key in style) {
+                        const rawValue = style[key];
+                        const value = resolveDynamicValue(rawValue, isDark);
+                        if (value === undefined)
+                            continue;
+                        dontAnimate[key] = value;
+                    }
+                }
+                const styles = animate;
+                const isExiting = Boolean(presence?.[1]);
+                const usePresenceValue = (presence || undefined);
+                // TODO moti is giving us type troubles, but this should work
+                let transition = isHydrating
+                    ? { type: 'transition', duration: 0 }
+                    : animations[animationKey];
+                let hasClonedTransition = false;
+                if (Array.isArray(props.transition)) {
+                    const config = props.transition[1];
+                    if (config && typeof config === 'object') {
+                        for (const key in config) {
+                            const val = config[key];
+                            // performance - this seems to have (strangely) huge performance effect in uniswap
+                            // so instead of cloning up front, we clone only when we absolutely have to
+                            if (!hasClonedTransition) {
+                                transition = Object.assign({}, transition);
+                                hasClonedTransition = true;
+                            }
+                            // referencing a pre-defined config
+                            if (typeof val === 'string') {
+                                transition[key] = animations[val];
+                            }
+                            else {
+                                transition[key] = val;
+                            }
+                        }
+                    }
+                }
+                return {
+                    dontAnimate,
+                    motiProps: {
+                        animate: isExiting || componentState.unmounted === true ? {} : styles,
+                        transition: componentState.unmounted ? { duration: 0 } : transition,
+                        usePresenceValue,
+                        presenceContext,
+                        exit: isExiting ? styles : undefined,
+                    },
+                };
+            }, [
+                presenceContext,
+                presence,
+                animationKey,
+                componentState.unmounted,
+                JSON.stringify(style),
+                presenceContext,
+                isDark,
+            ]);
+            const moti = (0, author_1.useMotify)(motiProps);
+            if (process.env.NODE_ENV === 'development' &&
+                props['debug'] &&
+                props['debug'] !== 'profile') {
+                console.info(`useMotify(`, JSON.stringify(motiProps, null, 2) + ')', {
+                    'componentState.unmounted': componentState.unmounted,
+                    animationProps,
+                    motiProps,
+                    moti,
+                    style: [dontAnimate, moti.style],
+                });
+            }
+            return {
+                style: [dontAnimate, moti.style],
+            };
+        },
+    };
+}
+//# sourceMappingURL=createAnimations.js.map

package/dist/cjs/createAnimations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createAnimations.js","sourceRoot":"","sources":["../../src/createAnimations.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+require("./polyfill.js");
+tslib_1.__exportStar(require("./createAnimations.js"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,yBAAsB;AAEtB,gEAAsC"}

package/dist/cjs/package.json

@@ -0,0 +1 @@
+{ "type": "commonjs" }

package/dist/cjs/polyfill.js

@@ -0,0 +1,10 @@
+"use strict";
+// for SSR
+if (typeof requestAnimationFrame === 'undefined') {
+    globalThis['requestAnimationFrame'] = setTimeout;
+}
+// for reanimated
+if (typeof global === 'undefined') {
+    globalThis['global'] = globalThis;
+}
+//# sourceMappingURL=polyfill.js.map

package/dist/cjs/polyfill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"polyfill.js","sourceRoot":"","sources":["../../src/polyfill.ts"],"names":[],"mappings":";AAAA,UAAU;AACV,IAAI,OAAO,qBAAqB,KAAK,WAAW,EAAE,CAAC;IACjD,UAAU,CAAC,uBAAuB,CAAC,GAAG,UAAU,CAAA;AAClD,CAAC;AAED,iBAAiB;AACjB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,UAAU,CAAC,QAAQ,CAAC,GAAG,UAAU,CAAA;AACnC,CAAC"}

package/dist/esm/createAnimations.js

@@ -0,0 +1,300 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck - deprecated package, moti dependency intentionally not included
+import { PresenceContext, ResetPresence, usePresence } from '@hanzogui/use-presence';
+// we need core for hooks.usePropsTransform
+import { getSplitStyles, hooks, isWeb, Text, useComposedRefs, useThemeWithState, View, } from '@hanzogui/core';
+// Helper to resolve dynamic theme values like {dynamic: {dark: "value", light: undefined}}
+const resolveDynamicValue = (value, isDark) => {
+    if (value && typeof value === 'object' && 'dynamic' in value) {
+        const dynamicValue = isDark ? value.dynamic.dark : value.dynamic.light;
+        return dynamicValue;
+    }
+    return value;
+};
+import { useMotify } from 'moti/author';
+import React, { forwardRef, useMemo, useRef } from 'react';
+import Animated_, { cancelAnimation, runOnJS, useAnimatedReaction, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring, withTiming, } from 'react-native-reanimated';
+// fix for building with type module
+// see https://github.com/evanw/esbuild/issues/2480#issuecomment-1833104754
+const safeESModule = (a) => {
+    const b = a;
+    const out = b.__esModule || b[Symbol.toStringTag] === 'Module' ? b.default : b;
+    // add metro support
+    return out || a;
+};
+const Animated = safeESModule(Animated_);
+// this is our own custom reanimated animated component so we can allow data- attributes, className etc
+// this should ultimately be merged with react-native-web-lite
+function createGuiAnimatedComponent(defaultTag = 'div') {
+    const isText = defaultTag === 'span';
+    const Component = Animated.createAnimatedComponent(forwardRef((propsIn, ref) => {
+        const { forwardedRef, animation, render = defaultTag, ...propsRest } = propsIn;
+        const hostRef = useRef(null);
+        const composedRefs = useComposedRefs(forwardedRef, ref, hostRef);
+        const stateRef = useRef(null);
+        if (!stateRef.current) {
+            stateRef.current = {
+                get host() {
+                    return hostRef.current;
+                },
+            };
+        }
+        const [_, state] = useThemeWithState({});
+        // get styles but only inline style
+        const result = getSplitStyles(propsRest, isText ? Text.staticConfig : View.staticConfig, state?.theme, state?.name, {
+            unmounted: false,
+        }, {
+            isAnimated: false,
+            noClass: true,
+        });
+        const props = result?.viewProps || {};
+        const Element = render;
+        const transformedProps = hooks.usePropsTransform?.(render, props, stateRef, false);
+        return _jsx(Element, { ...transformedProps, ref: composedRefs });
+    }));
+    Component['acceptRenderProp'] = true;
+    return Component;
+}
+const AnimatedView = createGuiAnimatedComponent('div');
+const AnimatedText = createGuiAnimatedComponent('span');
+// const AnimatedView = styled(View, {
+//   disableClassName: true,
+// })
+// const AnimatedText = styled(Text, {
+//   disableClassName: true,
+// })
+const onlyAnimateKeys = {
+    transform: true,
+    opacity: true,
+    height: true,
+    width: true,
+    backgroundColor: true,
+    borderColor: true,
+    borderLeftColor: true,
+    borderRightColor: true,
+    borderTopColor: true,
+    borderBottomColor: true,
+    borderRadius: true,
+    borderTopLeftRadius: true,
+    borderTopRightRadius: true,
+    borderBottomLeftRadius: true,
+    borderBottomRightRadius: true,
+    borderLeftWidth: true,
+    borderRightWidth: true,
+    borderTopWidth: true,
+    borderBottomWidth: true,
+    color: true,
+    left: true,
+    right: true,
+    top: true,
+    bottom: true,
+    fontSize: true,
+    fontWeight: true,
+    lineHeight: true,
+    letterSpacing: true,
+};
+export function createAnimations(animations) {
+    return {
+        needsCustomComponent: true,
+        View: isWeb ? AnimatedView : Animated.View,
+        Text: isWeb ? AnimatedText : Animated.Text,
+        // View: Animated.View,
+        // Text: Animated.Text,
+        isReactNative: true,
+        inputStyle: 'value',
+        outputStyle: 'inline',
+        animations,
+        usePresence,
+        ResetPresence,
+        useAnimatedNumber(initial) {
+            const sharedValue = useSharedValue(initial);
+            return React.useMemo(() => ({
+                getInstance() {
+                    'worklet';
+                    return sharedValue;
+                },
+                getValue() {
+                    'worklet';
+                    return sharedValue.value;
+                },
+                setValue(next, config = { type: 'spring' }, onFinish) {
+                    'worklet';
+                    if (config.type === 'direct') {
+                        sharedValue.value = next;
+                        onFinish?.();
+                    }
+                    else if (config.type === 'spring') {
+                        sharedValue.value = withSpring(next, config, onFinish
+                            ? () => {
+                                'worklet';
+                                runOnJS(onFinish)();
+                            }
+                            : undefined);
+                    }
+                    else {
+                        sharedValue.value = withTiming(next, config, onFinish
+                            ? () => {
+                                'worklet';
+                                runOnJS(onFinish)();
+                            }
+                            : undefined);
+                    }
+                },
+                stop() {
+                    'worklet';
+                    cancelAnimation(sharedValue);
+                },
+            }), [sharedValue]);
+        },
+        useAnimatedNumberReaction({ value }, onValue) {
+            const instance = value.getInstance();
+            return useAnimatedReaction(() => {
+                return instance.value;
+            }, (next, prev) => {
+                if (prev !== next) {
+                    // @nate what is the point of this hook? is this necessary?
+                    // without runOnJS, onValue would need to be a worklet
+                    runOnJS(onValue)(next);
+                }
+            }, 
+            // dependency array is very important here
+            [onValue, instance]);
+        },
+        /**
+         * `getStyle` must be a worklet
+         */
+        useAnimatedNumberStyle(val, getStyle) {
+            const instance = val.getInstance();
+            // this seems wrong but it works
+            const derivedValue = useDerivedValue(() => {
+                return instance.value;
+                // dependency array is very important here
+            }, [instance, getStyle]);
+            return useAnimatedStyle(() => {
+                return getStyle(derivedValue.value);
+                // dependency array is very important here
+            }, [val, getStyle, derivedValue, instance]);
+        },
+        useAnimations: (animationProps) => {
+            const { props, presence, style, componentState } = animationProps;
+            const animationKey = Array.isArray(props.transition)
+                ? props.transition[0]
+                : props.transition;
+            const isHydrating = componentState.unmounted === true;
+            const disableAnimation = isHydrating || !animationKey;
+            const presenceContext = React.useContext(PresenceContext);
+            const [, themeState] = useThemeWithState({});
+            // Check scheme first, then fall back to checking theme name for 'dark'
+            const isDark = themeState?.scheme === 'dark' || themeState?.name?.startsWith('dark');
+            // this memo is very important for performance, there's a big cost to
+            // updating these values every render
+            const { dontAnimate, motiProps } = useMemo(() => {
+                let animate = {};
+                let dontAnimate = {};
+                if (disableAnimation) {
+                    // Resolve dynamic objects based on current theme
+                    for (const key in style) {
+                        const rawValue = style[key];
+                        const value = resolveDynamicValue(rawValue, isDark);
+                        if (value === undefined)
+                            continue;
+                        dontAnimate[key] = value;
+                    }
+                }
+                else {
+                    const animateOnly = props.animateOnly;
+                    for (const key in style) {
+                        const rawValue = style[key];
+                        // Resolve dynamic theme values (like $theme-dark)
+                        const value = resolveDynamicValue(rawValue, isDark);
+                        if (value === undefined)
+                            continue;
+                        if (!onlyAnimateKeys[key] ||
+                            value === 'auto' ||
+                            (typeof value === 'string' && value.startsWith('calc')) ||
+                            (animateOnly && !animateOnly.includes(key))) {
+                            dontAnimate[key] = value;
+                        }
+                        else {
+                            animate[key] = value;
+                        }
+                    }
+                }
+                // if we don't do this moti seems to flicker a frame before applying animation
+                if (componentState.unmounted === 'should-enter') {
+                    // Resolve dynamic objects based on current theme
+                    for (const key in style) {
+                        const rawValue = style[key];
+                        const value = resolveDynamicValue(rawValue, isDark);
+                        if (value === undefined)
+                            continue;
+                        dontAnimate[key] = value;
+                    }
+                }
+                const styles = animate;
+                const isExiting = Boolean(presence?.[1]);
+                const usePresenceValue = (presence || undefined);
+                // TODO moti is giving us type troubles, but this should work
+                let transition = isHydrating
+                    ? { type: 'transition', duration: 0 }
+                    : animations[animationKey];
+                let hasClonedTransition = false;
+                if (Array.isArray(props.transition)) {
+                    const config = props.transition[1];
+                    if (config && typeof config === 'object') {
+                        for (const key in config) {
+                            const val = config[key];
+                            // performance - this seems to have (strangely) huge performance effect in uniswap
+                            // so instead of cloning up front, we clone only when we absolutely have to
+                            if (!hasClonedTransition) {
+                                transition = Object.assign({}, transition);
+                                hasClonedTransition = true;
+                            }
+                            // referencing a pre-defined config
+                            if (typeof val === 'string') {
+                                transition[key] = animations[val];
+                            }
+                            else {
+                                transition[key] = val;
+                            }
+                        }
+                    }
+                }
+                return {
+                    dontAnimate,
+                    motiProps: {
+                        animate: isExiting || componentState.unmounted === true ? {} : styles,
+                        transition: componentState.unmounted ? { duration: 0 } : transition,
+                        usePresenceValue,
+                        presenceContext,
+                        exit: isExiting ? styles : undefined,
+                    },
+                };
+            }, [
+                presenceContext,
+                presence,
+                animationKey,
+                componentState.unmounted,
+                JSON.stringify(style),
+                presenceContext,
+                isDark,
+            ]);
+            const moti = useMotify(motiProps);
+            if (process.env.NODE_ENV === 'development' &&
+                props['debug'] &&
+                props['debug'] !== 'profile') {
+                console.info(`useMotify(`, JSON.stringify(motiProps, null, 2) + ')', {
+                    'componentState.unmounted': componentState.unmounted,
+                    animationProps,
+                    motiProps,
+                    moti,
+                    style: [dontAnimate, moti.style],
+                });
+            }
+            return {
+                style: [dontAnimate, moti.style],
+            };
+        },
+    };
+}
+//# sourceMappingURL=createAnimations.js.map