@react-three/fiber 8.16.8 → 8.17.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-three/fiber
 
+## 8.17.0
+
+### Minor Changes
+
+- 3c22194d: feat: flushSync, native EventTarget
+
 ## 8.16.8
 
 ### Patch Changes

package/dist/{index-046cf796.cjs.prod.js → events-2e7e6eab.cjs.prod.js}

@@ -4,10 +4,10 @@ var THREE = require('three');
 var React = require('react');
 var constants = require('react-reconciler/constants');
 var create = require('zustand');
-var Reconciler = require('react-reconciler');
-var scheduler = require('scheduler');
 var suspendReact = require('suspend-react');
 var jsxRuntime = require('react/jsx-runtime');
+var Reconciler = require('react-reconciler');
+var scheduler = require('scheduler');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -2268,6 +2268,17 @@ function Portal({
     }), usePortalStore, null)
   });
 }
+
+/**
+ * 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.
+ */
+function flushSync(fn) {
+  // `flushSync` implementation only takes one argument. I don't know what's up with the type declaration for it.
+  return reconciler.flushSync(fn, undefined);
+}
 reconciler.injectIntoDevTools({
   bundleType: 0 ,
   rendererPackageName: '@react-three/fiber',
@@ -2275,6 +2286,90 @@ reconciler.injectIntoDevTools({
 });
 const act = React__namespace.unstable_act;
 
+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 => {
+      var _events$handlers;
+      const {
+        set,
+        events
+      } = store.getState();
+      events.disconnect == null ? void 0 : events.disconnect();
+      set(state => ({
+        events: {
+          ...state.events,
+          connected: target
+        }
+      }));
+      Object.entries((_events$handlers = events.handlers) != null ? _events$handlers : []).forEach(([name, event]) => {
+        const [eventName, passive] = DOM_EVENTS[name];
+        target.addEventListener(eventName, event, {
+          passive
+        });
+      });
+    },
+    disconnect: () => {
+      const {
+        set,
+        events
+      } = store.getState();
+      if (events.connected) {
+        var _events$handlers2;
+        Object.entries((_events$handlers2 = events.handlers) != null ? _events$handlers2 : []).forEach(([name, event]) => {
+          if (events && events.connected instanceof HTMLElement) {
+            const [eventName] = DOM_EVENTS[name];
+            events.connected.removeEventListener(eventName, event);
+          }
+        });
+        set(state => ({
+          events: {
+            ...state.events,
+            connected: undefined
+          }
+        }));
+      }
+    }
+  };
+}
+
 exports.Block = Block;
 exports.ErrorBoundary = ErrorBoundary;
 exports.act = act;
@@ -2286,11 +2381,13 @@ exports.applyProps = applyProps;
 exports.buildGraph = buildGraph;
 exports.context = context;
 exports.createEvents = createEvents;
+exports.createPointerEvents = createPointerEvents;
 exports.createPortal = createPortal;
 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/{index-99983b2d.esm.js → events-3515660a.esm.js}

@@ -2,10 +2,10 @@ import * as THREE from 'three';
 import * as React from 'react';
 import { DefaultEventPriority, ContinuousEventPriority, DiscreteEventPriority, ConcurrentRoot } from 'react-reconciler/constants';
 import create from 'zustand';
-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 Reconciler from 'react-reconciler';
+import { unstable_scheduleCallback, unstable_IdlePriority } from 'scheduler';
 
 var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
@@ -2241,6 +2241,17 @@ function Portal({
     }), usePortalStore, null)
   });
 }
+
+/**
+ * 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.
+ */
+function flushSync(fn) {
+  // `flushSync` implementation only takes one argument. I don't know what's up with the type declaration for it.
+  return reconciler.flushSync(fn, undefined);
+}
 reconciler.injectIntoDevTools({
   bundleType: process.env.NODE_ENV === 'production' ? 0 : 1,
   rendererPackageName: '@react-three/fiber',
@@ -2248,4 +2259,88 @@ reconciler.injectIntoDevTools({
 });
 const act = React.unstable_act;
 
-export { useThree as A, Block as B, useFrame as C, useGraph as D, ErrorBoundary as E, useLoader as F, useIsomorphicLayoutEffect as a, createRoot as b, createEvents as c, unmountComponentAtNode as d, extend as e, context as f, createPortal as g, reconciler as h, isRef as i, applyProps as j, dispose as k, invalidate as l, advance as m, addEffect as n, addAfterEffect as o, addTail as p, flushGlobalEffects as q, render as r, getRootState as s, threeTypes as t, useMutableCallback as u, act as v, buildGraph as w, roots 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 => {
+      var _events$handlers;
+      const {
+        set,
+        events
+      } = store.getState();
+      events.disconnect == null ? void 0 : events.disconnect();
+      set(state => ({
+        events: {
+          ...state.events,
+          connected: target
+        }
+      }));
+      Object.entries((_events$handlers = events.handlers) != null ? _events$handlers : []).forEach(([name, event]) => {
+        const [eventName, passive] = DOM_EVENTS[name];
+        target.addEventListener(eventName, event, {
+          passive
+        });
+      });
+    },
+    disconnect: () => {
+      const {
+        set,
+        events
+      } = store.getState();
+      if (events.connected) {
+        var _events$handlers2;
+        Object.entries((_events$handlers2 = events.handlers) != null ? _events$handlers2 : []).forEach(([name, event]) => {
+          if (events && events.connected instanceof HTMLElement) {
+            const [eventName] = DOM_EVENTS[name];
+            events.connected.removeEventListener(eventName, event);
+          }
+        });
+        set(state => ({
+          events: {
+            ...state.events,
+            connected: undefined
+          }
+        }));
+      }
+    }
+  };
+}
+
+export { useInstanceHandle as A, Block as B, useStore as C, useThree as D, ErrorBoundary as E, useFrame as F, useGraph as G, useLoader as H, useIsomorphicLayoutEffect as a, createRoot as b, createPointerEvents as c, unmountComponentAtNode as d, extend as e, createEvents as f, context as g, createPortal as h, isRef as i, reconciler as j, applyProps as k, dispose as l, invalidate as m, advance as n, addEffect as o, addAfterEffect as p, addTail as q, render as r, flushGlobalEffects as s, threeTypes as t, useMutableCallback as u, flushSync as v, getRootState as w, act as x, buildGraph as y, roots as z };

package/dist/{index-ca3a789d.cjs.dev.js → events-c54ce65e.cjs.dev.js}

@@ -4,10 +4,10 @@ var THREE = require('three');
 var React = require('react');
 var constants = require('react-reconciler/constants');
 var create = require('zustand');
-var Reconciler = require('react-reconciler');
-var scheduler = require('scheduler');
 var suspendReact = require('suspend-react');
 var jsxRuntime = require('react/jsx-runtime');
+var Reconciler = require('react-reconciler');
+var scheduler = require('scheduler');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -2268,6 +2268,17 @@ function Portal({
     }), usePortalStore, null)
   });
 }
+
+/**
+ * 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.
+ */
+function flushSync(fn) {
+  // `flushSync` implementation only takes one argument. I don't know what's up with the type declaration for it.
+  return reconciler.flushSync(fn, undefined);
+}
 reconciler.injectIntoDevTools({
   bundleType: process.env.NODE_ENV === 'production' ? 0 : 1,
   rendererPackageName: '@react-three/fiber',
@@ -2275,6 +2286,90 @@ reconciler.injectIntoDevTools({
 });
 const act = React__namespace.unstable_act;
 
+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 => {
+      var _events$handlers;
+      const {
+        set,
+        events
+      } = store.getState();
+      events.disconnect == null ? void 0 : events.disconnect();
+      set(state => ({
+        events: {
+          ...state.events,
+          connected: target
+        }
+      }));
+      Object.entries((_events$handlers = events.handlers) != null ? _events$handlers : []).forEach(([name, event]) => {
+        const [eventName, passive] = DOM_EVENTS[name];
+        target.addEventListener(eventName, event, {
+          passive
+        });
+      });
+    },
+    disconnect: () => {
+      const {
+        set,
+        events
+      } = store.getState();
+      if (events.connected) {
+        var _events$handlers2;
+        Object.entries((_events$handlers2 = events.handlers) != null ? _events$handlers2 : []).forEach(([name, event]) => {
+          if (events && events.connected instanceof HTMLElement) {
+            const [eventName] = DOM_EVENTS[name];
+            events.connected.removeEventListener(eventName, event);
+          }
+        });
+        set(state => ({
+          events: {
+            ...state.events,
+            connected: undefined
+          }
+        }));
+      }
+    }
+  };
+}
+
 exports.Block = Block;
 exports.ErrorBoundary = ErrorBoundary;
 exports.act = act;
@@ -2286,11 +2381,13 @@ exports.applyProps = applyProps;
 exports.buildGraph = buildGraph;
 exports.context = context;
 exports.createEvents = createEvents;
+exports.createPointerEvents = createPointerEvents;
 exports.createPortal = createPortal;
 exports.createRoot = createRoot;
 exports.dispose = dispose;
 exports.extend = extend;
 exports.flushGlobalEffects = flushGlobalEffects;
+exports.flushSync = flushSync;
 exports.getRootState = getRootState;
 exports.invalidate = invalidate;
 exports.isRef = isRef;