v9 beta

.github/workflows/test.yml

@@ -33,7 +33,7 @@ jobs:
  run: yarn run build
 
  - name: Jest run
- run: yarn run test
+ run: yarn run dev && yarn run test
 
  - name: Report Fiber size
  run: yarn run analyze-fiber

docs/API/canvas.mdx

@@ -23,26 +23,27 @@ const App = () => (
 
 ## Render Props
 
-| Prop | Description | Default |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
-| children | three.js JSX elements or regular components | |
-| gl | Props that go into the default renderer, or your own renderer. Also accepts a synchronous callback like `gl={canvas => new Renderer({ canvas })}` | `{}` |
-| camera | Props that go into the default camera, or your own `THREE.Camera` | `{ fov: 75, near: 0.1, far: 1000, position: [0, 0, 5] }` |
-| scene | Props that go into the default scene, or your own `THREE.Scene` | `{}` |
-| shadows | Props that go into `gl.shadowMap`, can be set true for `PCFsoft` or one of the following: 'basic', 'percentage', 'soft', 'variance' | `false` |
-| raycaster | Props that go into the default raycaster | `{}` |
-| frameloop | Render mode: always, demand, never | `always` |
-| resize | Resize config, see react-use-measure's options | `{ scroll: true, debounce: { scroll: 50, resize: 0 } }` |
-| orthographic | Creates an orthographic camera | `false` |
-| dpr | Pixel-ratio, use `window.devicePixelRatio`, or automatic: [min, max] | `[1, 2]` |
-| legacy | Enables THREE.ColorManagement in three r139 or later | `false` |
-| linear | Switch off automatic sRGB color space and gamma correction | `false` |
-| events | Configuration for the event manager, as a function of state | `import { events } from "@react-three/fiber"` |
-| eventSource | The source where events are being subscribed to, HTMLElement | `React.MutableRefObject<HTMLElement>`, `gl.domElement.parentNode` |
-| eventPrefix | The event prefix that is cast into canvas pointer x/y events | `offset` |
-| flat | Use `THREE.NoToneMapping` instead of `THREE.ACESFilmicToneMapping` | `false` |
-| onCreated | Callback after the canvas has rendered (but not yet committed) | `(state) => {}` |
-| onPointerMissed | Response for pointer clicks that have missed any target | `(event) => {}` |
+| Prop | Description | Default |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
+| children | three.js JSX elements or regular components | |
+| gl | Props that go into the default renderer, or your own renderer. Also accepts a synchronous callback like `gl={canvas => new Renderer({ canvas })}` | `{}` |
+| scene | Props that go into the default camera, or your own `THREE.Scene` | `{}` |
+| camera | Props that go into the default camera, or your own `THREE.Camera` | `{ fov: 75, near: 0.1, far: 1000, position: [0, 0, 5] }` |
+| scene | Props that go into the default scene, or your own `THREE.Scene` | `{}` |
+| shadows | Props that go into `gl.shadowMap`, can be set true for `PCFsoft` or one of the following: 'basic', 'percentage', 'soft', 'variance' | `false` |
+| raycaster | Props that go into the default raycaster | `{}` |
+| frameloop | Render mode: always, demand, never | `always` |
+| resize | Resize config, see react-use-measure's options | `{ scroll: true, debounce: { scroll: 50, resize: 0 } }` |
+| orthographic | Creates an orthographic camera | `false` |
+| dpr | Pixel-ratio, use `window.devicePixelRatio`, or automatic: [min, max] | `[1, 2]` |
+| legacy | Enables THREE.ColorManagement in three r139 or later | `false` |
+| linear | Switch off automatic sRGB color space and gamma correction | `false` |
+| events | Configuration for the event manager, as a function of state | `import { events } from "@react-three/fiber"` |
+| eventSource | The source where events are being subscribed to, HTMLElement | `React.RefObject<HTMLElement>`, `gl.domElement.parentNode` |
+| eventPrefix | The event prefix that is cast into canvas pointer x/y events | `offset` |
+| flat | Use `THREE.NoToneMapping` instead of `THREE.ACESFilmicToneMapping` | `false` |
+| onCreated | Callback after the canvas has rendered (but not yet committed) | `(state) => {}` |
+| onPointerMissed | Response for pointer clicks that have missed any target | `(event) => {}` |
 
 ## Render defaults
 

docs/API/hooks.mdx

@@ -63,14 +63,14 @@ The hook is reactive, if you resize the browser for instance, you get fresh meas
 | legacy | Disables global color management via `THREE.ColorManagement` | `boolean` |
 | frameloop | Render mode: always, demand, never | `always`, `demand`, `never` |
 | performance | System regression | `{ current: number, min: number, max: number, debounce: number, regress: () => void }` |
-| size | Canvas size in pixels | `{ width: number, height: number, top: number, left: number, updateStyle?: boolean }` |
+| size | Canvas size in pixels | `{ width: number, height: number, top: number, left: number }`  |
 | viewport | Viewport size in three.js units | `{ width: number, height: number, initialDpr: number, dpr: number, factor: number, distance: number, aspect: number, getCurrentViewport: (camera?: Camera, target?: THREE.Vector3, size?: Size) => Viewport }` |
 | xr | XR interface, manages WebXR rendering | `{ connect: () => void, disconnect: () => void }` |
 | set | Allows you to set any state property | `(state: SetState<RootState>) => void` |
 | get | Allows you to retrieve any state property non-reactively | `() => GetState<RootState>` |
 | invalidate | Request a new render, given that `frameloop === 'demand'` | `() => void` |
 | advance | Advance one tick, given that `frameloop === 'never'` | `(timestamp: number, runGlobalEffects?: boolean) => void` |
-| setSize | Resize the canvas | `(width: number, height: number, updateStyle?: boolean, top?: number, left?: number) => void` |
+| setSize | Resize the canvas | `(width: number, height: number, top?: number, left?: number) => void`  |
 | setDpr | Set the pixel-ratio | `(dpr: number) => void` |
 | setFrameloop | Shortcut to set the current render mode | `(frameloop?: 'always', 'demand', 'never') => void` |
 | setEvents | Shortcut to setting the event layer | `(events: Partial<EventManager<any>>) => void` |

docs/API/objects.mdx

@@ -109,7 +109,7 @@ You can also deeply nest attach through piercing. The following adds a buffer-at
 ```jsx
 <mesh>
  <bufferGeometry>
- <bufferAttribute attach="attributes-position" count={v.length / 3} array={v} itemSize={3} />
+ <bufferAttribute attach="attributes-position" args={[v, 3]} />
 ```
 
 #### More examples

docs/advanced/scaling-performance.mdx

@@ -228,7 +228,7 @@ If you still experience flip flops despite the bounds you can define a limit of
 PerformanceMonitor can also have children, if you wrap your app in it you get to use usePerformanceMonitor which allows individual components down the nested tree to respond to performance changes on their own.
 
 ```jsx
-<PerformanceMonitor>
+;<PerformanceMonitor>
  <Effects />
 </PerformanceMonitor>
 

docs/tutorials/typescript.mdx

@@ -34,35 +34,6 @@ function Box(props) {
 
 The exclamation mark is a non-null assertion that will let TS know that `ref.current` is defined when we access it in effects.
 
-## Typing shorthand props
-
-react-three-fiber accepts short-hand props like scalars, strings, and arrays so you can declaratively set properties without side effects.
-
-Here are the different variations of props:
-
-```tsx
-import { Euler, Vector3, Color } from 'three'
-
-rotation: Euler || [x, y, z]
-position: Vector3 || [x, y, z] || scalar
-color: Color || 'hotpink' || 0xffffff
-```
-
-Each property has extended types which you can pull from to type these properties.
-
-```tsx
-import { Euler, Vector3, Color } from '@react-three/fiber'
-// or
-// import { ReactThreeFiber } from '@react-three/fiber'
-// ReactThreeFiber.Euler, ReactThreeFiber.Vector3, etc.
-
-rotation: Euler
-position: Vector3
-color: Color
-```
-
-This is particularly useful if you are typing properties outside of components, such as a store or a hook.
-
 ## Extend usage
 
 react-three-fiber can also accept third-party elements and extend them into its internal catalogue.
@@ -77,6 +48,8 @@ class CustomElement extends GridHelper {}
 
 // Extend so the reconciler will learn about it
 extend({ CustomElement })
+
+<customElement />
 ```
 
 The catalogue teaches the underlying reconciler how to create fibers for these elements and treat them within the scene.
@@ -89,26 +62,14 @@ You can then declaratively create custom elements with primitives, but TypeScrip
 <customElement />
 ```
 
-### Node Helpers
-
-react-three-fiber exports helpers that you can use to define different types of nodes. These nodes will type an element that we'll attach to the global JSX namespace.
-
-```tsx
-Node
-Object3DNode
-BufferGeometryNode
-MaterialNode
-LightNode
-```
-
 ### Extending ThreeElements
 
-Since our custom element is an object, we'll use `Object3DNode` to define it.
+To define our element in JSX, we'll use the `ThreeElement` interface to extend `ThreeElements`. This interface describes three.js classes that are available in the R3F catalog and can be used as native elements.
 
 ```tsx
 import { useRef, useEffect } from 'react'
 import { GridHelper } from 'three'
-import { extend, Object3DNode } from '@react-three/fiber'
+import { extend, ThreeElement } from '@react-three/fiber'
 
 // Create our custom element
 class CustomElement extends GridHelper {}
@@ -119,12 +80,12 @@ extend({ CustomElement })
 // Add types to ThreeElements elements so primitives pick up on it
 declare module '@react-three/fiber' {
  interface ThreeElements {
- customElement: Object3DNode<CustomElement, typeof CustomElement>
+ customElement: ThreeElement<typeof CustomElement>
  }
 }
 
 // react-three-fiber will create your custom component and TypeScript will understand it
-<customComponent />
+;<customComponent />
 ```
 
 ## Exported types
@@ -148,7 +109,7 @@ Viewport
 Camera
 
 // Canvas props
-Props
+CanvasProps
 
 // Supported events
 Events