@react-three/fiber 9.0.0-alpha.1 → 9.0.0-alpha.3

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

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-2e1b7052.cjs.prod.js');
+var loop = require('./loop-a0ef8208.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');
+var itsFine = require('its-fine');
 require('react-reconciler/constants');
 require('zustand');
 require('react-reconciler');
@@ -49,64 +50,72 @@ const DOM_EVENTS = {
   onPointerCancel: ['pointercancel', true],
   onLostPointerCapture: ['lostpointercapture', true]
 };
-/** Default R3F event manager for web */
 
+/** Default R3F event manager for web */
 function createPointerEvents(store) {
   const {
     handlePointer
-  } = index.createEvents(store);
+  } = loop.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,
+    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,
+        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
-        });
-      });
+      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) {
-        var _events$handlers2;
-
-        Object.entries((_events$handlers2 = events.handlers) != null ? _events$handlers2 : []).forEach(([name, event]) => {
-          if (events && events.connected instanceof HTMLElement) {
+        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,
+          events: {
+            ...state.events,
             connected: undefined
           }
         }));
@@ -115,17 +124,15 @@ function createPointerEvents(store) {
   };
 }
 
-/**
- * A DOM canvas which accepts threejs elements as children.
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
- */
-const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
+const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   children,
   fallback,
   resize,
   style,
   gl,
   events = createPointerEvents,
+  eventSource,
+  eventPrefix,
   shadows,
   linear,
   flat,
@@ -136,6 +143,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   performance,
   raycaster,
   camera,
+  scene,
   onPointerMissed,
   onCreated,
   stages,
@@ -144,7 +152,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // Create a known catalogue of Threejs-native elements
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
-  React__namespace.useMemo(() => index.extend(THREE__namespace), []);
+  React__namespace.useMemo(() => loop.extend(THREE__namespace), []);
+  const Bridge = loop.useBridge();
   const [containerRef, containerRect] = useMeasure__default["default"]({
     scroll: true,
     debounce: {
@@ -155,56 +164,72 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   });
   const canvasRef = React__namespace.useRef(null);
   const divRef = React__namespace.useRef(null);
-  const [canvas, setCanvas] = React__namespace.useState(null);
   React__namespace.useImperativeHandle(forwardedRef, () => canvasRef.current);
-  const handlePointerMissed = index.useMutableCallback(onPointerMissed);
+  const handlePointerMissed = loop.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
-  const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
-
-  if (block) throw block; // Throw exception outwards if anything within canvas throws
+  const [error, setError] = React__namespace.useState(false);
 
+  // Suspend this component if block is a promise (2nd run)
+  if (block) throw block;
+  // Throw exception outwards if anything within canvas throws
   if (error) throw error;
   const root = React__namespace.useRef(null);
-
-  if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
-    if (!root.current) root.current = index.createRoot(canvas);
-    root.current.configure({
-      gl,
-      events,
-      shadows,
-      linear,
-      flat,
-      legacy,
-      orthographic,
-      frameloop,
-      dpr,
-      performance,
-      raycaster,
-      camera,
-      stages,
-      size: containerRect,
-      // Pass mutable reference to onPointerMissed so it's free to update
-      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
-      onCreated: state => {
-        state.events.connect == null ? void 0 : state.events.connect(divRef.current);
-        onCreated == null ? void 0 : onCreated(state);
-      }
-    });
-    root.current.render( /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
-      set: setError
-    }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-      fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
-        set: setBlock
-      })
-    }, children)));
-  }
-
-  index.useIsomorphicLayoutEffect(() => {
-    setCanvas(canvasRef.current);
-  }, []);
+  loop.useIsomorphicLayoutEffect(() => {
+    const canvas = canvasRef.current;
+    if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
+      if (!root.current) root.current = loop.createRoot(canvas);
+      root.current.configure({
+        gl,
+        scene,
+        events,
+        shadows,
+        linear,
+        flat,
+        legacy,
+        orthographic,
+        frameloop,
+        dpr,
+        performance,
+        raycaster,
+        camera,
+        size: containerRect,
+        // Pass mutable reference to onPointerMissed so it's free to update
+        onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+        onCreated: state => {
+          // Connect to event source
+          state.events.connect == null ? void 0 : state.events.connect(eventSource ? loop.isRef(eventSource) ? eventSource.current : eventSource : divRef.current);
+          // Set up compute function
+          if (eventPrefix) {
+            state.setEvents({
+              compute: (event, state) => {
+                const x = event[eventPrefix + 'X'];
+                const y = event[eventPrefix + 'Y'];
+                state.pointer.set(x / state.size.width * 2 - 1, -(y / state.size.height) * 2 + 1);
+                state.raycaster.setFromCamera(state.pointer, state.camera);
+              }
+            });
+          }
+          // Call onCreated callback
+          onCreated == null ? void 0 : onCreated(state);
+        }
+      });
+      root.current.render( /*#__PURE__*/React__namespace.createElement(Bridge, null, /*#__PURE__*/React__namespace.createElement(loop.ErrorBoundary, {
+        set: setError
+      }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
+        fallback: /*#__PURE__*/React__namespace.createElement(loop.Block, {
+          set: setBlock
+        })
+      }, children))));
+    }
+  });
   React__namespace.useEffect(() => {
-    if (canvas) return () => index.unmountComponentAtNode(canvas);
-  }, [canvas]);
+    const canvas = canvasRef.current;
+    if (canvas) return () => loop.unmountComponentAtNode(canvas);
+  }, []);
+
+  // When the event source is not this div, we need to set pointer-events to none
+  // Or else the canvas will block events from reaching the event source
+  const pointerEvents = eventSource ? 'none' : 'auto';
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: divRef,
     style: {
@@ -212,6 +237,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       width: '100%',
       height: '100%',
       overflow: 'hidden',
+      pointerEvents,
       ...style
     }
   }, props), /*#__PURE__*/React__namespace.createElement("div", {
@@ -228,33 +254,46 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   }, fallback)));
 });
 
-exports.FixedStage = index.FixedStage;
-exports.ReactThreeFiber = index.threeTypes;
-exports.Stage = index.Stage;
-exports.Stages = index.Stages;
-exports._roots = index.roots;
-exports.act = index.act;
-exports.addAfterEffect = index.addAfterEffect;
-exports.addEffect = index.addEffect;
-exports.addTail = index.addTail;
-exports.advance = index.advance;
-exports.applyProps = index.applyProps;
-exports.context = index.context;
-exports.createEvents = index.createEvents;
-exports.createPortal = index.createPortal;
-exports.createRoot = index.createRoot;
-exports.dispose = index.dispose;
-exports.extend = index.extend;
-exports.getRootState = index.getRootState;
-exports.invalidate = index.invalidate;
-exports.reconciler = index.reconciler;
-exports.render = index.render;
-exports.unmountComponentAtNode = index.unmountComponentAtNode;
-exports.useFrame = index.useFrame;
-exports.useGraph = index.useGraph;
-exports.useLoader = index.useLoader;
-exports.useStore = index.useStore;
-exports.useThree = index.useThree;
-exports.useUpdate = index.useUpdate;
+/**
+ * A DOM canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+ */
+const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
+    ref: ref
+  })));
+});
+
+exports.FixedStage = loop.FixedStage;
+exports.ReactThreeFiber = loop.threeTypes;
+exports.Stage = loop.Stage;
+exports.Stages = loop.Stages;
+exports._roots = loop._roots;
+exports.act = loop.act;
+exports.addAfterEffect = loop.addAfterEffect;
+exports.addEffect = loop.addEffect;
+exports.addTail = loop.addTail;
+exports.advance = loop.advance;
+exports.applyProps = loop.applyProps;
+exports.buildGraph = loop.buildGraph;
+exports.context = loop.context;
+exports.createEvents = loop.createEvents;
+exports.createPortal = loop.createPortal;
+exports.createRoot = loop.createRoot;
+exports.dispose = loop.dispose;
+exports.extend = loop.extend;
+exports.flushGlobalEffects = loop.flushGlobalEffects;
+exports.getRootState = loop.getRootState;
+exports.invalidate = loop.invalidate;
+exports.reconciler = loop.reconciler;
+exports.render = loop.render;
+exports.unmountComponentAtNode = loop.unmountComponentAtNode;
+exports.useFrame = loop.useFrame;
+exports.useGraph = loop.useGraph;
+exports.useInstanceHandle = loop.useInstanceHandle;
+exports.useLoader = loop.useLoader;
+exports.useStore = loop.useStore;
+exports.useThree = loop.useThree;
+exports.useUpdate = loop.useUpdate;
 exports.Canvas = Canvas;
 exports.events = createPointerEvents;

package/dist/react-three-fiber.esm.js

@@ -1,9 +1,10 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-a9c7a6cd.esm.js';
-export { F as FixedStage, t as ReactThreeFiber, S as Stage, f as Stages, v as _roots, s as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, g as context, c as createEvents, h as createPortal, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, i as reconciler, r as render, d as unmountComponentAtNode, y as useFrame, A as useGraph, C as useLoader, w as useStore, x as useThree, z as useUpdate } from './index-a9c7a6cd.esm.js';
+import { c as createEvents, e as extend, u as useBridge, a as useMutableCallback, b as useIsomorphicLayoutEffect, d as createRoot, i as isRef, E as ErrorBoundary, B as Block, f as unmountComponentAtNode } from './loop-b2aca207.esm.js';
+export { F as FixedStage, t as ReactThreeFiber, S as Stage, p as Stages, _ as _roots, x as act, j as addAfterEffect, h as addEffect, k as addTail, m as advance, s as applyProps, y as buildGraph, q as context, c as createEvents, o as createPortal, d as createRoot, w as dispose, e as extend, g as flushGlobalEffects, v as getRootState, l as invalidate, r as reconciler, n as render, f as unmountComponentAtNode, D as useFrame, H as useGraph, z as useInstanceHandle, I as useLoader, A as useStore, C as useThree, G as useUpdate } from './loop-b2aca207.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
 import useMeasure from 'react-use-measure';
+import { FiberProvider } from 'its-fine';
 import 'react-reconciler/constants';
 import 'zustand';
 import 'react-reconciler';
@@ -22,8 +23,8 @@ const DOM_EVENTS = {
   onPointerCancel: ['pointercancel', true],
   onLostPointerCapture: ['lostpointercapture', true]
 };
-/** Default R3F event manager for web */
 
+/** Default R3F event manager for web */
 function createPointerEvents(store) {
   const {
     handlePointer
@@ -31,55 +32,63 @@ function createPointerEvents(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,
+    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,
+        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
-        });
-      });
+      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) {
-        var _events$handlers2;
-
-        Object.entries((_events$handlers2 = events.handlers) != null ? _events$handlers2 : []).forEach(([name, event]) => {
-          if (events && events.connected instanceof HTMLElement) {
+        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,
+          events: {
+            ...state.events,
             connected: undefined
           }
         }));
@@ -88,17 +97,15 @@ function createPointerEvents(store) {
   };
 }
 
-/**
- * A DOM canvas which accepts threejs elements as children.
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
- */
-const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
+const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
   children,
   fallback,
   resize,
   style,
   gl,
   events = createPointerEvents,
+  eventSource,
+  eventPrefix,
   shadows,
   linear,
   flat,
@@ -109,6 +116,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   performance,
   raycaster,
   camera,
+  scene,
   onPointerMissed,
   onCreated,
   stages,
@@ -118,6 +126,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React.useMemo(() => extend(THREE), []);
+  const Bridge = useBridge();
   const [containerRef, containerRect] = useMeasure({
     scroll: true,
     debounce: {
@@ -128,56 +137,72 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   });
   const canvasRef = React.useRef(null);
   const divRef = React.useRef(null);
-  const [canvas, setCanvas] = React.useState(null);
   React.useImperativeHandle(forwardedRef, () => canvasRef.current);
   const handlePointerMissed = useMutableCallback(onPointerMissed);
   const [block, setBlock] = React.useState(false);
-  const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)
-
-  if (block) throw block; // Throw exception outwards if anything within canvas throws
+  const [error, setError] = React.useState(false);
 
+  // Suspend this component if block is a promise (2nd run)
+  if (block) throw block;
+  // Throw exception outwards if anything within canvas throws
   if (error) throw error;
   const root = React.useRef(null);
-
-  if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
-    if (!root.current) root.current = createRoot(canvas);
-    root.current.configure({
-      gl,
-      events,
-      shadows,
-      linear,
-      flat,
-      legacy,
-      orthographic,
-      frameloop,
-      dpr,
-      performance,
-      raycaster,
-      camera,
-      stages,
-      size: containerRect,
-      // Pass mutable reference to onPointerMissed so it's free to update
-      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
-      onCreated: state => {
-        state.events.connect == null ? void 0 : state.events.connect(divRef.current);
-        onCreated == null ? void 0 : onCreated(state);
-      }
-    });
-    root.current.render( /*#__PURE__*/React.createElement(ErrorBoundary, {
-      set: setError
-    }, /*#__PURE__*/React.createElement(React.Suspense, {
-      fallback: /*#__PURE__*/React.createElement(Block, {
-        set: setBlock
-      })
-    }, children)));
-  }
-
   useIsomorphicLayoutEffect(() => {
-    setCanvas(canvasRef.current);
-  }, []);
+    const canvas = canvasRef.current;
+    if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
+      if (!root.current) root.current = createRoot(canvas);
+      root.current.configure({
+        gl,
+        scene,
+        events,
+        shadows,
+        linear,
+        flat,
+        legacy,
+        orthographic,
+        frameloop,
+        dpr,
+        performance,
+        raycaster,
+        camera,
+        size: containerRect,
+        // Pass mutable reference to onPointerMissed so it's free to update
+        onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+        onCreated: state => {
+          // Connect to event source
+          state.events.connect == null ? void 0 : state.events.connect(eventSource ? isRef(eventSource) ? eventSource.current : eventSource : divRef.current);
+          // Set up compute function
+          if (eventPrefix) {
+            state.setEvents({
+              compute: (event, state) => {
+                const x = event[eventPrefix + 'X'];
+                const y = event[eventPrefix + 'Y'];
+                state.pointer.set(x / state.size.width * 2 - 1, -(y / state.size.height) * 2 + 1);
+                state.raycaster.setFromCamera(state.pointer, state.camera);
+              }
+            });
+          }
+          // Call onCreated callback
+          onCreated == null ? void 0 : onCreated(state);
+        }
+      });
+      root.current.render( /*#__PURE__*/React.createElement(Bridge, null, /*#__PURE__*/React.createElement(ErrorBoundary, {
+        set: setError
+      }, /*#__PURE__*/React.createElement(React.Suspense, {
+        fallback: /*#__PURE__*/React.createElement(Block, {
+          set: setBlock
+        })
+      }, children))));
+    }
+  });
   React.useEffect(() => {
+    const canvas = canvasRef.current;
     if (canvas) return () => unmountComponentAtNode(canvas);
-  }, [canvas]);
+  }, []);
+
+  // When the event source is not this div, we need to set pointer-events to none
+  // Or else the canvas will block events from reaching the event source
+  const pointerEvents = eventSource ? 'none' : 'auto';
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: divRef,
     style: {
@@ -185,6 +210,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
       width: '100%',
       height: '100%',
       overflow: 'hidden',
+      pointerEvents,
       ...style
     }
   }, props), /*#__PURE__*/React.createElement("div", {
@@ -201,4 +227,14 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   }, fallback)));
 });
 
+/**
+ * A DOM canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+ */
+const Canvas = /*#__PURE__*/React.forwardRef(function CanvasWrapper(props, ref) {
+  return /*#__PURE__*/React.createElement(FiberProvider, null, /*#__PURE__*/React.createElement(CanvasImpl, _extends({}, props, {
+    ref: ref
+  })));
+});
+
 export { Canvas, createPointerEvents as events };

package/native/dist/react-three-fiber-native.cjs.d.ts

@@ -1 +1,2 @@
 export * from "../../dist/declarations/src/native";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVhY3QtdGhyZWUtZmliZXItbmF0aXZlLmNqcy5kLnRzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vZGlzdC9kZWNsYXJhdGlvbnMvc3JjL25hdGl2ZS5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=