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

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

@@ -2,16 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var hooks = require('./hooks-dd693347.cjs.dev.js');
-var THREE = require('three');
-var React = require('react');
-var constants = require('react-reconciler/constants');
+var hooks = require('./hooks-6526f63c.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
+var React = require('react');
+var THREE = require('three');
 var mergeRefs = require('react-merge-refs');
 var useMeasure = require('react-use-measure');
-var pick = require('lodash-es/pick');
-var omit = require('lodash-es/omit');
+var constants = require('react-reconciler/constants');
 require('react-reconciler');
+require('scheduler');
 require('suspend-react');
 require('zustand');
 
@@ -26,21 +25,21 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () { return e[k]; }
+          get: function () {
+            return e[k];
+          }
         });
       }
     });
   }
-  n["default"] = e;
+  n['default'] = e;
   return Object.freeze(n);
 }
 
-var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 var useMeasure__default = /*#__PURE__*/_interopDefault(useMeasure);
-var pick__default = /*#__PURE__*/_interopDefault(pick);
-var omit__default = /*#__PURE__*/_interopDefault(omit);
 
 // @ts-ignore
 const CLICK = 'click';
@@ -149,111 +148,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__namespace.useLayoutEffect : React__namespace.useEffect;
-
-function Block({
-  set
-}) {
-  useIsomorphicLayoutEffect(() => {
-    set(new Promise(() => null));
-    return () => set(false);
-  }, []);
-  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(function Canvas({
-  children,
-  fallback,
-  resize,
-  style,
-  events,
-  ...props
-}, forwardedRef) {
-  const canvasProps = pick__default["default"](props, CANVAS_PROPS);
-  const divProps = omit__default["default"](props, CANVAS_PROPS);
-  const [containerRef, {
-    width,
-    height
-  }] = useMeasure__default["default"]({
-    scroll: true,
-    debounce: {
-      scroll: 50,
-      resize: 0
-    },
-    ...resize
-  });
-  const canvasRef = React__namespace.useRef(null);
-  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; // Execute JSX in the reconciler as a layout-effect
-
-  useIsomorphicLayoutEffect(() => {
-    if (width > 0 && height > 0) {
-      render( /*#__PURE__*/React__namespace.createElement(ErrorBoundary, {
-        set: setError
-      }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-        fallback: /*#__PURE__*/React__namespace.createElement(Block, {
-          set: setBlock
-        })
-      }, children)), canvasRef.current, { ...canvasProps,
-        size: {
-          width,
-          height
-        },
-        events: events || createPointerEvents
-      });
-    }
-  }, [width, height, children, canvasProps]);
-  React__namespace.useEffect(() => {
-    const container = canvasRef.current;
-    return () => unmountComponentAtNode(container);
-  }, []);
-  return /*#__PURE__*/React__namespace.createElement("div", _extends({
-    ref: containerRef,
-    style: {
-      position: 'relative',
-      width: '100%',
-      height: '100%',
-      overflow: 'hidden',
-      ...style
-    }
-  }, divProps), /*#__PURE__*/React__namespace.createElement("canvas", {
-    ref: mergeRefs__default["default"]([canvasRef, forwardedRef]),
-    style: {
-      display: 'block'
-    }
-  }, fallback));
-});
-
 const roots = new Map();
 const {
   invalidate,
@@ -284,86 +178,92 @@ const createRendererInstance = (gl, canvas) => {
 
 function createRoot(canvas, config) {
   return {
-    render: element => render(element, canvas, config),
-    unmount: () => unmountComponentAtNode(canvas)
-  };
-}
+    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
+        };
+      }
 
-function render(element, canvas, {
-  gl,
-  size,
-  events,
-  onCreated,
-  ...props
-} = {}) {
-  var _store;
+      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();
 
-  // Allow size to take on container bounds initially
-  if (!size) {
-    var _canvas$parentElement, _canvas$parentElement2, _canvas$parentElement3, _canvas$parentElement4;
+      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 !== hooks.calculateDpr(props.dpr)) state.setDpr(props.dpr); // Check size
 
-    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
-    };
-  }
-
-  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 !== hooks.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 = hooks.createStore(applyProps, invalidate, advance, {
+          gl: glRenderer,
+          size,
+          ...props
+        });
+        const state = store.getState(); // Create renderer
 
-    store = hooks.createStore(applyProps, invalidate, advance, {
-      gl: glRenderer,
-      size,
-      ...props
-    });
-    const state = store.getState(); // Create renderer
+        fiber = reconciler.createContainer(store, constants.ConcurrentRoot, false, null); // Map it
 
-    fiber = reconciler.createContainer(store, constants.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__namespace.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__namespace.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({
@@ -419,7 +319,7 @@ function unmountComponentAtNode(canvas, callback) {
   }
 }
 
-const act = reconciler.act;
+const act = React__namespace.unstable_act;
 
 function createPortal(children, container) {
   return reconciler.createPortal(children, container, null, null);
@@ -431,6 +331,110 @@ 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__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(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__namespace.useMemo(() => hooks.extend(THREE__namespace), []);
+  const [containerRef, {
+    width,
+    height
+  }] = useMeasure__default['default']({
+    scroll: true,
+    debounce: {
+      scroll: 50,
+      resize: 0
+    },
+    ...resize
+  });
+  const canvasRef = React__namespace.useRef(null);
+  const canvasProps = hooks.pick(props, CANVAS_PROPS);
+  const divProps = hooks.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;
+
+  if (width > 0 && height > 0) {
+    createRoot(canvasRef.current, { ...canvasProps,
+      size: {
+        width,
+        height
+      },
+      events: events || createPointerEvents
+    }).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(() => {
+    const container = canvasRef.current;
+    return () => unmountComponentAtNode(container);
+  }, []);
+  return /*#__PURE__*/React__namespace.createElement("div", _extends({
+    ref: containerRef,
+    style: {
+      position: 'relative',
+      width: '100%',
+      height: '100%',
+      overflow: 'hidden',
+      ...style
+    }
+  }, divProps), /*#__PURE__*/React__namespace.createElement("canvas", {
+    ref: mergeRefs__default['default']([canvasRef, forwardedRef]),
+    style: {
+      display: 'block'
+    }
+  }, fallback));
+});
+
 exports.ReactThreeFiber = hooks.threeTypes;
 exports.addAfterEffect = hooks.addAfterEffect;
 exports.addEffect = hooks.addEffect;