chore: cleanup

packages/fiber/package.json

@@ -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",

packages/fiber/src/core/utils.tsx

@@ -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 }
 

packages/fiber/src/native/Canvas.tsx

@@ -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>
+  )
 })

packages/fiber/src/web/Canvas.tsx

@@ -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>
+  )
 })

yarn.lock

@@ -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"