Add support to React and TypeScript version 19

package.json

@@ -13,8 +13,8 @@
     "@storybook/addon-links": "^6.5.9",
     "@storybook/react": "^6.5.9",
     "@types/jest": "^28.1.1",
-    "@types/react": "^18.0.24",
-    "@types/react-dom": "^18.0.8",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@types/three": "^0.157.0",
     "@typescript-eslint/eslint-plugin": "^5.40.0",
     "babel-loader": "^8.2.5",
@@ -25,8 +25,8 @@
     "eslint-plugin-promise": "^6.1.0",
     "jest": "^28.1.1",
     "postcss": "^8.4.14",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rollup": "^3.2.5",
     "rollup-plugin-dts": "^5.0.0",
     "rollup-plugin-filesize": "^9.1.2",
@@ -39,8 +39,8 @@
     "typescript": "^4.7.3"
   },
   "dependencies": {
-    "@react-three/fiber": "^8.15.5",
-    "three-stdlib": "2.17.2"
+    "@react-three/fiber": "^9.0.0",
+    "three-stdlib": "^2.17.2"
   },
   "peerDependencies": {
     "react": ">=18.0",

src/StlViewer/SceneElements/Camera.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react'
-import { PerspectiveCameraProps, useThree } from '@react-three/fiber'
+import type { ThreeElements } from '@react-three/fiber'
+import { useThree } from '@react-three/fiber'
 import { Vector3 } from 'three'
 
 export interface CameraPosition {
@@ -11,7 +12,7 @@ export interface CameraPosition {
 /** @deprecated use {@link CameraPosition} instead */
 export type CameraInitialPosition = CameraPosition
 
-export interface CameraProps extends Partial<PerspectiveCameraProps> {
+export interface CameraProps extends Partial<ThreeElements['perspectiveCamera']> {
   initialPosition: CameraPosition
   center: [number, number, number]
 }

src/StlViewer/SceneElements/Floor.tsx

@@ -1,8 +1,10 @@
 import React from 'react'
-import { GroupProps } from '@react-three/fiber'
+import type { ThreeElements } from '@react-three/fiber'
 
 const BIG_NUM = 2**16
 
+type GroupProps = ThreeElements['group']
+
 export interface FloorProps extends GroupProps {
   visible?: boolean
   width?: number

src/StlViewer/SceneElements/Model3D.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { Box3, BufferGeometry, DoubleSide, Group, Matrix4, Mesh } from 'three'
-import { GroupProps, MeshProps, MeshStandardMaterialProps, useFrame } from '@react-three/fiber'
+import type { ThreeElements } from '@react-three/fiber'
+import { useFrame } from '@react-three/fiber'
 
 export interface ModelDimensions {
   boundingRadius: number
@@ -9,12 +10,12 @@ export interface ModelDimensions {
   height: number
 }
 
-export interface Model3DProps extends Omit<GroupProps, 'scale'> {
+export interface Model3DProps extends Omit<ThreeElements['group'], 'scale'> {
   scale?: number
   visible?: boolean
   geometry: BufferGeometry
-  meshProps: MeshProps
-  materialProps: MeshStandardMaterialProps
+  meshProps: ThreeElements['mesh']
+  materialProps: ThreeElements['meshStandardMaterial']
   onLoaded: (dims: ModelDimensions, mesh: Mesh, group: Group) => any
 }
 

src/StlViewer/SceneElements/OrbitControls.tsx

@@ -1,9 +1,10 @@
-import { EventManager, PrimitiveProps, useFrame, useThree } from '@react-three/fiber'
+import type { ThreeElements } from '@react-three/fiber'
+import { type EventManager, useFrame, useThree } from '@react-three/fiber'
 import { useEffect } from 'react'
 import * as React from 'react'
 import { OrbitControls as StdOrbitControls } from 'three-stdlib/controls/OrbitControls'
 
-export interface OrbitControlsProps extends Omit<PrimitiveProps, 'object'> {}
+export interface OrbitControlsProps extends Omit<ThreeElements['primitive'], 'object'> {}
 
 const OrbitControls: React.FC<OrbitControlsProps> = (props) => {
   const camera = useThree((state) => state.camera)