v9 rc

.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,27 +23,27 @@ const App = () => (
 
 ## Properties
 
-| Prop            | Description                                                                                                                                       | Default                                                           |
-| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- |
-| children        | three.js JSX elements or regular components                                                                                                       |                                                                   |
-| fallback        | optional DOM JSX elements or regular components in case GL is not supported                                                                       |                                                                   |
-| 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                                                                                                       |                                                            |
+| fallback        | optional DOM JSX elements or regular components in case GL is not supported                                                                       |                                                            |
+| 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.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) => {}`                                            |
 
 ## Defaults
 

docs/API/hooks.mdx

@@ -64,14 +64,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`                                                                                                                                                                 |
@@ -126,7 +126,7 @@ function Foo() {
 
 > [!CAUTION]
 > Be careful about what you do inside useFrame! You should never setState in there! Your calculations should be slim and
-  you should mind all the commonly known pitfalls when dealing with loops in general, like re-use of variables, etc.
+> you should mind all the commonly known pitfalls when dealing with loops in general, like re-use of variables, etc.
 
 ### Taking over the render-loop
 

docs/API/objects.mdx

@@ -101,7 +101,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/tutorials/typescript.mdx

@@ -34,36 +34,7 @@ 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
+## 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`
+### 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