@react-three/fiber 9.0.0-rc.8 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @react-three/fiber
 
+## 9.0.0
+
+### Major Changes
+
+- 226d2ec: feat: React 19 support
+
+## 8.18.0
+
+### Minor Changes
+
+- 54a3330f: feat: make children optional in Canvas
+
 ## 8.17.14
 
 ### Patch Changes

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

@@ -56,6 +56,7 @@ export interface EventHandlers {
     onPointerMissed?: (event: MouseEvent) => void;
     onPointerCancel?: (event: ThreeEvent<PointerEvent>) => void;
     onWheel?: (event: ThreeEvent<WheelEvent>) => void;
+    onLostPointerCapture?: (event: ThreeEvent<PointerEvent>) => void;
 }
 export type FilterFunction = (items: THREE.Intersection[], state: RootState) => THREE.Intersection[];
 export type ComputeFunction = (event: DomEvent, root: RootState, previous?: RootState) => void;

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

@@ -31,11 +31,13 @@ export declare function useFrame(callback: RenderCallback, renderPriority?: numb
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
  */
 export declare function useGraph(object: THREE.Object3D): ObjectMap;
-type LoaderLike = THREE.Loader<any, string | string[] | string[][] | Readonly<string | string[] | string[][]>>;
-type LoaderInstance<T extends LoaderLike | ConstructorRepresentation<LoaderLike>> = T extends ConstructorRepresentation<LoaderLike> ? InstanceType<T> : T;
-export type LoaderResult<T extends LoaderLike | ConstructorRepresentation<LoaderLike>> = Awaited<ReturnType<LoaderInstance<T>['loadAsync']>> extends infer R ? R extends {
+type InputLike = string | string[] | string[][] | Readonly<string | string[] | string[][]>;
+type LoaderLike = THREE.Loader<any, InputLike>;
+type GLTFLike = {
     scene: THREE.Object3D;
-} ? R & ObjectMap : R : never;
+};
+type LoaderInstance<T extends LoaderLike | ConstructorRepresentation<LoaderLike>> = T extends ConstructorRepresentation<LoaderLike> ? InstanceType<T> : T;
+export type LoaderResult<T extends LoaderLike | ConstructorRepresentation<LoaderLike>> = Awaited<ReturnType<LoaderInstance<T>['loadAsync']>> extends infer R ? R extends GLTFLike ? R & ObjectMap : R : never;
 export type Extensions<T extends LoaderLike | ConstructorRepresentation<LoaderLike>> = (loader: LoaderInstance<T>) => void;
 /**
  * Synchronously loads and caches assets with a three loader.
@@ -43,9 +45,9 @@ export type Extensions<T extends LoaderLike | ConstructorRepresentation<LoaderLi
  * Note: this hook's caller must be wrapped with `React.Suspense`
  * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
  */
-export declare function useLoader<T, U extends string | string[] | string[][], L extends LoaderLike | ConstructorRepresentation<LoaderLike>>(loader: L, input: U, extensions?: Extensions<L>, onProgress?: (event: ProgressEvent<EventTarget>) => void): U extends any[] ? LoaderResult<L>[] : LoaderResult<L>;
+export declare function useLoader<I extends InputLike, L extends LoaderLike | ConstructorRepresentation<LoaderLike>>(loader: L, input: I, extensions?: Extensions<L>, onProgress?: (event: ProgressEvent<EventTarget>) => void): I extends any[] ? LoaderResult<L>[] : LoaderResult<L>;
 export declare namespace useLoader {
-    var preload: <T, U extends string | string[] | string[][], L extends LoaderLike | ConstructorRepresentation<LoaderLike>>(loader: L, input: U, extensions?: Extensions<L> | undefined) => void;
-    var clear: <T, U extends string | string[] | string[][], L extends LoaderLike | ConstructorRepresentation<LoaderLike>>(loader: L, input: U) => void;
+    var preload: <I extends InputLike, L extends LoaderLike | ConstructorRepresentation<LoaderLike>>(loader: L, input: I, extensions?: Extensions<L> | undefined) => void;
+    var clear: <I extends InputLike, L extends LoaderLike | ConstructorRepresentation<LoaderLike>>(loader: L, input: I) => void;
 }
 export {};

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

@@ -27,6 +27,7 @@ export type Camera = (THREE.OrthographicCamera | THREE.PerspectiveCamera) & {
 };
 export declare const isOrthographicCamera: (def: Camera) => def is THREE.OrthographicCamera;
 export declare const isRef: (obj: any) => obj is React.RefObject<unknown>;
+export declare const isColorRepresentation: (value: unknown) => value is THREE.ColorRepresentation;
 /**
  * An SSR-friendly useLayoutEffect.
  *

package/dist/declarations/src/native/Canvas.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { View, type ViewProps, type ViewStyle } from 'react-native';
 import { RenderProps } from "../core/index.js";
 export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'dpr'>, Omit<ViewProps, 'children'> {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     style?: ViewStyle;
     ref?: React.Ref<View>;
 }

package/dist/declarations/src/three-types.d.ts

@@ -37,9 +37,10 @@ type DuplicateKeys<T, U> = Extract<keyof T, keyof U>;
 type Conflicts = DuplicateKeys<JSX.IntrinsicElements, {
     [K in keyof ThreeExports as Uncapitalize<K>]: any;
 }>;
-type ThreeElementsImpl = {
-    [K in keyof ThreeExports as Uncapitalize<K> extends Conflicts ? `three${Capitalize<K>}` : Uncapitalize<K>]: ThreeExports[K] extends ConstructorRepresentation ? ThreeElement<ThreeExports[K]> : never;
+export type ThreeToJSXElements<T extends Record<string, any>> = {
+    [K in keyof T & string as Uncapitalize<K> extends Conflicts ? `three${Capitalize<K>}` : Uncapitalize<K>]: T[K] extends ConstructorRepresentation ? ThreeElement<T[K]> : never;
 };
+type ThreeElementsImpl = ThreeToJSXElements<ThreeExports>;
 export interface ThreeElements extends ThreeElementsImpl {
     primitive: Omit<ThreeElement<any>, 'args'> & {
         object: object;

package/dist/declarations/src/web/Canvas.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Options as ResizeOptions } from 'react-use-measure';
 import { RenderProps } from "../core/index.js";
 export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
+    children?: React.ReactNode;
     ref?: React.Ref<HTMLCanvasElement>;
     /** Canvas fallback content, similar to img's alt prop */
     fallback?: React.ReactNode;

package/dist/{events-5b423474.esm.js → events-0dc84b81.esm.js}

@@ -26,6 +26,7 @@ function findInitialRoot(instance) {
 const act = React.act;
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const isRef = obj => obj && obj.hasOwnProperty('current');
+const isColorRepresentation = value => value != null && (typeof value === 'string' || typeof value === 'number' || value.isColor);
 
 /**
  * An SSR-friendly useLayoutEffect.
@@ -370,19 +371,22 @@ function applyProps(object, props) {
     if (target instanceof THREE.Layers && value instanceof THREE.Layers) {
       target.mask = value.mask;
     }
+    // Set colors if valid color representation for automatic conversion (copy)
+    else if (target instanceof THREE.Color && isColorRepresentation(value)) {
+      target.set(value);
+    }
     // Copy if properties match signatures and implement math interface (likely read-only)
-    else if (target && typeof target.set === 'function' && typeof target.copy === 'function' && value != null && value.constructor && target.constructor === value.constructor) {
+    else if (target !== null && typeof target === 'object' && typeof target.set === 'function' && typeof target.copy === 'function' && value != null && value.constructor && target.constructor === value.constructor) {
       target.copy(value);
     }
     // Set array types
-    else if (target && typeof target.set === 'function' && Array.isArray(value)) {
+    else if (target !== null && typeof target === 'object' && typeof target.set === 'function' && Array.isArray(value)) {
       if (typeof target.fromArray === 'function') target.fromArray(value);else target.set(...value);
     }
     // Set literal types
-    else if (target && typeof target.set === 'function' && typeof value === 'number') {
-      // Allow setting array scalars (don't call setScalar for Color since it skips conversions)
-      const isColor = target.isColor;
-      if (!isColor && typeof target.setScalar === 'function') target.setScalar(value);
+    else if (target !== null && typeof target === 'object' && typeof target.set === 'function' && typeof value === 'number') {
+      // Allow setting array scalars
+      if (typeof target.setScalar === 'function') target.setScalar(value);
       // Otherwise just set single value
       else target.set(value);
     }
@@ -2296,7 +2300,7 @@ function createPointerEvents(store) {
     compute(event, state, previous) {
       // https://github.com/pmndrs/react-three-fiber/pull/782
       // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
-      state.pointer.set((event.offsetX - state.size.left) / state.size.width * 2 - 1, -((event.offsetY - state.size.top) / state.size.height) * 2 + 1);
+      state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
       state.raycaster.setFromCamera(state.pointer, state.camera);
     },
     connected: undefined,

package/dist/{events-89dd614d.cjs.dev.js → events-29e84b1f.cjs.dev.js}

@@ -52,6 +52,7 @@ function findInitialRoot(instance) {
 const act = React__namespace.act;
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const isRef = obj => obj && obj.hasOwnProperty('current');
+const isColorRepresentation = value => value != null && (typeof value === 'string' || typeof value === 'number' || value.isColor);
 
 /**
  * An SSR-friendly useLayoutEffect.
@@ -396,19 +397,22 @@ function applyProps(object, props) {
     if (target instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) {
       target.mask = value.mask;
     }
+    // Set colors if valid color representation for automatic conversion (copy)
+    else if (target instanceof THREE__namespace.Color && isColorRepresentation(value)) {
+      target.set(value);
+    }
     // Copy if properties match signatures and implement math interface (likely read-only)
-    else if (target && typeof target.set === 'function' && typeof target.copy === 'function' && value != null && value.constructor && target.constructor === value.constructor) {
+    else if (target !== null && typeof target === 'object' && typeof target.set === 'function' && typeof target.copy === 'function' && value != null && value.constructor && target.constructor === value.constructor) {
       target.copy(value);
     }
     // Set array types
-    else if (target && typeof target.set === 'function' && Array.isArray(value)) {
+    else if (target !== null && typeof target === 'object' && typeof target.set === 'function' && Array.isArray(value)) {
       if (typeof target.fromArray === 'function') target.fromArray(value);else target.set(...value);
     }
     // Set literal types
-    else if (target && typeof target.set === 'function' && typeof value === 'number') {
-      // Allow setting array scalars (don't call setScalar for Color since it skips conversions)
-      const isColor = target.isColor;
-      if (!isColor && typeof target.setScalar === 'function') target.setScalar(value);
+    else if (target !== null && typeof target === 'object' && typeof target.set === 'function' && typeof value === 'number') {
+      // Allow setting array scalars
+      if (typeof target.setScalar === 'function') target.setScalar(value);
       // Otherwise just set single value
       else target.set(value);
     }
@@ -2322,7 +2326,7 @@ function createPointerEvents(store) {
     compute(event, state, previous) {
       // https://github.com/pmndrs/react-three-fiber/pull/782
       // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
-      state.pointer.set((event.offsetX - state.size.left) / state.size.width * 2 - 1, -((event.offsetY - state.size.top) / state.size.height) * 2 + 1);
+      state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
       state.raycaster.setFromCamera(state.pointer, state.camera);
     },
     connected: undefined,

package/dist/{events-b4105f71.cjs.prod.js → events-8ef03cf1.cjs.prod.js}

@@ -52,6 +52,7 @@ function findInitialRoot(instance) {
 const act = React__namespace.act;
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const isRef = obj => obj && obj.hasOwnProperty('current');
+const isColorRepresentation = value => value != null && (typeof value === 'string' || typeof value === 'number' || value.isColor);
 
 /**
  * An SSR-friendly useLayoutEffect.
@@ -396,19 +397,22 @@ function applyProps(object, props) {
     if (target instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) {
       target.mask = value.mask;
     }
+    // Set colors if valid color representation for automatic conversion (copy)
+    else if (target instanceof THREE__namespace.Color && isColorRepresentation(value)) {
+      target.set(value);
+    }
     // Copy if properties match signatures and implement math interface (likely read-only)
-    else if (target && typeof target.set === 'function' && typeof target.copy === 'function' && value != null && value.constructor && target.constructor === value.constructor) {
+    else if (target !== null && typeof target === 'object' && typeof target.set === 'function' && typeof target.copy === 'function' && value != null && value.constructor && target.constructor === value.constructor) {
       target.copy(value);
     }
     // Set array types
-    else if (target && typeof target.set === 'function' && Array.isArray(value)) {
+    else if (target !== null && typeof target === 'object' && typeof target.set === 'function' && Array.isArray(value)) {
       if (typeof target.fromArray === 'function') target.fromArray(value);else target.set(...value);
     }
     // Set literal types
-    else if (target && typeof target.set === 'function' && typeof value === 'number') {
-      // Allow setting array scalars (don't call setScalar for Color since it skips conversions)
-      const isColor = target.isColor;
-      if (!isColor && typeof target.setScalar === 'function') target.setScalar(value);
+    else if (target !== null && typeof target === 'object' && typeof target.set === 'function' && typeof value === 'number') {
+      // Allow setting array scalars
+      if (typeof target.setScalar === 'function') target.setScalar(value);
       // Otherwise just set single value
       else target.set(value);
     }
@@ -2322,7 +2326,7 @@ function createPointerEvents(store) {
     compute(event, state, previous) {
       // https://github.com/pmndrs/react-three-fiber/pull/782
       // Events trigger outside of canvas when moved, use offsetX/Y by default and allow overrides
-      state.pointer.set((event.offsetX - state.size.left) / state.size.width * 2 - 1, -((event.offsetY - state.size.top) / state.size.height) * 2 + 1);
+      state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
       state.raycaster.setFromCamera(state.pointer, state.camera);
     },
     connected: undefined,

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-89dd614d.cjs.dev.js');
+var events = require('./events-29e84b1f.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');
@@ -135,7 +135,7 @@ function CanvasImpl({
               fallback: /*#__PURE__*/jsxRuntime.jsx(events.Block, {
                 set: setBlock
               }),
-              children: children
+              children: children != null ? children : null
             })
           })
         }));

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-b4105f71.cjs.prod.js');
+var events = require('./events-8ef03cf1.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');
@@ -135,7 +135,7 @@ function CanvasImpl({
               fallback: /*#__PURE__*/jsxRuntime.jsx(events.Block, {
                 set: setBlock
               }),
-              children: children
+              children: children != null ? children : null
             })
           })
         }));

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-5b423474.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-5b423474.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-0dc84b81.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-0dc84b81.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import useMeasure from 'react-use-measure';
@@ -108,7 +108,7 @@ function CanvasImpl({
               fallback: /*#__PURE__*/jsx(Block, {
                 set: setBlock
               }),
-              children: children
+              children: children != null ? children : null
             })
           })
         }));

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-89dd614d.cjs.dev.js');
+var events = require('../../dist/events-29e84b1f.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');
@@ -239,7 +239,7 @@ function CanvasImpl({
               fallback: /*#__PURE__*/jsxRuntime.jsx(events.Block, {
                 set: setBlock
               }),
-              children: children
+              children: children != null ? children : null
             })
           })
         }));

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-b4105f71.cjs.prod.js');
+var events = require('../../dist/events-8ef03cf1.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');
@@ -239,7 +239,7 @@ function CanvasImpl({
               fallback: /*#__PURE__*/jsxRuntime.jsx(events.Block, {
                 set: setBlock
               }),
-              children: children
+              children: children != null ? children : null
             })
           })
         }));

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-5b423474.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-5b423474.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-0dc84b81.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-0dc84b81.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import { PanResponder, PixelRatio, StyleSheet, View, Platform, Image, NativeModules } from 'react-native';
@@ -214,7 +214,7 @@ function CanvasImpl({
               fallback: /*#__PURE__*/jsx(Block, {
                 set: setBlock
               }),
-              children: children
+              children: children != null ? children : null
             })
           })
         }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "9.0.0-rc.8",
+  "version": "9.0.0",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -43,16 +43,16 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.8",
-    "@types/react-reconciler": "^0.28.8",
+    "@types/react-reconciler": "^0.28.9",
     "@types/webxr": "*",
     "base64-js": "^1.5.1",
     "buffer": "^6.0.3",
-    "its-fine": "^1.2.5",
-    "react-reconciler": "0.31.0",
+    "its-fine": "^2.0.0",
+    "react-reconciler": "^0.31.0",
     "react-use-measure": "^2.1.7",
-    "scheduler": "0.25.0",
+    "scheduler": "^0.25.0",
     "suspend-react": "^0.1.3",
-    "zustand": "^4.1.2"
+    "zustand": "^5.0.3"
   },
   "peerDependencies": {
     "expo": ">=43.0",

package/readme.md

@@ -139,7 +139,7 @@ npm install expo-cli -g
 expo init my-app
 cd my-app
 # Install dependencies
-npm install three @react-three/fiber@beta react@rc
+npm install three @react-three/fiber react
 # Start
 expo start
 ```