@react-three/fiber 9.1.4 → 9.3.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @react-three/fiber
 
+## 9.3.0
+
+### Minor Changes
+
+- 7579c2d79ed60e5c93a259637b65c01971f39d82: feat: add flushSync example
+- 26e5d6e8b8b00b817ebb5242432000abe38bfc2c: fix: update flushSync for new reconciler
+- 0281b6bc4fcf041ed801e64f1876f70c214aa117: fix(native): update react-native deep imports for 0.79 compatibility
+
+## 9.2.0
+
+### Minor Changes
+
+- 94ece53e17a586465b10ec627cf4799cefa72b3a: Export flushSync
+
 ## 9.1.4
 
 ### Patch Changes

package/dist/declarations/src/core/index.d.ts

@@ -6,7 +6,7 @@ export { flushGlobalEffects, addEffect, addAfterEffect, addTail, invalidate, adv
 export type { AttachFnType, AttachType, ConstructorRepresentation, Catalogue, Args, InstanceProps, Instance, } from "./reconciler.js";
 export { extend, reconciler } from "./reconciler.js";
 export type { ReconcilerRoot, GLProps, CameraProps, RenderProps, InjectState } from "./renderer.js";
-export { _roots, createRoot, unmountComponentAtNode, createPortal } from "./renderer.js";
+export { _roots, createRoot, unmountComponentAtNode, createPortal, flushSync } from "./renderer.js";
 export type { Subscription, Dpr, Size, Viewport, RenderCallback, Frameloop, Performance, Renderer, XRManager, RootState, RootStore, } from "./store.js";
 export { context } from "./store.js";
 export type { ObjectMap, Camera, Disposable, Act } from "./utils.js";

package/dist/declarations/src/core/reconciler.d.ts

@@ -46,5 +46,5 @@ export interface Instance<O = any> {
 }
 export declare function extend<T extends ConstructorRepresentation>(objects: T): React.ExoticComponent<ThreeElement<T>>;
 export declare function extend<T extends Catalogue>(objects: T): void;
-export declare const reconciler: Reconciler.Reconciler<RootStore, Instance<any>, void, Instance<any>, any>;
+export declare const reconciler: Reconciler.Reconciler<RootStore, Instance<any>, void, Instance<any>, never, any>;
 export {};

package/dist/declarations/src/core/renderer.d.ts

@@ -1,9 +1,9 @@
-import * as THREE from 'three';
 import * as React from 'react';
+import * as THREE from 'three';
 import type { ThreeElement } from "../three-types.js";
-import { Renderer, RootState, Size, Dpr, Performance, Frameloop, RootStore } from "./store.js";
+import { ComputeFunction, EventManager } from "./events.js";
 import { Root } from "./reconciler.js";
-import { EventManager, ComputeFunction } from "./events.js";
+import { Dpr, Frameloop, Performance, Renderer, RootState, RootStore, Size } from "./store.js";
 import { type Properties, Camera } from "./utils.js";
 interface OffscreenCanvas extends EventTarget {
 }
@@ -83,7 +83,7 @@ export declare function createPortal(children: React.ReactNode, container: THREE
  * Force React to flush any updates inside the provided callback synchronously and immediately.
  * All the same caveats documented for react-dom's `flushSync` apply here (see https://react.dev/reference/react-dom/flushSync).
  * Nevertheless, sometimes one needs to render synchronously, for example to keep DOM and 3D changes in lock-step without
- * having to revert to a non-React solution.
+ * having to revert to a non-React solution. Note: this will only flush updates within the `Canvas` root.
  */
 export declare function flushSync<R>(fn: () => R): R;
 export {};

package/dist/{events-66111f5e.cjs.dev.js → events-d0449b76.cjs.dev.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var THREE = require('three');
 var React = require('react');
 var constants = require('react-reconciler/constants');
+var THREE = require('three');
 var traditional = require('zustand/traditional');
+var suspendReact = require('suspend-react');
 var Reconciler = require('react-reconciler');
 var scheduler = require('scheduler');
-var suspendReact = require('suspend-react');
 var jsxRuntime = require('react/jsx-runtime');
 var itsFine = require('its-fine');
 
@@ -30,8 +30,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var Reconciler__default = /*#__PURE__*/_interopDefault(Reconciler);
 
 var threeTypes = /*#__PURE__*/Object.freeze({
@@ -1256,9 +1256,6 @@ useLoader.clear = function (loader, input) {
   return suspendReact.clear([loader, ...keys]);
 };
 
-// TODO: upstream to DefinitelyTyped for React 19
-// https://github.com/facebook/react/issues/28956
-
 function createReconciler(config) {
   const reconciler = Reconciler__default["default"](config);
   reconciler.injectIntoDevTools({
@@ -1656,6 +1653,8 @@ const reconciler = /* @__PURE__ */createReconciler({
   suspendInstance() {},
   waitForCommitToBeReady: () => null,
   NotPendingTransition: null,
+  // The reconciler types use the internal ReactContext with all the hidden properties
+  // so we have to cast from the public React.Context type
   HostTransitionContext: /* @__PURE__ */React__namespace.createContext(null),
   setCurrentUpdatePriority(newPriority) {
     currentUpdatePriority = newPriority;
@@ -2167,6 +2166,17 @@ function Portal({
   );
 }
 
+/**
+ * Force React to flush any updates inside the provided callback synchronously and immediately.
+ * All the same caveats documented for react-dom's `flushSync` apply here (see https://react.dev/reference/react-dom/flushSync).
+ * Nevertheless, sometimes one needs to render synchronously, for example to keep DOM and 3D changes in lock-step without
+ * having to revert to a non-React solution. Note: this will only flush updates within the `Canvas` root.
+ */
+function flushSync(fn) {
+  // @ts-ignore - reconciler types are not maintained
+  return reconciler.flushSyncFromReconciler(fn);
+}
+
 function createSubs(callback, subs) {
   const sub = {
     callback
@@ -2423,6 +2433,7 @@ exports.createRoot = createRoot;
 exports.dispose = dispose;
 exports.extend = extend;
 exports.flushGlobalEffects = flushGlobalEffects;
+exports.flushSync = flushSync;
 exports.getRootState = getRootState;
 exports.invalidate = invalidate;
 exports.isRef = isRef;

package/dist/{events-a96a0963.cjs.prod.js → events-d0a20a9c.cjs.prod.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var THREE = require('three');
 var React = require('react');
 var constants = require('react-reconciler/constants');
+var THREE = require('three');
 var traditional = require('zustand/traditional');
+var suspendReact = require('suspend-react');
 var Reconciler = require('react-reconciler');
 var scheduler = require('scheduler');
-var suspendReact = require('suspend-react');
 var jsxRuntime = require('react/jsx-runtime');
 var itsFine = require('its-fine');
 
@@ -30,8 +30,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var Reconciler__default = /*#__PURE__*/_interopDefault(Reconciler);
 
 var threeTypes = /*#__PURE__*/Object.freeze({
@@ -1256,9 +1256,6 @@ useLoader.clear = function (loader, input) {
   return suspendReact.clear([loader, ...keys]);
 };
 
-// TODO: upstream to DefinitelyTyped for React 19
-// https://github.com/facebook/react/issues/28956
-
 function createReconciler(config) {
   const reconciler = Reconciler__default["default"](config);
   reconciler.injectIntoDevTools({
@@ -1656,6 +1653,8 @@ const reconciler = /* @__PURE__ */createReconciler({
   suspendInstance() {},
   waitForCommitToBeReady: () => null,
   NotPendingTransition: null,
+  // The reconciler types use the internal ReactContext with all the hidden properties
+  // so we have to cast from the public React.Context type
   HostTransitionContext: /* @__PURE__ */React__namespace.createContext(null),
   setCurrentUpdatePriority(newPriority) {
     currentUpdatePriority = newPriority;
@@ -2167,6 +2166,17 @@ function Portal({
   );
 }
 
+/**
+ * Force React to flush any updates inside the provided callback synchronously and immediately.
+ * All the same caveats documented for react-dom's `flushSync` apply here (see https://react.dev/reference/react-dom/flushSync).
+ * Nevertheless, sometimes one needs to render synchronously, for example to keep DOM and 3D changes in lock-step without
+ * having to revert to a non-React solution. Note: this will only flush updates within the `Canvas` root.
+ */
+function flushSync(fn) {
+  // @ts-ignore - reconciler types are not maintained
+  return reconciler.flushSyncFromReconciler(fn);
+}
+
 function createSubs(callback, subs) {
   const sub = {
     callback
@@ -2423,6 +2433,7 @@ exports.createRoot = createRoot;
 exports.dispose = dispose;
 exports.extend = extend;
 exports.flushGlobalEffects = flushGlobalEffects;
+exports.flushSync = flushSync;
 exports.getRootState = getRootState;
 exports.invalidate = invalidate;
 exports.isRef = isRef;

package/dist/{events-f681e724.esm.js → events-e3cb66e2.esm.js}

@@ -1,10 +1,10 @@
-import * as THREE from 'three';
 import * as React from 'react';
 import { DefaultEventPriority, ContinuousEventPriority, DiscreteEventPriority, ConcurrentRoot } from 'react-reconciler/constants';
+import * as THREE from 'three';
 import { createWithEqualityFn } from 'zustand/traditional';
+import { suspend, preload, clear } from 'suspend-react';
 import Reconciler from 'react-reconciler';
 import { unstable_scheduleCallback, unstable_IdlePriority } from 'scheduler';
-import { suspend, preload, clear } from 'suspend-react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { useFiber, useContextBridge, traverseFiber } from 'its-fine';
 
@@ -1230,9 +1230,6 @@ useLoader.clear = function (loader, input) {
   return clear([loader, ...keys]);
 };
 
-// TODO: upstream to DefinitelyTyped for React 19
-// https://github.com/facebook/react/issues/28956
-
 function createReconciler(config) {
   const reconciler = Reconciler(config);
   reconciler.injectIntoDevTools({
@@ -1630,6 +1627,8 @@ const reconciler = /* @__PURE__ */createReconciler({
   suspendInstance() {},
   waitForCommitToBeReady: () => null,
   NotPendingTransition: null,
+  // The reconciler types use the internal ReactContext with all the hidden properties
+  // so we have to cast from the public React.Context type
   HostTransitionContext: /* @__PURE__ */React.createContext(null),
   setCurrentUpdatePriority(newPriority) {
     currentUpdatePriority = newPriority;
@@ -2141,6 +2140,17 @@ function Portal({
   );
 }
 
+/**
+ * Force React to flush any updates inside the provided callback synchronously and immediately.
+ * All the same caveats documented for react-dom's `flushSync` apply here (see https://react.dev/reference/react-dom/flushSync).
+ * Nevertheless, sometimes one needs to render synchronously, for example to keep DOM and 3D changes in lock-step without
+ * having to revert to a non-React solution. Note: this will only flush updates within the `Canvas` root.
+ */
+function flushSync(fn) {
+  // @ts-ignore - reconciler types are not maintained
+  return reconciler.flushSyncFromReconciler(fn);
+}
+
 function createSubs(callback, subs) {
   const sub = {
     callback
@@ -2379,4 +2389,4 @@ function createPointerEvents(store) {
   };
 }
 
-export { useThree as A, Block as B, useFrame as C, useGraph as D, ErrorBoundary as E, useLoader as F, _roots as _, useMutableCallback as a, useIsomorphicLayoutEffect as b, createRoot as c, unmountComponentAtNode as d, extend as e, createPointerEvents as f, createEvents as g, flushGlobalEffects as h, isRef as i, addEffect as j, addAfterEffect as k, addTail as l, invalidate as m, advance as n, createPortal as o, context as p, applyProps as q, reconciler as r, getRootState as s, threeTypes as t, useBridge as u, dispose as v, act as w, buildGraph as x, useInstanceHandle as y, useStore as z };
+export { useStore as A, Block as B, useThree as C, useFrame as D, ErrorBoundary as E, useGraph as F, useLoader as G, _roots as _, useMutableCallback as a, useIsomorphicLayoutEffect as b, createRoot as c, unmountComponentAtNode as d, extend as e, createPointerEvents as f, createEvents as g, flushGlobalEffects as h, isRef as i, addEffect as j, addAfterEffect as k, addTail as l, invalidate as m, advance as n, createPortal as o, flushSync as p, context as q, reconciler as r, applyProps as s, threeTypes as t, useBridge as u, getRootState as v, dispose as w, act as x, buildGraph as y, useInstanceHandle as z };

package/dist/react-three-fiber.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-66111f5e.cjs.dev.js');
+var events = require('./events-d0449b76.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');
@@ -10,9 +10,9 @@ var itsFine = require('its-fine');
 var jsxRuntime = require('react/jsx-runtime');
 require('react-reconciler/constants');
 require('zustand/traditional');
+require('suspend-react');
 require('react-reconciler');
 require('scheduler');
-require('suspend-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -208,6 +208,7 @@ exports.dispose = events.dispose;
 exports.events = events.createPointerEvents;
 exports.extend = events.extend;
 exports.flushGlobalEffects = events.flushGlobalEffects;
+exports.flushSync = events.flushSync;
 exports.getRootState = events.getRootState;
 exports.invalidate = events.invalidate;
 exports.reconciler = events.reconciler;

package/dist/react-three-fiber.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-a96a0963.cjs.prod.js');
+var events = require('./events-d0a20a9c.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');
@@ -10,9 +10,9 @@ var itsFine = require('its-fine');
 var jsxRuntime = require('react/jsx-runtime');
 require('react-reconciler/constants');
 require('zustand/traditional');
+require('suspend-react');
 require('react-reconciler');
 require('scheduler');
-require('suspend-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -208,6 +208,7 @@ exports.dispose = events.dispose;
 exports.events = events.createPointerEvents;
 exports.extend = events.extend;
 exports.flushGlobalEffects = events.flushGlobalEffects;
+exports.flushSync = events.flushSync;
 exports.getRootState = events.getRootState;
 exports.invalidate = events.invalidate;
 exports.reconciler = events.reconciler;

package/dist/react-three-fiber.esm.js

@@ -1,5 +1,5 @@
-import { e as extend, u as useBridge, a as useMutableCallback, b as useIsomorphicLayoutEffect, c as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents } from './events-f681e724.esm.js';
-export { t as ReactThreeFiber, _ as _roots, w as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, q as applyProps, x as buildGraph, p as context, g as createEvents, o as createPortal, c as createRoot, v as dispose, f as events, e as extend, h as flushGlobalEffects, s as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from './events-f681e724.esm.js';
+import { e as extend, u as useBridge, a as useMutableCallback, b as useIsomorphicLayoutEffect, c as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents } from './events-e3cb66e2.esm.js';
+export { t as ReactThreeFiber, _ as _roots, x as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, s as applyProps, y as buildGraph, q as context, g as createEvents, o as createPortal, c as createRoot, w as dispose, f as events, e as extend, h as flushGlobalEffects, p as flushSync, v as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from './events-e3cb66e2.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import useMeasure from 'react-use-measure';
@@ -7,9 +7,9 @@ import { FiberProvider } from 'its-fine';
 import { jsx } from 'react/jsx-runtime';
 import 'react-reconciler/constants';
 import 'zustand/traditional';
+import 'suspend-react';
 import 'react-reconciler';
 import 'scheduler';
-import 'suspend-react';
 
 function CanvasImpl({
   ref,

package/native/dist/react-three-fiber-native.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('../../dist/events-66111f5e.cjs.dev.js');
+var events = require('../../dist/events-d0449b76.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');
@@ -15,9 +15,9 @@ var base64Js = require('base64-js');
 var buffer = require('buffer');
 require('react-reconciler/constants');
 require('zustand/traditional');
+require('suspend-react');
 require('react-reconciler');
 require('scheduler');
-require('suspend-react');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -438,7 +438,9 @@ function polyfills() {
       const url = URL.createObjectURL(blob);
       URL.revokeObjectURL(url);
     } catch (_) {
-      const BlobManager = require('react-native/Libraries/Blob/BlobManager.js');
+      var _BlobManagerModule$de;
+      const BlobManagerModule = require('react-native/Libraries/Blob/BlobManager.js');
+      const BlobManager = (_BlobManagerModule$de = BlobManagerModule.default) != null ? _BlobManagerModule$de : BlobManagerModule;
       const createObjectURL = URL.createObjectURL;
       URL.createObjectURL = function (blob) {
         if (blob.data._base64) {
@@ -544,6 +546,7 @@ exports.createRoot = events.createRoot;
 exports.dispose = events.dispose;
 exports.extend = events.extend;
 exports.flushGlobalEffects = events.flushGlobalEffects;
+exports.flushSync = events.flushSync;
 exports.getRootState = events.getRootState;
 exports.invalidate = events.invalidate;
 exports.reconciler = events.reconciler;

package/native/dist/react-three-fiber-native.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('../../dist/events-a96a0963.cjs.prod.js');
+var events = require('../../dist/events-d0a20a9c.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');
@@ -15,9 +15,9 @@ var base64Js = require('base64-js');
 var buffer = require('buffer');
 require('react-reconciler/constants');
 require('zustand/traditional');
+require('suspend-react');
 require('react-reconciler');
 require('scheduler');
-require('suspend-react');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -438,7 +438,9 @@ function polyfills() {
       const url = URL.createObjectURL(blob);
       URL.revokeObjectURL(url);
     } catch (_) {
-      const BlobManager = require('react-native/Libraries/Blob/BlobManager.js');
+      var _BlobManagerModule$de;
+      const BlobManagerModule = require('react-native/Libraries/Blob/BlobManager.js');
+      const BlobManager = (_BlobManagerModule$de = BlobManagerModule.default) != null ? _BlobManagerModule$de : BlobManagerModule;
       const createObjectURL = URL.createObjectURL;
       URL.createObjectURL = function (blob) {
         if (blob.data._base64) {
@@ -544,6 +546,7 @@ exports.createRoot = events.createRoot;
 exports.dispose = events.dispose;
 exports.extend = events.extend;
 exports.flushGlobalEffects = events.flushGlobalEffects;
+exports.flushSync = events.flushSync;
 exports.getRootState = events.getRootState;
 exports.invalidate = events.invalidate;
 exports.reconciler = events.reconciler;

package/native/dist/react-three-fiber-native.esm.js

@@ -1,5 +1,5 @@
-import { e as extend, u as useBridge, a as useMutableCallback, c as createRoot, b as useIsomorphicLayoutEffect, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents, g as createEvents } from '../../dist/events-f681e724.esm.js';
-export { t as ReactThreeFiber, _ as _roots, w as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, q as applyProps, x as buildGraph, p as context, g as createEvents, o as createPortal, c as createRoot, v as dispose, e as extend, h as flushGlobalEffects, s as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, C as useFrame, D as useGraph, y as useInstanceHandle, F as useLoader, z as useStore, A as useThree } from '../../dist/events-f681e724.esm.js';
+import { e as extend, u as useBridge, a as useMutableCallback, c as createRoot, b as useIsomorphicLayoutEffect, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createPointerEvents, g as createEvents } from '../../dist/events-e3cb66e2.esm.js';
+export { t as ReactThreeFiber, _ as _roots, x as act, k as addAfterEffect, j as addEffect, l as addTail, n as advance, s as applyProps, y as buildGraph, q as context, g as createEvents, o as createPortal, c as createRoot, w as dispose, e as extend, h as flushGlobalEffects, p as flushSync, v as getRootState, m as invalidate, r as reconciler, d as unmountComponentAtNode, D as useFrame, F as useGraph, z as useInstanceHandle, G as useLoader, A as useStore, C as useThree } from '../../dist/events-e3cb66e2.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import { PanResponder, PixelRatio, StyleSheet, View, Platform, Image, NativeModules } from 'react-native';
@@ -12,9 +12,9 @@ import { fromByteArray } from 'base64-js';
 import { Buffer } from 'buffer';
 import 'react-reconciler/constants';
 import 'zustand/traditional';
+import 'suspend-react';
 import 'react-reconciler';
 import 'scheduler';
-import 'suspend-react';
 
 // TODO: React 19 needs support from react-native
 const _View = View;
@@ -413,7 +413,9 @@ function polyfills() {
       const url = URL.createObjectURL(blob);
       URL.revokeObjectURL(url);
     } catch (_) {
-      const BlobManager = require('react-native/Libraries/Blob/BlobManager.js');
+      var _BlobManagerModule$de;
+      const BlobManagerModule = require('react-native/Libraries/Blob/BlobManager.js');
+      const BlobManager = (_BlobManagerModule$de = BlobManagerModule.default) != null ? _BlobManagerModule$de : BlobManagerModule;
       const createObjectURL = URL.createObjectURL;
       URL.createObjectURL = function (blob) {
         if (blob.data._base64) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "9.1.4",
+  "version": "9.3.0",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.8",
-    "@types/react-reconciler": "^0.28.9",
+    "@types/react-reconciler": "^0.32.0",
     "@types/webxr": "*",
     "base64-js": "^1.5.1",
     "buffer": "^6.0.3",