@react-three/fiber 8.0.7 → 8.0.10

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-4fb4daff.cjs.prod.js');
+var index = require('./index-c8c0474b.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -53,6 +53,8 @@ const DOM_EVENTS = {
   onPointerCancel: ['pointercancel', true],
   onLostPointerCapture: ['lostpointercapture', true]
 };
+/** Default R3F event manager for web */
+
 function createPointerEvents(store) {
   const {
     handlePointer
@@ -76,13 +78,15 @@ function createPointerEvents(store) {
       var _events$handlers;
 
       const {
-        setEvents,
+        set,
         events
       } = store.getState();
       events.disconnect == null ? void 0 : events.disconnect();
-      setEvents({
-        connected: target
-      });
+      set(state => ({
+        events: { ...state.events,
+          connected: target
+        }
+      }));
       Object.entries((_events$handlers = events == null ? void 0 : events.handlers) != null ? _events$handlers : []).forEach(([name, event]) => {
         const [eventName, passive] = DOM_EVENTS[name];
         target.addEventListener(eventName, event, {
@@ -92,7 +96,7 @@ function createPointerEvents(store) {
     },
     disconnect: () => {
       const {
-        setEvents,
+        set,
         events
       } = store.getState();
 
@@ -105,53 +109,28 @@ function createPointerEvents(store) {
             events.connected.removeEventListener(eventName, event);
           }
         });
-        setEvents({
-          connected: undefined
-        });
+        set(state => ({
+          events: { ...state.events,
+            connected: undefined
+          }
+        }));
       }
     }
   };
 }
 
 const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'legacy', 'orthographic', 'frameloop', 'dpr', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
-
-function Block({
-  set
-}) {
-  React__namespace.useLayoutEffect(() => {
-    set(new Promise(() => null));
-    return () => set(false);
-  }, [set]);
-  return null;
-}
-
-class ErrorBoundary extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      error: false
-    };
-  }
-
-  componentDidCatch(error) {
-    this.props.set(error);
-  }
-
-  render() {
-    return this.state.error ? null : this.props.children;
-  }
-
-}
-
-ErrorBoundary.getDerivedStateFromError = () => ({
-  error: true
-});
+/**
+ * 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({
   children,
   fallback,
   resize,
   style,
+  onPointerMissed,
   events = createPointerEvents,
   ...props
 }, forwardedRef) {
@@ -159,7 +138,6 @@ const Canvas = /*#__PURE__*/React__namespace.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__namespace.useMemo(() => index.extend(THREE__namespace), []);
-  const onPointerMissed = index.useMemoizedFn(props.onPointerMissed);
   const [containerRef, {
     width,
     height
@@ -171,15 +149,12 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     },
     ...resize
   });
-  const meshRef = React__namespace.useRef(null);
   const canvasRef = React__namespace.useRef(null);
+  const meshRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
-  const canvasProps = index.pick({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
-  const divProps = index.omit({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
+  const handlePointerMissed = index.useMutableCallback(onPointerMissed);
+  const canvasProps = index.pick(props, CANVAS_PROPS);
+  const divProps = index.omit(props, CANVAS_PROPS);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -191,6 +166,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   if (width > 0 && height > 0 && canvas) {
     if (!root.current) root.current = index.createRoot(canvas);
     root.current.configure({ ...canvasProps,
+      // 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(meshRef.current);
         canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
@@ -201,20 +178,20 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       },
       events
     });
-    root.current.render( /*#__PURE__*/React__namespace.createElement(ErrorBoundary, {
+    root.current.render( /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
       set: setError
     }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-      fallback: /*#__PURE__*/React__namespace.createElement(Block, {
+      fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
         set: setBlock
       })
     }, children)));
   }
 
-  React__namespace.useLayoutEffect(() => {
+  index.useIsomorphicLayoutEffect(() => {
     setCanvas(canvasRef.current);
   }, []);
   React__namespace.useEffect(() => {
-    return () => index.unmountComponentAtNode(canvas);
+    if (canvas) return () => index.unmountComponentAtNode(canvas);
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: mergeRefs__default['default']([meshRef, containerRef]),
@@ -254,7 +231,6 @@ exports.unmountComponentAtNode = index.unmountComponentAtNode;
 exports.useFrame = index.useFrame;
 exports.useGraph = index.useGraph;
 exports.useLoader = index.useLoader;
-exports.useMemoizedFn = index.useMemoizedFn;
 exports.useStore = index.useStore;
 exports.useThree = index.useThree;
 exports.Canvas = Canvas;

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMemoizedFn, p as pick, o as omit, a as createRoot, b as unmountComponentAtNode } from './index-e42f8ac9.esm.js';
-export { t as ReactThreeFiber, v as _roots, s as act, m as addAfterEffect, l as addEffect, n as addTail, k as advance, h as applyProps, d as context, f as createPortal, a as createRoot, i as dispose, e as extend, q as getRootState, j as invalidate, g as reconciler, r as render, b as unmountComponentAtNode, y as useFrame, z as useGraph, A as useLoader, u as useMemoizedFn, w as useStore, x as useThree } from './index-e42f8ac9.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, p as pick, o as omit, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-91152509.esm.js';
+export { t as ReactThreeFiber, w as _roots, v as act, n as addAfterEffect, m as addEffect, q as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, s as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, C as useLoader, x as useStore, y as useThree } from './index-91152509.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -23,6 +23,8 @@ const DOM_EVENTS = {
   onPointerCancel: ['pointercancel', true],
   onLostPointerCapture: ['lostpointercapture', true]
 };
+/** Default R3F event manager for web */
+
 function createPointerEvents(store) {
   const {
     handlePointer
@@ -46,13 +48,15 @@ function createPointerEvents(store) {
       var _events$handlers;
 
       const {
-        setEvents,
+        set,
         events
       } = store.getState();
       events.disconnect == null ? void 0 : events.disconnect();
-      setEvents({
-        connected: target
-      });
+      set(state => ({
+        events: { ...state.events,
+          connected: target
+        }
+      }));
       Object.entries((_events$handlers = events == null ? void 0 : events.handlers) != null ? _events$handlers : []).forEach(([name, event]) => {
         const [eventName, passive] = DOM_EVENTS[name];
         target.addEventListener(eventName, event, {
@@ -62,7 +66,7 @@ function createPointerEvents(store) {
     },
     disconnect: () => {
       const {
-        setEvents,
+        set,
         events
       } = store.getState();
 
@@ -75,53 +79,28 @@ function createPointerEvents(store) {
             events.connected.removeEventListener(eventName, event);
           }
         });
-        setEvents({
-          connected: undefined
-        });
+        set(state => ({
+          events: { ...state.events,
+            connected: undefined
+          }
+        }));
       }
     }
   };
 }
 
 const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'legacy', 'orthographic', 'frameloop', 'dpr', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
-
-function Block({
-  set
-}) {
-  React.useLayoutEffect(() => {
-    set(new Promise(() => null));
-    return () => set(false);
-  }, [set]);
-  return null;
-}
-
-class ErrorBoundary extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      error: false
-    };
-  }
-
-  componentDidCatch(error) {
-    this.props.set(error);
-  }
-
-  render() {
-    return this.state.error ? null : this.props.children;
-  }
-
-}
-
-ErrorBoundary.getDerivedStateFromError = () => ({
-  error: true
-});
+/**
+ * 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({
   children,
   fallback,
   resize,
   style,
+  onPointerMissed,
   events = createPointerEvents,
   ...props
 }, forwardedRef) {
@@ -129,7 +108,6 @@ 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 onPointerMissed = useMemoizedFn(props.onPointerMissed);
   const [containerRef, {
     width,
     height
@@ -141,15 +119,12 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
     },
     ...resize
   });
-  const meshRef = React.useRef(null);
   const canvasRef = React.useRef(null);
+  const meshRef = React.useRef(null);
   const [canvas, setCanvas] = React.useState(null);
-  const canvasProps = pick({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
-  const divProps = omit({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
+  const handlePointerMissed = useMutableCallback(onPointerMissed);
+  const canvasProps = pick(props, CANVAS_PROPS);
+  const divProps = omit(props, CANVAS_PROPS);
   const [block, setBlock] = React.useState(false);
   const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -161,6 +136,8 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   if (width > 0 && height > 0 && canvas) {
     if (!root.current) root.current = createRoot(canvas);
     root.current.configure({ ...canvasProps,
+      // 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(meshRef.current);
         canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
@@ -180,11 +157,11 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
     }, children)));
   }
 
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     setCanvas(canvasRef.current);
   }, []);
   React.useEffect(() => {
-    return () => unmountComponentAtNode(canvas);
+    if (canvas) return () => unmountComponentAtNode(canvas);
   }, [canvas]);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: mergeRefs([meshRef, containerRef]),

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var THREE = require('three');
 var expoAsset = require('expo-asset');
-var index = require('../../dist/index-75d39ab1.cjs.dev.js');
+var index = require('../../dist/index-018d2d45.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
@@ -62,6 +62,8 @@ const DOM_EVENTS = {
   [EVENTS.HOVEROUT]: 'onPointerOut',
   [EVENTS.PRESSMOVE]: 'onPointerMove'
 };
+/** Default R3F event manager for react-native */
+
 function createTouchEvents(store) {
   const {
     handlePointer
@@ -94,79 +96,54 @@ function createTouchEvents(store) {
     }), {}),
     connect: () => {
       const {
-        setEvents,
+        set,
         events
       } = store.getState();
       events.disconnect == null ? void 0 : events.disconnect();
       const connected = new Pressability__default['default'](events == null ? void 0 : events.handlers);
-      setEvents({
-        connected
-      });
+      set(state => ({
+        events: { ...state.events,
+          connected
+        }
+      }));
       const handlers = connected.getEventHandlers();
       return handlers;
     },
     disconnect: () => {
       const {
-        setEvents,
+        set,
         events
       } = store.getState();
 
       if (events.connected) {
         events.connected.reset();
-        setEvents({
-          connected: undefined
-        });
+        set(state => ({
+          events: { ...state.events,
+            connected: undefined
+          }
+        }));
       }
     }
   };
 }
 
 const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'legacy', 'orthographic', 'frameloop', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
-
-function Block({
-  set
-}) {
-  React__namespace.useLayoutEffect(() => {
-    set(new Promise(() => null));
-    return () => set(false);
-  }, [set]);
-  return null;
-}
-
-class ErrorBoundary extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      error: false
-    };
-  }
-
-  componentDidCatch(error) {
-    this.props.set(error);
-  }
-
-  render() {
-    return this.state.error ? null : this.props.children;
-  }
-
-}
-
-ErrorBoundary.getDerivedStateFromError = () => ({
-  error: true
-});
+/**
+ * A native canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+ */
 
 const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   children,
-  fallback,
   style,
   events,
+  onPointerMissed,
   ...props
 }, forwardedRef) => {
   // 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 onPointerMissed = index.useMemoizedFn(props.onPointerMissed);
   const [{
     width,
     height
@@ -176,12 +153,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   });
   const [canvas, setCanvas] = React__namespace.useState(null);
   const [bind, setBind] = React__namespace.useState();
-  const canvasProps = index.pick({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
-  const viewProps = index.omit({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
+  const handlePointerMissed = index.useMutableCallback(onPointerMissed);
+  const canvasProps = index.pick(props, CANVAS_PROPS);
+  const viewProps = index.omit(props, CANVAS_PROPS);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -233,6 +207,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
     };
 
     root.current.configure({ ...canvasProps,
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       // expo-gl can only render at native dpr/resolution
       // https://github.com/expo/expo-three/issues/39
       dpr: reactNative.PixelRatio.get(),
@@ -243,17 +219,19 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
       events: events || createTouchEvents,
       onCreated
     });
-    root.current.render( /*#__PURE__*/React__namespace.createElement(ErrorBoundary, {
+    root.current.render( /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
       set: setError
     }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-      fallback: /*#__PURE__*/React__namespace.createElement(Block, {
+      fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
         set: setBlock
       })
     }, children)));
   }
 
   React__namespace.useEffect(() => {
-    return () => index.unmountComponentAtNode(canvas);
+    if (canvas) {
+      return () => index.unmountComponentAtNode(canvas);
+    }
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, viewProps, {
     ref: mergeRefs__default['default']([viewRef, forwardedRef]),
@@ -372,7 +350,6 @@ exports.unmountComponentAtNode = index.unmountComponentAtNode;
 exports.useFrame = index.useFrame;
 exports.useGraph = index.useGraph;
 exports.useLoader = index.useLoader;
-exports.useMemoizedFn = index.useMemoizedFn;
 exports.useStore = index.useStore;
 exports.useThree = index.useThree;
 exports.Canvas = Canvas;

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var THREE = require('three');
 var expoAsset = require('expo-asset');
-var index = require('../../dist/index-4fb4daff.cjs.prod.js');
+var index = require('../../dist/index-c8c0474b.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
@@ -62,6 +62,8 @@ const DOM_EVENTS = {
   [EVENTS.HOVEROUT]: 'onPointerOut',
   [EVENTS.PRESSMOVE]: 'onPointerMove'
 };
+/** Default R3F event manager for react-native */
+
 function createTouchEvents(store) {
   const {
     handlePointer
@@ -94,79 +96,54 @@ function createTouchEvents(store) {
     }), {}),
     connect: () => {
       const {
-        setEvents,
+        set,
         events
       } = store.getState();
       events.disconnect == null ? void 0 : events.disconnect();
       const connected = new Pressability__default['default'](events == null ? void 0 : events.handlers);
-      setEvents({
-        connected
-      });
+      set(state => ({
+        events: { ...state.events,
+          connected
+        }
+      }));
       const handlers = connected.getEventHandlers();
       return handlers;
     },
     disconnect: () => {
       const {
-        setEvents,
+        set,
         events
       } = store.getState();
 
       if (events.connected) {
         events.connected.reset();
-        setEvents({
-          connected: undefined
-        });
+        set(state => ({
+          events: { ...state.events,
+            connected: undefined
+          }
+        }));
       }
     }
   };
 }
 
 const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'legacy', 'orthographic', 'frameloop', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
-
-function Block({
-  set
-}) {
-  React__namespace.useLayoutEffect(() => {
-    set(new Promise(() => null));
-    return () => set(false);
-  }, [set]);
-  return null;
-}
-
-class ErrorBoundary extends React__namespace.Component {
-  constructor(...args) {
-    super(...args);
-    this.state = {
-      error: false
-    };
-  }
-
-  componentDidCatch(error) {
-    this.props.set(error);
-  }
-
-  render() {
-    return this.state.error ? null : this.props.children;
-  }
-
-}
-
-ErrorBoundary.getDerivedStateFromError = () => ({
-  error: true
-});
+/**
+ * A native canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+ */
 
 const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   children,
-  fallback,
   style,
   events,
+  onPointerMissed,
   ...props
 }, forwardedRef) => {
   // 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 onPointerMissed = index.useMemoizedFn(props.onPointerMissed);
   const [{
     width,
     height
@@ -176,12 +153,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   });
   const [canvas, setCanvas] = React__namespace.useState(null);
   const [bind, setBind] = React__namespace.useState();
-  const canvasProps = index.pick({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
-  const viewProps = index.omit({ ...props,
-    onPointerMissed
-  }, CANVAS_PROPS);
+  const handlePointerMissed = index.useMutableCallback(onPointerMissed);
+  const canvasProps = index.pick(props, CANVAS_PROPS);
+  const viewProps = index.omit(props, CANVAS_PROPS);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -233,6 +207,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
     };
 
     root.current.configure({ ...canvasProps,
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
       // expo-gl can only render at native dpr/resolution
       // https://github.com/expo/expo-three/issues/39
       dpr: reactNative.PixelRatio.get(),
@@ -243,17 +219,19 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
       events: events || createTouchEvents,
       onCreated
     });
-    root.current.render( /*#__PURE__*/React__namespace.createElement(ErrorBoundary, {
+    root.current.render( /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
       set: setError
     }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-      fallback: /*#__PURE__*/React__namespace.createElement(Block, {
+      fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
         set: setBlock
       })
     }, children)));
   }
 
   React__namespace.useEffect(() => {
-    return () => index.unmountComponentAtNode(canvas);
+    if (canvas) {
+      return () => index.unmountComponentAtNode(canvas);
+    }
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, viewProps, {
     ref: mergeRefs__default['default']([viewRef, forwardedRef]),
@@ -372,7 +350,6 @@ exports.unmountComponentAtNode = index.unmountComponentAtNode;
 exports.useFrame = index.useFrame;
 exports.useGraph = index.useGraph;
 exports.useLoader = index.useLoader;
-exports.useMemoizedFn = index.useMemoizedFn;
 exports.useStore = index.useStore;
 exports.useThree = index.useThree;
 exports.Canvas = Canvas;