github-starred/better-auth
2
0
Fork 0
mirror of https://github.com/better-auth/better-auth.git synced 2026-05-23 15:42:09 -05:00
Code Issues 2.5k Packages Projects Releases 112 Wiki Activity

[PR #5108] [CLOSED] fix(deps): update dependency @react-three/fiber to v9 #5782

New Issue
Closed
opened 2026-03-13 12:35:45 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-03-13 12:35:45 -05:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/better-auth/better-auth/pull/5108
Author: @renovate[bot]
Created: 10/6/2025
Status: ❌ Closed

Base: canary ← Head: renovate/react-three-fiber-9.x

📝 Commits (1)

  • 2ce110b fix(deps): update dependency @react-three/fiber to v9

📊 Changes

2 files changed (+125 additions, -533 deletions)

View changed files

📝 demo/nextjs/package.json (+1 -1)
📝 pnpm-lock.yaml (+124 -532)

📄 Description

Note

Mend has cancelled the proposed renaming of the Renovate GitHub app being renamed to mend[bot].

This notice will be removed on 2025-10-07.

This PR contains the following updates:

Package Change Age Confidence
@react-three/fiber ^8.18.0 -> ^9.3.0 age confidence

Release Notes

pmndrs/react-three-fiber (@​react-three/fiber)

v9.3.0

Compare Source

With these release we have two big fixes.

  1. flushSync now works properly. To prove it we added an example that allows you to React props and then take a screenshot of the R3F canvas with the latest state. This is a pretty advanced use case, but one people might be interested to explore for exporting videos or images using R3F.
  2. React Native support has been fixed for 0.79 and newer when combined with the same update to Drei: pmndrs/drei#2494. A big thanks to @​thejustinwalsh for helping us with this one.

What's Changed

New Contributors

Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v9.1.4...v9.3.0

v9.2.0

Compare Source

v9.1.4

Compare Source

What's Changed

New Contributors

Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v9.1.3...v9.1.4

v9.1.3

Compare Source

What's Changed

New Contributors

Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v9.1.2...v9.1.3

v9.1.2

Compare Source

What's Changed

Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v9.1.1...v9.1.2

v9.1.1

Compare Source

Most importantly, this fixes rsbuild with vReact 19.1.0 and later.

What's Changed

Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v9.1.0...v9.1.1

v9.1.0

Compare Source

What's Changed

New Contributors

Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v9.0.4...v9.1.0

v9.0.4

Compare Source

What's Changed

Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v9.0.3...v9.0.4

v9.0.3

Compare Source

What's Changed

Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v9.0.2...v9.0.3

v9.0.2

Compare Source

What's Changed

Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v9.0.1...v9.0.2

v9.0.1

Compare Source

What's Changed

Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v9.0.0...v9.0.1

v9.0.0

Compare Source

This is a compatibility release for React 19, which brings further performance, stability, and type improvements. You can check out the React 19 changelog here.

We would like to express our gratitude to the community for their continued support, as well as to all our contributors, including the React team at Meta and Vercel, for ensuring this upgrade went smoothly. 🎉

[!WARNING]
This release contains breaking changes when using Strict Mode, which can highlight bugs during development. See StrictMode.

Features

useLoader Accepts Loader Instance

useLoader now supports re-use of external loader instances for more controlled pooling and setup.

import { GLTFLoader } from 'three/addons'
import { useLoader } from '@​react-three/fiber'

function Model() {
  const gltf = useLoader(GLTFLoader, '/path/to/model.glb')
  // ...
}

// or,

const loader = new GLTFLoader()
function Model() {
  const gltf = useLoader(loader, '/path/to/model.glb')
  // ...
}
Factory extend Signature

extend can now produce a component when a three.js class is passed to it individually instead of a catalog of named classes. This is backwards compatible and reduces TypeScript boilerplate and JSX collisions. We recommend libraries migrate to this signature so internal components don't clash with user-land declarations.

import { OrbitControls } from 'three/addons'
import { type ThreeElement, type ThreeElements } from '@​react-three/fiber'

declare module '@​react-three/fiber' {
  interface ThreeElements {
    orbitControls: ThreeElement<typeof OrbitControls>
  }
}

extend({ OrbitControls })

<orbitControls args={[camera, gl.domElement]}>

// or,

const Controls = extend(OrbitControls)
<Controls args={[camera, gl.domElement]} />
Async GL prop

The Canvas GL prop accepts constructor parameters, properties, or a renderer instance via a callback. The callback now passes constructor parameters instead of just a canvas reference.

<Canvas
  gl={{ reverseDepthBuffer: true }}
- gl={(canvas) => new WebGLRenderer({ canvas })}
+ gl={(props) => new WebGLRenderer(props)}
>

Further, a callback passed to GL can now return a promise for async constructors like WebGPURenderer (see WebGPU).

<Canvas
  gl={async (props) => {
    // ...
    return renderer
  }}
>

WebGPU

Recent Three.js now includes a WebGPU renderer. While still a work in progress and not fully backward-compatible with all of Three's features, the renderer requires an async initialization method. R3F streamlines this by allowing the gl prop to return a promise.

import * as THREE from 'three/webgpu'
import * as TSL from 'three/tsl'
import { Canvas, extend, useFrame, useThree } from '@&#8203;react-three/fiber'

declare module '@&#8203;react-three/fiber' {
  interface ThreeElements extends ThreeToJSXElements<typeof THREE> {}
}

extend(THREE as any)

export default () => (
  <Canvas
    gl={async (props) => {
      const renderer = new THREE.WebGPURenderer(props as any)
      await renderer.init()
      return renderer
    }}>
      <mesh>
        <meshBasicNodeMaterial />
        <boxGeometry />
      </mesh>
  </Canvas>
)

Fixes

Color Management of Textures

Automatic sRGB conversion of texture props has been removed. Color textures are now handled automatically for built-in materials, aligning with vanilla Three.js behavior. This prevents issues where data textures (e.g., normals or displacement) become corrupted or non-linear. For custom materials or shaders, annotate color textures with texture.colorSpace = THREE.SRGBColorSpace or texture-colorSpace={THREE.SRGBColorSpace} in JSX.

For more details, see https://threejs.org/docs/#manual/en/introduction/Color-management.

Suspense and Side-Effects

The handling of Suspense and fallback content has improved in React and R3F. Side-effects like attach and constructor effects (e.g., controls adding event listeners) no longer fire repeatedly without proper cleanup during suspension.

import { ThreeElement, useThree } from '@&#8203;react-three/fiber'
import { OrbitControls } from 'three/addons'

declare module '@&#8203;react-three/fiber' {
  interface ThreeElements {
    OrbitControls: ThreeElement<typeof OrbitControls>
  }
}

extend({ OrbitControls })

function Controls() {
  const camera = useThree((state) => state.camera)
  const gl = useThree((state) => state.gl)

  // Will only initialize when tree is connected to screen
  return <orbitControls args={[camera, gl.domElement]}>
}

<Suspense>
  <Controls />
  <AsyncComponent />
</Suspense>
Swapping with args and primitives

Swapping elements when changing the args or primitive object prop has been improved for structured children like arrays or iterators (React supports both, including async iterators). Previously, primitives sharing an object could update out of order or be removed from the scene along with their children.

See: #​3272

TypeScript Changes

Props renamed to CanvasProps

Canvas Props is now called CanvasProps for clarity. These were aliased in v8 for forward compatibility, but Props is removed with v9.

-function Canvas(props: Props)
+function Canvas(props: CanvasProps)
Dynamic JSX Types

Since R3F's creation, JSX types had to be maintained in accordance with additions to three core API. Although missing or future types could be ignored or resilient for forward and backwards compatibility, this was a major maintenance burden for us and those extending three. Furthermore, libraries which wrap or bind to the known catalog of elements (e.g. React Spring <animated.mesh />) had no way of knowing which elements belonged to a renderer.

Since v8, we've added a catalog of known elements to a ThreeElements interface, and with v9 automatically map three API to JSX types. As types are now dynamically mapped, hardcoded exports like MeshProps have been removed, and can be accessed as ThreeElements['mesh']. Helper types like Color or Vector3 remain to reflect the JSX MathType API for shorthand expression.

-import { MeshProps } from '@&#8203;react-three/fiber'
-type Props = MeshProps

+import { ThreeElements } from '@&#8203;react-three/fiber'
+type Props = ThreeElements['mesh']
Node Helpers

Specialized Node type helpers for extending JSX (Node, Object3DNode, BufferGeometryNode, MaterialNode, LightNode) are removed and combined into 'ThreeElement', which accepts a single type representing the extended element instance.

import { type ThreeElement } from '@&#8203;react-three/fiber'

declare module '@&#8203;react-three/fiber' {
  interface ThreeElements {
    customElement: ThreeElement<typeof CustomElement>
  }
}

extend({ CustomElement })
ThreeElements

ThreeElements was added as an interface since v8.1.0 and is the current way of declaring or accessing JSX within R3F since React's depreciation of global JSX (see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript). All JSX types belonging to R3F are accessible from ThreeElements.

-import { type Node } from '@&#8203;react-three/fiber'
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      customElement: Node<CustomElement, typeof CustomElement>
-    }
-  }
-}
-
-extend({ CustomElement })

+import { type ThreeElement } from '@&#8203;react-three/fiber'
+
+declare module '@&#8203;react-three/fiber' {
+  interface ThreeElements {
+    customElement: ThreeElement<typeof CustomElement>
+  }
+}
+
+extend({ CustomElement })

Testing

StrictMode

StrictMode is now correctly inherited from a parent renderer like react-dom. Previously, <StrictMode /> mounted in another root such as react-dom would not affect the R3F canvas, so it had to be redeclared within the canvas as well.

<StrictMode>
  <Canvas>
-    <StrictMode>
-      // ...
-    </StrictMode>
+    // ...
  </Canvas>
</StrictMode>

Keep in mind, this change may affect the behavior of your application. If you encounter anything that worked before and fails now, profile it first in dev and then production. If it works in prod then strict mode has flushed out a side-effect in your code.

Act

act is now exported from React itself and can be used for all renderers. It will return the contents of a passed async callback like before and recursively flush async effects to synchronously test React output.

import { act } from 'react'
import { createRoot } from '@&#8203;react-three/fiber'

const store = await act(async () => createRoot(canvas).render(<App />))
console.log(store.getState())

Full Changelog: https://github.com/pmndrs/react-three-fiber/compare/v8.18.0...v9.0.0

Configuration

📅 Schedule: Branch creation - Between 12:00 AM and 03:59 AM, only on Monday ( * 0-3 * * 1 ) (UTC), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

  • If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/better-auth/better-auth/pull/5108 **Author:** [@renovate[bot]](https://github.com/apps/renovate) **Created:** 10/6/2025 **Status:** ❌ Closed **Base:** `canary` ← **Head:** `renovate/react-three-fiber-9.x` --- ### 📝 Commits (1) - [`2ce110b`](https://github.com/better-auth/better-auth/commit/2ce110b4f74daa412120097d6d4314913c8dc359) fix(deps): update dependency @react-three/fiber to v9 ### 📊 Changes **2 files changed** (+125 additions, -533 deletions) <details> <summary>View changed files</summary> 📝 `demo/nextjs/package.json` (+1 -1) 📝 `pnpm-lock.yaml` (+124 -532) </details> ### 📄 Description > [!NOTE] > Mend has cancelled [the proposed renaming](https://redirect.github.com/renovatebot/renovate/discussions/37842) of the Renovate GitHub app being renamed to `mend[bot]`. > > This notice will be removed on 2025-10-07. <hr> This PR contains the following updates: | Package | Change | Age | Confidence | |---|---|---|---| | [@react-three/fiber](https://redirect.github.com/pmndrs/react-three-fiber) | [`^8.18.0` -> `^9.3.0`](https://renovatebot.com/diffs/npm/@react-three%2ffiber/8.18.0/9.3.0) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@react-three%2ffiber/9.3.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@react-three%2ffiber/8.18.0/9.3.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>pmndrs/react-three-fiber (@&#8203;react-three/fiber)</summary> ### [`v9.3.0`](https://redirect.github.com/pmndrs/react-three-fiber/releases/tag/v9.3.0) [Compare Source](https://redirect.github.com/pmndrs/react-three-fiber/compare/fea50adaf15d0340e69c4ae159c280f2e271c73a...v9.3.0) With these release we have two big fixes. 1. `flushSync` now works properly. To prove it we added an example that allows you to React props and then take a screenshot of the R3F canvas with the latest state. This is a pretty advanced use case, but one people might be interested to explore for exporting videos or images using R3F. 2. React Native support has been fixed for 0.79 and newer when combined with the same update to Drei: [pmndrs/drei#2494](https://redirect.github.com/pmndrs/drei/pull/2494). A big thanks to [@&#8203;thejustinwalsh](https://redirect.github.com/thejustinwalsh) for helping us with this one. #### What's Changed - chore: export flushSync by [@&#8203;krispya](https://redirect.github.com/krispya) in [#&#8203;3551](https://redirect.github.com/pmndrs/react-three-fiber/pull/3551) - Update react-native deep imports for 0.79 compatibility by [@&#8203;huntie](https://redirect.github.com/huntie) in [#&#8203;3498](https://redirect.github.com/pmndrs/react-three-fiber/pull/3498) - fix: update flushSync for new reconciler by [@&#8203;krispya](https://redirect.github.com/krispya) in [#&#8203;3554](https://redirect.github.com/pmndrs/react-three-fiber/pull/3554) - feat: add flushSync example by [@&#8203;krispya](https://redirect.github.com/krispya) in [#&#8203;3560](https://redirect.github.com/pmndrs/react-three-fiber/pull/3560) #### New Contributors - [@&#8203;s-pace](https://redirect.github.com/s-pace) made their first contribution in [#&#8203;3521](https://redirect.github.com/pmndrs/react-three-fiber/pull/3521) - [@&#8203;huntie](https://redirect.github.com/huntie) made their first contribution in [#&#8203;3498](https://redirect.github.com/pmndrs/react-three-fiber/pull/3498) **Full Changelog**: <https://github.com/pmndrs/react-three-fiber/compare/v9.1.4...v9.3.0> ### [`v9.2.0`](https://redirect.github.com/pmndrs/react-three-fiber/compare/v9.1.4...fea50adaf15d0340e69c4ae159c280f2e271c73a) [Compare Source](https://redirect.github.com/pmndrs/react-three-fiber/compare/v9.1.4...fea50adaf15d0340e69c4ae159c280f2e271c73a) ### [`v9.1.4`](https://redirect.github.com/pmndrs/react-three-fiber/releases/tag/v9.1.4) [Compare Source](https://redirect.github.com/pmndrs/react-three-fiber/compare/v9.1.3...v9.1.4) #### What's Changed - fix(types): Accept readonly arrays for vector props by [@&#8203;RodrigoHamuy](https://redirect.github.com/RodrigoHamuy) in [#&#8203;3527](https://redirect.github.com/pmndrs/react-three-fiber/pull/3527) #### New Contributors - [@&#8203;RodrigoHamuy](https://redirect.github.com/RodrigoHamuy) made their first contribution in [#&#8203;3527](https://redirect.github.com/pmndrs/react-three-fiber/pull/3527) **Full Changelog**: <https://github.com/pmndrs/react-three-fiber/compare/v9.1.3...v9.1.4> ### [`v9.1.3`](https://redirect.github.com/pmndrs/react-three-fiber/releases/tag/v9.1.3) [Compare Source](https://redirect.github.com/pmndrs/react-three-fiber/compare/v9.1.2...v9.1.3) #### What's Changed - fix(native) fix crash on rerendering GLView with new arch by [@&#8203;NikitaDudin](https://redirect.github.com/NikitaDudin) in [#&#8203;3539](https://redirect.github.com/pmndrs/react-three-fiber/pull/3539) #### New Contributors - [@&#8203;s-rigaud](https://redirect.github.com/s-rigaud) made their first contribution in [#&#8203;3518](https://redirect.github.com/pmndrs/react-three-fiber/pull/3518) - [@&#8203;NikitaDudin](https://redirect.github.com/NikitaDudin) made their first contribution in [#&#8203;3539](https://redirect.github.com/pmndrs/react-three-fiber/pull/3539) **Full Changelog**: <https://github.com/pmndrs/react-three-fiber/compare/v9.1.2...v9.1.3> ### [`v9.1.2`](https://redirect.github.com/pmndrs/react-three-fiber/releases/tag/v9.1.2) [Compare Source](https://redirect.github.com/pmndrs/react-three-fiber/compare/v9.1.1...v9.1.2) #### What's Changed - fix: reference dev-only act with computed key for Webpack by [@&#8203;CodyJasonBennett](https://redirect.github.com/CodyJasonBennett) in [#&#8203;3513](https://redirect.github.com/pmndrs/react-three-fiber/pull/3513) **Full Changelog**: <https://github.com/pmndrs/react-three-fiber/compare/v9.1.1...v9.1.2> ### [`v9.1.1`](https://redirect.github.com/pmndrs/react-three-fiber/releases/tag/v9.1.1) [Compare Source](https://redirect.github.com/pmndrs/react-three-fiber/compare/v9.1.0...v9.1.1) Most importantly, this fixes `rsbuild` with vReact 19.1.0 and later. #### What's Changed - chore: add rsbuild to CI test by [@&#8203;krispya](https://redirect.github.com/krispya) in [#&#8203;3510](https://redirect.github.com/pmndrs/react-three-fiber/pull/3510) - Fix builds failing from React.act being removed from the production bundle by [@&#8203;itsdouges](https://redirect.github.com/itsdouges) in [#&#8203;3508](https://redirect.github.com/pmndrs/react-three-fiber/pull/3508) **Full Changelog**: <https://github.com/pmndrs/react-three-fiber/compare/v9.1.0...v9.1.1> ### [`v9.1.0`](https://redirect.github.com/pmndrs/react-three-fiber/releases/tag/v9.1.0) [Compare Source](https://redirect.github.com/pmndrs/react-three-fiber/compare/v9.0.4...v9.1.0) #### What's Changed - feat: add meshes to loader graph by [@&#8203;krispya](https://redirect.github.com/krispya) in [#&#8203;3479](https://redirect.github.com/pmndrs/react-three-fiber/pull/3479) - fix(reconciler): out of order children move to the correct position during rerenders by [@&#8203;krispya](https://redirect.github.com/krispya) in [#&#8203;3488](https://redirect.github.com/pmndrs/react-three-fiber/pull/3488) - fix(applyProps): set check when resolving pierced properties by [@&#8203;krispya](https://redirect.github.com/krispya) in [#&#8203;3485](https://redirect.github.com/pmndrs/react-three-fiber/pull/3485) #### New Contributors - [@&#8203;kayden1940](https://redirect.github.com/kayden1940) made their first contribution in [#&#8203;3475](https://redirect.github.com/pmndrs/react-three-fiber/pull/3475) - [@&#8203;jo-chemla](https://redirect.github.com/jo-chemla) made their first contribution in [#&#8203;3378](https://redirect.github.com/pmndrs/react-three-fiber/pull/3378) **Full Changelog**: <https://github.com/pmndrs/react-three-fiber/compare/v9.0.4...v9.1.0> ### [`v9.0.4`](https://redirect.github.com/pmndrs/react-three-fiber/releases/tag/v9.0.4) [Compare Source](https://redirect.github.com/pmndrs/react-three-fiber/compare/v9.0.3...v9.0.4) #### What's Changed - fix(types): exclude type conflicts in React runtime types by [@&#8203;CodyJasonBennett](https://redirect.github.com/CodyJasonBennett) in [#&#8203;3473](https://redirect.github.com/pmndrs/react-three-fiber/pull/3473) **Full Changelog**: <https://github.com/pmndrs/react-three-fiber/compare/v9.0.3...v9.0.4> ### [`v9.0.3`](https://redirect.github.com/pmndrs/react-three-fiber/releases/tag/v9.0.3) [Compare Source](https://redirect.github.com/pmndrs/react-three-fiber/compare/v9.0.2...v9.0.3) #### What's Changed - fix(types): remove recursive references in JSX types by [@&#8203;CodyJasonBennett](https://redirect.github.com/CodyJasonBennett) in [#&#8203;3472](https://redirect.github.com/pmndrs/react-three-fiber/pull/3472) **Full Changelog**: <https://github.com/pmndrs/react-three-fiber/compare/v9.0.2...v9.0.3> ### [`v9.0.2`](https://redirect.github.com/pmndrs/react-three-fiber/releases/tag/v9.0.2) [Compare Source](https://redirect.github.com/pmndrs/react-three-fiber/compare/v9.0.1...v9.0.2) #### What's Changed - fix(reconciler): prefer to resolve unprefixed instance types by [@&#8203;CodyJasonBennett](https://redirect.github.com/CodyJasonBennett) in [#&#8203;3470](https://redirect.github.com/pmndrs/react-three-fiber/pull/3470) **Full Changelog**: <https://github.com/pmndrs/react-three-fiber/compare/v9.0.1...v9.0.2> ### [`v9.0.1`](https://redirect.github.com/pmndrs/react-three-fiber/releases/tag/v9.0.1) [Compare Source](https://redirect.github.com/pmndrs/react-three-fiber/compare/v9.0.0...v9.0.1) #### What's Changed - fix: add use-sync-external-store dep by [@&#8203;CodyJasonBennett](https://redirect.github.com/CodyJasonBennett) in [#&#8203;3466](https://redirect.github.com/pmndrs/react-three-fiber/pull/3466) **Full Changelog**: <https://github.com/pmndrs/react-three-fiber/compare/v9.0.0...v9.0.1> ### [`v9.0.0`](https://redirect.github.com/pmndrs/react-three-fiber/releases/tag/v9.0.0) [Compare Source](https://redirect.github.com/pmndrs/react-three-fiber/compare/v8.18.0...v9.0.0) This is a compatibility release for React 19, which brings further performance, stability, and type improvements. You can check out the React 19 changelog [here](https://react.dev/blog/2024/04/25/react-19). We would like to express our gratitude to the community for their continued support, as well as to all our contributors, including the React team at Meta and Vercel, for ensuring this upgrade went smoothly. 🎉 > \[!WARNING]\ > This release contains breaking changes when using Strict Mode, which can highlight bugs during development. See [StrictMode](#strictmode). #### Features ##### useLoader Accepts Loader Instance `useLoader` now supports re-use of external loader instances for more controlled pooling and setup. ```jsx import { GLTFLoader } from 'three/addons' import { useLoader } from '@&#8203;react-three/fiber' function Model() { const gltf = useLoader(GLTFLoader, '/path/to/model.glb') // ... } // or, const loader = new GLTFLoader() function Model() { const gltf = useLoader(loader, '/path/to/model.glb') // ... } ``` ##### Factory extend Signature `extend` can now produce a component when a three.js class is passed to it individually instead of a catalog of named classes. This is backwards compatible and reduces TypeScript boilerplate and JSX collisions. We recommend libraries migrate to this signature so internal components don't clash with user-land declarations. ```tsx import { OrbitControls } from 'three/addons' import { type ThreeElement, type ThreeElements } from '@&#8203;react-three/fiber' declare module '@&#8203;react-three/fiber' { interface ThreeElements { orbitControls: ThreeElement<typeof OrbitControls> } } extend({ OrbitControls }) <orbitControls args={[camera, gl.domElement]}> // or, const Controls = extend(OrbitControls) <Controls args={[camera, gl.domElement]} /> ``` ##### Async GL prop The Canvas GL prop accepts constructor parameters, properties, or a renderer instance via a callback. The callback now passes constructor parameters instead of just a canvas reference. ```diff <Canvas gl={{ reverseDepthBuffer: true }} - gl={(canvas) => new WebGLRenderer({ canvas })} + gl={(props) => new WebGLRenderer(props)} > ``` Further, a callback passed to GL can now return a promise for async constructors like `WebGPURenderer` (see [WebGPU](#webgpu)). ```tsx <Canvas gl={async (props) => { // ... return renderer }} > ``` #### WebGPU Recent Three.js now includes a WebGPU renderer. While still a work in progress and not fully backward-compatible with all of Three's features, the renderer requires an async initialization method. R3F streamlines this by allowing the gl prop to return a promise. ```tsx import * as THREE from 'three/webgpu' import * as TSL from 'three/tsl' import { Canvas, extend, useFrame, useThree } from '@&#8203;react-three/fiber' declare module '@&#8203;react-three/fiber' { interface ThreeElements extends ThreeToJSXElements<typeof THREE> {} } extend(THREE as any) export default () => ( <Canvas gl={async (props) => { const renderer = new THREE.WebGPURenderer(props as any) await renderer.init() return renderer }}> <mesh> <meshBasicNodeMaterial /> <boxGeometry /> </mesh> </Canvas> ) ``` #### Fixes ##### Color Management of Textures Automatic sRGB conversion of texture props has been removed. Color textures are now handled automatically for built-in materials, aligning with vanilla Three.js behavior. This prevents issues where data textures (e.g., normals or displacement) become corrupted or non-linear. For custom materials or shaders, annotate color textures with `texture.colorSpace = THREE.SRGBColorSpace` or `texture-colorSpace={THREE.SRGBColorSpace}` in JSX. For more details, see <https://threejs.org/docs/#manual/en/introduction/Color-management>. ##### Suspense and Side-Effects The handling of Suspense and fallback content has improved in React and R3F. Side-effects like attach and constructor effects (e.g., controls adding event listeners) no longer fire repeatedly without proper cleanup during suspension. ```jsx import { ThreeElement, useThree } from '@&#8203;react-three/fiber' import { OrbitControls } from 'three/addons' declare module '@&#8203;react-three/fiber' { interface ThreeElements { OrbitControls: ThreeElement<typeof OrbitControls> } } extend({ OrbitControls }) function Controls() { const camera = useThree((state) => state.camera) const gl = useThree((state) => state.gl) // Will only initialize when tree is connected to screen return <orbitControls args={[camera, gl.domElement]}> } <Suspense> <Controls /> <AsyncComponent /> </Suspense> ``` ##### Swapping with args and primitives Swapping elements when changing the `args` or primitive `object` prop has been improved for structured children like arrays or iterators (React supports both, including async iterators). Previously, primitives sharing an object could update out of order or be removed from the scene along with their children. See: [#&#8203;3272](https://redirect.github.com/pmndrs/react-three-fiber/pull/3272) #### TypeScript Changes ##### Props renamed to CanvasProps Canvas `Props` is now called `CanvasProps` for clarity. These were aliased in v8 for forward compatibility, but `Props` is removed with v9. ```diff -function Canvas(props: Props) +function Canvas(props: CanvasProps) ``` ##### Dynamic JSX Types Since R3F's creation, JSX types had to be maintained in accordance with additions to three core API. Although missing or future types could be ignored or resilient for forward and backwards compatibility, this was a major maintenance burden for us and those extending three. Furthermore, libraries which wrap or bind to the known catalog of elements (e.g. React Spring `<animated.mesh />`) had no way of knowing which elements belonged to a renderer. Since v8, we've added a catalog of known elements to a `ThreeElements` interface, and with v9 automatically map three API to JSX types. As types are now dynamically mapped, hardcoded exports like `MeshProps` have been removed, and can be accessed as `ThreeElements['mesh']`. Helper types like `Color` or `Vector3` remain to reflect the JSX `MathType` API for shorthand expression. ```diff -import { MeshProps } from '@&#8203;react-three/fiber' -type Props = MeshProps +import { ThreeElements } from '@&#8203;react-three/fiber' +type Props = ThreeElements['mesh'] ``` ##### Node Helpers Specialized `Node` type helpers for extending JSX (`Node`, `Object3DNode`, `BufferGeometryNode`, `MaterialNode`, `LightNode`) are removed and combined into 'ThreeElement', which accepts a single type representing the extended element instance. ```tsx import { type ThreeElement } from '@&#8203;react-three/fiber' declare module '@&#8203;react-three/fiber' { interface ThreeElements { customElement: ThreeElement<typeof CustomElement> } } extend({ CustomElement }) ``` ##### ThreeElements `ThreeElements` was added as an interface since v8.1.0 and is the current way of declaring or accessing JSX within R3F since React's depreciation of `global` JSX (see <https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript>). All JSX types belonging to R3F are accessible from `ThreeElements`. ```diff -import { type Node } from '@&#8203;react-three/fiber' - -declare global { - namespace JSX { - interface IntrinsicElements { - customElement: Node<CustomElement, typeof CustomElement> - } - } -} - -extend({ CustomElement }) +import { type ThreeElement } from '@&#8203;react-three/fiber' + +declare module '@&#8203;react-three/fiber' { + interface ThreeElements { + customElement: ThreeElement<typeof CustomElement> + } +} + +extend({ CustomElement }) ``` #### Testing ##### StrictMode `StrictMode` is now correctly inherited from a parent renderer like react-dom. Previously, `<StrictMode />` mounted in another root such as react-dom would not affect the R3F canvas, so it had to be redeclared within the canvas as well. ```diff <StrictMode> <Canvas> - <StrictMode> - // ... - </StrictMode> + // ... </Canvas> </StrictMode> ``` Keep in mind, this change may affect the behavior of your application. If you encounter anything that worked before and fails now, profile it first in dev and then production. If it works in prod then strict mode has flushed out a side-effect in your code. ##### Act `act` is now exported from React itself and can be used for all renderers. It will return the contents of a passed async callback like before and recursively flush async effects to synchronously test React output. ```tsx import { act } from 'react' import { createRoot } from '@&#8203;react-three/fiber' const store = await act(async () => createRoot(canvas).render(<App />)) console.log(store.getState()) ``` **Full Changelog**: <https://github.com/pmndrs/react-three-fiber/compare/v8.18.0...v9.0.0> </details> --- ### Configuration 📅 **Schedule**: Branch creation - Between 12:00 AM and 03:59 AM, only on Monday ( * 0-3 * * 1 ) (UTC), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR was generated by [Mend Renovate](https://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/better-auth/better-auth). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0MS4xMzEuOSIsInVwZGF0ZWRJblZlciI6IjQxLjEzMS45IiwidGFyZ2V0QnJhbmNoIjoiY2FuYXJ5IiwibGFiZWxzIjpbImRlcGVuZGVuY2llcyJdfQ==--> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-03-13 12:35:45 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
adapter
astro
awaiting external contributor
blocked
breaking
breaking change
bug
c-devops
core
credentials
database
dependencies
devops
devtools
docs
documentation
duplicate
elysia
enhancement
enterprise
expo
express
fastify
good first issue
help wanted
hono
identity
infra
integration
invalid
javascript
locked
maintenance
need-more-information
needs: info
needs: repro
nextjs
nuxt
oauth
organization
P0
payments
perf
platform
plugin
pull-request
Mirrored from GitHub Pull Request
 question
ready
regression
remix
security
social-provider
solid
stale
svelte
tanstack-start
tracking
version-bump
vue
wontfix
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/better-auth#5782
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?