@react-three/fiber 9.0.0-beta.0 → 9.0.0-rc.0

package/CHANGELOG.md

@@ -1,5 +1,83 @@
 # @react-three/fiber
 
+## 8.17.10
+
+### Patch Changes
+
+- d1a072ac: fix: ThreeEvent should not include initMouseEvent
+
+## 8.17.9
+
+### Patch Changes
+
+- f34de655: fix: add orientation handling
+
+## 8.17.8
+
+### Patch Changes
+
+- 3c885807: fix(types): fix React typings, fault tolerant Node type
+
+## 8.17.7
+
+### Patch Changes
+
+- c20a7d73: fix(native): missing pointerId in pointer events
+
+## 8.17.6
+
+### Patch Changes
+
+- 66c3e9fe: fix(native): don't bind events to GLView
+
+## 8.17.5
+
+### Patch Changes
+
+- 162dbbdd: fix: npmignore ignored types"
+
+## 8.17.4
+
+### Patch Changes
+
+- 43866f4e: fix: rebuild with types
+
+## 8.17.3
+
+### Patch Changes
+
+- 8363eb7a: fix: rebuild with types
+
+## 8.17.2
+
+### Patch Changes
+
+- 6aa4eb28: fix: rebuild with types
+
+## 8.17.1
+
+### Patch Changes
+
+- e5f3f4f9: fix: rebuild with types
+
+## 8.17.0
+
+### Minor Changes
+
+- 3c22194d: feat: flushSync, native EventTarget
+
+## 8.16.8
+
+### Patch Changes
+
+- 4748b365: fix: update is.equ to compare booleans
+
+## 8.16.7
+
+### Patch Changes
+
+- 4d6408c7: fix(types): revert usage of future module JSX
+
 ## 8.16.6
 
 ### Patch Changes

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

@@ -77,4 +77,11 @@ export type InjectState = Partial<Omit<RootState, 'events'> & {
     };
 }>;
 export declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): React.JSX.Element;
+/**
+ * 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.
+ */
+export declare function flushSync<R>(fn: () => R): R;
 export {};

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, ViewProps, ViewStyle } from 'react-native';
+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;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Options as ResizeOptions } from 'react-use-measure';
+import { Options as ResizeOptions } from "./use-measure.js";
 import { RenderProps } from "../core/index.js";
 export interface CanvasProps extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;

package/dist/declarations/src/web/use-measure.d.ts

@@ -0,0 +1,34 @@
+declare type ResizeObserverCallback = (entries: any[], observer: ResizeObserver) => void;
+declare class ResizeObserver {
+    constructor(callback: ResizeObserverCallback);
+    observe(target: Element, options?: any): void;
+    unobserve(target: Element): void;
+    disconnect(): void;
+    static toString(): string;
+}
+export interface RectReadOnly {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly left: number;
+    [key: string]: number;
+}
+type HTMLOrSVGElement = HTMLElement | SVGElement;
+type Result = [(element: HTMLOrSVGElement | null) => void, RectReadOnly, () => void];
+export type Options = {
+    debounce?: number | {
+        scroll: number;
+        resize: number;
+    };
+    scroll?: boolean;
+    polyfill?: {
+        new (cb: ResizeObserverCallback): ResizeObserver;
+    };
+    offsetSize?: boolean;
+};
+export declare function useMeasure({ debounce, scroll, polyfill, offsetSize }?: Options): Result;
+export {};

package/dist/{loop-ed5edcdb.esm.js → events-5a08b43f.esm.js}

@@ -2,11 +2,11 @@ import * as THREE from 'three';
 import * as React from 'react';
 import { NoEventPriority, DefaultEventPriority, ContinuousEventPriority, DiscreteEventPriority, ConcurrentRoot } from 'react-reconciler/constants';
 import { createWithEqualityFn } from 'zustand/traditional';
+import { suspend, preload, clear } from 'suspend-react';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { useFiber, useContextBridge, traverseFiber } from 'its-fine';
 import Reconciler from 'react-reconciler';
 import { unstable_scheduleCallback, unstable_IdlePriority } from 'scheduler';
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { suspend, preload, clear } from 'suspend-react';
 
 var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
@@ -289,8 +289,8 @@ function swapInstances() {
   reconstructed.length = 0;
 }
 
-// Don't handle text instances, warn on undefined behavior
-const handleTextInstance = () => console.warn('R3F: Text is not allowed in JSX! This could be stray whitespace or characters.');
+// Don't handle text instances, make it no-op
+const handleTextInstance = () => {};
 const NO_CONTEXT = {};
 let currentUpdatePriority = NoEventPriority;
 
@@ -546,7 +546,7 @@ const is = {
     // Wrong type or one of the two undefined, doesn't match
     if (typeof a !== typeof b || !!a !== !!b) return false;
     // Atomic, just compare a against b
-    if (is.str(a) || is.num(a)) return a === b;
+    if (is.str(a) || is.num(a) || is.boo(a)) return a === b;
     const isObj = is.obj(a);
     if (isObj && objects === 'reference') return a === b;
     const isArr = is.arr(a);
@@ -754,7 +754,7 @@ function diffProps(instance, newProps) {
   }
   return changedProps;
 }
-const __DEV__ = typeof process !== 'undefined' && process.env.NODE_ENV !== 'production';
+typeof process !== 'undefined' && process.env.NODE_ENV !== 'production';
 
 // const LinearEncoding = 3000
 const sRGBEncoding = 3001;
@@ -809,12 +809,7 @@ function applyProps(object, props) {
     }
 
     // Copy if properties match signatures
-    if (target != null && target.copy && (
-    // Some environments may break strict identity checks by duplicating versions of three.js.
-    // Loosen to unminified names, ignoring descendents.
-    // https://github.com/pmndrs/react-three-fiber/issues/2856
-    // TODO: fix upstream and remove in v9
-    __DEV__ ? target.constructor.name === value.constructor.name : target.constructor === value.constructor)) {
+    if (typeof (target == null ? void 0 : target.copy) === 'function' && target.copy === value.copy) {
       target.copy(value);
     }
     // Layers have no copy function, we must therefore copy the mask property
@@ -2286,4 +2281,90 @@ function advance(timestamp, runGlobalEffects = true, state, frame) {
   if (runGlobalEffects) flushGlobalEffects('after', timestamp);
 }
 
-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, createEvents as c, createRoot as d, extend as e, unmountComponentAtNode as f, flushGlobalEffects as g, addEffect as h, isRef as i, addAfterEffect as j, addTail as k, invalidate as l, advance as m, render 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 };
+const DOM_EVENTS = {
+  onClick: ['click', false],
+  onContextMenu: ['contextmenu', false],
+  onDoubleClick: ['dblclick', false],
+  onWheel: ['wheel', true],
+  onPointerDown: ['pointerdown', true],
+  onPointerUp: ['pointerup', true],
+  onPointerLeave: ['pointerleave', true],
+  onPointerMove: ['pointermove', true],
+  onPointerCancel: ['pointercancel', true],
+  onLostPointerCapture: ['lostpointercapture', true]
+};
+
+/** Default R3F event manager for web */
+function createPointerEvents(store) {
+  const {
+    handlePointer
+  } = createEvents(store);
+  return {
+    priority: 1,
+    enabled: true,
+    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.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
+      state.raycaster.setFromCamera(state.pointer, state.camera);
+    },
+    connected: undefined,
+    handlers: Object.keys(DOM_EVENTS).reduce((acc, key) => ({
+      ...acc,
+      [key]: handlePointer(key)
+    }), {}),
+    update: () => {
+      var _internal$lastEvent;
+      const {
+        events,
+        internal
+      } = store.getState();
+      if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) events.handlers.onPointerMove(internal.lastEvent.current);
+    },
+    connect: target => {
+      const {
+        set,
+        events
+      } = store.getState();
+      events.disconnect == null ? void 0 : events.disconnect();
+      set(state => ({
+        events: {
+          ...state.events,
+          connected: target
+        }
+      }));
+      if (events.handlers) {
+        for (const name in events.handlers) {
+          const event = events.handlers[name];
+          const [eventName, passive] = DOM_EVENTS[name];
+          target.addEventListener(eventName, event, {
+            passive
+          });
+        }
+      }
+    },
+    disconnect: () => {
+      const {
+        set,
+        events
+      } = store.getState();
+      if (events.connected) {
+        if (events.handlers) {
+          for (const name in events.handlers) {
+            const event = events.handlers[name];
+            const [eventName] = DOM_EVENTS[name];
+            events.connected.removeEventListener(eventName, event);
+          }
+        }
+        set(state => ({
+          events: {
+            ...state.events,
+            connected: undefined
+          }
+        }));
+      }
+    }
+  };
+}
+
+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, render as o, createPortal 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/{loop-5012a96a.cjs.prod.js → events-aef54ace.cjs.prod.js}

@@ -4,11 +4,11 @@ var THREE = require('three');
 var React = require('react');
 var constants = require('react-reconciler/constants');
 var traditional = require('zustand/traditional');
+var suspendReact = require('suspend-react');
+var jsxRuntime = require('react/jsx-runtime');
 var itsFine = require('its-fine');
 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 }; }
 
@@ -315,8 +315,8 @@ function swapInstances() {
   reconstructed.length = 0;
 }
 
-// Don't handle text instances, warn on undefined behavior
-const handleTextInstance = () => console.warn('R3F: Text is not allowed in JSX! This could be stray whitespace or characters.');
+// Don't handle text instances, make it no-op
+const handleTextInstance = () => {};
 const NO_CONTEXT = {};
 let currentUpdatePriority = constants.NoEventPriority;
 
@@ -572,7 +572,7 @@ const is = {
     // Wrong type or one of the two undefined, doesn't match
     if (typeof a !== typeof b || !!a !== !!b) return false;
     // Atomic, just compare a against b
-    if (is.str(a) || is.num(a)) return a === b;
+    if (is.str(a) || is.num(a) || is.boo(a)) return a === b;
     const isObj = is.obj(a);
     if (isObj && objects === 'reference') return a === b;
     const isArr = is.arr(a);
@@ -780,7 +780,6 @@ function diffProps(instance, newProps) {
   }
   return changedProps;
 }
-const __DEV__ = typeof process !== 'undefined' &&         "production" !== 'production';
 
 // const LinearEncoding = 3000
 const sRGBEncoding = 3001;
@@ -835,12 +834,7 @@ function applyProps(object, props) {
     }
 
     // Copy if properties match signatures
-    if (target != null && target.copy && (
-    // Some environments may break strict identity checks by duplicating versions of three.js.
-    // Loosen to unminified names, ignoring descendents.
-    // https://github.com/pmndrs/react-three-fiber/issues/2856
-    // TODO: fix upstream and remove in v9
-    __DEV__ ? target.constructor.name === value.constructor.name : target.constructor === value.constructor)) {
+    if (typeof (target == null ? void 0 : target.copy) === 'function' && target.copy === value.copy) {
       target.copy(value);
     }
     // Layers have no copy function, we must therefore copy the mask property
@@ -2312,6 +2306,92 @@ function advance(timestamp, runGlobalEffects = true, state, frame) {
   if (runGlobalEffects) flushGlobalEffects('after', timestamp);
 }
 
+const DOM_EVENTS = {
+  onClick: ['click', false],
+  onContextMenu: ['contextmenu', false],
+  onDoubleClick: ['dblclick', false],
+  onWheel: ['wheel', true],
+  onPointerDown: ['pointerdown', true],
+  onPointerUp: ['pointerup', true],
+  onPointerLeave: ['pointerleave', true],
+  onPointerMove: ['pointermove', true],
+  onPointerCancel: ['pointercancel', true],
+  onLostPointerCapture: ['lostpointercapture', true]
+};
+
+/** Default R3F event manager for web */
+function createPointerEvents(store) {
+  const {
+    handlePointer
+  } = createEvents(store);
+  return {
+    priority: 1,
+    enabled: true,
+    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.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
+      state.raycaster.setFromCamera(state.pointer, state.camera);
+    },
+    connected: undefined,
+    handlers: Object.keys(DOM_EVENTS).reduce((acc, key) => ({
+      ...acc,
+      [key]: handlePointer(key)
+    }), {}),
+    update: () => {
+      var _internal$lastEvent;
+      const {
+        events,
+        internal
+      } = store.getState();
+      if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) events.handlers.onPointerMove(internal.lastEvent.current);
+    },
+    connect: target => {
+      const {
+        set,
+        events
+      } = store.getState();
+      events.disconnect == null ? void 0 : events.disconnect();
+      set(state => ({
+        events: {
+          ...state.events,
+          connected: target
+        }
+      }));
+      if (events.handlers) {
+        for (const name in events.handlers) {
+          const event = events.handlers[name];
+          const [eventName, passive] = DOM_EVENTS[name];
+          target.addEventListener(eventName, event, {
+            passive
+          });
+        }
+      }
+    },
+    disconnect: () => {
+      const {
+        set,
+        events
+      } = store.getState();
+      if (events.connected) {
+        if (events.handlers) {
+          for (const name in events.handlers) {
+            const event = events.handlers[name];
+            const [eventName] = DOM_EVENTS[name];
+            events.connected.removeEventListener(eventName, event);
+          }
+        }
+        set(state => ({
+          events: {
+            ...state.events,
+            connected: undefined
+          }
+        }));
+      }
+    }
+  };
+}
+
 exports.Block = Block;
 exports.ErrorBoundary = ErrorBoundary;
 exports._roots = _roots;
@@ -2324,6 +2404,7 @@ exports.applyProps = applyProps;
 exports.buildGraph = buildGraph;
 exports.context = context;
 exports.createEvents = createEvents;
+exports.createPointerEvents = createPointerEvents;
 exports.createPortal = createPortal;
 exports.createRoot = createRoot;
 exports.dispose = dispose;

package/dist/{loop-8dd3f5bb.cjs.dev.js → events-fa0fb3db.cjs.dev.js}

@@ -4,11 +4,11 @@ var THREE = require('three');
 var React = require('react');
 var constants = require('react-reconciler/constants');
 var traditional = require('zustand/traditional');
+var suspendReact = require('suspend-react');
+var jsxRuntime = require('react/jsx-runtime');
 var itsFine = require('its-fine');
 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 }; }
 
@@ -315,8 +315,8 @@ function swapInstances() {
   reconstructed.length = 0;
 }
 
-// Don't handle text instances, warn on undefined behavior
-const handleTextInstance = () => console.warn('R3F: Text is not allowed in JSX! This could be stray whitespace or characters.');
+// Don't handle text instances, make it no-op
+const handleTextInstance = () => {};
 const NO_CONTEXT = {};
 let currentUpdatePriority = constants.NoEventPriority;
 
@@ -572,7 +572,7 @@ const is = {
     // Wrong type or one of the two undefined, doesn't match
     if (typeof a !== typeof b || !!a !== !!b) return false;
     // Atomic, just compare a against b
-    if (is.str(a) || is.num(a)) return a === b;
+    if (is.str(a) || is.num(a) || is.boo(a)) return a === b;
     const isObj = is.obj(a);
     if (isObj && objects === 'reference') return a === b;
     const isArr = is.arr(a);
@@ -780,7 +780,7 @@ function diffProps(instance, newProps) {
   }
   return changedProps;
 }
-const __DEV__ = typeof process !== 'undefined' && process.env.NODE_ENV !== 'production';
+typeof process !== 'undefined' && process.env.NODE_ENV !== 'production';
 
 // const LinearEncoding = 3000
 const sRGBEncoding = 3001;
@@ -835,12 +835,7 @@ function applyProps(object, props) {
     }
 
     // Copy if properties match signatures
-    if (target != null && target.copy && (
-    // Some environments may break strict identity checks by duplicating versions of three.js.
-    // Loosen to unminified names, ignoring descendents.
-    // https://github.com/pmndrs/react-three-fiber/issues/2856
-    // TODO: fix upstream and remove in v9
-    __DEV__ ? target.constructor.name === value.constructor.name : target.constructor === value.constructor)) {
+    if (typeof (target == null ? void 0 : target.copy) === 'function' && target.copy === value.copy) {
       target.copy(value);
     }
     // Layers have no copy function, we must therefore copy the mask property
@@ -2312,6 +2307,92 @@ function advance(timestamp, runGlobalEffects = true, state, frame) {
   if (runGlobalEffects) flushGlobalEffects('after', timestamp);
 }
 
+const DOM_EVENTS = {
+  onClick: ['click', false],
+  onContextMenu: ['contextmenu', false],
+  onDoubleClick: ['dblclick', false],
+  onWheel: ['wheel', true],
+  onPointerDown: ['pointerdown', true],
+  onPointerUp: ['pointerup', true],
+  onPointerLeave: ['pointerleave', true],
+  onPointerMove: ['pointermove', true],
+  onPointerCancel: ['pointercancel', true],
+  onLostPointerCapture: ['lostpointercapture', true]
+};
+
+/** Default R3F event manager for web */
+function createPointerEvents(store) {
+  const {
+    handlePointer
+  } = createEvents(store);
+  return {
+    priority: 1,
+    enabled: true,
+    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.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
+      state.raycaster.setFromCamera(state.pointer, state.camera);
+    },
+    connected: undefined,
+    handlers: Object.keys(DOM_EVENTS).reduce((acc, key) => ({
+      ...acc,
+      [key]: handlePointer(key)
+    }), {}),
+    update: () => {
+      var _internal$lastEvent;
+      const {
+        events,
+        internal
+      } = store.getState();
+      if ((_internal$lastEvent = internal.lastEvent) != null && _internal$lastEvent.current && events.handlers) events.handlers.onPointerMove(internal.lastEvent.current);
+    },
+    connect: target => {
+      const {
+        set,
+        events
+      } = store.getState();
+      events.disconnect == null ? void 0 : events.disconnect();
+      set(state => ({
+        events: {
+          ...state.events,
+          connected: target
+        }
+      }));
+      if (events.handlers) {
+        for (const name in events.handlers) {
+          const event = events.handlers[name];
+          const [eventName, passive] = DOM_EVENTS[name];
+          target.addEventListener(eventName, event, {
+            passive
+          });
+        }
+      }
+    },
+    disconnect: () => {
+      const {
+        set,
+        events
+      } = store.getState();
+      if (events.connected) {
+        if (events.handlers) {
+          for (const name in events.handlers) {
+            const event = events.handlers[name];
+            const [eventName] = DOM_EVENTS[name];
+            events.connected.removeEventListener(eventName, event);
+          }
+        }
+        set(state => ({
+          events: {
+            ...state.events,
+            connected: undefined
+          }
+        }));
+      }
+    }
+  };
+}
+
 exports.Block = Block;
 exports.ErrorBoundary = ErrorBoundary;
 exports._roots = _roots;
@@ -2324,6 +2405,7 @@ exports.applyProps = applyProps;
 exports.buildGraph = buildGraph;
 exports.context = context;
 exports.createEvents = createEvents;
+exports.createPointerEvents = createPointerEvents;
 exports.createPortal = createPortal;
 exports.createRoot = createRoot;
 exports.dispose = dispose;