Skip to content

Commit 534dddb

Browse files
bbohlenderbbohlender
committed
support for react 19 and r3f v9
1 parent 0a51e8a commit 534dddb

File tree

29 files changed

+7323
-9133
lines changed

29 files changed

+7323
-9133
lines changed

‎apps/html23/package.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
"name": "html23",
33
"type": "module",
44
"dependencies": {
5+
"react": "^18",
6+
"react-dom": "^18",
7+
"@types/react": "^18",
8+
"@types/react-dom": "^18",
59
"@babel/plugin-syntax-import-attributes": "^7.24.1",
610
"@coconut-xr/koestlich": "^0.3.12",
711
"@coconut-xr/natuerlich": "^0.0.51",
@@ -17,7 +21,6 @@
1721
"@radix-ui/react-switch": "^1.0.3",
1822
"@radix-ui/react-toast": "^1.1.5",
1923
"@radix-ui/react-tooltip": "^1.0.7",
20-
"@react-three/drei": "^9.96.1",
2124
"@react-three/postprocessing": "^2.16.2",
2225
"@react-three/uikit": "workspace:^",
2326
"@react-three/uikit-default": "workspace:^",
@@ -32,7 +35,6 @@
3235
"lucide-react": "^0.368.0",
3336
"prism-react-renderer": "^2.3.1",
3437
"prismjs": "^1.29.0",
35-
"react-dom": "^18.2.0",
3638
"react-resizable-panels": "^2.0.17",
3739
"react-simple-code-editor": "^0.13.1",
3840
"shadcn-ui": "^0.8.0",

‎examples/apfel/package.json

+1-7
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,10 @@
22
"type": "module",
33
"dependencies": {
44
"@preact/signals-core": "^1.5.1",
5-
"@react-three/drei": "^9.96.1",
6-
"@react-three/postprocessing": "^2.16.0",
7-
"@react-three/rapier": "^1.3.0",
85
"@react-three/uikit": "workspace:^",
96
"@react-three/uikit-lucide": "workspace:^",
10-
"@splinetool/r3f-spline": "^1.0.2",
117
"@vitejs/plugin-basic-ssl": "^1.1.0",
12-
"maath": "^0.10.7",
13-
"r3f-perf": "^7.1.2",
14-
"react-dom": "^18.2.0"
8+
"maath": "^0.10.7"
159
},
1610
"scripts": {
1711
"dev": "vite --host",

‎examples/auth/package.json

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
{
22
"type": "module",
33
"dependencies": {
4-
"@react-three/drei": "^9.96.1",
5-
"@react-three/postprocessing": "^2.16.0",
64
"@react-three/uikit": "workspace:^",
7-
"@react-three/uikit-lucide": "workspace:^",
8-
"r3f-perf": "^7.1.2",
9-
"react-dom": "^18.2.0"
5+
"@react-three/uikit-lucide": "workspace:^"
106
},
117
"scripts": {
128
"dev": "vite --host",

‎examples/auth/src/App.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {
1111
import { Defaults, colors } from '@/theme.js'
1212
import { Button } from '@/button.js'
1313
import { UserAuthForm } from './components/user-auth-form.js'
14-
import { Perf } from 'r3f-perf'
1514
import { noEvents, PointerEvents } from '@react-three/xr'
1615

1716
setPreferredColorScheme('light')
@@ -28,7 +27,6 @@ export default function App() {
2827
{...canvasInputProps}
2928
>
3029
<PointerEvents />
31-
<Perf />
3230
{/*<Root backgroundColor={0xffffff} sizeX={8.34} sizeY={5.58} pixelSize={0.01}>
3331
<Defaults>
3432
<DialogAnchor>

‎examples/card/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
"type": "module",
33
"dependencies": {
44
"@preact/signals-core": "^1.5.1",
5-
"@react-three/drei": "^9.96.1",
6-
"@react-three/postprocessing": "^2.16.0",
75
"@react-three/rapier": "^1.3.0",
86
"@react-three/uikit": "workspace:^",
97
"@react-three/uikit-lucide": "workspace:^",
108
"@splinetool/r3f-spline": "^1.0.2",
119
"maath": "^0.10.7",
12-
"r3f-perf": "^7.1.2",
13-
"react-dom": "^18.2.0"
10+
"react": "^18",
11+
"react-dom": "^18",
12+
"@types/react": "^18",
13+
"@types/react-dom": "^18"
1414
},
1515
"scripts": {
1616
"dev": "vite --host",

‎examples/dashboard/package.json

-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
{
22
"type": "module",
33
"dependencies": {
4-
"@react-three/drei": "^9.96.1",
5-
"@react-three/postprocessing": "^2.16.0",
64
"@react-three/uikit": "workspace:^",
75
"@react-three/uikit-lucide": "workspace:^",
8-
"r3f-perf": "^7.1.2",
9-
"react-dom": "^18.2.0",
106
"vite-plugin-mkcert": "^1.17.4",
117
"zustand": "^4.4.7"
128
},

‎examples/default/package.json

+1-4
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,8 @@
22
"type": "module",
33
"dependencies": {
44
"@preact/signals-core": "^1.5.1",
5-
"@react-three/drei": "^9.96.1",
65
"@react-three/uikit": "workspace:^",
7-
"@react-three/uikit-lucide": "workspace:^",
8-
"r3f-perf": "^7.1.2",
9-
"react-dom": "^18.2.0"
6+
"@react-three/uikit-lucide": "workspace:^"
107
},
118
"scripts": {
129
"dev": "vite --host",

‎examples/lucide/package.json

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
{
22
"type": "module",
33
"dependencies": {
4-
"@react-three/drei": "^9.96.1",
54
"@react-three/uikit": "workspace:^",
6-
"@react-three/uikit-lucide": "workspace:^",
7-
"react-dom": "^18.2.0"
5+
"@react-three/uikit-lucide": "workspace:^"
86
},
97
"scripts": {
108
"dev": "vite --host",

‎examples/market/package.json

-4
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
{
22
"type": "module",
33
"dependencies": {
4-
"@react-three/drei": "^9.96.1",
5-
"@react-three/postprocessing": "^2.16.0",
64
"@react-three/uikit": "workspace:^",
75
"@react-three/uikit-lucide": "workspace:^",
8-
"r3f-perf": "^7.1.2",
9-
"react-dom": "^18.2.0",
106
"zustand": "^4.5.2"
117
},
128
"scripts": {

‎examples/market/src/App.tsx

+1-16
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
1-
import { Environment, OrbitControls } from '@react-three/drei'
21
import { Canvas, useFrame } from '@react-three/fiber'
3-
import { EffectComposer, TiltShift2 } from '@react-three/postprocessing'
4-
import { Root, Container, Image, Text, Fullscreen, DefaultProperties } from '@react-three/uikit'
2+
import { Container, Text, Fullscreen, DefaultProperties } from '@react-three/uikit'
53
import { CirclePlus } from '@react-three/uikit-lucide'
64
import { Defaults, colors } from '@/theme.js'
7-
import { DialogAnchor } from '@/dialog.js'
85
import { Tabs, TabsList, TabsContent, TabsTrigger } from '@/tabs.js'
96
import { Separator } from '@/separator.js'
107
import { Button } from '@/button.js'
@@ -31,18 +28,6 @@ export default function App() {
3128
>
3229
<PointerEvents />
3330
<CountFrames />
34-
{/*<Root backgroundColor={0xffffff} sizeX={8.34} sizeY={5.58} pixelSize={0.01}>
35-
<Defaults>
36-
<DialogAnchor>
37-
<MarketPage />
38-
</DialogAnchor>
39-
</Defaults>
40-
</Root>
41-
<Environment background blur={1} preset="city" />
42-
<EffectComposer>
43-
<TiltShift2 blur={0.25} />
44-
</EffectComposer>
45-
<OrbitControls makeDefault />*/}
4631
<Fullscreen flexDirection="column">
4732
<Defaults>
4833
<DefaultProperties scrollbarWidth={8} scrollbarOpacity={0.1} scrollbarBorderRadius={4}>

‎examples/performance/package.json

-3
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@
22
"type": "module",
33
"dependencies": {
44
"@preact/signals-core": "^1.5.1",
5-
"@react-three/drei": "^9.96.1",
65
"@react-three/uikit": "workspace:^",
7-
"r3f-perf": "^7.2.1",
8-
"react-dom": "^18.2.0",
96
"suspend-react": "^0.1.3"
107
},
118
"scripts": {

‎examples/performance/src/App.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Canvas } from '@react-three/fiber'
22
import { DefaultProperties, Container, Text, Root, ComponentInternals } from '@react-three/uikit'
33
import { OrbitControls } from '@react-three/drei'
4-
import { Perf } from 'r3f-perf'
54
import { noEvents, PointerEvents } from '@react-three/xr'
65
import { suspend } from 'suspend-react'
76
import { useEffect, useMemo, useRef } from 'react'

‎examples/uikit/package.json

+1-4
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@
22
"type": "module",
33
"dependencies": {
44
"@preact/signals-core": "^1.5.1",
5-
"@react-three/drei": "^9.96.1",
6-
"@react-three/uikit": "workspace:^",
7-
"r3f-perf": "^7.2.1",
8-
"react-dom": "^18.2.0"
5+
"@react-three/uikit": "workspace:^"
96
},
107
"scripts": {
118
"dev": "vite --host"

‎examples/uikit/src/App.tsx

+2-4
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import {
2121
} from '@react-three/uikit'
2222
import { Texture } from 'three'
2323
import { Skeleton } from '../../../packages/kits/default/src/skeleton.js'
24-
import { Perf } from 'r3f-perf'
2524
import { noEvents, PointerEvents } from '@react-three/xr'
2625

2726
export default function App() {
@@ -32,7 +31,7 @@ export default function App() {
3231
const t = useMemo(() => signal('X X\nX X'), [])
3332
const ref = useRef<ImageRef>(null)
3433
const [input, setInput] = useState<InputInternals | null>(null)
35-
const videoRef = useRef<HTMLVideoElement | undefined>()
34+
const videoRef = useRef<HTMLVideoElement | undefined>(undefined)
3635
const [videoel, setVideoEl] = useState<HTMLVideoElement | undefined>()
3736

3837
useEffect(() => {
@@ -68,10 +67,9 @@ export default function App() {
6867
<color attach="background" args={['black']} />
6968
<ambientLight intensity={0.5} />
7069
<directionalLight intensity={10} position={[5, 1, 10]} />
71-
<RenderTexture ref={(t) => (texture.value = t ?? undefined)}>
70+
<RenderTexture ref={(t) => void (texture.value = t ?? undefined)}>
7271
<Box />
7372
</RenderTexture>
74-
<Perf />
7573
{show && (
7674
<Fullscreen
7775
renderOrder={10}

‎examples/vanilla/package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
"type": "module",
33
"dependencies": {
44
"@pmndrs/uikit": "workspace:^",
5-
"@pmndrs/uikit-lucide": "workspace:^",
6-
"react-dom": "^18.2.0"
5+
"@pmndrs/uikit-lucide": "workspace:^"
76
},
87
"scripts": {
98
"dev": "vite --host"

‎package.json

+8-6
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,14 @@
22
"type": "module",
33
"devDependencies": {
44
"@react-three/eslint-plugin": "^0.1.1",
5-
"@react-three/fiber": "^8.16.2",
5+
"@react-three/fiber": "rc",
6+
"@react-three/drei": "rc",
67
"@types/chai": "^4.3.10",
78
"@types/chai-as-promised": "^7.1.8",
89
"@types/mocha": "^10.0.4",
910
"@types/node": "^20.11.0",
10-
"@types/react": "^18.3.1",
11-
"@types/react-dom": "^18.2.18",
11+
"@types/react": "^19",
12+
"@types/react-dom": "^19",
1213
"@types/three": "0.161.0",
1314
"@typescript-eslint/eslint-plugin": "^7.0.2",
1415
"@typescript-eslint/parser": "^7.0.2",
@@ -26,13 +27,14 @@
2627
"json": "^11.0.0",
2728
"mocha": "^10.2.0",
2829
"prettier": "^3.2.5",
29-
"react": "^18.3.1",
30+
"react": "^19",
31+
"react-dom": "^19",
3032
"three": "0.161.0",
3133
"ts-node": "^10.9.2",
3234
"typescript": "^5.4.5",
33-
"typescript-json-schema": "^0.63.0",
35+
"typescript-json-schema": "^0.65.1",
3436
"vite": "^5.0.12",
3537
"vercel": "^34.1.8",
36-
"@react-three/xr": "6.4.4"
38+
"@react-three/xr": "^6.5.4"
3739
}
3840
}

‎packages/kits/apfel/src/tab-bar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export const TabBar: (props: TabBarProperties & RefAttributes<ContainerRef>) =>
4949
[isExpanded, value],
5050
)
5151

52-
const timeoutRef = useRef<number>()
52+
const timeoutRef = useRef<number>(undefined)
5353

5454
return (
5555
<TabBarContext.Provider value={context}>

‎packages/kits/default/src/label.tsx

+13-16
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
1-
import { ContainerRef, DefaultProperties } from '@react-three/uikit'
2-
import React, { ReactNode, RefAttributes, forwardRef } from 'react'
1+
import { DefaultProperties } from '@react-three/uikit'
2+
import React, { ReactNode } from 'react'
33

44
export type LabelProperties = { children?: ReactNode; disabled?: boolean }
55

6-
export const Label: (props: LabelProperties & RefAttributes<ContainerRef>) => ReactNode = forwardRef(
7-
({ disabled, ...props }, ref) => {
8-
return (
9-
<DefaultProperties
10-
fontWeight="medium"
11-
fontSize={14}
12-
lineHeight="100%"
13-
opacity={disabled ? 0.7 : undefined}
14-
ref={ref}
15-
{...props}
16-
/>
17-
)
18-
},
19-
)
6+
export function Label({ disabled, ...props }: LabelProperties) {
7+
return (
8+
<DefaultProperties
9+
fontWeight="medium"
10+
fontSize={14}
11+
lineHeight="100%"
12+
opacity={disabled ? 0.7 : undefined}
13+
{...props}
14+
/>
15+
)
16+
}

‎packages/react/package.json

+1-3
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,8 @@
5151
"zustand": "^4.5.2"
5252
},
5353
"devDependencies": {
54-
"@react-three/drei": "^9.96.1",
54+
"@react-three/fiber": "rc",
5555
"@types/prompts": "^2.4.9",
56-
"@types/react-dom": "^18.2.18",
57-
"react-dom": "^18.2.0",
5856
"replace-in-files-cli": "^2.2.0"
5957
}
6058
}

‎packages/react/src/convert/html/preview.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export type ConversionComponentMap = ConversionComponentMapWihoutRenderAsCompone
2121

2222
export type CustomHook = (
2323
element: ConversionNode | undefined,
24-
ref: RefObject<ComponentInternals>,
24+
ref: RefObject<ComponentInternals | null>,
2525
properties: Record<string, unknown>,
2626
) => Record<string, unknown>
2727

‎packages/react/src/portal.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ export const Portal: (props: PortalProperties & RefAttributes<PortalRef>) => Rea
181181
)
182182

183183
function uvCompute(
184-
{ current }: RefObject<ComponentInternals<ImageProperties>>,
184+
{ current }: RefObject<ComponentInternals<ImageProperties> | null>,
185185
event: DomEvent,
186186
state: RootState,
187187
previous?: RootState,
@@ -211,7 +211,7 @@ function ChildrenToFBO({
211211
renderPriority: number
212212
children: ReactNode
213213
fbo: Signal<WebGLRenderTarget | undefined>
214-
imageRef: RefObject<ComponentInternals>
214+
imageRef: RefObject<ComponentInternals | null>
215215
}) {
216216
const store = useStore()
217217

0 commit comments

Comments
 (0)