React 19-compatible types (#2930)

* Incorporating makefile changes

* Fixing ref types and replacing ReactHTML reference in Reorder

* Updating types

* Changing HTML types

* Fixing tests

CHANGELOG.md

@@ -4,6 +4,12 @@ Motion adheres to [Semantic Versioning](http://semver.org/).
 
 Undocumented APIs should be considered internal and may change without warning.
 
+## [11.13.3] 2024-12-09
+
+### Fixed
+
+-   Attempting to update types to be compatible with both React 18 and 19.
+
 ## [11.13.2] 2024-12-04
 
 ### Fixed

Makefile

@@ -28,7 +28,7 @@ WORKTREE_NODE_MODULES := $(BASE_DIR)/node_modules/.yarn-state.yml
 WORKSPACE_NODE_MODULES := node_modules
 
 # Update node modules if package.json is newer than node_modules or yarn lockfile
-$(WORKTREE_NODE_MODULES) $(WORKSPACE_NODE_MODULES): $(BASE_DIR)/yarn.lock package.json packages/framer-motion/package.json packages/framer-motion-3d/package.json
+$(WORKTREE_NODE_MODULES) $(WORKSPACE_NODE_MODULES): $(BASE_DIR)/yarn.lock package.json packages/framer-motion/package.json
 	yarn install
 	touch $@
 
@@ -38,8 +38,6 @@ $(WORKTREE_NODE_MODULES) $(WORKSPACE_NODE_MODULES): $(BASE_DIR)/yarn.lock packag
 # Makefile
 bootstrap:: $(WORKTREE_NODE_MODULES)
 
-SOURCE_FILES := $(shell find packages/framer-motion/src packages/framer-motion-3d/src -type f)
-
 ######
 
 # The location to gather test reports

dev/html/public/optimized-appear/portal.html

@@ -92,7 +92,7 @@
                 (animation) => {
                     // Hydrate root mid-way through animation
                     setTimeout(() => {
-                        ReactDOM.createRoot(
+                        ReactDOMClient.createRoot(
                             document.getElementById("portal")
                         ).render(
                             React.createElement(motion.div, {

dev/react/src/examples/Drag-constraints-ref-small-container-layout.tsx

@@ -16,7 +16,7 @@ const child = {
 }
 
 export const App = () => {
-    const ref = useRef()
+    const ref = useRef(null)
     return (
         <div ref={ref} style={container}>
             <motion.div

dev/react/src/examples/Drag-constraints-ref-small-container.tsx

@@ -16,7 +16,7 @@ const child = {
 }
 
 export const App = () => {
-    const ref = useRef()
+    const ref = useRef(null)
     return (
         <div ref={ref} style={container}>
             <motion.div

dev/react/src/examples/Drag-constraints-ref.tsx

@@ -46,7 +46,7 @@ const SiblingLayoutAnimation = () => {
 }
 
 export const App = () => {
-    const ref = useRef()
+    const ref = useRef(null)
     const [count, setCount] = useState(0)
     return (
         <>

dev/react/src/main.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from "react"
+import ReactDOMClient from "react-dom/client"
+import App from "./App.tsx"
+import "./index.css"
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+ReactDOMClient.createRoot(document.getElementById("root")!).render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
 )

dev/react/src/tests/scroll-callback-element-x.tsx

@@ -6,7 +6,7 @@ const width = 400
 
 export const App = () => {
     const [progress, setProgress] = useState(0)
-    const ref = useRef<Element>(null)
+    const ref = useRef<HTMLDivElement>(null)
 
     useEffect(() => {
         if (!ref.current) return

dev/react/src/tests/scroll-callback-element.tsx

@@ -6,9 +6,10 @@ const height = 400
 
 export const App = () => {
     const [progress, setProgress] = useState(0)
-    const ref = useRef(null)
+    const ref = useRef<HTMLDivElement>(null)
 
     useEffect(() => {
+        if (!ref.current) return
         return scroll(setProgress, { source: ref.current })
     }, [])
 

packages/framer-motion-3d/src/components/MotionCanvas.tsx

@@ -127,7 +127,7 @@ function CanvasComponent(
     // Throw exception outwards if anything within canvas throws
     if (error) throw error
 
-    const root = useRef<ReconcilerRoot<HTMLCanvasElement>>()
+    const root = useRef<ReconcilerRoot<HTMLCanvasElement> | null>(null)
     if (size.width > 0 && size.height > 0) {
         if (!root.current) {
             root.current = createRoot(canvasRef.current)

packages/framer-motion-3d/src/components/use-layout-camera.ts

@@ -31,7 +31,7 @@ export function useLayoutCamera<CameraType>(
     const size = useThree((three) => three.size)
     const gl = useThree((three) => three.gl)
     const { visualElement: parentVisualElement } = useContext(MotionContext)
-    const measuredLayoutSize = useRef<Size>()
+    const measuredLayoutSize = useRef<Size | undefined>(undefined)
 
     useLayoutEffect(() => {
         measuredLayoutSize.current = size

packages/framer-motion/src/components/Reorder/Group.tsx

@@ -2,13 +2,8 @@
 
 import { invariant } from "motion-utils"
 import * as React from "react"
-import {
-    forwardRef,
-    FunctionComponent,
-    ReactHTML,
-    useEffect,
-    useRef,
-} from "react"
+import { forwardRef, FunctionComponent, useEffect, useRef } from "react"
+import type { HTMLElements } from "../../render/html/supported-elements"
 import { ReorderContext } from "../../context/ReorderContext"
 import { motion } from "../../render/components/motion/proxy"
 import { HTMLMotionProps } from "../../render/html/types"
@@ -22,7 +17,7 @@ export interface Props<V> {
      *
      * @public
      */
-    as?: keyof ReactHTML
+    as?: keyof HTMLElements
 
     /**
      * The axis to reorder along. By default, items will be draggable on this axis.

packages/framer-motion/src/components/Reorder/Item.tsx

@@ -2,22 +2,23 @@
 
 import { invariant } from "motion-utils"
 import * as React from "react"
-import { ReactHTML, FunctionComponent, useContext, forwardRef } from "react"
+import { FunctionComponent, useContext, forwardRef } from "react"
 import { ReorderContext } from "../../context/ReorderContext"
 import { motion } from "../../render/components/motion/proxy"
 import { HTMLMotionProps } from "../../render/html/types"
 import { useConstant } from "../../utils/use-constant"
 import { useMotionValue } from "../../value/use-motion-value"
 import { useTransform } from "../../value/use-transform"
 import { isMotionValue } from "../../value/utils/is-motion-value"
+import { HTMLElements } from "../../render/html/supported-elements"
 
 export interface Props<V> {
     /**
      * A HTML element to render this component as. Defaults to `"li"`.
      *
      * @public
      */
-    as?: keyof ReactHTML
+    as?: keyof HTMLElements
 
     /**
      * The value in the list that this component represents.

packages/framer-motion/src/events/use-dom-event.ts

@@ -23,7 +23,7 @@ import { addDomEvent } from "./add-dom-event"
  * @public
  */
 export function useDomEvent(
-    ref: RefObject<EventTarget>,
+    ref: RefObject<EventTarget | null>,
     eventName: string,
     handler?: EventListener | undefined,
     options?: AddEventListenerOptions

packages/framer-motion/src/gestures/drag/types.ts

@@ -188,7 +188,7 @@ export interface DraggableProps extends DragHandlers {
      * }
      * ```
      */
-    dragConstraints?: false | Partial<BoundingBox> | RefObject<Element>
+    dragConstraints?: false | Partial<BoundingBox> | RefObject<Element | null>
 
     /**
      * The degree of movement allowed outside constraints. 0 = no movement, 1 =

packages/framer-motion/src/motion/features/viewport/types.ts

@@ -7,7 +7,7 @@ export type ViewportEventHandler = (
 ) => void
 
 export interface ViewportOptions {
-    root?: RefObject<Element>
+    root?: RefObject<Element | null>
     once?: boolean
     margin?: string
     amount?: "some" | "all" | number

packages/framer-motion/src/motion/utils/use-visual-element.ts

@@ -30,7 +30,7 @@ export function useVisualElement<Instance, RenderState>(
     const presenceContext = useContext(PresenceContext)
     const reducedMotionConfig = useContext(MotionConfigContext).reducedMotion
 
-    const visualElementRef = useRef<VisualElement<Instance>>()
+    const visualElementRef = useRef<VisualElement<Instance> | null>(null)
 
     /**
      * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
@@ -137,7 +137,7 @@ export function useVisualElement<Instance, RenderState>(
         }
     })
 
-    return visualElement
+    return visualElement!
 }
 
 function createProjectionNode(