@react-three/fiber 9.0.0-rc.9 → 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/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/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-aba3c3d1.esm.js → events-0dc84b81.esm.js}

@@ -370,19 +370,21 @@ function applyProps(object, props) {
     // Layers must be written to the mask property
     if (target instanceof THREE.Layers && value instanceof THREE.Layers) {
       target.mask = value.mask;
-    } else if (target instanceof THREE.Color && isColorRepresentation(value)) {
+    }
+    // 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') {
+    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

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

@@ -396,19 +396,21 @@ function applyProps(object, props) {
     // Layers must be written to the mask property
     if (target instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) {
       target.mask = value.mask;
-    } else if (target instanceof THREE__namespace.Color && isColorRepresentation(value)) {
+    }
+    // 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') {
+    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

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

@@ -396,19 +396,21 @@ function applyProps(object, props) {
     // Layers must be written to the mask property
     if (target instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) {
       target.mask = value.mask;
-    } else if (target instanceof THREE__namespace.Color && isColorRepresentation(value)) {
+    }
+    // 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') {
+    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

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-b02714fc.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-bd708dc8.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-aba3c3d1.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-aba3c3d1.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-b02714fc.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-bd708dc8.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-aba3c3d1.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-aba3c3d1.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.9",
+  "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
 ```