fix: root.render throws if configure isn't called, fix tests

pmndrs · Jan 19, 2025 · 76fca8f · 76fca8f
1 parent 4e607ca
commit 76fca8f
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 108 deletions.
diff --git a/packages/fiber/src/core/index.tsx b/packages/fiber/src/core/index.tsx
@@ -23,7 +23,7 @@ export type {
 } from './reconciler'
 export { extend, reconciler } from './reconciler'
 export type { ReconcilerRoot, GLProps, CameraProps, RenderProps, InjectState } from './renderer'
-export { _roots, render, createRoot, unmountComponentAtNode, createPortal } from './renderer'
+export { _roots, createRoot, unmountComponentAtNode, createPortal } from './renderer'
 export type {
   Subscription,
   Dpr,

diff --git a/packages/fiber/src/core/renderer.tsx b/packages/fiber/src/core/renderer.tsx
@@ -381,13 +381,11 @@ export function createRoot<TCanvas extends HTMLCanvasElement | OffscreenCanvas>(
       // Set locals
       onCreated = onCreatedCallback
       configured = true
-
       return this
     },
     render(children: React.ReactNode): RootStore {
       // The root has to be configured before it can be rendered
-      if (!configured) this.configure()
-
+      if (!configured) throw "The root has to be configured before it can be rendered, call 'configure' first!"
       reconciler.updateContainer(
         <Provider store={store} children={children} onCreated={onCreated} rootElement={canvas} />,
         fiber,
@@ -402,17 +400,6 @@ export function createRoot<TCanvas extends HTMLCanvasElement | OffscreenCanvas>(
   }
 }
 
-export function render<TCanvas extends HTMLCanvasElement | OffscreenCanvas>(
-  children: React.ReactNode,
-  canvas: TCanvas,
-  config: RenderProps<TCanvas>,
-): RootStore {
-  console.warn('R3F.render is no longer supported in React 18. Use createRoot instead!')
-  const root = createRoot(canvas)
-  root.configure(config)
-  return root.render(children)
-}
-
 interface ProviderProps<TCanvas extends HTMLCanvasElement | OffscreenCanvas> {
   onCreated?: (state: RootState) => void
   store: RootStore

diff --git a/packages/fiber/src/native/Canvas.tsx b/packages/fiber/src/native/Canvas.tsx
@@ -205,7 +205,7 @@ function CanvasImpl({
             return onCreated?.(state)
           },
         })
-        root.current.render(
+        await root.current.render(
           <Bridge>
             <ErrorBoundary set={setError}>
               <React.Suspense fallback={<Block set={setBlock} />}>{children}</React.Suspense>

diff --git a/packages/fiber/src/web/Canvas.tsx b/packages/fiber/src/web/Canvas.tsx
@@ -124,7 +124,7 @@ function CanvasImpl({
             onCreated?.(state)
           },
         })
-        root.current.render(
+        await root.current.render(
           <Bridge>
             <ErrorBoundary set={setError}>
               <React.Suspense fallback={<Block set={setBlock} />}>{children}</React.Suspense>

diff --git a/packages/fiber/tests/__snapshots__/index.test.tsx.snap b/packages/fiber/tests/__snapshots__/index.test.tsx.snap
@@ -83,7 +83,6 @@ Array [
   "getRootState",
   "invalidate",
   "reconciler",
-  "render",
   "unmountComponentAtNode",
   "useFrame",
   "useGraph",

diff --git a/packages/fiber/tests/hooks.test.tsx b/packages/fiber/tests/hooks.test.tsx
@@ -52,7 +52,7 @@ describe('hooks', () => {
       return <group />
     }
 
-    await act(async () => root.render(<Component />))
+    await act(async () => (await root.configure()).render(<Component />))
 
     expect(result.camera instanceof THREE.Camera).toBeTruthy()
     expect(result.scene instanceof THREE.Scene).toBeTruthy()

diff --git a/packages/fiber/tests/index.test.tsx b/packages/fiber/tests/index.test.tsx
@@ -37,7 +37,7 @@ afterEach(async () => {
 
 describe('createRoot', () => {
   it('should return a Zustand store', async () => {
-    const store = await act(async () => root.render(null))
+    const store = await act(async () => (await root.configure()).render(null))
     expect(() => store.getState()).not.toThrow()
   })
 
@@ -119,7 +119,7 @@ describe('createRoot', () => {
     let state: RootState = null!
 
     await act(async () => {
-      state = (await root.configure({})).render(<group />).getState()
+      state = (await root.configure()).render(<group />).getState()
       state.gl.xr.isPresenting = true
       state.gl.xr.dispatchEvent({ type: 'sessionstart' })
     })
@@ -247,7 +247,7 @@ describe('createPortal', () => {
     }
 
     await act(async () => {
-      root.render(
+      ;(await root.configure()).render(
         <>
           <Normal />
           {createPortal(<Portal />, scene, { scene })}
@@ -276,12 +276,12 @@ describe('createPortal', () => {
       )
     }
 
-    await act(async () => root.render(<Test key={0} />))
+    await act(async () => (await root.configure()).render(<Test key={0} />))
 
     expect(groupHandle).toBeDefined()
     const prevUUID = groupHandle!.uuid
 
-    await act(async () => root.render(<Test key={1} />))
+    await act(async () => (await root.configure()).render(<Test key={1} />))
 
     expect(groupHandle).toBeDefined()
     expect(prevUUID).not.toBe(groupHandle!.uuid)