React 19

Upgrade React 19

Upgrading React 19

fixing gitignore

Updating import

Fixing 3D types

Fixing conflict

Fixing conflicts

Fixing willChange

v12.0.0-alpha.1

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,7 +38,7 @@ $(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)
+SOURCE_FILES := $(shell find packages/framer-motion/src -type f)
 
 ######
 
@@ -47,7 +47,6 @@ TEST_REPORT_PATH := $(if $(CIRCLE_TEST_REPORTS),$(CIRCLE_TEST_REPORTS),$(CURDIR)
 
 build: bootstrap
 	cd packages/framer-motion && yarn build
-	cd packages/framer-motion-3d && yarn build
 
 watch: bootstrap
 	cd packages/framer-motion && yarn watch

dev/html/package.json

@@ -1,7 +1,7 @@
 {
     "name": "html-env",
     "private": true,
-    "version": "11.11.12",
+    "version": "12.0.0-alpha.1",
     "type": "module",
     "scripts": {
         "dev": "vite",

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/next/package.json

@@ -1,15 +1,15 @@
 {
     "name": "next-env",
     "private": true,
-    "version": "11.11.18",
+    "version": "12.0.0-alpha.1",
     "type": "module",
     "scripts": {
         "dev": "next dev",
         "dev-server": "next dev",
         "start": "next start"
     },
     "dependencies": {
-        "framer-motion": "^11.11.18",
+        "framer-motion": "^12.0.0-alpha.1",
         "next": "14.x",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"

dev/react/package.json

@@ -1,7 +1,7 @@
 {
     "name": "react-env",
     "private": true,
-    "version": "11.11.18",
+    "version": "12.0.0-alpha.1",
     "type": "module",
     "scripts": {
         "dev": "vite",
@@ -11,9 +11,9 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "framer-motion": "^11.11.18",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1"
+        "framer-motion": "^12.0.0-alpha.1",
+        "react": "rc",
+        "react-dom": "rc"
     },
     "devDependencies": {
         "@types/react": "^18.2.66",

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(undefined)
     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(undefined)
     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(undefined)
     const [count, setCount] = useState(0)
     return (
         <>

dev/react/src/examples/Drag-external-handlers.tsx

@@ -33,7 +33,7 @@ const child: React.CSSProperties = {
 }
 
 export const App = () => {
-    const ref = useRef()
+    const ref = useRef(undefined)
     const x = useMotionValue(0)
     const y = useMotionValue(0)
     const transform = useMotionTemplate`translate3d(${x}px, ${y}px, 0)`

dev/react/src/tests/drag-ref-constraints-resize.tsx

@@ -20,7 +20,7 @@ const child = {
 }
 
 export const App = () => {
-    const ref = useRef()
+    const ref = useRef(undefined)
     const [count, setCount] = useState(0)
     return (
         <div ref={ref} style={container} id="constraints">

lerna.json

@@ -1,8 +1,6 @@
 {
-    "version": "11.11.18",
-    "packages": [
-        "packages/*"
-    ],
+    "version": "12.0.0-alpha.1",
+    "packages": ["packages/*"],
     "npmClient": "yarn",
     "useWorkspaces": true
 }

package.json

@@ -8,6 +8,10 @@
         "packages/*",
         "dev/*"
     ],
+    "resolutions": {
+        "@types/react": "npm:types-react@rc",
+        "@types/react-dom": "npm:types-react-dom@rc"
+    },
     "scripts": {
         "build": "turbo run build",
         "watch": "turbo run watch",
@@ -23,7 +27,6 @@
         "new-alpha": "turbo run build && lerna publish from-package --canary --preid alpha"
     },
     "devDependencies": {
-        "@cypress/webpack-preprocessor": "^6.0.1",
         "@gsap/react": "^2.1.0",
         "@rollup/plugin-alias": "^5.1.0",
         "@rollup/plugin-node-resolve": "^15.2.3",
@@ -33,15 +36,14 @@
         "@testing-library/react": "16.0.1",
         "@types/jest": "^29.5.12",
         "@types/node": "^18.6.3",
-        "@types/react": "latest",
-        "@types/react-dom": "latest",
+        "@types/react": "npm:types-react@rc",
+        "@types/react-dom": "npm:types-react-dom@rc",
         "@types/styled-components": "^5.1.25",
         "@typescript-eslint/eslint-plugin": "^7.4.0",
         "@typescript-eslint/parser": "^7.4.0",
         "animejs": "^3.2.2",
         "bundlesize": "^0.18.1",
         "concurrently": "^7.3.0",
-        "convert-tsconfig-paths-to-webpack-aliases": "^0.9.2",
         "cypress": "4",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^8.5.0",
@@ -56,12 +58,10 @@
         "jest-junit": "^16.0.0",
         "jest-watch-typeahead": "^2.2.2",
         "lerna": "^4.0.0",
-        "lint-staged": "^8.0.4",
-        "path-browserify": "^1.0.1",
         "prettier": "^2.5.1",
-        "react": "^18.3.1",
+        "react": "rc",
         "react-dev-utils": "^12.0.1",
-        "react-dom": "^18.3.1",
+        "react-dom": "rc",
         "rollup": "4.14.0",
         "rollup-plugin-analyzer": "^4.0.0",
         "rollup-plugin-dts": "6.1.0",

packages/framer-motion-3d/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion-3d",
-    "version": "11.11.18",
+    "version": "12.0.0-alpha.1",
     "description": "A simple and powerful React animation library for @react-three/fiber",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -45,20 +45,19 @@
         "postpublish": "git push --tags"
     },
     "dependencies": {
-        "framer-motion": "^11.11.18",
+        "framer-motion": "^12.0.0-alpha.1",
         "react-merge-refs": "^2.0.1"
     },
     "peerDependencies": {
-        "@react-three/fiber": "8.2.2",
-        "react": ">=18.0",
-        "react-dom": ">=18.0",
-        "three": ">=0.133"
+        "@react-three/fiber": "9.0.0-beta.0",
+        "react": ">=19.0",
+        "react-dom": ">=19.0",
+        "three": ">=0.141"
     },
     "devDependencies": {
-        "@react-three/fiber": "8.2.2",
+        "@react-three/fiber": "9.0.0-beta.0",
         "@react-three/test-renderer": "^9.0.0",
         "@rollup/plugin-commonjs": "^22.0.1",
-        "three": "^0.137.0"
-    },
-    "gitHead": "eeb1cc452e2b468d838ec76fd501b131b383c5c9"
+        "three": "^0.141.0"
+    }
 }

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

@@ -1,6 +1,6 @@
 "use client"
 
-import { forwardRef } from "react"
+import { forwardRef, type JSX } from "react"
 import { PerspectiveCamera as PerspectiveCameraImpl } from "three"
 import { mergeRefs } from "react-merge-refs"
 import { LayoutCameraProps } from "./types"

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

@@ -1,6 +1,6 @@
 "use client"
 
-import { forwardRef } from "react"
+import { forwardRef, type JSX } from "react"
 import { OrthographicCamera as OrthographicCameraImpl } from "three"
 import { mergeRefs } from "react-merge-refs"
 import { motion } from "../render/motion"

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>>(undefined)
     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)
 
     useLayoutEffect(() => {
         measuredLayoutSize.current = size
@@ -118,5 +118,5 @@ export function useLayoutCamera<CameraType>(
         }
     }, [camera, layoutCamera, makeDefault, set])
 
-    return { size, camera, cameraRef: layoutCamera as RefObject<CameraType> }
+    return { size, camera, cameraRef: layoutCamera as RefObject<CameraType | null> };
 }

packages/framer-motion-3d/src/render/__tests__/index.test.tsx

@@ -1,7 +1,7 @@
 import { ResolvedValues, frame } from "framer-motion"
 import { useEffect, useRef } from "react"
 import { Euler, Vector3 } from "three"
-import { Canvas, Object3DNode } from "@react-three/fiber"
+import { Canvas } from "@react-three/fiber"
 import ReactThreeTestRenderer from "@react-three/test-renderer"
 import { render } from "../../../jest.setup"
 import { motion } from "../motion"
@@ -156,7 +156,7 @@ describe("motion for three", () => {
     })
 
     test("Accepts motion values", async () => {
-        const result = await new Promise<Object3DNode<any, any>>((resolve) => {
+        const result = await new Promise<any>((resolve) => {
             const x = motionValue(1)
             const scale = motionValue(2)
             const rotateX = motionValue(3)

packages/framer-motion-3d/src/render/create-visual-element.ts

@@ -5,7 +5,7 @@ import type {
 } from "framer-motion"
 
 import { createBox, VisualElement } from "framer-motion"
-import { Object3DNode } from "@react-three/fiber"
+import { Object3D } from "three"
 
 import { setThreeValue } from "./utils/set-value"
 import { readThreeValue } from "./utils/read-value"
@@ -15,24 +15,21 @@ import { scrapeMotionValuesFromProps } from "./utils/scrape-motion-value"
 export const createRenderState = () => ({})
 
 export class ThreeVisualElement extends VisualElement<
-    Object3DNode<any, any>,
+    Object3D,
     ThreeRenderState,
     {}
 > {
     type = "three"
 
-    readValueFromInstance(instance: Object3DNode<any, any>, key: string) {
+    readValueFromInstance(instance: Object3D, key: string) {
         return readThreeValue(instance, key)
     }
 
     getBaseTargetFromProps() {
         return undefined
     }
 
-    sortInstanceNodePosition(
-        a: Object3DNode<any, any>,
-        b: Object3DNode<any, any>
-    ) {
+    sortInstanceNodePosition(a: Object3D, b: Object3D) {
         return a.id - b.id
     }
 
@@ -46,14 +43,11 @@ export class ThreeVisualElement extends VisualElement<
 
     build(state: ThreeRenderState, latestValues: ResolvedValues) {
         for (const key in latestValues) {
-            state[key] = latestValues[key]
+            state[key as keyof ThreeRenderState] = latestValues[key] as any
         }
     }
 
-    renderInstance(
-        instance: Object3DNode<any, any>,
-        renderState: ThreeRenderState
-    ) {
+    renderInstance(instance: Object3D, renderState: ThreeRenderState) {
         for (const key in renderState) {
             setThreeValue(instance, key, renderState)
         }

packages/framer-motion-3d/src/render/gestures/use-hover.ts

@@ -1,6 +1,6 @@
 import type { VisualElement } from "framer-motion"
 import type { ThreeMotionProps } from "../../types"
-import { MeshProps, ThreeEvent } from "@react-three/fiber"
+import { EventHandlers, ThreeEvent } from "@react-three/fiber"
 
 export function useHover(
     isStatic: boolean,
@@ -10,7 +10,7 @@ export function useHover(
         onHoverEnd,
         onPointerOver,
         onPointerOut,
-    }: ThreeMotionProps & MeshProps,
+    }: ThreeMotionProps & EventHandlers,
     visualElement?: VisualElement
 ) {
     const isHoverEnabled = whileHover || onHoverStart || onHoverEnd

packages/framer-motion-3d/src/render/gestures/use-tap.ts

@@ -1,4 +1,4 @@
-import { MeshProps } from "@react-three/fiber"
+import { EventHandlers } from "@react-three/fiber"
 import { useRef } from "react"
 import {
     addPointerEvent,
@@ -17,7 +17,7 @@ export function useTap(
         onTap,
         onTapCancel,
         onPointerDown,
-    }: ThreeMotionProps & MeshProps,
+    }: ThreeMotionProps & EventHandlers,
     visualElement?: VisualElement
 ) {
     const isTapEnabled = onTap || onTapStart || onTapCancel || whileTap