support for react 19 and r3f v9

pmndrs · Jan 27, 2025 · 534dddb · 534dddb
1 parent 0a51e8a
commit 534dddb
Show file tree

Hide file tree

Showing 29 changed files with 7,323 additions and 9,133 deletions.
diff --git a/apps/html23/package.json b/apps/html23/package.json
@@ -2,6 +2,10 @@
   "name": "html23",
   "type": "module",
   "dependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "@babel/plugin-syntax-import-attributes": "^7.24.1",
     "@coconut-xr/koestlich": "^0.3.12",
     "@coconut-xr/natuerlich": "^0.0.51",
@@ -17,7 +21,6 @@
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@react-three/drei": "^9.96.1",
     "@react-three/postprocessing": "^2.16.2",
     "@react-three/uikit": "workspace:^",
     "@react-three/uikit-default": "workspace:^",
@@ -32,7 +35,6 @@
     "lucide-react": "^0.368.0",
     "prism-react-renderer": "^2.3.1",
     "prismjs": "^1.29.0",
-    "react-dom": "^18.2.0",
     "react-resizable-panels": "^2.0.17",
     "react-simple-code-editor": "^0.13.1",
     "shadcn-ui": "^0.8.0",

diff --git a/examples/apfel/package.json b/examples/apfel/package.json
@@ -2,16 +2,10 @@
   "type": "module",
   "dependencies": {
     "@preact/signals-core": "^1.5.1",
-    "@react-three/drei": "^9.96.1",
-    "@react-three/postprocessing": "^2.16.0",
-    "@react-three/rapier": "^1.3.0",
     "@react-three/uikit": "workspace:^",
     "@react-three/uikit-lucide": "workspace:^",
-    "@splinetool/r3f-spline": "^1.0.2",
     "@vitejs/plugin-basic-ssl": "^1.1.0",
-    "maath": "^0.10.7",
-    "r3f-perf": "^7.1.2",
-    "react-dom": "^18.2.0"
+    "maath": "^0.10.7"
   },
   "scripts": {
     "dev": "vite --host",

diff --git a/examples/auth/package.json b/examples/auth/package.json
@@ -1,12 +1,8 @@
 {
   "type": "module",
   "dependencies": {
-    "@react-three/drei": "^9.96.1",
-    "@react-three/postprocessing": "^2.16.0",
     "@react-three/uikit": "workspace:^",
-    "@react-three/uikit-lucide": "workspace:^",
-    "r3f-perf": "^7.1.2",
-    "react-dom": "^18.2.0"
+    "@react-three/uikit-lucide": "workspace:^"
   },
   "scripts": {
     "dev": "vite --host",

diff --git a/examples/auth/src/App.tsx b/examples/auth/src/App.tsx
@@ -11,7 +11,6 @@ import {
 import { Defaults, colors } from '@/theme.js'
 import { Button } from '@/button.js'
 import { UserAuthForm } from './components/user-auth-form.js'
-import { Perf } from 'r3f-perf'
 import { noEvents, PointerEvents } from '@react-three/xr'
 
 setPreferredColorScheme('light')
@@ -28,7 +27,6 @@ export default function App() {
       {...canvasInputProps}
     >
       <PointerEvents />
-      <Perf />
       {/*<Root backgroundColor={0xffffff} sizeX={8.34} sizeY={5.58} pixelSize={0.01}>
         <Defaults>
           <DialogAnchor>

diff --git a/examples/card/package.json b/examples/card/package.json
@@ -2,15 +2,15 @@
   "type": "module",
   "dependencies": {
     "@preact/signals-core": "^1.5.1",
-    "@react-three/drei": "^9.96.1",
-    "@react-three/postprocessing": "^2.16.0",
     "@react-three/rapier": "^1.3.0",
     "@react-three/uikit": "workspace:^",
     "@react-three/uikit-lucide": "workspace:^",
     "@splinetool/r3f-spline": "^1.0.2",
     "maath": "^0.10.7",
-    "r3f-perf": "^7.1.2",
-    "react-dom": "^18.2.0"
+    "react": "^18",
+    "react-dom": "^18",
+    "@types/react": "^18",
+    "@types/react-dom": "^18"
   },
   "scripts": {
     "dev": "vite --host",

diff --git a/examples/dashboard/package.json b/examples/dashboard/package.json
@@ -1,12 +1,8 @@
 {
   "type": "module",
   "dependencies": {
-    "@react-three/drei": "^9.96.1",
-    "@react-three/postprocessing": "^2.16.0",
     "@react-three/uikit": "workspace:^",
     "@react-three/uikit-lucide": "workspace:^",
-    "r3f-perf": "^7.1.2",
-    "react-dom": "^18.2.0",
     "vite-plugin-mkcert": "^1.17.4",
     "zustand": "^4.4.7"
   },

diff --git a/examples/default/package.json b/examples/default/package.json
@@ -2,11 +2,8 @@
   "type": "module",
   "dependencies": {
     "@preact/signals-core": "^1.5.1",
-    "@react-three/drei": "^9.96.1",
     "@react-three/uikit": "workspace:^",
-    "@react-three/uikit-lucide": "workspace:^",
-    "r3f-perf": "^7.1.2",
-    "react-dom": "^18.2.0"
+    "@react-three/uikit-lucide": "workspace:^"
   },
   "scripts": {
     "dev": "vite --host",

diff --git a/examples/lucide/package.json b/examples/lucide/package.json
@@ -1,10 +1,8 @@
 {
   "type": "module",
   "dependencies": {
-    "@react-three/drei": "^9.96.1",
     "@react-three/uikit": "workspace:^",
-    "@react-three/uikit-lucide": "workspace:^",
-    "react-dom": "^18.2.0"
+    "@react-three/uikit-lucide": "workspace:^"
   },
   "scripts": {
     "dev": "vite --host",

diff --git a/examples/market/package.json b/examples/market/package.json
@@ -1,12 +1,8 @@
 {
   "type": "module",
   "dependencies": {
-    "@react-three/drei": "^9.96.1",
-    "@react-three/postprocessing": "^2.16.0",
     "@react-three/uikit": "workspace:^",
     "@react-three/uikit-lucide": "workspace:^",
-    "r3f-perf": "^7.1.2",
-    "react-dom": "^18.2.0",
     "zustand": "^4.5.2"
   },
   "scripts": {

diff --git a/examples/market/src/App.tsx b/examples/market/src/App.tsx
@@ -1,10 +1,7 @@
-import { Environment, OrbitControls } from '@react-three/drei'
 import { Canvas, useFrame } from '@react-three/fiber'
-import { EffectComposer, TiltShift2 } from '@react-three/postprocessing'
-import { Root, Container, Image, Text, Fullscreen, DefaultProperties } from '@react-three/uikit'
+import { Container, Text, Fullscreen, DefaultProperties } from '@react-three/uikit'
 import { CirclePlus } from '@react-three/uikit-lucide'
 import { Defaults, colors } from '@/theme.js'
-import { DialogAnchor } from '@/dialog.js'
 import { Tabs, TabsList, TabsContent, TabsTrigger } from '@/tabs.js'
 import { Separator } from '@/separator.js'
 import { Button } from '@/button.js'
@@ -31,18 +28,6 @@ export default function App() {
       >
         <PointerEvents />
         <CountFrames />
-        {/*<Root backgroundColor={0xffffff} sizeX={8.34} sizeY={5.58} pixelSize={0.01}>
-        <Defaults>
-          <DialogAnchor>
-            <MarketPage />
-          </DialogAnchor>
-        </Defaults>
-      </Root>
-      <Environment background blur={1} preset="city" />
-      <EffectComposer>
-        <TiltShift2 blur={0.25} />
-      </EffectComposer>
-      <OrbitControls makeDefault />*/}
         <Fullscreen flexDirection="column">
           <Defaults>
             <DefaultProperties scrollbarWidth={8} scrollbarOpacity={0.1} scrollbarBorderRadius={4}>

diff --git a/examples/performance/package.json b/examples/performance/package.json
@@ -2,10 +2,7 @@
   "type": "module",
   "dependencies": {
     "@preact/signals-core": "^1.5.1",
-    "@react-three/drei": "^9.96.1",
     "@react-three/uikit": "workspace:^",
-    "r3f-perf": "^7.2.1",
-    "react-dom": "^18.2.0",
     "suspend-react": "^0.1.3"
   },
   "scripts": {

diff --git a/examples/performance/src/App.tsx b/examples/performance/src/App.tsx
@@ -1,7 +1,6 @@
 import { Canvas } from '@react-three/fiber'
 import { DefaultProperties, Container, Text, Root, ComponentInternals } from '@react-three/uikit'
 import { OrbitControls } from '@react-three/drei'
-import { Perf } from 'r3f-perf'
 import { noEvents, PointerEvents } from '@react-three/xr'
 import { suspend } from 'suspend-react'
 import { useEffect, useMemo, useRef } from 'react'

diff --git a/examples/uikit/package.json b/examples/uikit/package.json
@@ -2,10 +2,7 @@
   "type": "module",
   "dependencies": {
     "@preact/signals-core": "^1.5.1",
-    "@react-three/drei": "^9.96.1",
-    "@react-three/uikit": "workspace:^",
-    "r3f-perf": "^7.2.1",
-    "react-dom": "^18.2.0"
+    "@react-three/uikit": "workspace:^"
   },
   "scripts": {
     "dev": "vite --host"

diff --git a/examples/uikit/src/App.tsx b/examples/uikit/src/App.tsx
@@ -21,7 +21,6 @@ import {
 } from '@react-three/uikit'
 import { Texture } from 'three'
 import { Skeleton } from '../../../packages/kits/default/src/skeleton.js'
-import { Perf } from 'r3f-perf'
 import { noEvents, PointerEvents } from '@react-three/xr'
 
 export default function App() {
@@ -32,7 +31,7 @@ export default function App() {
   const t = useMemo(() => signal('X X\nX X'), [])
   const ref = useRef<ImageRef>(null)
   const [input, setInput] = useState<InputInternals | null>(null)
-  const videoRef = useRef<HTMLVideoElement | undefined>()
+  const videoRef = useRef<HTMLVideoElement | undefined>(undefined)
   const [videoel, setVideoEl] = useState<HTMLVideoElement | undefined>()
 
   useEffect(() => {
@@ -68,10 +67,9 @@ export default function App() {
             <color attach="background" args={['black']} />
             <ambientLight intensity={0.5} />
             <directionalLight intensity={10} position={[5, 1, 10]} />
-            <RenderTexture ref={(t) => (texture.value = t ?? undefined)}>
+            <RenderTexture ref={(t) => void (texture.value = t ?? undefined)}>
               <Box />
             </RenderTexture>
-            <Perf />
             {show && (
               <Fullscreen
                 renderOrder={10}

diff --git a/examples/vanilla/package.json b/examples/vanilla/package.json
@@ -2,8 +2,7 @@
   "type": "module",
   "dependencies": {
     "@pmndrs/uikit": "workspace:^",
-    "@pmndrs/uikit-lucide": "workspace:^",
-    "react-dom": "^18.2.0"
+    "@pmndrs/uikit-lucide": "workspace:^"
   },
   "scripts": {
     "dev": "vite --host"

diff --git a/package.json b/package.json
@@ -2,13 +2,14 @@
   "type": "module",
   "devDependencies": {
     "@react-three/eslint-plugin": "^0.1.1",
-    "@react-three/fiber": "^8.16.2",
+    "@react-three/fiber": "rc",
+    "@react-three/drei": "rc",
     "@types/chai": "^4.3.10",
     "@types/chai-as-promised": "^7.1.8",
     "@types/mocha": "^10.0.4",
     "@types/node": "^20.11.0",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "@types/three": "0.161.0",
     "@typescript-eslint/eslint-plugin": "^7.0.2",
     "@typescript-eslint/parser": "^7.0.2",
@@ -26,13 +27,14 @@
     "json": "^11.0.0",
     "mocha": "^10.2.0",
     "prettier": "^3.2.5",
-    "react": "^18.3.1",
+    "react": "^19",
+    "react-dom": "^19",
     "three": "0.161.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5",
-    "typescript-json-schema": "^0.63.0",
+    "typescript-json-schema": "^0.65.1",
     "vite": "^5.0.12",
     "vercel": "^34.1.8",
-    "@react-three/xr": "6.4.4"
+    "@react-three/xr": "^6.5.4"
   }
 }
diff --git a/packages/kits/apfel/src/tab-bar.tsx b/packages/kits/apfel/src/tab-bar.tsx
@@ -49,7 +49,7 @@ export const TabBar: (props: TabBarProperties & RefAttributes<ContainerRef>) =>
       [isExpanded, value],
     )
 
-    const timeoutRef = useRef<number>()
+    const timeoutRef = useRef<number>(undefined)
 
     return (
       <TabBarContext.Provider value={context}>

diff --git a/packages/kits/default/src/label.tsx b/packages/kits/default/src/label.tsx
@@ -1,19 +1,16 @@
-import { ContainerRef, DefaultProperties } from '@react-three/uikit'
-import React, { ReactNode, RefAttributes, forwardRef } from 'react'
+import { DefaultProperties } from '@react-three/uikit'
+import React, { ReactNode } from 'react'
 
 export type LabelProperties = { children?: ReactNode; disabled?: boolean }
 
-export const Label: (props: LabelProperties & RefAttributes<ContainerRef>) => ReactNode = forwardRef(
-  ({ disabled, ...props }, ref) => {
-    return (
-      <DefaultProperties
-        fontWeight="medium"
-        fontSize={14}
-        lineHeight="100%"
-        opacity={disabled ? 0.7 : undefined}
-        ref={ref}
-        {...props}
-      />
-    )
-  },
-)
+export function Label({ disabled, ...props }: LabelProperties) {
+  return (
+    <DefaultProperties
+      fontWeight="medium"
+      fontSize={14}
+      lineHeight="100%"
+      opacity={disabled ? 0.7 : undefined}
+      {...props}
+    />
+  )
+}
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -51,10 +51,8 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "@react-three/drei": "^9.96.1",
+    "@react-three/fiber": "rc",
     "@types/prompts": "^2.4.9",
-    "@types/react-dom": "^18.2.18",
-    "react-dom": "^18.2.0",
     "replace-in-files-cli": "^2.2.0"
   }
 }
diff --git a/packages/react/src/convert/html/preview.tsx b/packages/react/src/convert/html/preview.tsx
@@ -21,7 +21,7 @@ export type ConversionComponentMap = ConversionComponentMapWihoutRenderAsCompone
 
 export type CustomHook = (
   element: ConversionNode | undefined,
-  ref: RefObject<ComponentInternals>,
+  ref: RefObject<ComponentInternals | null>,
   properties: Record<string, unknown>,
 ) => Record<string, unknown>
 

diff --git a/packages/react/src/portal.tsx b/packages/react/src/portal.tsx
@@ -181,7 +181,7 @@ export const Portal: (props: PortalProperties & RefAttributes<PortalRef>) => Rea
 )
 
 function uvCompute(
-  { current }: RefObject<ComponentInternals<ImageProperties>>,
+  { current }: RefObject<ComponentInternals<ImageProperties> | null>,
   event: DomEvent,
   state: RootState,
   previous?: RootState,
@@ -211,7 +211,7 @@ function ChildrenToFBO({
   renderPriority: number
   children: ReactNode
   fbo: Signal<WebGLRenderTarget | undefined>
-  imageRef: RefObject<ComponentInternals>
+  imageRef: RefObject<ComponentInternals | null>
 }) {
   const store = useStore()