@react-three/fiber 9.0.0-alpha.4 → 9.0.0-alpha.6

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @react-three/fiber
 
+## 8.16.5
+
+### Patch Changes
+
+- cb913e01: fix: use fast JSX, future JSX types
+
+## 8.16.4
+
+### Patch Changes
+
+- 1270d24c: fix: missing dependency on inject function
+
+## 8.16.3
+
+### Patch Changes
+
+- 9c83502c: fix(Canvas): don't override camera frustum props
+
 ## 8.16.2
 
 ### Patch Changes

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

@@ -5,11 +5,15 @@ import { ObjectMap } from "./utils.js";
 import type { Instance } from "./reconciler.js";
 /**
  * Exposes an object's {@link Instance}.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useinstancehandle
  *
  * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
  */
-export declare function useInstanceHandle<O>(ref: React.RefObject<O>): React.RefObject<Instance>;
+export declare function useInstanceHandle<T>(ref: React.RefObject<T>): React.RefObject<Instance<T>>;
+/**
+ * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
+ */
 export declare function useStore(): RootStore;
 /**
  * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
@@ -24,7 +28,7 @@ export declare function useThree<T = RootState>(selector?: (state: RootState) =>
 export declare function useFrame(callback: RenderCallback, renderPriority?: number): null;
 /**
  * Executes a callback in a given update stage.
- * Uses the stage instance to indetify which stage to target in the lifecycle.
+ * Uses the stage instance to identify which stage to target in the lifecycle.
  */
 export declare function useUpdate(callback: UpdateCallback, stage?: StageTypes): void;
 /**

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

@@ -9,7 +9,7 @@ export type { ReconcilerRoot, GLProps, CameraProps, RenderProps, InjectState } f
 export { _roots, render, createRoot, unmountComponentAtNode, createPortal } from "./renderer.js";
 export type { UpdateSubscription } from "./stages.js";
 export { Stage, FixedStage, Stages } from "./stages.js";
-export type { Subscription, Dpr, Size, RenderCallback, UpdateCallback, LegacyAlways, FrameloopMode, FrameloopRender, FrameloopLegacy, Frameloop, Performance, Renderer, StageTypes, XRManager, RootState, RootStore, } from "./store.js";
+export type { Subscription, Dpr, Size, Viewport, RenderCallback, UpdateCallback, LegacyAlways, FrameloopMode, FrameloopRender, FrameloopLegacy, Frameloop, Performance, Renderer, StageTypes, XRManager, RootState, RootStore, } from "./store.js";
 export { context } from "./store.js";
 export type { ObjectMap, Camera, Disposable, Act } from "./utils.js";
 export { applyProps, getRootState, dispose, act, buildGraph } from "./utils.js";

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

@@ -35,6 +35,7 @@ export interface Instance<O = any> {
     handlers: Partial<EventHandlers>;
     attach?: AttachType<O>;
     previousAttach?: any;
+    isHidden: boolean;
     autoRemovedBeforeAppend?: boolean;
 }
 export declare const catalogue: Catalogue;

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

@@ -80,5 +80,5 @@ export type InjectState = Partial<Omit<RootState, 'events'> & {
         connected?: any;
     };
 }>;
-export declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): JSX.Element;
+export declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): React.JSX.Element;
 export {};

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

@@ -21,6 +21,18 @@ export interface Size {
     top: number;
     left: number;
 }
+export interface Viewport extends Size {
+    /** The initial pixel ratio */
+    initialDpr: number;
+    /** Current pixel ratio */
+    dpr: number;
+    /** size.width / viewport.width */
+    factor: number;
+    /** Camera distance */
+    distance: number;
+    /** Camera aspect ratio: width / height */
+    aspect: number;
+}
 export type RenderCallback = (state: RootState, delta: number, frame?: XRFrame) => void;
 export type UpdateCallback = RenderCallback;
 export type LegacyAlways = 'always';
@@ -106,10 +118,12 @@ export interface RootState {
     frameloop: FrameloopLegacy;
     /** Adaptive performance interface */
     performance: Performance;
-    /** The current pixel ratio */
-    dpr: number;
     /** Reactive pixel-size of the canvas */
     size: Size;
+    /** Reactive size of the viewport in threejs units */
+    viewport: Viewport & {
+        getCurrentViewport: (camera?: Camera, target?: THREE.Vector3 | Parameters<THREE.Vector3['set']>, size?: Size) => Omit<Viewport, 'dpr' | 'initialDpr'>;
+    };
     /** Flags the canvas for render, but doesn't render in itself */
     invalidate: (frames?: number) => void;
     /** Advance (render) one step */

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

@@ -53,4 +53,16 @@ declare module 'react' {
         }
     }
 }
+declare module 'react/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements extends ThreeElements {
+        }
+    }
+}
+declare module 'react/jsx-dev-runtime' {
+    namespace JSX {
+        interface IntrinsicElements extends ThreeElements {
+        }
+    }
+}
 export {};

package/dist/{loop-7224f71f.cjs.prod.js → loop-6e8a6208.cjs.prod.js}

@@ -5,9 +5,9 @@ var React = require('react');
 var constants = require('react-reconciler/constants');
 var traditional = require('zustand/traditional');
 var itsFine = require('its-fine');
-var _extends = require('@babel/runtime/helpers/extends');
 var Reconciler = require('react-reconciler');
 var scheduler = require('scheduler');
+var jsxRuntime = require('react/jsx-runtime');
 var suspendReact = require('suspend-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
@@ -38,10 +38,6 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-// TODO: handle constructor overloads
-// https://github.com/pmndrs/react-three-fiber/pull/2931
-// https://github.com/microsoft/TypeScript/issues/37079
-
 const catalogue = {};
 let i = 0;
 const extend = objects => {
@@ -52,15 +48,17 @@ const extend = objects => {
     // Returns a component whose name will be inferred in devtools
     // @ts-expect-error
     return /*#__PURE__*/React__namespace.forwardRef({
-      [objects.name]: (props, ref) => /*#__PURE__*/React__namespace.createElement(Component, _extends({}, props, {
+      [objects.name]: (props, ref) => /*#__PURE__*/jsxRuntime.jsx(Component, {
+        ...props,
         ref: ref
-      }))
+      })
     }[objects.name]);
   } else {
     return void Object.assign(catalogue, objects);
   }
 };
-function createInstance(type, props, root) {
+function createInstance(type, props, root, flushPrimitive = true) {
+  var _props$object;
   // Get target from catalogue
   const name = `${type[0].toUpperCase()}${type.slice(1)}`;
   const target = catalogue[name];
@@ -74,10 +72,37 @@ function createInstance(type, props, root) {
   // Throw if an object or literal was passed for args
   if (props.args !== undefined && !Array.isArray(props.args)) throw new Error('R3F: The args prop must be an array!');
 
+  // Regenerate the R3F instance for primitives to simulate a new object
+  if (flushPrimitive && type === 'primitive' && (_props$object = props.object) != null && _props$object.__r3f) delete props.object.__r3f;
+
   // Create instance
   const instance = prepare(props.object, root, type, props);
   return instance;
 }
+function hideInstance(instance) {
+  if (!instance.isHidden) {
+    var _instance$parent;
+    if (instance.props.attach && (_instance$parent = instance.parent) != null && _instance$parent.object) {
+      detach(instance.parent, instance);
+    } else if (isObject3D(instance.object)) {
+      instance.object.visible = false;
+    }
+    instance.isHidden = true;
+    invalidateInstance(instance);
+  }
+}
+function unhideInstance(instance) {
+  if (instance.isHidden) {
+    var _instance$parent2;
+    if (instance.props.attach && (_instance$parent2 = instance.parent) != null && _instance$parent2.object) {
+      attach(instance.parent, instance);
+    } else if (isObject3D(instance.object) && instance.props.visible !== false) {
+      instance.object.visible = true;
+    }
+    instance.isHidden = false;
+    invalidateInstance(instance);
+  }
+}
 
 // https://github.com/facebook/react/issues/20271
 // This will make sure events and attach are only handled once when trees are complete
@@ -213,8 +238,19 @@ function setFiberInstance(fiber, instance) {
   }
 }
 function switchInstance(oldInstance, type, props, fiber) {
+  // If the old instance is hidden, we need to unhide it.
+  // React assumes it can discard instances since they're pure for DOM.
+  // This isn't true for us since our lifetimes are impure and longliving.
+  // So, we manually check if an instance was hidden and unhide it.
+  if (oldInstance.isHidden) unhideInstance(oldInstance);
+
   // Create a new instance
-  const newInstance = createInstance(type, props, oldInstance.root);
+  const newInstance = createInstance(type, props, oldInstance.root, false);
+
+  // Update attach props for primitives since we don't flush them
+  if (type === 'primitive') {
+    newInstance.props.attach = props.attach;
+  }
 
   // Move children to new instance
   for (const child of oldInstance.children) {
@@ -262,7 +298,9 @@ const reconciler = Reconciler__default["default"]({
   supportsMutation: true,
   supportsPersistence: false,
   supportsHydration: false,
-  createInstance,
+  createInstance(type, props, root) {
+    return createInstance(type, props, root);
+  },
   removeChild,
   appendChild,
   appendInitialChild: appendChild,
@@ -319,8 +357,8 @@ const reconciler = Reconciler__default["default"]({
   resetAfterCommit: () => {},
   shouldSetTextContent: () => false,
   clearContainer: () => false,
-  hideInstance() {},
-  unhideInstance() {},
+  hideInstance,
+  unhideInstance,
   createTextInstance: handleTextInstance,
   hideTextInstance: handleTextInstance,
   unhideTextInstance: handleTextInstance,
@@ -433,7 +471,11 @@ function useBridge() {
   }) => {
     const strict = !!itsFine.traverseFiber(fiber, true, node => node.type === React__namespace.StrictMode);
     const Root = strict ? React__namespace.StrictMode : React__namespace.Fragment;
-    return /*#__PURE__*/React__namespace.createElement(Root, null, /*#__PURE__*/React__namespace.createElement(ContextBridge, null, children));
+    return /*#__PURE__*/jsxRuntime.jsx(Root, {
+      children: /*#__PURE__*/jsxRuntime.jsx(ContextBridge, {
+        children: children
+      })
+    });
   }, [fiber, ContextBridge]);
 }
 function Block({
@@ -575,7 +617,8 @@ function prepare(target, root, type, props) {
       props: getInstanceProps(props),
       object,
       eventCount: 0,
-      handlers: {}
+      handlers: {},
+      isHidden: false
     };
     if (object) {
       object.__r3f = instance;
@@ -1247,6 +1290,44 @@ const isRenderer = def => !!(def != null && def.render);
 const context = /*#__PURE__*/React__namespace.createContext(null);
 const createStore = (invalidate, advance) => {
   const rootStore = traditional.createWithEqualityFn((set, get) => {
+    const position = new THREE__namespace.Vector3();
+    const defaultTarget = new THREE__namespace.Vector3();
+    const tempTarget = new THREE__namespace.Vector3();
+    function getCurrentViewport(camera = get().camera, target = defaultTarget, size = get().size) {
+      const {
+        width,
+        height,
+        top,
+        left
+      } = size;
+      const aspect = width / height;
+      if (target instanceof THREE__namespace.Vector3) tempTarget.copy(target);else tempTarget.set(...target);
+      const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
+      if (isOrthographicCamera(camera)) {
+        return {
+          width: width / camera.zoom,
+          height: height / camera.zoom,
+          top,
+          left,
+          factor: 1,
+          distance,
+          aspect
+        };
+      } else {
+        const fov = camera.fov * Math.PI / 180; // convert vertical fov to radians
+        const h = 2 * Math.tan(fov / 2) * distance; // visible height
+        const w = h * (width / height);
+        return {
+          width: w,
+          height: h,
+          top,
+          left,
+          factor: width / w,
+          distance,
+          aspect
+        };
+      }
+    }
     let performanceTimeout = undefined;
     const setPerformanceCurrent = current => set(state => ({
       performance: {
@@ -1295,13 +1376,24 @@ const createStore = (invalidate, advance) => {
           performanceTimeout = setTimeout(() => setPerformanceCurrent(get().performance.max), state.performance.debounce);
         }
       },
-      dpr: 1,
       size: {
         width: 0,
         height: 0,
         top: 0,
         left: 0
       },
+      viewport: {
+        initialDpr: 0,
+        dpr: 0,
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0,
+        aspect: 0,
+        distance: 0,
+        factor: 0,
+        getCurrentViewport
+      },
       setEvents: events => set(state => ({
         ...state,
         events: {
@@ -1310,17 +1402,30 @@ const createStore = (invalidate, advance) => {
         }
       })),
       setSize: (width, height, top = 0, left = 0) => {
-        set({
-          size: {
-            width,
-            height,
-            top,
-            left
+        const camera = get().camera;
+        const size = {
+          width,
+          height,
+          top,
+          left
+        };
+        set(state => ({
+          size,
+          viewport: {
+            ...state.viewport,
+            ...getCurrentViewport(camera, defaultTarget, size)
           }
-        });
+        }));
       },
-      setDpr: dpr => set({
-        dpr: calculateDpr(dpr)
+      setDpr: dpr => set(state => {
+        const resolved = calculateDpr(dpr);
+        return {
+          viewport: {
+            ...state.viewport,
+            dpr: resolved,
+            initialDpr: state.viewport.initialDpr || resolved
+          }
+        };
       }),
       setFrameloop: frameloop => {
         var _frameloop$mode, _frameloop$render, _frameloop$maxDelta;
@@ -1409,23 +1514,39 @@ const createStore = (invalidate, advance) => {
   });
   const state = rootStore.getState();
   let oldSize = state.size;
-  let oldDpr = state.dpr;
-  rootStore.subscribe(({
-    camera,
-    size,
-    dpr,
-    gl
-  }) => {
+  let oldDpr = state.viewport.dpr;
+  let oldCamera = state.camera;
+  rootStore.subscribe(() => {
+    const {
+      camera,
+      size,
+      viewport,
+      gl,
+      set
+    } = rootStore.getState();
+
     // Resize camera and renderer on changes to size and pixelratio
-    if (size !== oldSize || dpr !== oldDpr) {
+    if (size.width !== oldSize.width || size.height !== oldSize.height || viewport.dpr !== oldDpr) {
       oldSize = size;
-      oldDpr = dpr;
+      oldDpr = viewport.dpr;
       // Update camera & renderer
       updateCamera(camera, size);
-      gl.setPixelRatio(dpr);
+      gl.setPixelRatio(viewport.dpr);
       const updateStyle = typeof HTMLCanvasElement !== 'undefined' && gl.domElement instanceof HTMLCanvasElement;
       gl.setSize(size.width, size.height, updateStyle);
     }
+
+    // Update viewport once the camera changes
+    if (camera !== oldCamera) {
+      oldCamera = camera;
+      // Update viewport
+      set(state => ({
+        viewport: {
+          ...state.viewport,
+          ...state.viewport.getCurrentViewport(camera)
+        }
+      }));
+    }
   });
 
   // Invalidate on any change
@@ -1570,15 +1691,20 @@ const Lifecycle = [Early, Fixed, Update, Late, Render, After];
 
 /**
  * Exposes an object's {@link Instance}.
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useinstancehandle
  *
  * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
  */
 function useInstanceHandle(ref) {
   const instance = React__namespace.useRef(null);
-  useIsomorphicLayoutEffect(() => void (instance.current = ref.current.__r3f), [ref]);
+  React__namespace.useImperativeHandle(instance, () => ref.current.__r3f, [ref]);
   return instance;
 }
+
+/**
+ * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
+ */
 function useStore() {
   const store = React__namespace.useContext(context);
   if (!store) throw new Error('R3F: Hooks can only be used within the Canvas component!');
@@ -1610,7 +1736,7 @@ function useFrame(callback, renderPriority = 0) {
 
 /**
  * Executes a callback in a given update stage.
- * Uses the stage instance to indetify which stage to target in the lifecycle.
+ * Uses the stage instance to identify which stage to target in the lifecycle.
  */
 function useUpdate(callback, stage = Stages.Update) {
   const store = useStore();
@@ -1657,6 +1783,7 @@ function loadingFn(extensions, onProgress) {
     return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => res(isObject3D(data == null ? void 0 : data.scene) ? Object.assign(data, buildGraph(data.scene)) : data), onProgress, error => reject(new Error(`Could not load ${input}: ${error == null ? void 0 : error.message}`))))));
   };
 }
+
 /**
  * Synchronously loads and caches assets with a three loader.
  *
@@ -1689,9 +1816,6 @@ useLoader.clear = function (loader, input) {
   return suspendReact.clear([loader, ...keys]);
 };
 
-// Shim for OffscreenCanvas since it was removed from DOM types
-// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/54988
-
 const _roots = new Map();
 const shallowLoose = {
   objects: 'shallow',
@@ -1880,7 +2004,15 @@ function createRoot(canvas) {
         const camera = isCamera ? cameraOptions : orthographic ? new THREE__namespace.OrthographicCamera(0, 0, 0, 0, 0.1, 1000) : new THREE__namespace.PerspectiveCamera(75, 0, 0.1, 1000);
         if (!isCamera) {
           camera.position.z = 5;
-          if (cameraOptions) applyProps(camera, cameraOptions);
+          if (cameraOptions) {
+            applyProps(camera, cameraOptions);
+            // Preserve user-defined frustum if possible
+            // https://github.com/pmndrs/react-three-fiber/issues/3160
+            if ('aspect' in cameraOptions || 'left' in cameraOptions || 'right' in cameraOptions || 'bottom' in cameraOptions || 'top' in cameraOptions) {
+              camera.manual = true;
+              camera.updateProjectionMatrix();
+            }
+          }
           // Always look at center by default
           if (!state.camera && !(cameraOptions != null && cameraOptions.rotation)) camera.lookAt(0, 0, 0);
         }
@@ -2009,7 +2141,7 @@ function createRoot(canvas) {
         state.setSize(size.width, size.height, size.top, size.left);
       }
       // Check pixelratio
-      if (dpr && state.dpr !== calculateDpr(dpr)) state.setDpr(dpr);
+      if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr);
       // Check frameloop
       if (state.frameloop !== frameloop) state.setFrameloop(frameloop);
       // Check pointer missed
@@ -2035,7 +2167,7 @@ function createRoot(canvas) {
     render(children) {
       // The root has to be configured before it can be rendered
       if (!configured) this.configure();
-      reconciler.updateContainer( /*#__PURE__*/React__namespace.createElement(Provider, {
+      reconciler.updateContainer( /*#__PURE__*/jsxRuntime.jsx(Provider, {
         store: store,
         children: children,
         onCreated: onCreated,
@@ -2076,9 +2208,10 @@ function Provider({
     if (!store.getState().events.connected) state.events.connect == null ? void 0 : state.events.connect(rootElement);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React__namespace.createElement(context.Provider, {
-    value: store
-  }, children);
+  return /*#__PURE__*/jsxRuntime.jsx(context.Provider, {
+    value: store,
+    children: children
+  });
 }
 function unmountComponentAtNode(canvas, callback) {
   const root = _roots.get(canvas);
@@ -2107,7 +2240,7 @@ function unmountComponentAtNode(canvas, callback) {
   }
 }
 function createPortal(children, container, state) {
-  return /*#__PURE__*/React__namespace.createElement(Portal, {
+  return /*#__PURE__*/jsxRuntime.jsx(Portal, {
     children: children,
     container: container,
     state: state
@@ -2132,8 +2265,11 @@ function Portal({
   const [raycaster] = React__namespace.useState(() => new THREE__namespace.Raycaster());
   const [pointer] = React__namespace.useState(() => new THREE__namespace.Vector2());
   const inject = useMutableCallback((rootState, injectState) => {
+    let viewport;
     if (injectState.camera && size) {
       const camera = injectState.camera;
+      // Calculate the override viewport, if present
+      viewport = rootState.viewport.getCurrentViewport(camera, new THREE__namespace.Vector3(), size);
       // Update the portal camera, if it differs from the previous layer
       if (camera !== rootState.camera) updateCamera(camera, size);
     }
@@ -2149,7 +2285,7 @@ function Portal({
       mouse: pointer,
       // Their previous root is the layer before it
       previousRoot,
-      // Events and size can be overridden by the inject layer
+      // Events, size and viewport can be overridden by the inject layer
       events: {
         ...rootState.events,
         ...injectState.events,
@@ -2159,6 +2295,10 @@ function Portal({
         ...rootState.size,
         ...size
       },
+      viewport: {
+        ...rootState.viewport,
+        ...viewport
+      },
       // Layers are allowed to override events
       setEvents: events => injectState.set(state => ({
         ...state,
@@ -2183,9 +2323,12 @@ function Portal({
     return store;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [previousRoot, container]);
-  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, reconciler.createPortal( /*#__PURE__*/React__namespace.createElement(context.Provider, {
-    value: usePortalStore
-  }, children), usePortalStore, null));
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: reconciler.createPortal( /*#__PURE__*/jsxRuntime.jsx(context.Provider, {
+      value: usePortalStore,
+      children: children
+    }), usePortalStore, null)
+  });
 }
 reconciler.injectIntoDevTools({
   bundleType: 0 ,