fix(types): import JSX to support React 19 / fix animated.div type error (pmndrs#2358)

React 19 moved the JSX namespace from global scope to the React module. This updates type definitions to explicitly import the `JSX` type from 'react', resolving issues issues for consumers using React 19+.

Note: Backwards-compatible with React 18.

Author: liambickett

packages/animated/src/withAnimated.tsx

@@ -66,7 +66,7 @@ export const withAnimated = (Component: any, host: HostConfig) => {
 
     const observer = new PropsObserver(callback, deps)
 
-    const observerRef = useRef<PropsObserver>(null)
+    const observerRef = useRef<PropsObserver | null>(null)
     useIsomorphicLayoutEffect(() => {
       observerRef.current = observer
 

packages/core/src/hooks/useSpring.test.tsx

@@ -139,7 +139,7 @@ function createUpdater(Component: React.ComponentType<{ args: [any, any?] }>) {
     }
   })
 
-  function renderWithContext(elem: JSX.Element) {
+  function renderWithContext(elem: React.JSX.Element) {
     const wrapped = (
       <SpringContextProvider {...context}>{elem}</SpringContextProvider>
     )

packages/core/src/types/transition.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import { ReactNode, JSX } from 'react'
 import {
   Lookup,
   ObjectFromUnion,

packages/shared/src/hooks/useMemoOne.ts

@@ -14,7 +14,7 @@ export function useMemoOne<T>(getResult: () => T, inputs?: any[]): T {
     })
   )
 
-  const committed = useRef<Cache<T>>(null)
+  const committed = useRef<Cache<T> | null>(null)
   const prevCache = committed.current
 
   let cache = prevCache

targets/three/src/animated.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { CSSProperties, ForwardRefExoticComponent, FC } from 'react'
+import { CSSProperties, ForwardRefExoticComponent, FC, JSX } from 'react'
 import {
   AssignableKeys,
   ComponentPropsWithRef,

targets/three/src/index.ts

@@ -19,7 +19,10 @@ addEffect(() => {
 })
 
 const host = createHost(primitives, {
-  applyAnimatedValues: applyProps,
+  applyAnimatedValues: (instance, props) => {
+    applyProps(instance, props)
+    return
+  },
 })
 
 export const animated = host.animated as WithAnimated

targets/three/src/primitives.ts

@@ -1,5 +1,6 @@
 import * as THREE from 'three'
 import '@react-three/fiber'
+import { JSX } from 'react'
 
 export type Primitives = keyof JSX.IntrinsicElements
 

targets/web/src/primitives.ts

@@ -1,3 +1,5 @@
+import { JSX } from 'react'
+
 export type Primitives = keyof JSX.IntrinsicElements
 export const primitives: Primitives[] = [
   'a',