@tamagui/animations-moti 1.122.6 → 1.122.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/animations-moti",
-  "version": "1.122.6",
+  "version": "1.122.8",
   "source": "src/index.ts",
   "license": "MIT",
   "types": "./types/index.d.ts",
@@ -29,12 +29,12 @@
     }
   },
   "dependencies": {
-    "@tamagui/use-presence": "1.122.6",
-    "@tamagui/web": "1.122.6",
+    "@tamagui/use-presence": "1.122.8",
+    "@tamagui/web": "1.122.8",
     "moti": "^0.29.0"
   },
   "devDependencies": {
-    "@tamagui/build": "1.122.6",
+    "@tamagui/build": "1.122.8",
     "react": "*",
     "react-native-reanimated": "~3.16.1"
   },

package/types/createAnimations.d.ts

@@ -1,4 +1,5 @@
-import { type AnimationDriver } from '@tamagui/web';
-import type { TransitionConfig } from 'moti';
+import { type AnimationDriver } from "@tamagui/web";
+import type { TransitionConfig } from "moti";
 export declare function createAnimations<A extends Record<string, TransitionConfig>>(animations: A): AnimationDriver<A>;
+
 //# sourceMappingURL=createAnimations.d.ts.map

package/types/createAnimations.d.ts.map

@@ -1 +1,13 @@
-{"version":3,"file":"createAnimations.d.ts","sourceRoot":"","sources":["../src/createAnimations.tsx"],"names":[],"mappings":"AACA,OAAO,EAQL,KAAK,eAAe,EAErB,MAAM,cAAc,CAAA;AACrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,MAAM,CAAA;AA6G5C,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,EACzE,UAAU,EAAE,CAAC,GACZ,eAAe,CAAC,CAAC,CAAC,CAuMpB"}
+{
+  "mappings": "AACA,cAQO,uBAEA,cAAc;AACrB,cAAc,wBAAwB,MAAM;AA6G5C,OAAO,iBAAS,iBAAiB,UAAU,eAAe,mBACxDA,YAAY,IACX,gBAAgB",
+  "names": [
+    "animations: A"
+  ],
+  "sources": [
+    "src/createAnimations.tsx"
+  ],
+  "sourcesContent": [
+    "import { PresenceContext, ResetPresence, usePresence } from '@tamagui/use-presence'\nimport {\n  getSplitStyles,\n  hooks,\n  isWeb,\n  Text,\n  useComposedRefs,\n  useThemeWithState,\n  View,\n  type AnimationDriver,\n  type UniversalAnimatedNumber,\n} from '@tamagui/web'\nimport type { TransitionConfig } from 'moti'\nimport { useMotify } from 'moti/author'\nimport type { CSSProperties } from 'react'\nimport React, { forwardRef, useRef } from 'react'\nimport type { TextStyle } from 'react-native'\nimport type { SharedValue } from 'react-native-reanimated'\nimport Animated, {\n  cancelAnimation,\n  runOnJS,\n  useAnimatedReaction,\n  useAnimatedStyle,\n  useDerivedValue,\n  useSharedValue,\n  withSpring,\n  withTiming,\n} from 'react-native-reanimated'\n\ntype ReanimatedAnimatedNumber = SharedValue<number>\n\n// this is our own custom reanimated animated component so we can allow data- attributes, className etc\n// this should ultimately be merged with react-native-web-lite\n\nfunction createTamaguiAnimatedComponent(defaultTag = 'div') {\n  const isText = defaultTag === 'span'\n\n  const Component = Animated.createAnimatedComponent(\n    forwardRef((propsIn: any, ref) => {\n      const { forwardedRef, animation, tag = defaultTag, ...propsRest } = propsIn\n      const hostRef = useRef()\n      const composedRefs = useComposedRefs(forwardedRef, ref, hostRef)\n      const stateRef = useRef<any>()\n      if (!stateRef.current) {\n        stateRef.current = {\n          get host() {\n            return hostRef.current\n          },\n        }\n      }\n\n      const [{ state }] = useThemeWithState({})\n\n      // get styles but only inline style\n      const result = getSplitStyles(\n        propsRest,\n        isText ? Text.staticConfig : View.staticConfig,\n        state?.theme!,\n        state?.name!,\n        {\n          unmounted: false,\n        } as any,\n        {\n          isAnimated: false,\n          noClass: true,\n        }\n      )\n\n      const props = result.viewProps\n      const Element = tag\n      const transformedProps = hooks.usePropsTransform?.(tag, props, stateRef, false)\n\n      return <Element {...transformedProps} ref={composedRefs} />\n    })\n  )\n  Component['acceptTagProp'] = true\n  return Component\n}\n\nconst AnimatedView = createTamaguiAnimatedComponent('div')\nconst AnimatedText = createTamaguiAnimatedComponent('span')\n\n// const AnimatedView = styled(View, {\n//   disableClassName: true,\n// })\n\n// const AnimatedText = styled(Text, {\n//   disableClassName: true,\n// })\n\nconst onlyAnimateKeys: { [key in keyof TextStyle | keyof CSSProperties]?: boolean } = {\n  transform: true,\n  opacity: true,\n  height: true,\n  width: true,\n  backgroundColor: true,\n  borderColor: true,\n  borderLeftColor: true,\n  borderRightColor: true,\n  borderTopColor: true,\n  borderBottomColor: true,\n  borderRadius: true,\n  borderTopLeftRadius: true,\n  borderTopRightRadius: true,\n  borderBottomLeftRadius: true,\n  borderBottomRightRadius: true,\n  borderLeftWidth: true,\n  borderRightWidth: true,\n  borderTopWidth: true,\n  borderBottomWidth: true,\n  color: true,\n  left: true,\n  right: true,\n  top: true,\n  bottom: true,\n  fontSize: true,\n  fontWeight: true,\n  lineHeight: true,\n  letterSpacing: true,\n}\n\nexport function createAnimations<A extends Record<string, TransitionConfig>>(\n  animations: A\n): AnimationDriver<A> {\n  return {\n    View: isWeb ? AnimatedView : Animated.View,\n    Text: isWeb ? AnimatedText : Animated.Text,\n    // View: Animated.View,\n    // Text: Animated.Text,\n    isReactNative: true,\n    animations,\n    usePresence,\n    ResetPresence,\n\n    useAnimatedNumber(initial): UniversalAnimatedNumber<ReanimatedAnimatedNumber> {\n      const sharedValue = useSharedValue(initial)\n\n      return React.useMemo(\n        () => ({\n          getInstance() {\n            'worklet'\n            return sharedValue\n          },\n          getValue() {\n            'worklet'\n            return sharedValue.value\n          },\n          setValue(next, config = { type: 'spring' }, onFinish) {\n            'worklet'\n            if (config.type === 'direct') {\n              sharedValue.value = next\n              onFinish?.()\n            } else if (config.type === 'spring') {\n              sharedValue.value = withSpring(\n                next,\n                config,\n                onFinish\n                  ? () => {\n                      'worklet'\n                      runOnJS(onFinish)()\n                    }\n                  : undefined\n              )\n            } else {\n              sharedValue.value = withTiming(\n                next,\n                config,\n                onFinish\n                  ? () => {\n                      'worklet'\n                      runOnJS(onFinish)()\n                    }\n                  : undefined\n              )\n            }\n          },\n          stop() {\n            'worklet'\n            cancelAnimation(sharedValue)\n          },\n        }),\n        [sharedValue]\n      )\n    },\n\n    useAnimatedNumberReaction({ value }, onValue) {\n      const instance = value.getInstance()\n      return useAnimatedReaction(\n        () => {\n          return instance.value\n        },\n        (next, prev) => {\n          if (prev !== next) {\n            // @nate what is the point of this hook? is this necessary?\n            // without runOnJS, onValue would need to be a worklet\n            runOnJS(onValue)(next)\n          }\n        },\n        // dependency array is very important here\n        [onValue, instance]\n      )\n    },\n\n    /**\n     * `getStyle` must be a worklet\n     */\n    useAnimatedNumberStyle(val, getStyle) {\n      const instance = val.getInstance()\n\n      // this seems wrong but it works\n      const derivedValue = useDerivedValue(() => {\n        return instance.value\n        // dependency array is very important here\n      }, [instance, getStyle])\n\n      return useAnimatedStyle(() => {\n        return getStyle(derivedValue.value)\n        // dependency array is very important here\n      }, [val, getStyle, derivedValue, instance])\n    },\n\n    useAnimations: (animationProps) => {\n      const { props, presence, style, componentState } = animationProps\n      const animationKey = Array.isArray(props.animation)\n        ? props.animation[0]\n        : props.animation\n\n      const isHydrating = componentState.unmounted === true\n      const disableAnimation = isHydrating || !animationKey\n\n      let animate = {}\n      let dontAnimate = {}\n\n      if (disableAnimation) {\n        dontAnimate = style\n      } else {\n        const animateOnly = props.animateOnly as string[]\n        for (const key in style) {\n          const value = style[key]\n          if (\n            !onlyAnimateKeys[key] ||\n            value === 'auto' ||\n            (typeof value === 'string' && value.startsWith('calc')) ||\n            (animateOnly && !animateOnly.includes(key))\n          ) {\n            dontAnimate[key] = value\n          } else {\n            animate[key] = value\n          }\n        }\n      }\n\n      // if we don't do this moti seems to flicker a frame before applying animation\n      if (componentState.unmounted === 'should-enter') {\n        dontAnimate = style\n      }\n\n      const styles = animate\n      const isExiting = Boolean(presence?.[1])\n      const presenceContext = React.useContext(PresenceContext)\n      const usePresenceValue = (presence || undefined) as any\n\n      type UseMotiProps = Parameters<typeof useMotify>[0]\n\n      // TODO moti is giving us type troubles, but this should work\n      let transition = isHydrating\n        ? { type: 'transition', duration: 0 }\n        : (animations[animationKey as keyof typeof animations] as any)\n\n      let hasClonedTransition = false\n\n      if (Array.isArray(props.animation)) {\n        const config = props.animation[1]\n        if (config && typeof config === 'object') {\n          for (const key in config) {\n            const val = config[key]\n\n            // performance - this seems to have (strangely) huge performance effect in uniswap\n            // so instead of cloning up front, we clone only when we absolutely have to\n            if (!hasClonedTransition) {\n              transition = Object.assign({}, transition)\n              hasClonedTransition = true\n            }\n\n            // referencing a pre-defined config\n            if (typeof val === 'string') {\n              transition[key] = animations[val]\n            } else {\n              transition[key] = val\n            }\n          }\n        }\n      }\n\n      const motiProps = {\n        animate: isExiting || componentState.unmounted === true ? {} : styles,\n        transition: componentState.unmounted ? { duration: 0 } : transition,\n        usePresenceValue,\n        presenceContext,\n        exit: isExiting ? styles : undefined,\n      } satisfies UseMotiProps\n\n      const moti = useMotify(motiProps)\n\n      if (\n        process.env.NODE_ENV === 'development' &&\n        props['debug'] &&\n        props['debug'] !== 'profile'\n      ) {\n        console.info(`useMotify(`, JSON.stringify(motiProps, null, 2) + ')', {\n          'componentState.unmounted': componentState.unmounted,\n          motiProps,\n          moti,\n          style: [dontAnimate, moti.style],\n        })\n      }\n\n      return {\n        style: [dontAnimate, moti.style],\n      }\n    },\n  }\n}\n"
+  ],
+  "version": 3
+}

package/types/index.d.ts

@@ -1,3 +1,4 @@
-import './polyfill';
-export * from './createAnimations';
+import "./polyfill";
+export * from "./createAnimations";
+
 //# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -1 +1,11 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,CAAA;AAEnB,cAAc,oBAAoB,CAAA"}
+{
+  "mappings": "AAAA,OAAO,YAAY;AAEnB,cAAc",
+  "names": [],
+  "sources": [
+    "src/index.ts"
+  ],
+  "sourcesContent": [
+    "import './polyfill'\n\nexport * from './createAnimations'\n"
+  ],
+  "version": 3
+}

package/types/polyfill.d.ts

@@ -1 +1,2 @@
+
 //# sourceMappingURL=polyfill.d.ts.map

package/types/polyfill.d.ts.map

@@ -1 +1,11 @@
-{"version":3,"file":"polyfill.d.ts","sourceRoot":"","sources":["../src/polyfill.ts"],"names":[],"mappings":""}
+{
+  "mappings": "",
+  "names": [],
+  "sources": [
+    "src/polyfill.ts"
+  ],
+  "sourcesContent": [
+    "// for SSR\nif (typeof requestAnimationFrame === 'undefined') {\n  globalThis['requestAnimationFrame'] = setTimeout\n}\n\n// for reanimated\nif (typeof global === 'undefined') {\n  globalThis['global'] = globalThis\n}\n"
+  ],
+  "version": 3
+}