Merge branch 'master' into v9

docs/advanced/scaling-performance.mdx

@@ -272,7 +272,7 @@ You can define defaults like so:
 
 ### This is how you can put the system into regression
 
-The only thing you have to do is call `regress()`. When exactly you do that, that is up to you, but it could be when when the mouse moves, or the scene is moving, for instance when controls fire their change-event.
+The only thing you have to do is call `regress()`. When exactly you do that, that is up to you, but it could be when the mouse moves, or the scene is moving, for instance when controls fire their change-event.
 
 Say you are using controls, then the following code puts the system in regress when they are active:
 

docs/tutorials/using-with-react-spring.mdx

@@ -6,19 +6,19 @@ nav: 17
 
 This tutorial will assume some React knowledge, and will be based on [this starter codesandbox](https://codesandbox.io/s/interaction-98ppy?file=/src/App.js), so just fork it and follow along!
 
-We learned out to create small animations and also how to react to user interaction but we did not learn yet how to change these props in a way it creates an animation.
+We learned how to create small animations and also how to react to user interactions, but we haven't yet learned how to change these props in a way to create animations.
 
-For that we are gonna use `react-spring`, `react-spring` is spring physics based animation library and it works perfectly with React Three Fiber as it comes from the same maintainers and it also has exports created specifically for use with React Three Fiber.
+For that, we are gonna use `react-spring`. `react-spring` is a spring physics based animation library and it works perfectly with React Three Fiber as it comes from the same maintainers, and it also has exports specifically created for use with React Three Fiber.
 
 ## Spring Animations
 
-Let's start by defining some concepts about `react-spring` as it works with animations in a way you may not be used to, usually when defining an animation or even a transition in CSS you tell the code how much time you want the transition to last.
+Let's start by defining some concepts about `react-spring` as it works with animations in a way you may not be used to. Usually when defining an animation or even a transition in CSS, you tell the code how much time you want the transition to last.
 
 ```css
 transition: opacity 200ms ease;
 ```
 
-This is not how `react-spring` works, it instead works with `springs` and what that means is that how the animations flows depends on things like the mass, tension and friction of what you want to animate and this is exactly what makes it so perfect to use with 3D.
+This is not how `react-spring` works, it instead works with `springs` and what that means is, the animation's flow depends on things like the mass, tension and friction of what you want to animate, and this is exactly what makes it so perfect to use with 3D.
 
 ## Using `react-spring`
 
@@ -28,9 +28,9 @@ Let's start by installing it:
 npm install three @react-spring/three
 ```
 
-After that we will importing everything from `@react-spring/three` as it contains the components that were created specifically for use with React Three Fiber.
+After that, we import everything from `@react-spring/three` as it contains the components that were created specifically for use with React Three Fiber.
 
-We will need to import two things from `react-spring`:
+We need to import two things from `react-spring`:
 
 ```js
 import { useSpring, animated } from '@react-spring/three'
@@ -39,15 +39,15 @@ import { useSpring, animated } from '@react-spring/three'
 Let's go over them, shall we?
 
 - `useSpring` - A hook to transform values into animated-values
-- `animated` - A component that is used instead of your DOM or mesh, so instead of using `mesh` you will `animated.mesh` if you want it to be affected by `react-spring`
+- `animated` - A component that is used instead of your DOM or mesh, so instead of using `mesh` you will be using `animated.mesh` if you want it to be affected by `react-spring`
 
 Let's create our first spring and attach it to our mesh when the user clicks.
 
 ```js
 const springs = useSpring({ scale: active ? 1.5 : 1 })
 ```
 
-What we did here is create a constant called `springs` and this constant will hold the animated values.
+What we did here is create a constant called `springs`, this constant will hold the animated values.
 
 `useSpring` itself takes one argument, and that is an object with all the things you want to animate. In this case, we just want to animate the scale and to hop between the value of 1 and the value of 1.5 depending on the active state.
 
@@ -57,7 +57,7 @@ We can also deconstruct the return value of `useSpring` and just get the value w
 const { scale } = useSpring({ scale: active ? 1.5 : 1 })
 ```
 
-Now that we have this animated value let's place it in our mesh:
+Now that we have this animated value, let's place it in our mesh:
 
 ```jsx
 <animated.mesh scale={scale} onClick={() => setActive(!active)} ref={myMesh}>
@@ -66,15 +66,15 @@ Now that we have this animated value let's place it in our mesh:
 </animated.mesh>
 ```
 
-If you now click on the cube you can see that it doesn't just jump from one value to the other but instead it animates smoothly between the two values.
+If you now click on the cube, you can see that it doesn't just jump from one value to the other, but instead it animates smoothly between the two values.
 
-One last touch I want to add is the wobblier effect to the animation. For that we can import the `config` object from `react-spring`:
+One last touch we might want to add is the wobblier effect to the animation. For that we can import the `config` object from `react-spring`:
 
 ```js
 import { useSpring, animated, config } from '@react-spring/three'
 ```
 
-Lastly when we call the hook we can pass a value for config and lets pass the `wobbly` configuration:
+Lastly when we call the hook, we can pass a value for config and pass the `wobbly` configuration:
 
 ```js
 const { scale } = useSpring({
@@ -83,7 +83,7 @@ const { scale } = useSpring({
 })
 ```
 
-If this configuration is not your favorite you can check out all of them at the [`react-spring` documentation](https://react-spring.io).
+You can check the other configuration options at the [`react-spring` documentation](https://react-spring.io).
 
 What we did in this chapter was:
 

docs/tutorials/v8-migration-guide.mdx

@@ -217,7 +217,7 @@ This is also supported by all cameras that you create, be it a THREE.Perspective
 
 ```jsx
 import { PerspectiveCamera } from '@react-three/drei'
-;<Canvas>
+<Canvas>
   <PerspectiveCamera makeDefault manual />
 </Canvas>
 ```

packages/fiber/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-three/fiber
 
+## 8.13.6
+
+### Patch Changes
+
+- 0597495c: fix: harden XR init against Renderer shim
+
 ## 8.13.5
 
 ### Patch Changes

packages/fiber/src/core/hooks.tsx

@@ -104,7 +104,7 @@ function loadingFn<T>(extensions?: Extensions<T>, onProgress?: (event: ProgressE
               (data: any) =>
                 res(data?.scene instanceof THREE.Object3D ? Object.assign(data, buildGraph(data.scene)) : data),
               onProgress,
-              (error) => reject(new Error(`Could not load ${input}: ${error.message})`)),
+              (error) => reject(new Error(`Could not load ${input}: ${error.message}`)),
             ),
           ),
       ),

packages/test-renderer/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-three/test-renderer
 
+## 8.2.0
+
+### Minor Changes
+
+- a5ffb08e: feat(RTTR): waitFor util
+
 ## 8.1.5
 
 ### Patch Changes

packages/test-renderer/src/__tests__/RTTR.hooks.test.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import * as Stdlib from 'three-stdlib'
 import * as THREE from 'three'
 import { useFrame, useLoader, useThree } from '@react-three/fiber'
+
 import ReactThreeTestRenderer from '../index'
 
 describe('ReactThreeTestRenderer Hooks', () => {

packages/test-renderer/src/helpers/waitFor.ts

@@ -0,0 +1,24 @@
+import * as React from 'react'
+
+const act: <T = any>(cb: () => Promise<T>) => Promise<T> = (React as any).unstable_act
+
+export interface WaitOptions {
+  interval?: number
+  timeout?: number
+}
+
+export async function waitFor(
+  callback: () => boolean | void,
+  { interval = 50, timeout = 5000 }: WaitOptions = {},
+): Promise<void> {
+  await act(async () => {
+    const start = performance.now()
+
+    while (true) {
+      const result = callback()
+      if (result || result == null) break
+      if (interval) await new Promise((resolve) => setTimeout(resolve, interval))
+      if (timeout && performance.now() - start >= timeout) throw new Error(`Timed out after ${timeout}ms.`)
+    }
+  })
+}

packages/test-renderer/src/index.tsx

@@ -11,6 +11,7 @@ import { createEventFirer } from './fireEvent'
 
 import type { CreateOptions, Renderer } from './types/public'
 import { wrapFiber } from './createTestInstance'
+import { waitFor, WaitOptions } from './helpers/waitFor'
 
 // Extend catalogue for render API in tests.
 extend(THREE as any)
@@ -79,6 +80,8 @@ const create = async (element: React.ReactNode, options?: Partial<CreateOptions>
   }
 }
 
+export { create, act, waitFor }
+export type { WaitOptions }
+
 export * as ReactThreeTest from './types'
-export default { create, act }
-export { create, act }
+export default { create, act, waitFor }