Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[v9] fix!: upgrade reconciler for React 19 #3224

Merged
merged 31 commits into from
Apr 26, 2024
Merged
Changes from 1 commit
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
995b1e2
fix!: upgrade reconciler for React 19
CodyJasonBennett Mar 27, 2024
a5d9b8a
fix: upgrade scheduler, use stable act
CodyJasonBennett Mar 27, 2024
2619ee6
experiment: remove context bridge to isolate hostcontext issue
CodyJasonBennett Mar 27, 2024
056349a
chore: cleanup
CodyJasonBennett Mar 28, 2024
f490c2e
chore: upgrade to canary
CodyJasonBennett Mar 31, 2024
c0f291c
fix: catch null in commitUpdate from prepareUpdate
CodyJasonBennett Mar 31, 2024
bf33941
chore(RTTR): update snapshot
CodyJasonBennett Mar 31, 2024
0e7597f
chore: upgrade canary
CodyJasonBennett Apr 6, 2024
03d7828
chore: update canary, implement updatePriority tracking
CodyJasonBennett Apr 9, 2024
6f5cdba
chore: filter out hostcontext warnings
CodyJasonBennett Apr 15, 2024
4d8d582
chore: update canary
CodyJasonBennett Apr 20, 2024
b28b1aa
chore: revert snapshot
CodyJasonBennett Apr 20, 2024
4559147
fix(reconciler): use empty host context
CodyJasonBennett Apr 22, 2024
cedf250
chore: update canary
CodyJasonBennett Apr 22, 2024
c147c8e
chore: cleanup
CodyJasonBennett Apr 22, 2024
dbed854
fix(reconciler): return null waitForCommitToBeReady
CodyJasonBennett Apr 22, 2024
1400fac
fix(renderer): use new container signature
CodyJasonBennett Apr 22, 2024
86dbead
Merge branch 'v9' into fix/upgrade-react19
CodyJasonBennett Apr 22, 2024
a9bd79e
Merge branch 'v9' into fix/upgrade-react19
CodyJasonBennett Apr 22, 2024
6b91dfe
chore(examples): use React 19
CodyJasonBennett Apr 22, 2024
2b15a91
chore(tests): restore scheduler mock
CodyJasonBennett Apr 23, 2024
7df9759
chore: update canary
CodyJasonBennett Apr 25, 2024
b5ef3ac
experiment(CI): show verbose test results
CodyJasonBennett Apr 25, 2024
e9460ed
experiment(CI): debug test logs
CodyJasonBennett Apr 25, 2024
15074b8
fix(reconciler): remove prepareUpdate, diff in commit
CodyJasonBennett Apr 25, 2024
65be1bb
chore(tests): cleanup test-renderer deprecations
CodyJasonBennett Apr 25, 2024
cdb6826
chore(CI): revert changes
CodyJasonBennett Apr 25, 2024
09118bc
fix(reconciler): sync dispose in test environment
CodyJasonBennett Apr 25, 2024
8ae3e1a
chore(tests): harden error cases
CodyJasonBennett Apr 25, 2024
04b88d1
chore(reconciler): cleanup
CodyJasonBennett Apr 25, 2024
9a913a6
chore: upgrade to beta
CodyJasonBennett Apr 25, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
chore: cleanup
CodyJasonBennett committed Mar 28, 2024
commit 056349ae9b2b1e042a19fff55219732fa00de3f7
1 change: 1 addition & 0 deletions packages/fiber/package.json
Original file line number Diff line number Diff line change
@@ -46,6 +46,7 @@
"@types/react-reconciler": "^0.28.8",
"base64-js": "^1.5.1",
"buffer": "^6.0.3",
"its-fine": "^1.1.3",
"react-reconciler": "0.0.0-experimental-2b036d3f1-20240327",
"react-use-measure": "^2.1.1",
"scheduler": "0.0.0-experimental-2b036d3f1-20240327",
26 changes: 26 additions & 0 deletions packages/fiber/src/core/utils.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as THREE from 'three'
import * as React from 'react'
import { useFiber, traverseFiber, useContextBridge } from 'its-fine'
import { Instance, catalogue } from './reconciler'
import type { Fiber } from 'react-reconciler'
import type { EventHandlers } from './events'
@@ -64,6 +65,31 @@ export function useMutableCallback<T>(fn: T): React.MutableRefObject<T> {
return ref
}

export type Bridge = React.FC<{ children?: React.ReactNode }>

/**
* Bridges renderer Context and StrictMode from a primary renderer.
*/
export function useBridge(): Bridge {
const fiber = useFiber()
const ContextBridge = useContextBridge()

return React.useMemo(
() =>
({ children }) => {
const strict = !!traverseFiber(fiber, true, (node) => node.type === React.StrictMode)
const Root = strict ? React.StrictMode : React.Fragment

return (
<Root>
<ContextBridge>{children}</ContextBridge>
</Root>
)
},
[fiber, ContextBridge],
)
}

export type SetBlock = false | Promise<null> | null
export type UnblockProps = { set: React.Dispatch<React.SetStateAction<SetBlock>>; children: React.ReactNode }

19 changes: 14 additions & 5 deletions packages/fiber/src/native/Canvas.tsx
Original file line number Diff line number Diff line change
@@ -2,7 +2,8 @@ import * as React from 'react'
import * as THREE from 'three'
import { View, ViewProps, ViewStyle, LayoutChangeEvent, StyleSheet, PixelRatio } from 'react-native'
import { ExpoWebGLRenderingContext, GLView } from 'expo-gl'
import { SetBlock, Block, ErrorBoundary, useMutableCallback } from '../core/utils'
import { FiberProvider } from 'its-fine'
import { SetBlock, Block, ErrorBoundary, useMutableCallback, useBridge } from '../core/utils'
import { extend, createRoot, unmountComponentAtNode, RenderProps, ReconcilerRoot } from '../core'
import { createTouchEvents } from './events'
import { RootState, Size } from '../core/store'
@@ -47,6 +48,8 @@ const CanvasImpl = /*#__PURE__*/ React.forwardRef<View, Props>(
// their own elements by using the createRoot API instead
React.useMemo(() => extend(THREE as any), [])

const Bridge = useBridge()

const [{ width, height, top, left }, setSize] = React.useState<Size>({ width: 0, height: 0, top: 0, left: 0 })
const [canvas, setCanvas] = React.useState<HTMLCanvasElement | null>(null)
const [bind, setBind] = React.useState<any>()
@@ -129,9 +132,11 @@ const CanvasImpl = /*#__PURE__*/ React.forwardRef<View, Props>(
},
})
root.current.render(
<ErrorBoundary set={setError}>
<React.Suspense fallback={<Block set={setBlock} />}>{children}</React.Suspense>
</ErrorBoundary>,
<Bridge>
<ErrorBoundary set={setError}>
<React.Suspense fallback={<Block set={setBlock} />}>{children}</React.Suspense>
</ErrorBoundary>
</Bridge>,
)
}

@@ -156,5 +161,9 @@ const CanvasImpl = /*#__PURE__*/ React.forwardRef<View, Props>(
* @see https://docs.pmnd.rs/react-three-fiber/api/canvas
*/
export const Canvas = React.forwardRef<View, CanvasProps>(function CanvasWrapper(props, ref) {
return <CanvasImpl {...props} ref={ref} />
return (
<FiberProvider>
<CanvasImpl {...props} ref={ref} />
</FiberProvider>
)
})
27 changes: 22 additions & 5 deletions packages/fiber/src/web/Canvas.tsx
Original file line number Diff line number Diff line change
@@ -2,7 +2,16 @@ import * as React from 'react'
import * as THREE from 'three'
import useMeasure from 'react-use-measure'
import type { Options as ResizeOptions } from 'react-use-measure'
import { isRef, SetBlock, Block, ErrorBoundary, useMutableCallback, useIsomorphicLayoutEffect } from '../core/utils'
import { FiberProvider } from 'its-fine'
import {
isRef,
SetBlock,
Block,
ErrorBoundary,
useMutableCallback,
useIsomorphicLayoutEffect,
useBridge,
} from '../core/utils'
import { ReconcilerRoot, extend, createRoot, unmountComponentAtNode, RenderProps } from '../core'
import { createPointerEvents } from './events'
import { DomEvent } from '../core/events'
@@ -59,6 +68,8 @@ const CanvasImpl = /*#__PURE__*/ React.forwardRef<HTMLCanvasElement, Props>(func
// their own elements by using the createRoot API instead
React.useMemo(() => extend(THREE as any), [])

const Bridge = useBridge()

const [containerRef, containerRect] = useMeasure({ scroll: true, debounce: { scroll: 50, resize: 0 }, ...resize })
const canvasRef = React.useRef<HTMLCanvasElement>(null!)
const divRef = React.useRef<HTMLDivElement>(null!)
@@ -117,9 +128,11 @@ const CanvasImpl = /*#__PURE__*/ React.forwardRef<HTMLCanvasElement, Props>(func
},
})
root.current.render(
<ErrorBoundary set={setError}>
<React.Suspense fallback={<Block set={setBlock} />}>{children}</React.Suspense>
</ErrorBoundary>,
<Bridge>
<ErrorBoundary set={setError}>
<React.Suspense fallback={<Block set={setBlock} />}>{children}</React.Suspense>
</ErrorBoundary>
</Bridge>,
)
}
})
@@ -159,5 +172,9 @@ const CanvasImpl = /*#__PURE__*/ React.forwardRef<HTMLCanvasElement, Props>(func
* @see https://docs.pmnd.rs/react-three-fiber/api/canvas
*/
export const Canvas = React.forwardRef<HTMLCanvasElement, CanvasProps>(function CanvasWrapper(props, ref) {
return <CanvasImpl {...props} ref={ref} />
return (
<FiberProvider>
<CanvasImpl {...props} ref={ref} />
</FiberProvider>
)
})
9 changes: 8 additions & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
@@ -2897,7 +2897,7 @@
dependencies:
"@types/react" "*"

"@types/react-reconciler@^0.28.8":
"@types/react-reconciler@^0.28.0", "@types/react-reconciler@^0.28.8":
version "0.28.8"
resolved "https://registry.yarnpkg.com/@types/react-reconciler/-/react-reconciler-0.28.8.tgz#e51710572bcccf214306833c2438575d310b3e98"
integrity sha512-SN9c4kxXZonFhbX4hJrZy37yw9e7EIxcpHCxQv5JUS18wDE5ovkQKlqQEkufdJCCMfuI9BnjUJvhYeJ9x5Ra7g==
@@ -6486,6 +6486,13 @@ iterator.prototype@^1.1.2:
reflect.getprototypeof "^1.0.4"
set-function-name "^2.0.1"

its-fine@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/its-fine/-/its-fine-1.1.3.tgz#703219c696b8093940ce8ce6c3a52258750d2989"
integrity sha512-mncCA+yb6tuh5zK26cHqKlsSyxm4zdm4YgJpxycyx6p9fgxgK5PLu3iDVpKhzTn57Yrv3jk/r0aK0RFTT1OjFw==
dependencies:
"@types/react-reconciler" "^0.28.0"

jackspeak@^2.3.5:
version "2.3.6"
resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.3.6.tgz#647ecc472238aee4b06ac0e461acc21a8c505ca8"