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

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

@@ -1,14 +1,13 @@
-import { c as createEvents, a as createLoop, b as createRenderer, d as calculateDpr, e as createStore, f as context, g as dispose, i as isRenderer } from './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, p as useLoader, u as useStore, m as useThree } from './hooks-c89a6f88.esm.js';
-import * as THREE from 'three';
-import * as React from 'react';
-import { DefaultEventPriority, ContinuousEventPriority, DiscreteEventPriority, ConcurrentRoot } from 'react-reconciler/constants';
+import { c as createEvents, a as createLoop, b as createRenderer, d as calculateDpr, e as createStore, f as context, g as dispose, i as isRenderer, h as extend, p as pick, o as omit } from './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, r as useLoader, u as useStore, m as useThree } from './hooks-15c12e3e.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
+import * as React from 'react';
+import * as THREE from 'three';
 import mergeRefs from 'react-merge-refs';
 import useMeasure from 'react-use-measure';
-import pick from 'lodash-es/pick';
-import omit from 'lodash-es/omit';
+import { DefaultEventPriority, ContinuousEventPriority, DiscreteEventPriority, ConcurrentRoot } from 'react-reconciler/constants';
 import 'react-reconciler';
+import 'scheduler';
 import 'suspend-react';
 import 'zustand';
 
@@ -119,111 +118,6 @@ function createPointerEvents(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(function Canvas({
-  children,
-  fallback,
-  resize,
-  style,
-  events,
-  ...props
-}, forwardedRef) {
-  const canvasProps = pick(props, CANVAS_PROPS);
-  const divProps = omit(props, CANVAS_PROPS);
-  const [containerRef, {
-    width,
-    height
-  }] = useMeasure({
-    scroll: true,
-    debounce: {
-      scroll: 50,
-      resize: 0
-    },
-    ...resize
-  });
-  const canvasRef = React.useRef(null);
-  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; // Execute JSX in the reconciler as a layout-effect
-
-  useIsomorphicLayoutEffect(() => {
-    if (width > 0 && height > 0) {
-      render( /*#__PURE__*/React.createElement(ErrorBoundary, {
-        set: setError
-      }, /*#__PURE__*/React.createElement(React.Suspense, {
-        fallback: /*#__PURE__*/React.createElement(Block, {
-          set: setBlock
-        })
-      }, children)), canvasRef.current, { ...canvasProps,
-        size: {
-          width,
-          height
-        },
-        events: events || createPointerEvents
-      });
-    }
-  }, [width, height, children, canvasProps]);
-  React.useEffect(() => {
-    const container = canvasRef.current;
-    return () => unmountComponentAtNode(container);
-  }, []);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: containerRef,
-    style: {
-      position: 'relative',
-      width: '100%',
-      height: '100%',
-      overflow: 'hidden',
-      ...style
-    }
-  }, divProps), /*#__PURE__*/React.createElement("canvas", {
-    ref: mergeRefs([canvasRef, forwardedRef]),
-    style: {
-      display: 'block'
-    }
-  }, fallback));
-});
-
 const roots = new Map();
 const {
   invalidate,
@@ -254,86 +148,92 @@ const createRendererInstance = (gl, canvas) => {
 
 function createRoot(canvas, config) {
   return {
-    render: element => render(element, canvas, config),
-    unmount: () => unmountComponentAtNode(canvas)
-  };
-}
-
-function render(element, canvas, {
-  gl,
-  size,
-  events,
-  onCreated,
-  ...props
-} = {}) {
-  var _store;
+    render: element => {
+      var _store;
+
+      let {
+        gl,
+        size,
+        events,
+        onCreated,
+        ...props
+      } = config || {}; // Allow size to take on container bounds initially
+
+      if (!size) {
+        var _canvas$parentElement, _canvas$parentElement2, _canvas$parentElement3, _canvas$parentElement4;
+
+        size = {
+          width: (_canvas$parentElement = (_canvas$parentElement2 = canvas.parentElement) == null ? void 0 : _canvas$parentElement2.clientWidth) != null ? _canvas$parentElement : 0,
+          height: (_canvas$parentElement3 = (_canvas$parentElement4 = canvas.parentElement) == null ? void 0 : _canvas$parentElement4.clientHeight) != null ? _canvas$parentElement3 : 0
+        };
+      }
 
-  // Allow size to take on container bounds initially
-  if (!size) {
-    var _canvas$parentElement, _canvas$parentElement2, _canvas$parentElement3, _canvas$parentElement4;
+      let root = roots.get(canvas);
+      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();
 
-    size = {
-      width: (_canvas$parentElement = (_canvas$parentElement2 = canvas.parentElement) == null ? void 0 : _canvas$parentElement2.clientWidth) != null ? _canvas$parentElement : 0,
-      height: (_canvas$parentElement3 = (_canvas$parentElement4 = canvas.parentElement) == null ? void 0 : _canvas$parentElement4.clientHeight) != null ? _canvas$parentElement3 : 0
-    };
-  }
+      if (fiber && state) {
+        // When a root was found, see if any fundamental props must be changed or exchanged
+        // Check pixelratio
+        if (props.dpr !== undefined && state.viewport.dpr !== calculateDpr(props.dpr)) state.setDpr(props.dpr); // Check size
 
-  let root = roots.get(canvas);
-  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 (state.size.width !== size.width || state.size.height !== size.height) state.setSize(size.width, size.height); // Check frameloop
 
-  if (fiber && state) {
-    // When a root was found, see if any fundamental props must be changed or exchanged
-    // Check pixelratio
-    if (props.dpr !== undefined && state.viewport.dpr !== calculateDpr(props.dpr)) state.setDpr(props.dpr); // Check size
+        if (state.frameloop !== props.frameloop) state.setFrameloop(props.frameloop); // For some props we want to reset the entire root
+        // Changes to the color-space
 
-    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;
 
-    const linearChanged = props.linear !== state.internal.lastProps.linear;
+        if (linearChanged) {
+          unmountComponentAtNode(canvas);
+          fiber = undefined;
+        }
+      }
 
-    if (linearChanged) {
-      unmountComponentAtNode(canvas);
-      fiber = undefined;
-    }
-  }
+      if (!fiber) {
+        // If no root has been found, make one
+        // Create gl
+        const glRenderer = createRendererInstance(gl, canvas); // Create store
 
-  if (!fiber) {
-    // If no root has been found, make one
-    // Create gl
-    const glRenderer = createRendererInstance(gl, canvas); // Create store
+        store = createStore(applyProps, invalidate, advance, {
+          gl: glRenderer,
+          size,
+          ...props
+        });
+        const state = store.getState(); // Create renderer
 
-    store = createStore(applyProps, invalidate, advance, {
-      gl: glRenderer,
-      size,
-      ...props
-    });
-    const state = store.getState(); // Create renderer
+        fiber = reconciler.createContainer(store, ConcurrentRoot, false, null); // Map it
 
-    fiber = reconciler.createContainer(store, ConcurrentRoot, false, null); // Map it
+        roots.set(canvas, {
+          fiber,
+          store
+        }); // Store events internally
 
-    roots.set(canvas, {
-      fiber,
-      store
-    }); // Store events internally
+        if (events) state.set({
+          events: events(store)
+        });
+      }
 
-    if (events) state.set({
-      events: events(store)
-    });
-  }
+      if (store && fiber) {
+        reconciler.updateContainer( /*#__PURE__*/React.createElement(Provider, {
+          store: store,
+          element: element,
+          onCreated: onCreated,
+          target: canvas
+        }), fiber, null, () => undefined);
+        return store;
+      } else {
+        throw 'Error creating root!';
+      }
+    },
+    unmount: () => unmountComponentAtNode(canvas)
+  };
+}
 
-  if (store && fiber) {
-    reconciler.updateContainer( /*#__PURE__*/React.createElement(Provider, {
-      store: store,
-      element: element,
-      onCreated: onCreated,
-      target: canvas
-    }), fiber, null, () => undefined);
-    return store;
-  } else {
-    throw 'Error creating root!';
-  }
+function render(element, canvas, config = {}) {
+  console.warn('R3F.render is no longer supported in React 18. Use createRoot instead!');
+  return createRoot(canvas, config).render(element);
 }
 
 function Provider({
@@ -389,7 +289,7 @@ function unmountComponentAtNode(canvas, callback) {
   }
 }
 
-const act = reconciler.act;
+const act = React.unstable_act;
 
 function createPortal(children, container) {
   return reconciler.createPortal(children, container, null, null);
@@ -401,4 +301,108 @@ reconciler.injectIntoDevTools({
   version: '18.0.0'
 });
 
+const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'dpr', '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(function Canvas({
+  children,
+  fallback,
+  resize,
+  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.useMemo(() => extend(THREE), []);
+  const [containerRef, {
+    width,
+    height
+  }] = useMeasure({
+    scroll: true,
+    debounce: {
+      scroll: 50,
+      resize: 0
+    },
+    ...resize
+  });
+  const canvasRef = React.useRef(null);
+  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)
+
+  if (block) throw block; // Throw exception outwards if anything within canvas throws
+
+  if (error) throw error;
+
+  if (width > 0 && height > 0) {
+    createRoot(canvasRef.current, { ...canvasProps,
+      size: {
+        width,
+        height
+      },
+      events: events || createPointerEvents
+    }).render( /*#__PURE__*/React.createElement(ErrorBoundary, {
+      set: setError
+    }, /*#__PURE__*/React.createElement(React.Suspense, {
+      fallback: /*#__PURE__*/React.createElement(Block, {
+        set: setBlock
+      })
+    }, children)));
+  }
+
+  React.useEffect(() => {
+    const container = canvasRef.current;
+    return () => unmountComponentAtNode(container);
+  }, []);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: containerRef,
+    style: {
+      position: 'relative',
+      width: '100%',
+      height: '100%',
+      overflow: 'hidden',
+      ...style
+    }
+  }, divProps), /*#__PURE__*/React.createElement("canvas", {
+    ref: mergeRefs([canvasRef, forwardedRef]),
+    style: {
+      display: 'block'
+    }
+  }, fallback));
+});
+
 export { Canvas, roots as _roots, act, advance, applyProps, createPortal, createRoot, createPointerEvents as events, invalidate, reconciler, render, unmountComponentAtNode };