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

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

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

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

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var loop = require('./loop-7f1fb121.cjs.dev.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');
-var index = require('./index-5bd4d3cf.cjs.dev.js');
 require('react-reconciler/constants');
-require('zustand');
+require('zustand/traditional');
 require('react-reconciler');
 require('scheduler');
 require('suspend-react');
@@ -50,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
           }
         }));
@@ -135,6 +143,7 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   performance,
   raycaster,
   camera,
+  scene,
   onPointerMissed,
   onCreated,
   stages,
@@ -143,8 +152,8 @@ const CanvasImpl = /*#__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), []);
-  const Bridge = itsFine.useContextBridge();
+  React__namespace.useMemo(() => loop.extend(THREE__namespace), []);
+  const Bridge = loop.useBridge();
   const [containerRef, containerRect] = useMeasure__default["default"]({
     scroll: true,
     debounce: {
@@ -155,72 +164,71 @@ const CanvasImpl = /*#__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 => {
-        // Connect to event source
-        state.events.connect == null ? void 0 : state.events.connect(eventSource ? index.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(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]); // 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 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,
@@ -245,44 +253,47 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     }
   }, fallback)));
 });
-/**
- * A DOM canvas which accepts threejs elements as children.
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
- */
 
+/**
+ * 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 = index.FixedStage;
-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.useInstanceHandle = index.useInstanceHandle;
-exports.useLoader = index.useLoader;
-exports.useStore = index.useStore;
-exports.useThree = index.useThree;
-exports.useUpdate = index.useUpdate;
+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;