@react-three/fiber 7.0.23 → 7.0.24

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

@@ -1,22 +1,130 @@
-import { c as createEvents, q as buildGraph, r as is, a as createLoop, b as createRenderer, e as createStore, f as context, g as dispose, i as isRenderer } from '../../dist/hooks-8fbc4995.esm.js';
-export { t as ReactThreeFiber, k as addAfterEffect, j as addEffect, l as addTail, f as context, g as dispose, h as extend, n as useFrame, o as useGraph, u as useStore, m as useThree } from '../../dist/hooks-8fbc4995.esm.js';
+import { z as buildGraph, A as is, c as createEvents, e as extend, p as pick, o as omit, a as createRoot, u as unmountComponentAtNode } from '../../dist/index-fccd77b0.esm.js';
+export { t as ReactThreeFiber, y as _roots, x as act, v as addAfterEffect, s as addEffect, w as addTail, q as advance, l as applyProps, i as context, j as createPortal, a as createRoot, m as dispose, e as extend, n as invalidate, k as reconciler, r as render, u as unmountComponentAtNode, f as useFrame, g as useGraph, b as useStore, d as useThree } from '../../dist/index-fccd77b0.esm.js';
 import * as THREE from 'three';
-import * as React from 'react';
-import { DefaultEventPriority, ContinuousEventPriority, DiscreteEventPriority, ConcurrentRoot } from 'react-reconciler/constants';
-import Pressability from 'react-native/Libraries/Pressability/Pressability';
-import { View, StyleSheet, PixelRatio } from 'react-native';
 import { Asset } from 'expo-asset';
 import { readAsStringAsync } from 'expo-file-system';
 import { decode } from 'base64-arraybuffer';
 import { suspend, preload, clear } from 'suspend-react';
 import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import { PixelRatio, View, StyleSheet } from 'react-native';
 import { GLView } from 'expo-gl';
-import pick from 'lodash-es/pick';
-import omit from 'lodash-es/omit';
-import 'react-reconciler';
+import Pressability from 'react-native/Libraries/Pressability/Pressability';
+import 'react-reconciler/constants';
 import 'zustand';
+import 'react-reconciler';
+import 'scheduler';
+
+/**
+ * Generates an asset based on input type.
+ */
+
+const getAsset = input => {
+  if (input instanceof Asset) return input;
+
+  switch (typeof input) {
+    case 'string':
+      return Asset.fromURI(input);
+
+    case 'number':
+      return 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 => readAsStringAsync(localUri, {
+  encoding: 'base64'
+}).then(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.TextureLoader) {
+        const asset = await getAsset(url).downloadAsync();
+        const texture = new THREE.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.CubeTextureLoader) {
+        const texture = new THREE.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, 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, 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 = suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
+    equal: 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 preload(loadingFn(extensions), [Proto, ...keys]);
+};
+
+useLoader.clear = function (Proto, input) {
+  const keys = Array.isArray(input) ? input : [input];
+  return clear([Proto, ...keys]);
+};
 
-// @ts-ignore
 const EVENTS = {
   PRESS: 'onPress',
   PRESSIN: 'onPressIn',
@@ -34,30 +142,7 @@ const DOM_EVENTS = {
   [EVENTS.HOVERIN]: 'onPointerOver',
   [EVENTS.HOVEROUT]: 'onPointerOut',
   [EVENTS.PRESSMOVE]: 'onPointerMove'
-}; // https://github.com/facebook/react/tree/main/packages/react-reconciler#getcurrenteventpriority
-// Gives React a clue as to how import the current interaction is
-
-function getEventPriority() {
-  var _window, _window$event;
-
-  let name = (_window = window) == null ? void 0 : (_window$event = _window.event) == null ? void 0 : _window$event.type;
-
-  switch (name) {
-    case EVENTS.PRESS:
-    case EVENTS.PRESSIN:
-    case EVENTS.PRESSOUT:
-    case EVENTS.LONGPRESS:
-      return DiscreteEventPriority;
-
-    case EVENTS.HOVERIN:
-    case EVENTS.HOVEROUT:
-    case EVENTS.PRESSMOVE:
-      return ContinuousEventPriority;
-
-    default:
-      return DefaultEventPriority;
-  }
-}
+};
 function createTouchEvents(store) {
   const {
     handlePointer
@@ -84,10 +169,12 @@ function createTouchEvents(store) {
         events
       } = store.getState();
       events.disconnect == null ? void 0 : events.disconnect();
-      const manager = new Pressability(events == null ? void 0 : events.handlers);
+      const connected = new Pressability(events == null ? void 0 : events.handlers);
+      const handlers = connected.getEventHandlers();
       set(state => ({
         events: { ...state.events,
-          connected: manager
+          connected,
+          handlers
         }
       }));
     },
@@ -109,20 +196,15 @@ function createTouchEvents(store) {
   };
 }
 
-const CANVAS_PROPS = ['gl', 'events', 'size', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', // 'dpr',
-'performance', 'clock', 'raycaster', 'camera', 'onPointerMissed', 'onCreated']; // React currently throws a warning when using useLayoutEffect on the server.
-// To get around it, we can conditionally useEffect on the server (no-op) and
-// useLayoutEffect in the browser.
-
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'performance', 'clock', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
 
 function Block({
   set
 }) {
-  useIsomorphicLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     set(new Promise(() => null));
     return () => set(false);
-  }, []);
+  }, [set]);
   return null;
 }
 
@@ -153,13 +235,12 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   fallback,
   style,
   events,
-  nativeRef_EXPERIMENTAL,
-  onContextCreate,
   ...props
 }, forwardedRef) => {
-  const canvasProps = pick(props, CANVAS_PROPS);
-  const viewProps = omit(props, CANVAS_PROPS);
-  const [context, setContext] = React.useState(null);
+  // 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.useMemo(() => extend(THREE), []);
   const [{
     width,
     height
@@ -167,7 +248,10 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
     width: 0,
     height: 0
   });
+  const [canvas, setCanvas] = React.useState(null);
   const [bind, setBind] = React.useState();
+  const canvasProps = pick(props, CANVAS_PROPS);
+  const viewProps = 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)
 
@@ -183,356 +267,70 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
       width,
       height
     });
-  }, []); // Execute JSX in the reconciler as a layout-effect
-
-  useIsomorphicLayoutEffect(() => {
-    if (width > 0 && height > 0 && context) {
-      const store = render( /*#__PURE__*/React.createElement(ErrorBoundary, {
-        set: setError
-      }, /*#__PURE__*/React.createElement(React.Suspense, {
-        fallback: /*#__PURE__*/React.createElement(Block, {
-          set: setBlock
-        })
-      }, children)), context, { ...canvasProps,
-        size: {
-          width,
-          height
-        },
-        events: events || createTouchEvents
-      });
-      const state = store.getState();
-      setBind(state.events.connected.getEventHandlers());
-    }
-  }, [width, height, children, context, canvasProps]);
-  useIsomorphicLayoutEffect(() => {
-    return () => {
-      if (context) unmountComponentAtNode(context);
+  }, []);
+  const onContextCreate = React.useCallback(context => {
+    const canvasShim = {
+      width: context.drawingBufferWidth,
+      height: context.drawingBufferHeight,
+      style: {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      clientHeight: context.drawingBufferHeight,
+      getContext: () => context
     };
+    setCanvas(canvasShim);
   }, []);
-  return /*#__PURE__*/React.createElement(View, _extends({}, viewProps, {
-    ref: forwardedRef,
-    onLayout: onLayout,
-    style: {
-      flex: 1,
-      ...style
-    }
-  }, bind), width > 0 && /*#__PURE__*/React.createElement(GLView, {
-    nativeRef_EXPERIMENTAL: ref => {
-      if (nativeRef_EXPERIMENTAL && !nativeRef_EXPERIMENTAL.current) {
-        nativeRef_EXPERIMENTAL.current = ref;
-      }
-    },
-    onContextCreate: async gl => {
-      await (onContextCreate == null ? void 0 : onContextCreate(gl));
-      setContext(gl);
-    },
-    style: StyleSheet.absoluteFill
-  }));
-});
 
-/**
- * Generates an asset based on input type.
- */
+  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 getAsset = input => {
-  if (input instanceof Asset) return input;
+      const context = state.gl.getContext();
+      const renderFrame = state.gl.render.bind(state.gl);
 
-  switch (typeof input) {
-    case 'string':
-      return Asset.fromURI(input);
+      state.gl.render = (scene, camera) => {
+        renderFrame(scene, camera);
+        context.endFrameEXP();
+      };
 
-    case 'number':
-      return 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 => readAsStringAsync(localUri, {
-  encoding: 'base64'
-}).then(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) => {
-      var _parse, _ref;
-
-      // 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.TextureLoader) {
-        const asset = await getAsset(url).downloadAsync();
-        const texture = new THREE.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.CubeTextureLoader) {
-        const texture = new THREE.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, 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 = (_parse = (_ref = loader).parse) == null ? void 0 : _parse.call(_ref, arrayBuffer, undefined, data => {
-        if (data.scene) Object.assign(data, 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 = suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
-    equal: 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 preload(loadingFn(extensions), [Proto, ...keys]);
-};
-
-useLoader.clear = function (Proto, input) {
-  const keys = Array.isArray(input) ? input : [input];
-  return clear([Proto, ...keys]);
-};
-
-const roots = new Map();
-const {
-  invalidate,
-  advance
-} = createLoop(roots);
-const {
-  reconciler,
-  applyProps
-} = createRenderer(roots, getEventPriority);
-
-const createRendererInstance = (gl, context) => {
-  // Create canvas shim
-  const canvas = {
-    width: context.drawingBufferWidth,
-    height: context.drawingBufferHeight,
-    style: {},
-    addEventListener: () => {},
-    removeEventListener: () => {},
-    clientHeight: context.drawingBufferHeight
-  }; // If a renderer is specified, return it
-
-  const customRenderer = typeof gl === 'function' ? gl(canvas, context) : gl;
-  if (isRenderer(customRenderer)) return customRenderer; // Create renderer and pass our canvas and its context
-
-  const renderer = new THREE.WebGLRenderer({
-    powerPreference: 'high-performance',
-    antialias: true,
-    alpha: true,
-    ...gl,
-    canvas,
-    context
-  }); // Set color management
-
-  renderer.outputEncoding = THREE.sRGBEncoding;
-  renderer.toneMapping = THREE.ACESFilmicToneMapping; // Set GL props
-
-  if (gl) applyProps(renderer, gl); // Bind render to RN bridge
-
-  if (context.endFrameEXP) {
-    const renderFrame = renderer.render.bind(renderer);
-
-    renderer.render = (scene, camera) => {
-      renderFrame(scene, camera);
-      context.endFrameEXP();
+      return canvasProps == null ? void 0 : canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
     };
-  }
-
-  return renderer;
-};
-
-function createRoot(context, config) {
-  return {
-    render: element => render(element, context, config),
-    unmount: () => unmountComponentAtNode(context)
-  };
-}
-
-function render(element, context, {
-  gl,
-  size = {
-    width: 0,
-    height: 0
-  },
-  events,
-  onCreated,
-  ...props
-} = {}) {
-  var _store;
-
-  let root = roots.get(context);
-  let fiber = root == null ? void 0 : root.fiber;
-  let store = root == null ? void 0 : root.store;
-  let state = (_store = store) == null ? void 0 : _store.getState();
-
-  if (fiber && state) {
-    // When a root was found, see if any fundamental props must be changed or exchanged
-    // Check size
-    if (state.size.width !== size.width || state.size.height !== size.height) state.setSize(size.width, size.height); // For some props we want to reset the entire root
-    // Changes to the color-space
-
-    const linearChanged = props.linear !== state.internal.lastProps.linear;
-
-    if (linearChanged) {
-      unmountComponentAtNode(context);
-      fiber = undefined;
-    }
-  }
-
-  if (!fiber) {
-    // If no root has been found, make one
-    // Create gl
-    const glRenderer = createRendererInstance(gl, context); // Create store
 
-    store = createStore(applyProps, invalidate, advance, {
-      gl: glRenderer,
-      size,
-      ...props,
+    createRoot(canvas, { ...canvasProps,
       // expo-gl can only render at native dpr/resolution
       // https://github.com/expo/expo-three/issues/39
-      dpr: PixelRatio.get()
-    });
-    const state = store.getState(); // Create renderer
-
-    fiber = reconciler.createContainer(store, ConcurrentRoot, false, null); // Map it
-
-    roots.set(context, {
-      fiber,
-      store
-    }); // Store event manager internally and connect it
-
-    if (events) {
-      var _state$get$events$con, _state$get$events;
-
-      state.set({
-        events: events(store)
-      });
-      (_state$get$events$con = (_state$get$events = state.get().events).connect) == null ? void 0 : _state$get$events$con.call(_state$get$events, context);
-    }
+      dpr: PixelRatio.get(),
+      size: {
+        width,
+        height
+      },
+      events: events || createTouchEvents,
+      onCreated
+    }).render( /*#__PURE__*/React.createElement(ErrorBoundary, {
+      set: setError
+    }, /*#__PURE__*/React.createElement(React.Suspense, {
+      fallback: /*#__PURE__*/React.createElement(Block, {
+        set: setBlock
+      })
+    }, children)));
   }
 
-  if (store && fiber) {
-    reconciler.updateContainer( /*#__PURE__*/React.createElement(Provider, {
-      store: store,
-      element: element,
-      onCreated: onCreated
-    }), fiber, null, () => undefined);
-    return store;
-  } else {
-    throw 'Error creating root!';
-  }
-}
-
-function Provider({
-  store,
-  element,
-  onCreated
-}) {
   React.useEffect(() => {
-    const state = store.getState(); // Flag the canvas active, rendering will now begin
-
-    state.set(state => ({
-      internal: { ...state.internal,
-        active: true
-      }
-    })); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
-
-    if (onCreated) onCreated(state); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  return /*#__PURE__*/React.createElement(context.Provider, {
-    value: store
-  }, element);
-}
-
-function unmountComponentAtNode(context, callback) {
-  const root = roots.get(context);
-  const fiber = root == null ? void 0 : root.fiber;
-
-  if (fiber) {
-    const state = root == null ? void 0 : root.store.getState();
-    if (state) state.internal.active = false;
-    reconciler.updateContainer(null, fiber, null, () => {
-      if (state) {
-        setTimeout(() => {
-          try {
-            var _state$gl, _state$gl$renderLists, _state$gl2;
-
-            state.events.disconnect == null ? void 0 : state.events.disconnect();
-            (_state$gl = state.gl) == null ? void 0 : (_state$gl$renderLists = _state$gl.renderLists) == null ? void 0 : _state$gl$renderLists.dispose == null ? void 0 : _state$gl$renderLists.dispose();
-            (_state$gl2 = state.gl) == null ? void 0 : _state$gl2.forceContextLoss == null ? void 0 : _state$gl2.forceContextLoss();
-            dispose(state);
-            roots.delete(context);
-            if (callback) callback(context);
-          } catch (e) {
-            /* ... */
-          }
-        }, 500);
-      }
-    });
-  }
-}
-
-const act = reconciler.act;
-
-function createPortal(children, container) {
-  return reconciler.createPortal(children, container, null, null);
-}
-
-reconciler.injectIntoDevTools({
-  bundleType: process.env.NODE_ENV === 'production' ? 0 : 1,
-  rendererPackageName: '@react-three/fiber',
-  version: '18.0.0'
+    return () => unmountComponentAtNode(canvas);
+  }, [canvas]);
+  return /*#__PURE__*/React.createElement(View, _extends({}, viewProps, {
+    ref: forwardedRef,
+    onLayout: onLayout,
+    style: {
+      flex: 1,
+      ...style
+    }
+  }, bind), width > 0 && /*#__PURE__*/React.createElement(GLView, {
+    onContextCreate: onContextCreate,
+    style: StyleSheet.absoluteFill
+  }));
 });
 
-export { Canvas, roots as _roots, act, advance, applyProps, createPortal, createRoot, createTouchEvents as events, invalidate, reconciler, render, unmountComponentAtNode, useLoader };
+export { Canvas, createTouchEvents as events, useLoader };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "7.0.23",
+  "version": "7.0.24",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",