@react-three/fiber 8.0.0-beta-01 → 8.0.0-beta-05

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

@@ -2,18 +2,17 @@
 
 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 index = require('./index-95c17855.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');
-require('react-reconciler');
 require('suspend-react');
+require('react-reconciler/constants');
 require('zustand');
+require('react-reconciler');
+require('scheduler');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -26,82 +25,41 @@ 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';
-const CONTEXTMENU = 'contextmenu';
-const DBLCLICK = 'dblclick';
-const POINTERCANCEL = 'pointercancel';
-const POINTERDOWN = 'pointerdown';
-const POINTERUP = 'pointerup';
-const POINTERMOVE = 'pointermove';
-const POINTEROUT = 'pointerout';
-const POINTEROVER = 'pointerover';
-const POINTERENTER = 'pointerenter';
-const POINTERLEAVE = 'pointerleave';
-const WHEEL = 'wheel'; // 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 CLICK:
-    case CONTEXTMENU:
-    case DBLCLICK:
-    case POINTERCANCEL:
-    case POINTERDOWN:
-    case POINTERUP:
-      return constants.DiscreteEventPriority;
-
-    case POINTERMOVE:
-    case POINTEROUT:
-    case POINTEROVER:
-    case POINTERENTER:
-    case POINTERLEAVE:
-    case WHEEL:
-      return constants.ContinuousEventPriority;
-
-    default:
-      return constants.DefaultEventPriority;
-  }
-}
+const DOM_EVENTS = {
+  onClick: ['click', false],
+  onContextMenu: ['contextmenu', false],
+  onDoubleClick: ['dblclick', false],
+  onWheel: ['wheel', true],
+  onPointerDown: ['pointerdown', true],
+  onPointerUp: ['pointerup', true],
+  onPointerLeave: ['pointerleave', true],
+  onPointerMove: ['pointermove', true],
+  onPointerCancel: ['pointercancel', true],
+  onLostPointerCapture: ['lostpointercapture', true]
+};
 function createPointerEvents(store) {
   const {
     handlePointer
-  } = hooks.createEvents(store);
-  const names = {
-    onClick: [CLICK, false],
-    onContextMenu: [CONTEXTMENU, false],
-    onDoubleClick: [DBLCLICK, false],
-    onWheel: [WHEEL, true],
-    onPointerDown: [POINTERDOWN, true],
-    onPointerUp: [POINTERUP, true],
-    onPointerLeave: [POINTERLEAVE, true],
-    onPointerMove: [POINTERMOVE, true],
-    onPointerCancel: [POINTERCANCEL, true],
-    onLostPointerCapture: ['lostpointercapture', true]
-  };
+  } = index.createEvents(store);
   return {
     connected: false,
-    handlers: Object.keys(names).reduce((acc, key) => ({ ...acc,
+    handlers: Object.keys(DOM_EVENTS).reduce((acc, key) => ({ ...acc,
       [key]: handlePointer(key)
     }), {}),
     connect: target => {
@@ -118,7 +76,7 @@ function createPointerEvents(store) {
         }
       }));
       Object.entries((_events$handlers = events == null ? void 0 : events.handlers) != null ? _events$handlers : []).forEach(([name, event]) => {
-        const [eventName, passive] = names[name];
+        const [eventName, passive] = DOM_EVENTS[name];
         target.addEventListener(eventName, event, {
           passive
         });
@@ -135,7 +93,7 @@ function createPointerEvents(store) {
 
         Object.entries((_events$handlers2 = events.handlers) != null ? _events$handlers2 : []).forEach(([name, event]) => {
           if (events && events.connected instanceof HTMLElement) {
-            const [eventName] = names[name];
+            const [eventName] = DOM_EVENTS[name];
             events.connected.removeEventListener(eventName, event);
           }
         });
@@ -149,19 +107,15 @@ 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;
+const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'dpr', 'performance', 'clock', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
 
 function Block({
   set
 }) {
-  useIsomorphicLayoutEffect(() => {
+  React__namespace.useLayoutEffect(() => {
     set(new Promise(() => null));
     return () => set(false);
-  }, []);
+  }, [set]);
   return null;
 }
 
@@ -195,12 +149,14 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   events,
   ...props
 }, forwardedRef) {
-  const canvasProps = pick__default["default"](props, CANVAS_PROPS);
-  const divProps = omit__default["default"](props, CANVAS_PROPS);
+  // 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(() => index.extend(THREE__namespace), []);
   const [containerRef, {
     width,
     height
-  }] = useMeasure__default["default"]({
+  }] = useMeasure__default['default']({
     scroll: true,
     debounce: {
       scroll: 50,
@@ -209,34 +165,38 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     ...resize
   });
   const canvasRef = React__namespace.useRef(null);
+  const [canvas, setCanvas] = React__namespace.useState(null);
+  const canvasProps = index.pick(props, CANVAS_PROPS);
+  const divProps = index.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; // Execute JSX in the reconciler as a layout-effect
+  if (error) throw error;
+
+  if (width > 0 && height > 0 && canvas) {
+    index.createRoot(canvas, { ...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)));
+  }
 
-  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);
+  React__namespace.useLayoutEffect(() => {
+    setCanvas(canvasRef.current);
   }, []);
+  React__namespace.useEffect(() => {
+    return () => index.unmountComponentAtNode(canvas);
+  }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: containerRef,
     style: {
@@ -247,211 +207,34 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
       ...style
     }
   }, divProps), /*#__PURE__*/React__namespace.createElement("canvas", {
-    ref: mergeRefs__default["default"]([canvasRef, forwardedRef]),
+    ref: mergeRefs__default['default']([canvasRef, forwardedRef]),
     style: {
       display: 'block'
     }
   }, fallback));
 });
 
-const roots = new Map();
-const {
-  invalidate,
-  advance
-} = hooks.createLoop(roots);
-const {
-  reconciler,
-  applyProps
-} = hooks.createRenderer(roots, getEventPriority);
-
-const createRendererInstance = (gl, canvas) => {
-  const customRenderer = typeof gl === 'function' ? gl(canvas) : gl;
-  if (hooks.isRenderer(customRenderer)) return customRenderer;
-  const renderer = new THREE__namespace.WebGLRenderer({
-    powerPreference: 'high-performance',
-    canvas: canvas,
-    antialias: true,
-    alpha: true,
-    ...gl
-  }); // Set color management
-
-  renderer.outputEncoding = THREE__namespace.sRGBEncoding;
-  renderer.toneMapping = THREE__namespace.ACESFilmicToneMapping; // Set gl props
-
-  if (gl) applyProps(renderer, gl);
-  return renderer;
-};
-
-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;
-
-  // 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
-    };
-  }
-
-  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 (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.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(canvas);
-      fiber = undefined;
-    }
-  }
-
-  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
-
-    fiber = reconciler.createContainer(store, constants.ConcurrentRoot, false, null); // Map it
-
-    roots.set(canvas, {
-      fiber,
-      store
-    }); // Store events internally
-
-    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!';
-  }
-}
-
-function Provider({
-  store,
-  element,
-  onCreated,
-  target
-}) {
-  React__namespace.useEffect(() => {
-    const state = store.getState(); // Flag the canvas active, rendering will now begin
-
-    state.set(state => ({
-      internal: { ...state.internal,
-        active: true
-      }
-    })); // Connect events
-
-    state.events.connect == null ? void 0 : state.events.connect(target); // 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__namespace.createElement(hooks.context.Provider, {
-    value: store
-  }, element);
-}
-
-function unmountComponentAtNode(canvas, callback) {
-  const root = roots.get(canvas);
-  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$gl3;
-
-            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();
-            if ((_state$gl3 = state.gl) != null && _state$gl3.xr) state.internal.xr.disconnect();
-            hooks.dispose(state);
-            roots.delete(canvas);
-            if (callback) callback(canvas);
-          } 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'
-});
-
-exports.ReactThreeFiber = hooks.threeTypes;
-exports.addAfterEffect = hooks.addAfterEffect;
-exports.addEffect = hooks.addEffect;
-exports.addTail = hooks.addTail;
-exports.context = hooks.context;
-exports.dispose = hooks.dispose;
-exports.extend = hooks.extend;
-exports.useFrame = hooks.useFrame;
-exports.useGraph = hooks.useGraph;
-exports.useLoader = hooks.useLoader;
-exports.useStore = hooks.useStore;
-exports.useThree = hooks.useThree;
+exports.ReactThreeFiber = index.threeTypes;
+exports._roots = index.roots;
+exports.act = index.act;
+exports.addAfterEffect = index.addAfterEffect;
+exports.addEffect = index.addEffect;
+exports.addTail = index.addTail;
+exports.advance = index.advance;
+exports.applyProps = index.applyProps;
+exports.context = index.context;
+exports.createPortal = index.createPortal;
+exports.createRoot = index.createRoot;
+exports.dispose = index.dispose;
+exports.extend = index.extend;
+exports.invalidate = index.invalidate;
+exports.reconciler = index.reconciler;
+exports.render = index.render;
+exports.unmountComponentAtNode = index.unmountComponentAtNode;
+exports.useFrame = index.useFrame;
+exports.useGraph = index.useGraph;
+exports.useLoader = index.useLoader;
+exports.useStore = index.useStore;
+exports.useThree = index.useThree;
 exports.Canvas = Canvas;
-exports._roots = roots;
-exports.act = act;
-exports.advance = advance;
-exports.applyProps = applyProps;
-exports.createPortal = createPortal;
-exports.createRoot = createRoot;
 exports.events = createPointerEvents;
-exports.invalidate = invalidate;
-exports.reconciler = reconciler;
-exports.render = render;
-exports.unmountComponentAtNode = unmountComponentAtNode;