@react-three/fiber 8.0.0-beta-02 → 8.0.0-beta-03

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

@@ -1,19 +1,18 @@
-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-c89a6f88.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-c89a6f88.esm.js';
-import * as THREE from 'three';
+import { c as createEvents, s as buildGraph, v as is, a as createLoop, b as createRenderer, e as createStore, f as context, g as dispose, i as isRenderer, h as extend, p as pick, o as omit } from '../../dist/hooks-15c12e3e.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, q as useGraph, u as useStore, m as useThree } from '../../dist/hooks-15c12e3e.esm.js';
+import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
+import * as THREE from 'three';
+import { PixelRatio, View, StyleSheet } from 'react-native';
+import { GLView } from 'expo-gl';
 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 'scheduler';
 import 'zustand';
 
 // @ts-ignore
@@ -109,127 +108,6 @@ 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;
-
-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.
  */
@@ -264,8 +142,6 @@ function loadingFn(extensions, onProgress) {
     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
 
@@ -312,7 +188,7 @@ function loadingFn(extensions, onProgress) {
       } = 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 => {
+      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
@@ -394,84 +270,90 @@ const createRendererInstance = (gl, context) => {
 
 function createRoot(context, config) {
   return {
-    render: element => render(element, context, config),
+    render: element => {
+      var _store;
+
+      let {
+        gl,
+        size = {
+          width: 0,
+          height: 0
+        },
+        events,
+        onCreated,
+        ...props
+      } = config || {};
+      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); // Check frameloop
+
+        if (state.frameloop !== props.frameloop) state.setFrameloop(props.frameloop); // 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!';
+      }
+    },
     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 render(element, context, config = {}) {
+  console.warn('R3F.render is no longer supported in React 18. Use createRoot instead!');
+  return createRoot(context, config).render(element);
 }
 
 function Provider({
@@ -523,7 +405,7 @@ function unmountComponentAtNode(context, callback) {
   }
 }
 
-const act = reconciler.act;
+const act = React.unstable_act;
 
 function createPortal(children, container) {
   return reconciler.createPortal(children, container, null, null);
@@ -535,4 +417,121 @@ reconciler.injectIntoDevTools({
   version: '18.0.0'
 });
 
+const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'performance', 'clock', '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
+});
+
+const Canvas = /*#__PURE__*/React.forwardRef(({
+  children,
+  fallback,
+  style,
+  events,
+  nativeRef_EXPERIMENTAL,
+  onContextCreate,
+  ...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.useMemo(() => extend(THREE), []);
+  const [{
+    width,
+    height
+  }, setSize] = React.useState({
+    width: 0,
+    height: 0
+  });
+  const [context, setContext] = 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)
+
+  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
+    });
+  }, []);
+
+  if (width > 0 && height > 0 && context) {
+    const store = createRoot(context, { ...canvasProps,
+      size: {
+        width,
+        height
+      },
+      events: events || createTouchEvents
+    }).render( /*#__PURE__*/React.createElement(ErrorBoundary, {
+      set: setError
+    }, /*#__PURE__*/React.createElement(React.Suspense, {
+      fallback: /*#__PURE__*/React.createElement(Block, {
+        set: setBlock
+      })
+    }, children)));
+    const state = store.getState();
+    setBind(state.events.connected.getEventHandlers());
+  }
+
+  React.useEffect(() => {
+    return () => unmountComponentAtNode(context);
+  }, [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
+  }));
+});
+
 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": "8.0.0-beta-02",
+  "version": "8.0.0-beta-03",
   "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"
@@ -46,13 +47,11 @@
     "expo-asset": "^8.4.3",
     "expo-file-system": "^13.0.3",
     "expo-gl": "^11.0.3",
-    "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
     "react-merge-refs": "^1.1.0",
-    "react-reconciler": "^0.27.0-beta-96ca8d915-20211115",
-    "react-use-measure": "^2.0.4",
+    "react-reconciler": "^0.27.0-rc.0",
+    "react-use-measure": "^2.1.1",
     "resize-observer-polyfill": "^1.5.1",
-    "scheduler": "0.0.0-experimental-031abd24b-20210907",
+    "scheduler": "0.21.0-rc.0",
     "suspend-react": "^0.0.8",
     "utility-types": "^3.10.0",
     "zustand": "^3.5.10"
@@ -60,7 +59,7 @@
   "peerDependencies": {
     "react": ">=18.0",
     "react-dom": ">=18.0",
-    "react-native": "^>=0.64",
+    "react-native": ">=0.64",
     "three": ">=0.132"
   },
   "peerDependenciesMeta": {

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