@react-three/fiber 7.0.24 → 7.0.27

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

@@ -81,7 +81,7 @@ function createEvents(store) {
   /** Sets up defaultRaycaster */
 
   function prepareRay(event) {
-    var _raycaster$computeOff;
+    var _customOffsets$offset, _customOffsets$offset2, _customOffsets$width, _customOffsets$height;
 
     const state = store.getState();
     const {
@@ -92,14 +92,11 @@ function createEvents(store) {
     } = state; // https://github.com/pmndrs/react-three-fiber/pull/782
     // Events trigger outside of canvas when moved
 
-    const {
-      offsetX,
-      offsetY
-    } = (_raycaster$computeOff = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state)) != null ? _raycaster$computeOff : event;
-    const {
-      width,
-      height
-    } = size;
+    const customOffsets = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state);
+    const offsetX = (_customOffsets$offset = customOffsets == null ? void 0 : customOffsets.offsetX) != null ? _customOffsets$offset : event.offsetX;
+    const offsetY = (_customOffsets$offset2 = customOffsets == null ? void 0 : customOffsets.offsetY) != null ? _customOffsets$offset2 : event.offsetY;
+    const width = (_customOffsets$width = customOffsets == null ? void 0 : customOffsets.width) != null ? _customOffsets$width : size.width;
+    const height = (_customOffsets$height = customOffsets == null ? void 0 : customOffsets.height) != null ? _customOffsets$height : size.height;
     mouse.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
     raycaster.setFromCamera(mouse, camera);
   }
@@ -555,6 +552,8 @@ function createRenderer(roots) {
 
     if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
     changes.forEach(([key, value, isEvent, keys]) => {
+      var _rootState$gl;
+
       let currentInstance = instance;
       let targetProp = currentInstance[key]; // Revolve dashed props
 
@@ -585,37 +584,38 @@ function createRenderer(roots) {
 
           if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
         } else value = 0;
-      } // Deal with pointer events ...
+      }
 
+      const isLinear = (rootState == null ? void 0 : (_rootState$gl = rootState.gl) == null ? void 0 : _rootState$gl.outputEncoding) === THREE.LinearEncoding; // Deal with pointer events ...
 
       if (isEvent) {
         if (value) localState.handlers[key] = value;else delete localState.handlers[key];
         localState.eventCount = Object.keys(localState.handlers).length;
       } // Special treatment for objects with support for set/copy, and layers
       else if (targetProp && targetProp.set && (targetProp.copy || targetProp instanceof THREE.Layers)) {
-          // If value is an array
-          if (Array.isArray(value)) {
-            if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
-          } // Test again target.copy(class) next ...
-          else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) targetProp.copy(value); // If nothing else fits, just set the single value, ignore undefined
-            // https://github.com/pmndrs/react-three-fiber/issues/274
-            else if (value !== undefined) {
-                const isColor = targetProp instanceof THREE.Color; // Allow setting array scalars
-
-                if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
-                else if (targetProp instanceof THREE.Layers && value instanceof THREE.Layers) targetProp.mask = value.mask; // Otherwise just set ...
-                  else targetProp.set(value); // Auto-convert sRGB colors, for now ...
-                // https://github.com/pmndrs/react-three-fiber/issues/344
-
-                if (!rootState.linear && isColor) targetProp.convertSRGBToLinear();
-              } // Else, just overwrite the value
-
-        } else {
-          currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+        // If value is an array
+        if (Array.isArray(value)) {
+          if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
+        } // Test again target.copy(class) next ...
+        else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) targetProp.copy(value); // If nothing else fits, just set the single value, ignore undefined
+        // https://github.com/pmndrs/react-three-fiber/issues/274
+        else if (value !== undefined) {
+          const isColor = targetProp instanceof THREE.Color; // Allow setting array scalars
+
+          if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
+          else if (targetProp instanceof THREE.Layers && value instanceof THREE.Layers) targetProp.mask = value.mask; // Otherwise just set ...
+          else targetProp.set(value); // Auto-convert sRGB colors, for now ...
           // https://github.com/pmndrs/react-three-fiber/issues/344
 
-          if (!rootState.linear && currentInstance[key] instanceof THREE.Texture) currentInstance[key].encoding = THREE.sRGBEncoding;
-        }
+          if (!isLinear && isColor) targetProp.convertSRGBToLinear();
+        } // Else, just overwrite the value
+
+      } else {
+        currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+        // https://github.com/pmndrs/react-three-fiber/issues/344
+
+        if (!isLinear && currentInstance[key] instanceof THREE.Texture) currentInstance[key].encoding = THREE.sRGBEncoding;
+      }
 
       invalidateInstance(instance);
     });
@@ -891,10 +891,13 @@ function createRenderer(roots) {
 
     instance.__r3f.objects = [];
     removeChild(parent, instance);
-    appendChild(parent, newInstance) // This evil hack switches the react-internal fiber node
-    // https://github.com/facebook/react/issues/14983
-    // https://github.com/facebook/react/pull/15021
-    ;
+    appendChild(parent, newInstance); // Re-bind event handlers
+
+    if (newInstance.raycast && newInstance.__r3f.eventCount) {
+      const rootState = newInstance.__r3f.root.getState();
+
+      rootState.internal.interaction.push(newInstance);
+    } // This evil hack switches the react-internal fiber node
     [fiber, fiber.alternate].forEach(fiber => {
       if (fiber !== null) {
         fiber.stateNode = newInstance;
@@ -1020,9 +1023,7 @@ function createRenderer(roots) {
       return !!localState.handlers;
     },
 
-    commitMount(instance)
-    /*, type, props*/
-    {
+    commitMount(instance) {
       var _instance$__r3f8;
 
       // https://github.com/facebook/react/issues/20271
@@ -1534,6 +1535,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   events,
   ...props
 }, forwardedRef) {
+  const onPointerMissed = useMemoizedFn(props.onPointerMissed);
   const [containerRef, {
     width,
     height
@@ -1566,10 +1568,11 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
           width,
           height
         },
+        onPointerMissed,
         events: events || createPointerEvents
       });
     }
-  }, [width, height, children]);
+  }, [width, height, children, onPointerMissed]);
   useIsomorphicLayoutEffect(() => {
     const container = canvasRef.current;
     return () => unmountComponentAtNode(container);
@@ -1650,6 +1653,11 @@ function loadingFn(extensions, onProgress) {
   };
 }
 
+function useMemoizedFn(fn) {
+  const fnRef = React.useRef(fn);
+  React.useLayoutEffect(() => void (fnRef.current = fn), [fn]);
+  return (...args) => fnRef.current == null ? void 0 : fnRef.current(...args);
+}
 function useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];
@@ -1835,8 +1843,7 @@ function dispose(obj) {
   if (obj.dispose && obj.type !== 'Scene') obj.dispose();
 
   for (const p in obj) {
-    var _dispose, _ref;
-    (_dispose = (_ref = p).dispose) == null ? void 0 : _dispose.call(_ref);
+    p.dispose == null ? void 0 : p.dispose();
     delete obj[p];
   }
 }
@@ -1853,4 +1860,4 @@ reconciler.injectIntoDevTools({
   version: '17.0.2'
 });
 
-export { Canvas, threeTypes as ReactThreeFiber, roots as _roots, act, addAfterEffect, addEffect, addTail, advance, applyProps, context, createPortal, dispose, createPointerEvents as events, extend, invalidate, reconciler, render, unmountComponentAtNode, useFrame, useGraph, useLoader, useStore, useThree };
+export { Canvas, threeTypes as ReactThreeFiber, roots as _roots, act, addAfterEffect, addEffect, addTail, advance, applyProps, context, createPortal, dispose, createPointerEvents as events, extend, invalidate, reconciler, render, unmountComponentAtNode, useFrame, useGraph, useLoader, useMemoizedFn, useStore, useThree };

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

@@ -1 +1,11 @@
-export * from "../../dist/declarations/src/native";
+// are you seeing an error that a default export doesn't exist but your source file has a default export?
+// you should run `yarn` or `yarn preconstruct dev` if preconstruct dev isn't in your postinstall hook
+
+// curious why you need to?
+// this file exists so that you can import from the entrypoint normally
+// except that it points to your source file and you don't need to run build constantly
+// which means we need to re-export all of the modules from your source file
+// and since export * doesn't include default exports, we need to read your source file
+// to check for a default export and re-export it if it exists
+// it's not ideal, but it works pretty well ¯\_(ツ)_/¯
+export * from "../../src/native";

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

@@ -1,7 +1,16 @@
-'use strict';
+"use strict";
+// this file might look strange and you might be wondering what it's for
+// it's lets you import your source files by importing this entrypoint
+// as you would import it if it was built with preconstruct build
+// this file is slightly different to some others though
+// it has a require hook which compiles your code with Babel
+// this means that you don't have to set up @babel/register or anything like that
+// but you can still require this module and it'll be compiled
 
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./react-three-fiber-native.cjs.prod.js");
-} else {
-  module.exports = require("./react-three-fiber-native.cjs.dev.js");
-}
+// this bit of code imports the require hook and registers it
+let unregister = require("../../../../node_modules/@preconstruct/hook").___internalHook(typeof __dirname === 'undefined' ? undefined : __dirname, "../../../..", "../..");
+
+// this re-exports the source file
+module.exports = require("../../src/native.tsx");
+
+unregister();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "7.0.24",
+  "version": "7.0.27",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -42,6 +42,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
+    "@types/react-reconciler": "^0.26.2",
     "react-merge-refs": "^1.1.0",
     "react-reconciler": "^0.26.2",
     "react-three-fiber": "0.0.0-deprecated",
@@ -55,7 +56,7 @@
   "peerDependencies": {
     "react": ">=17.0",
     "react-dom": ">=17.0",
-    "three": ">=0.126"
+    "three": ">=0.133"
   },
   "peerDependenciesMeta": {
     "react-dom": {

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

@@ -1,388 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var index = require('../../dist/index-ff3eb68b.cjs.dev.js');
-var THREE = require('three');
-var expoAsset = require('expo-asset');
-var expoFileSystem = require('expo-file-system');
-var base64Arraybuffer = require('base64-arraybuffer');
-var suspendReact = require('suspend-react');
-var _extends = require('@babel/runtime/helpers/extends');
-var React = require('react');
-var reactNative = require('react-native');
-var expoGl = require('expo-gl');
-var Pressability = require('react-native/Libraries/Pressability/Pressability');
-require('react-reconciler/constants');
-require('zustand');
-require('react-reconciler');
-require('scheduler');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () {
-            return e[k];
-          }
-        });
-      }
-    });
-  }
-  n['default'] = e;
-  return Object.freeze(n);
-}
-
-var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var Pressability__default = /*#__PURE__*/_interopDefault(Pressability);
-
-/**
- * Generates an asset based on input type.
- */
-
-const getAsset = input => {
-  if (input instanceof expoAsset.Asset) return input;
-
-  switch (typeof input) {
-    case 'string':
-      return expoAsset.Asset.fromURI(input);
-
-    case 'number':
-      return expoAsset.Asset.fromModule(input);
-
-    default:
-      throw 'Invalid asset! Must be a URI or module.';
-  }
-};
-/**
- * Downloads from a local URI and decodes into an ArrayBuffer.
- */
-
-
-const toBuffer = async localUri => expoFileSystem.readAsStringAsync(localUri, {
-  encoding: 'base64'
-}).then(base64Arraybuffer.decode);
-
-function loadingFn(extensions, onProgress) {
-  return function (Proto, ...input) {
-    // Construct new loader and run extensions
-    const loader = new Proto();
-    if (extensions) extensions(loader); // Go through the urls and load them
-
-    return Promise.all(input.map(entry => new Promise(async (res, reject) => {
-      // Construct URL
-      const url = typeof entry === 'string' ? loader.path + entry : entry; // There's no Image in native, so we create & pass a data texture instead
-
-      if (loader instanceof THREE__namespace.TextureLoader) {
-        const asset = await getAsset(url).downloadAsync();
-        const texture = new THREE__namespace.Texture();
-        texture.isDataTexture = true;
-        texture.image = {
-          data: asset,
-          width: asset.width,
-          height: asset.height
-        };
-        texture.needsUpdate = true;
-        return res(texture);
-      } // Do similar for CubeTextures
-
-
-      if (loader instanceof THREE__namespace.CubeTextureLoader) {
-        const texture = new THREE__namespace.CubeTexture();
-        texture.isDataTexture = true;
-        texture.images = await Promise.all(url.map(async src => {
-          const asset = await getAsset(src).downloadAsync();
-          return {
-            data: asset,
-            width: asset.width,
-            height: asset.height
-          };
-        }));
-        texture.needsUpdate = true;
-        return res(texture);
-      } // If asset is external and not an Image, load it
-
-
-      if (url.startsWith != null && url.startsWith('http') && Proto.prototype.hasOwnProperty('load')) {
-        return loader.load(entry, data => {
-          if (data.scene) Object.assign(data, index.buildGraph(data.scene));
-          res(data);
-        }, onProgress, error => reject(`Could not load ${url}: ${error.message}`));
-      } // Otherwise, create a localUri and a file buffer
-
-
-      const {
-        localUri
-      } = await getAsset(url).downloadAsync();
-      const arrayBuffer = await toBuffer(localUri); // Parse it
-
-      const parsed = loader.parse == null ? void 0 : loader.parse(arrayBuffer, undefined, data => {
-        if (data.scene) Object.assign(data, index.buildGraph(data.scene));
-        res(data);
-      }, error => reject(`Could not load ${url}: ${error.message}`)); // Respect synchronous parsers which don't have callbacks
-
-      if (parsed) return res(parsed);
-    })));
-  };
-}
-
-function useLoader(Proto, input, extensions, onProgress) {
-  // Use suspense to load async assets
-  const keys = Array.isArray(input) ? input : [input];
-  const results = suspendReact.suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
-    equal: index.is.equ
-  }); // Return the object/s
-
-  return Array.isArray(input) ? results : results[0];
-}
-
-useLoader.preload = function (Proto, input, extensions) {
-  const keys = Array.isArray(input) ? input : [input];
-  return suspendReact.preload(loadingFn(extensions), [Proto, ...keys]);
-};
-
-useLoader.clear = function (Proto, input) {
-  const keys = Array.isArray(input) ? input : [input];
-  return suspendReact.clear([Proto, ...keys]);
-};
-
-const EVENTS = {
-  PRESS: 'onPress',
-  PRESSIN: 'onPressIn',
-  PRESSOUT: 'onPressOut',
-  LONGPRESS: 'onLongPress',
-  HOVERIN: 'onHoverIn',
-  HOVEROUT: 'onHoverOut',
-  PRESSMOVE: 'onPressMove'
-};
-const DOM_EVENTS = {
-  [EVENTS.PRESS]: 'onClick',
-  [EVENTS.PRESSIN]: 'onPointerDown',
-  [EVENTS.PRESSOUT]: 'onPointerUp',
-  [EVENTS.LONGPRESS]: 'onDoubleClick',
-  [EVENTS.HOVERIN]: 'onPointerOver',
-  [EVENTS.HOVEROUT]: 'onPointerOut',
-  [EVENTS.PRESSMOVE]: 'onPointerMove'
-};
-function createTouchEvents(store) {
-  const {
-    handlePointer
-  } = index.createEvents(store);
-
-  const handleTouch = (event, name) => {
-    event.persist() // Apply offset
-    ;
-    event.nativeEvent.offsetX = event.nativeEvent.pageX;
-    event.nativeEvent.offsetY = event.nativeEvent.pageY; // Emulate DOM event
-
-    const callback = handlePointer(DOM_EVENTS[name]);
-    return callback(event.nativeEvent);
-  };
-
-  return {
-    connected: false,
-    handlers: Object.values(EVENTS).reduce((acc, name) => ({ ...acc,
-      [name]: event => handleTouch(event, name)
-    }), {}),
-    connect: () => {
-      const {
-        set,
-        events
-      } = store.getState();
-      events.disconnect == null ? void 0 : events.disconnect();
-      const connected = new Pressability__default['default'](events == null ? void 0 : events.handlers);
-      const handlers = connected.getEventHandlers();
-      set(state => ({
-        events: { ...state.events,
-          connected,
-          handlers
-        }
-      }));
-    },
-    disconnect: () => {
-      const {
-        set,
-        events
-      } = store.getState();
-
-      if (events.connected) {
-        events.connected.reset();
-        set(state => ({
-          events: { ...state.events,
-            connected: false
-          }
-        }));
-      }
-    }
-  };
-}
-
-const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'performance', 'clock', '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
-});
-
-const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
-  children,
-  fallback,
-  style,
-  events,
-  ...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 [{
-    width,
-    height
-  }, setSize] = React__namespace.useState({
-    width: 0,
-    height: 0
-  });
-  const [canvas, setCanvas] = React__namespace.useState(null);
-  const [bind, setBind] = React__namespace.useState();
-  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)
-
-  if (block) throw block; // Throw exception outwards if anything within canvas throws
-
-  if (error) throw error;
-  const onLayout = React__namespace.useCallback(e => {
-    const {
-      width,
-      height
-    } = e.nativeEvent.layout;
-    setSize({
-      width,
-      height
-    });
-  }, []);
-  const onContextCreate = React__namespace.useCallback(context => {
-    const canvasShim = {
-      width: context.drawingBufferWidth,
-      height: context.drawingBufferHeight,
-      style: {},
-      addEventListener: () => {},
-      removeEventListener: () => {},
-      clientHeight: context.drawingBufferHeight,
-      getContext: () => context
-    };
-    setCanvas(canvasShim);
-  }, []);
-
-  if (width > 0 && height > 0 && canvas) {
-    // Overwrite onCreated to apply RN bindings
-    const onCreated = state => {
-      // Bind events after creation
-      setBind(state.events.handlers); // Bind render to RN bridge
-
-      const context = state.gl.getContext();
-      const renderFrame = state.gl.render.bind(state.gl);
-
-      state.gl.render = (scene, camera) => {
-        renderFrame(scene, camera);
-        context.endFrameEXP();
-      };
-
-      return canvasProps == null ? void 0 : canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
-    };
-
-    index.createRoot(canvas, { ...canvasProps,
-      // expo-gl can only render at native dpr/resolution
-      // https://github.com/expo/expo-three/issues/39
-      dpr: reactNative.PixelRatio.get(),
-      size: {
-        width,
-        height
-      },
-      events: events || createTouchEvents,
-      onCreated
-    }).render( /*#__PURE__*/React__namespace.createElement(ErrorBoundary, {
-      set: setError
-    }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-      fallback: /*#__PURE__*/React__namespace.createElement(Block, {
-        set: setBlock
-      })
-    }, children)));
-  }
-
-  React__namespace.useEffect(() => {
-    return () => index.unmountComponentAtNode(canvas);
-  }, [canvas]);
-  return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, viewProps, {
-    ref: forwardedRef,
-    onLayout: onLayout,
-    style: {
-      flex: 1,
-      ...style
-    }
-  }, bind), width > 0 && /*#__PURE__*/React__namespace.createElement(expoGl.GLView, {
-    onContextCreate: onContextCreate,
-    style: reactNative.StyleSheet.absoluteFill
-  }));
-});
-
-exports.ReactThreeFiber = index.threeTypes;
-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.createPortal = index.createPortal;
-exports.createRoot = index.createRoot;
-exports.dispose = index.dispose;
-exports.extend = index.extend;
-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.useStore = index.useStore;
-exports.useThree = index.useThree;
-exports.Canvas = Canvas;
-exports.events = createTouchEvents;
-exports.useLoader = useLoader;