@hanzogui/animations-moti 2.0.0

package/src/createAnimations.tsx

@@ -0,0 +1,382 @@
+// @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,
+  type AnimationDriver,
+  type UniversalAnimatedNumber,
+} from '@hanzogui/core'
+
+// Helper to resolve dynamic theme values like {dynamic: {dark: "value", light: undefined}}
+const resolveDynamicValue = (value: any, isDark: boolean): any => {
+  if (value && typeof value === 'object' && 'dynamic' in value) {
+    const dynamicValue = isDark ? value.dynamic.dark : value.dynamic.light
+    return dynamicValue
+  }
+  return value
+}
+import type { TransitionConfig } from 'moti'
+import { useMotify } from 'moti/author'
+import type { CSSProperties } from 'react'
+import React, { forwardRef, useMemo, useRef } from 'react'
+import type { TextStyle } from 'react-native'
+import type { SharedValue } from 'react-native-reanimated'
+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 = <T,>(a: T | { default: T }): T => {
+  const b = a as any
+  const out = b.__esModule || b[Symbol.toStringTag] === 'Module' ? b.default : b
+  // add metro support
+  return out || a
+}
+
+const Animated = safeESModule(Animated_)
+
+type ReanimatedAnimatedNumber = SharedValue<number>
+
+// 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: any, ref) => {
+      const { forwardedRef, animation, render = defaultTag, ...propsRest } = propsIn
+      const hostRef = useRef(null)
+      const composedRefs = useComposedRefs(forwardedRef, ref, hostRef)
+      const stateRef = useRef<any>(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,
+        } as any,
+        {
+          isAnimated: false,
+          noClass: true,
+        }
+      )
+
+      const props = result?.viewProps || {}
+      const Element = render
+      const transformedProps = hooks.usePropsTransform?.(render, props, stateRef, false)
+
+      return <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: { [key in keyof TextStyle | keyof CSSProperties]?: boolean } = {
+  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<A extends Record<string, TransitionConfig>>(
+  animations: A
+): AnimationDriver<A> {
+  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): UniversalAnimatedNumber<ReanimatedAnimatedNumber> {
+      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 as string[]
+          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) as any
+
+        type UseMotiProps = Parameters<typeof useMotify>[0]
+
+        // TODO moti is giving us type troubles, but this should work
+        let transition = isHydrating
+          ? { type: 'transition', duration: 0 }
+          : (animations[animationKey as keyof typeof animations] as any)
+
+        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,
+          } satisfies UseMotiProps,
+        }
+      }, [
+        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],
+      }
+    },
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+import './polyfill'
+
+export * from './createAnimations'

package/src/polyfill.ts

@@ -0,0 +1,9 @@
+// for SSR
+if (typeof requestAnimationFrame === 'undefined') {
+  globalThis['requestAnimationFrame'] = setTimeout
+}
+
+// for reanimated
+if (typeof global === 'undefined') {
+  globalThis['global'] = globalThis
+}

package/types/createAnimations.d.ts

@@ -0,0 +1,5 @@
+import { type AnimationDriver } from "@hanzogui/core";
+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

@@ -0,0 +1,11 @@
+{
+  "mappings": "AAGA,cAQO,uBAEA;AAUP,cAAc,wBAAwB;AAwHtC,OAAO,iBAAS,iBAAiB,UAAU,eAAe,mBACxD,YAAY,IACX,gBAAgB",
+  "names": [],
+  "sources": [
+    "src/createAnimations.tsx"
+  ],
+  "version": 3,
+  "sourcesContent": [
+    "// @ts-nocheck - deprecated package, moti dependency intentionally not included\nimport { PresenceContext, ResetPresence, usePresence } from '@hanzogui/use-presence'\n// we need core for hooks.usePropsTransform\nimport {\n  getSplitStyles,\n  hooks,\n  isWeb,\n  Text,\n  useComposedRefs,\n  useThemeWithState,\n  View,\n  type AnimationDriver,\n  type UniversalAnimatedNumber,\n} from '@hanzogui/core'\n\n// Helper to resolve dynamic theme values like {dynamic: {dark: \"value\", light: undefined}}\nconst resolveDynamicValue = (value: any, isDark: boolean): any => {\n  if (value && typeof value === 'object' && 'dynamic' in value) {\n    const dynamicValue = isDark ? value.dynamic.dark : value.dynamic.light\n    return dynamicValue\n  }\n  return value\n}\nimport type { TransitionConfig } from 'moti'\nimport { useMotify } from 'moti/author'\nimport type { CSSProperties } from 'react'\nimport React, { forwardRef, useMemo, 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\n// fix for building with type module\n// see https://github.com/evanw/esbuild/issues/2480#issuecomment-1833104754\nconst safeESModule = <T,>(a: T | { default: T }): T => {\n  const b = a as any\n  const out = b.__esModule || b[Symbol.toStringTag] === 'Module' ? b.default : b\n  // add metro support\n  return out || a\n}\n\nconst Animated = safeESModule(Animated_)\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 createGuiAnimatedComponent(defaultTag = 'div') {\n  const isText = defaultTag === 'span'\n\n  const Component = Animated.createAnimatedComponent(\n    forwardRef((propsIn: any, ref) => {\n      const { forwardedRef, animation, render = defaultTag, ...propsRest } = propsIn\n      const hostRef = useRef(null)\n      const composedRefs = useComposedRefs(forwardedRef, ref, hostRef)\n      const stateRef = useRef<any>(null)\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 = render\n      const transformedProps = hooks.usePropsTransform?.(render, props, stateRef, false)\n\n      return <Element {...transformedProps} ref={composedRefs} />\n    })\n  )\n  Component['acceptRenderProp'] = true\n  return Component\n}\n\nconst AnimatedView = createGuiAnimatedComponent('div')\nconst AnimatedText = createGuiAnimatedComponent('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    needsCustomComponent: true,\n    View: isWeb ? AnimatedView : Animated.View,\n    Text: isWeb ? AnimatedText : Animated.Text,\n    // View: Animated.View,\n    // Text: Animated.Text,\n    isReactNative: true,\n    inputStyle: 'value',\n    outputStyle: 'inline',\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.transition)\n        ? props.transition[0]\n        : props.transition\n\n      const isHydrating = componentState.unmounted === true\n      const disableAnimation = isHydrating || !animationKey\n      const presenceContext = React.useContext(PresenceContext)\n      const [, themeState] = useThemeWithState({})\n      // Check scheme first, then fall back to checking theme name for 'dark'\n      const isDark = themeState?.scheme === 'dark' || themeState?.name?.startsWith('dark')\n\n      // this memo is very important for performance, there's a big cost to\n      // updating these values every render\n      const { dontAnimate, motiProps } = useMemo(() => {\n        let animate = {}\n        let dontAnimate = {}\n\n        if (disableAnimation) {\n          // Resolve dynamic objects based on current theme\n          for (const key in style) {\n            const rawValue = style[key]\n            const value = resolveDynamicValue(rawValue, isDark)\n            if (value === undefined) continue\n            dontAnimate[key] = value\n          }\n        } else {\n          const animateOnly = props.animateOnly as string[]\n          for (const key in style) {\n            const rawValue = style[key]\n            // Resolve dynamic theme values (like $theme-dark)\n            const value = resolveDynamicValue(rawValue, isDark)\n            if (value === undefined) continue\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          // Resolve dynamic objects based on current theme\n          for (const key in style) {\n            const rawValue = style[key]\n            const value = resolveDynamicValue(rawValue, isDark)\n            if (value === undefined) continue\n            dontAnimate[key] = value\n          }\n        }\n\n        const styles = animate\n        const isExiting = Boolean(presence?.[1])\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.transition)) {\n          const config = props.transition[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        return {\n          dontAnimate,\n          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      }, [\n        presenceContext,\n        presence,\n        animationKey,\n        componentState.unmounted,\n        JSON.stringify(style),\n        presenceContext,\n        isDark,\n      ])\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          animationProps,\n          motiProps,\n          moti,\n          style: [dontAnimate, moti.style],\n        })\n      }\n\n      return {\n        style: [dontAnimate, moti.style],\n      }\n    },\n  }\n}\n"
+  ]
+}

package/types/index.d.ts

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

package/types/index.d.ts.map

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

package/types/polyfill.d.ts

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

package/types/polyfill.d.ts.map

@@ -0,0 +1,11 @@
+{
+  "mappings": "",
+  "names": [],
+  "sources": [
+    "src/polyfill.ts"
+  ],
+  "version": 3,
+  "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"
+  ]
+}