@react-three/fiber 7.0.19 → 7.0.23

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

@@ -0,0 +1,538 @@
+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 * 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 { GLView } from 'expo-gl';
+import pick from 'lodash-es/pick';
+import omit from 'lodash-es/omit';
+import 'react-reconciler';
+import 'zustand';
+
+// @ts-ignore
+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'
+}; // 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
+  } = 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 manager = new Pressability(events == null ? void 0 : events.handlers);
+      set(state => ({
+        events: { ...state.events,
+          connected: manager
+        }
+      }));
+    },
+    disconnect: () => {
+      const {
+        set,
+        events
+      } = store.getState();
+
+      if (events.connected) {
+        events.connected.reset();
+        set(state => ({
+          events: { ...state.events,
+            connected: false
+          }
+        }));
+      }
+    }
+  };
+}
+
+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;
+
+function Block({
+  set
+}) {
+  useIsomorphicLayoutEffect(() => {
+    set(new Promise(() => null));
+    return () => set(false);
+  }, []);
+  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
+});
+
+const Canvas = /*#__PURE__*/React.forwardRef(({
+  children,
+  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);
+  const [{
+    width,
+    height
+  }, setSize] = React.useState({
+    width: 0,
+    height: 0
+  });
+  const [bind, setBind] = React.useState();
+  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
+
+  if (error) throw error;
+  const onLayout = React.useCallback(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    setSize({
+      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);
+    };
+  }, []);
+  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.
+ */
+
+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) => {
+      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 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,
+      // 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);
+    }
+  }
+
+  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'
+});
+
+export { Canvas, roots as _roots, act, advance, applyProps, createPortal, createRoot, createTouchEvents as events, invalidate, reconciler, render, unmountComponentAtNode, useLoader };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "7.0.19",
+  "version": "7.0.23",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -12,7 +12,8 @@
   "author": "Paul Henschel (https://github.com/drcmda)",
   "license": "MIT",
   "maintainers": [
-    "Josh Ellis (https://github.com/joshuaellis)"
+    "Josh Ellis (https://github.com/joshuaellis)",
+    "Cody Bennett (https://github.com/codyjasonbennett)"
   ],
   "bugs": {
     "url": "https://github.com/pmndrs/react-three-fiber/issues"
@@ -44,7 +45,7 @@
     "react-merge-refs": "^1.1.0",
     "react-reconciler": "^0.26.2",
     "react-three-fiber": "0.0.0-deprecated",
-    "react-use-measure": "^2.0.4",
+    "react-use-measure": "^2.1.1",
     "resize-observer-polyfill": "^1.5.1",
     "scheduler": "^0.20.2",
     "use-asset": "^1.0.4",

package/readme.md

@@ -156,7 +156,7 @@ ReactDOM.render(
 You need to be versed in both React and Threejs before rushing into this. If you are unsure about React consult the official [React docs](https://reactjs.org/docs/getting-started.html), especially [the section about hooks](https://reactjs.org/docs/hooks-reference.html). As for Threejs, make sure you at least glance over the following links:
 
 1. Make sure you have a [basic grasp of Threejs](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene). Keep that site open.
-2. When you know what a scene is, a camera, mesh, geometry, material, fork the [demo above](https://github.com/react-spring/react-three-fiber#what-does-it-look-like).
+2. When you know what a scene is, a camera, mesh, geometry, material, fork the [demo above](https://github.com/pmndrs/react-three-fiber#what-does-it-look-like).
 3. [Look up](https://threejs.org/docs/index.html#api/en/objects/Mesh) the JSX elements that you see (mesh, ambientLight, etc), _all_ threejs exports are native to three-fiber.
 4. Try changing some values, scroll though our [Api](/markdown/api.md) to see what the various settings and hooks do.
 
@@ -171,15 +171,15 @@ Some reading material:
 
 # Ecosystem
 
-- [`@react-three/gltfjsx`](https://github.com/react-spring/gltfjsx) – turns GLTFs into JSX components
-- [`@react-three/drei`](https://github.com/react-spring/drei) – useful helpers for react-three-fiber
-- [`@react-three/postprocessing`](https://github.com/react-spring/react-postprocessing) – post-processing effects
-- [`@react-three/flex`](https://github.com/react-spring/react-three-flex) – flexbox for react-three-fiber
-- [`@react-three/xr`](https://github.com/react-spring/react-xr) – VR/AR controllers and events
-- [`@react-three/cannon`](https://github.com/react-spring/use-cannon) – physics based hooks
-- [`zustand`](https://github.com/react-spring/zustand) – state management
-- [`react-spring`](https://github.com/react-spring/react-spring) – a spring-physics-based animation library
-- [`react-use-gesture`](https://github.com/react-spring/react-use-gesture) – mouse/touch gestures
+- [`@react-three/gltfjsx`](https://github.com/pmndrs/gltfjsx) – turns GLTFs into JSX components
+- [`@react-three/drei`](https://github.com/pmndrs/drei) – useful helpers for react-three-fiber
+- [`@react-three/postprocessing`](https://github.com/pmndrs/react-postprocessing) – post-processing effects
+- [`@react-three/flex`](https://github.com/pmndrs/react-three-flex) – flexbox for react-three-fiber
+- [`@react-three/xr`](https://github.com/pmndrs/react-xr) – VR/AR controllers and events
+- [`@react-three/cannon`](https://github.com/pmndrs/use-cannon) – physics based hooks
+- [`zustand`](https://github.com/pmndrs/zustand) – state management
+- [`react-spring`](https://github.com/pmndrs/react-spring) – a spring-physics-based animation library
+- [`react-use-gesture`](https://github.com/pmndrs/react-use-gesture) – mouse/touch gestures
 
 # How to contribute