@react-three/fiber 8.0.0-beta.0 → 8.0.0-beta.3

package/dist/{index-3f4e5f46.esm.js → index-e78dd2f0.esm.js}

@@ -41,29 +41,38 @@ const pick = (obj, keys) => filterKeys(obj, false, ...keys);
  * Clones an object and prunes or omits keys.
  */
 
-const omit = (obj, keys) => filterKeys(obj, true, ...keys); // A collection of compare functions
-
+const omit = (obj, keys) => filterKeys(obj, true, ...keys);
+// A collection of compare functions
 const is = {
   obj: a => a === Object(a) && !is.arr(a) && typeof a !== 'function',
   fun: a => typeof a === 'function',
   str: a => typeof a === 'string',
   num: a => typeof a === 'number',
+  boo: a => typeof a === 'boolean',
   und: a => a === void 0,
   arr: a => Array.isArray(a),
 
-  equ(a, b) {
+  equ(a, b, {
+    arrays = 'shallow',
+    objects = 'reference',
+    strict = true
+  } = {}) {
     // Wrong type or one of the two undefined, doesn't match
     if (typeof a !== typeof b || !!a !== !!b) return false; // Atomic, just compare a against b
 
-    if (is.str(a) || is.num(a) || is.obj(a)) return a === b; // Array, shallow compare first to see if it's a match
+    if (is.str(a) || is.num(a)) return a === b;
+    const isObj = is.obj(a);
+    if (isObj && objects === 'reference') return a === b;
+    const isArr = is.arr(a);
+    if (isArr && arrays === 'reference') return a === b; // Array or Object, shallow compare first to see if it's a match
 
-    if (is.arr(a) && a == b) return true; // Last resort, go through keys
+    if ((isArr || isObj) && a == b) return true; // Last resort, go through keys
 
     let i;
 
     for (i in a) if (!(i in b)) return false;
 
-    for (i in b) if (a[i] !== b[i]) return false;
+    for (i in strict ? b : a) if (a[i] !== b[i]) return false;
 
     return is.und(i) ? a === b : true;
   }
@@ -154,15 +163,8 @@ function detach(parent, child, type) {
     const [, detach] = type;
     if (is.str(detach)) parent[detach](child);else if (is.fun(detach)) detach(parent, child);
   }
-} // Shallow check arrays, but check objects atomically
-
-function checkShallow(a, b) {
-  if (is.arr(a) && is.equ(a, b)) return true;
-  if (a === b) return true;
-  return false;
 } // This function prepares a set of changes to be applied to the instance
 
-
 function diffProps(instance, {
   children: cN,
   key: kN,
@@ -194,7 +196,7 @@ function diffProps(instance, {
     // Bail out on primitive object
     if ((_instance$__r3f2 = instance.__r3f) != null && _instance$__r3f2.primitive && key === 'object') return; // When props match bail out
 
-    if (checkShallow(value, previous[key])) return; // Collect handlers and bail out
+    if (is.equ(value, previous[key])) return; // Collect handlers and bail out
 
     if (/^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, []]); // Split dashed props
 
@@ -1123,63 +1125,8 @@ const isRenderer = def => !!(def != null && def.render);
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const context = /*#__PURE__*/React.createContext(null);
 
-const createStore = (applyProps, invalidate, advance, props) => {
-  const {
-    gl,
-    size,
-    shadows = false,
-    linear = false,
-    flat = false,
-    orthographic = false,
-    frameloop = 'always',
-    dpr = [1, 2],
-    performance,
-    clock = new THREE.Clock(),
-    raycaster: raycastOptions,
-    camera: cameraOptions,
-    onPointerMissed
-  } = props; // Set shadowmap
-
-  if (shadows) {
-    gl.shadowMap.enabled = true;
-    if (typeof shadows === 'object') Object.assign(gl.shadowMap, shadows);else gl.shadowMap.type = THREE.PCFSoftShadowMap;
-  } // Set color preferences
-
-
-  if (linear) gl.outputEncoding = THREE.LinearEncoding;
-  if (flat) gl.toneMapping = THREE.NoToneMapping; // clock.elapsedTime is updated using advance(timestamp)
-
-  if (frameloop === 'never') {
-    clock.stop();
-    clock.elapsedTime = 0;
-  }
-
+const createStore = (invalidate, advance) => {
   const rootState = create((set, get) => {
-    // Create custom raycaster
-    const raycaster = new THREE.Raycaster();
-    const {
-      params,
-      ...options
-    } = raycastOptions || {};
-    applyProps(raycaster, {
-      enabled: true,
-      ...options,
-      params: { ...raycaster.params,
-        ...params
-      }
-    }); // Create default camera
-
-    const isCamera = cameraOptions instanceof THREE.Camera;
-    const camera = isCamera ? cameraOptions : orthographic ? new THREE.OrthographicCamera(0, 0, 0, 0, 0.1, 1000) : new THREE.PerspectiveCamera(75, 0, 0.1, 1000);
-
-    if (!isCamera) {
-      camera.position.z = 5;
-      if (cameraOptions) applyProps(camera, cameraOptions); // Always look at center by default
-
-      if (!(cameraOptions != null && cameraOptions.rotation)) camera.lookAt(0, 0, 0);
-    }
-
-    const initialDpr = calculateDpr(dpr);
     const position = new THREE.Vector3();
     const defaultTarget = new THREE.Vector3();
     const tempTarget = new THREE.Vector3();
@@ -1223,61 +1170,34 @@ const createStore = (applyProps, invalidate, advance, props) => {
       performance: { ...state.performance,
         current
       }
-    })); // Handle frame behavior in WebXR
-
-
-    const handleXRFrame = (timestamp, frame) => {
-      const state = get();
-      if (state.frameloop === 'never') return;
-      advance(timestamp, true, state, frame);
-    }; // Toggle render switching on session
-
-
-    const handleSessionChange = () => {
-      gl.xr.enabled = gl.xr.isPresenting; // @ts-expect-error
-      // WebXRManager's signature is incorrect.
-      // See: https://github.com/pmndrs/react-three-fiber/pull/2017#discussion_r790134505
-
-      gl.xr.setAnimationLoop(gl.xr.isPresenting ? handleXRFrame : null);
-    }; // WebXR session manager
-
-
-    const xr = {
-      connect() {
-        gl.xr.addEventListener('sessionstart', handleSessionChange);
-        gl.xr.addEventListener('sessionend', handleSessionChange);
-      },
-
-      disconnect() {
-        gl.xr.removeEventListener('sessionstart', handleSessionChange);
-        gl.xr.removeEventListener('sessionend', handleSessionChange);
-      }
-
-    }; // Subscribe to WebXR session events
+    }));
 
-    if (gl.xr) xr.connect();
     return {
-      gl,
+      // Mock objects that have to be configured
+      gl: null,
+      camera: null,
+      raycaster: null,
+      events: {
+        connected: false
+      },
+      xr: null,
       set,
       get,
       invalidate: () => invalidate(get()),
       advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
-      linear,
-      flat,
+      linear: false,
+      flat: false,
       scene: prepare(new THREE.Scene()),
-      camera,
       controls: null,
-      raycaster,
-      clock,
+      clock: new THREE.Clock(),
       mouse: new THREE.Vector2(),
-      frameloop,
-      onPointerMissed,
+      frameloop: 'always',
+      onPointerMissed: undefined,
       performance: {
         current: 1,
         min: 0.5,
         max: 1,
         debounce: 200,
-        ...performance,
         regress: () => {
           const state = get(); // Clear timeout
 
@@ -1293,8 +1213,8 @@ const createStore = (applyProps, invalidate, advance, props) => {
         height: 0
       },
       viewport: {
-        initialDpr,
-        dpr: initialDpr,
+        initialDpr: 0,
+        dpr: 0,
         width: 0,
         height: 0,
         aspect: 0,
@@ -1303,6 +1223,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
         getCurrentViewport
       },
       setSize: (width, height) => {
+        const camera = get().camera;
         const size = {
           width,
           height
@@ -1314,22 +1235,34 @@ const createStore = (applyProps, invalidate, advance, props) => {
           }
         }));
       },
-      setDpr: dpr => set(state => ({
-        viewport: { ...state.viewport,
-          dpr: calculateDpr(dpr)
+      setDpr: dpr => set(state => {
+        const resolved = calculateDpr(dpr);
+        return {
+          viewport: { ...state.viewport,
+            dpr: resolved,
+            initialDpr: state.viewport.initialDpr || resolved
+          }
+        };
+      }),
+      setFrameloop: (frameloop = 'always') => {
+        const clock = get().clock; // if frameloop === "never" clock.elapsedTime is updated using advance(timestamp)
+
+        clock.stop();
+        clock.elapsedTime = 0;
+
+        if (frameloop !== 'never') {
+          clock.start();
+          clock.elapsedTime = 0;
         }
-      })),
-      setFrameloop: (frameloop = 'always') => set(() => ({
-        frameloop
-      })),
-      events: {
-        connected: false
+
+        set(() => ({
+          frameloop
+        }));
       },
       internal: {
         active: false,
         priority: 0,
         frames: 0,
-        lastProps: props,
         lastEvent: /*#__PURE__*/React.createRef(),
         interaction: [],
         hovered: new Map(),
@@ -1337,7 +1270,6 @@ const createStore = (applyProps, invalidate, advance, props) => {
         initialClick: [0, 0],
         initialHits: [],
         capturedMap: new Map(),
-        xr,
         subscribe: (ref, priority = 0) => {
           set(({
             internal
@@ -1381,13 +1313,14 @@ const createStore = (applyProps, invalidate, advance, props) => {
       camera,
       size,
       viewport,
-      internal
+      internal,
+      gl
     } = rootState.getState();
 
     if (size !== oldSize || viewport.dpr !== oldDpr) {
       // https://github.com/pmndrs/react-three-fiber/issues/92
       // Do not mess with the camera if it belongs to the user
-      if (!camera.manual && !(internal.lastProps.camera instanceof THREE.Camera)) {
+      if (!camera.manual) {
         if (isOrthographicCamera(camera)) {
           camera.left = size.width / -2;
           camera.right = size.width / 2;
@@ -1409,9 +1342,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
       oldSize = size;
       oldDpr = viewport.dpr;
     }
-  }); // Update size
-
-  if (size) state.setSize(size.width, size.height); // Invalidate on any change
+  }); // Invalidate on any change
 
   rootState.subscribe(state => invalidate(state)); // Return root state
 
@@ -1436,6 +1367,8 @@ function run(effects, timestamp) {
   for (i = 0; i < effects.length; i++) effects[i](timestamp);
 }
 
+let subscribers;
+
 function render$1(timestamp, state, frame) {
   // Run local effects
   let delta = state.clock.getDelta(); // In frameloop='never' mode, clock times are updated using the provided timestamp
@@ -1447,7 +1380,9 @@ function render$1(timestamp, state, frame) {
   } // Call subscribers (useFrame)
 
 
-  for (i = 0; i < state.internal.subscribers.length; i++) state.internal.subscribers[i].ref.current(state, delta, frame); // Render content
+  subscribers = state.internal.subscribers;
+
+  for (i = 0; i < subscribers.length; i++) subscribers[i].ref.current(state, delta, frame); // Render content
 
 
   if (!state.internal.priority && state.gl.render) state.gl.render(state.scene, state.camera); // Decrease frame count
@@ -1459,29 +1394,35 @@ function render$1(timestamp, state, frame) {
 function createLoop(roots) {
   let running = false;
   let repeat;
+  let frame;
+  let state;
 
   function loop(timestamp) {
+    frame = requestAnimationFrame(loop);
     running = true;
     repeat = 0; // Run effects
 
-    run(globalEffects, timestamp); // Render all roots
+    if (globalEffects.length) run(globalEffects, timestamp); // Render all roots
 
     roots.forEach(root => {
       var _state$gl$xr;
 
-      const state = root.store.getState(); // If the frameloop is invalidated, do not run another frame
+      state = root.store.getState(); // If the frameloop is invalidated, do not run another frame
 
       if (state.internal.active && (state.frameloop === 'always' || state.internal.frames > 0) && !((_state$gl$xr = state.gl.xr) != null && _state$gl$xr.isPresenting)) {
         repeat += render$1(timestamp, state);
       }
     }); // Run after-effects
 
-    run(globalAfterEffects, timestamp); // Keep on looping if anything invalidates the frameloop
+    if (globalAfterEffects.length) run(globalAfterEffects, timestamp); // Stop the loop if nothing invalidates it
 
-    if (repeat > 0) return requestAnimationFrame(loop); // Tail call effects, they are called when rendering stops
-    else run(globalTailEffects, timestamp); // Flag end of operation
+    if (repeat === 0) {
+      // Tail call effects, they are called when rendering stops
+      if (globalTailEffects.length) run(globalTailEffects, timestamp); // Flag end of operation
 
-    running = false;
+      running = false;
+      return cancelAnimationFrame(frame);
+    }
   }
 
   function invalidate(state) {
@@ -1574,113 +1515,216 @@ const {
   reconciler,
   applyProps
 } = createRenderer(roots, getEventPriority);
+const shallowLoose = {
+  objects: 'shallow',
+  strict: false
+};
 
 const createRendererInstance = (gl, canvas) => {
   const customRenderer = typeof gl === 'function' ? gl(canvas) : gl;
-  if (isRenderer(customRenderer)) return customRenderer;
-  const renderer = new THREE.WebGLRenderer({
+  if (isRenderer(customRenderer)) return customRenderer;else return new THREE.WebGLRenderer({
     powerPreference: 'high-performance',
     canvas: canvas,
     antialias: true,
     alpha: true,
     ...gl
-  }); // Set color management
+  });
+};
 
-  renderer.outputEncoding = THREE.sRGBEncoding;
-  renderer.toneMapping = THREE.ACESFilmicToneMapping; // Set gl props
+function createRoot(canvas) {
+  // Check against mistaken use of createRoot
+  let prevRoot = roots.get(canvas);
+  let prevFiber = prevRoot == null ? void 0 : prevRoot.fiber;
+  let prevStore = prevRoot == null ? void 0 : prevRoot.store;
+  if (prevRoot) console.warn('R3F.createRoot should only be called once!'); // Create store
 
-  if (gl) applyProps(renderer, gl);
-  return renderer;
-};
+  const store = prevStore || createStore(invalidate, advance); // Create renderer
+
+  const fiber = prevFiber || reconciler.createContainer(store, ConcurrentRoot, false, null); // Map it
+
+  if (!prevRoot) roots.set(canvas, {
+    fiber,
+    store
+  }); // Locals
 
-function createRoot(canvas, config) {
+  let onCreated;
+  let configured = false;
   return {
-    render: element => {
-      var _store;
+    configure(props = {}) {
+      var _canvas$parentElement, _canvas$parentElement2, _canvas$parentElement3, _canvas$parentElement4;
 
       let {
-        gl,
+        gl: glConfig,
         size,
         events,
-        onCreated,
-        ...props
-      } = config || {}; // Allow size to take on container bounds initially
+        onCreated: onCreatedCallback,
+        shadows = false,
+        linear = false,
+        flat = false,
+        orthographic = false,
+        frameloop = 'always',
+        dpr = [1, 2],
+        performance,
+        raycaster: raycastOptions,
+        camera: cameraOptions,
+        onPointerMissed
+      } = props;
+      let state = store.getState(); // Set up renderer (one time only!)
+
+      let gl = state.gl;
+      if (!state.gl) state.set({
+        gl: gl = createRendererInstance(glConfig, canvas)
+      }); // Set up raycaster (one time only!)
+
+      let raycaster = state.raycaster;
+      if (!raycaster) state.set({
+        raycaster: raycaster = new THREE.Raycaster()
+      }); // Set raycaster options
 
-      if (!size) {
-        var _canvas$parentElement, _canvas$parentElement2, _canvas$parentElement3, _canvas$parentElement4;
+      const {
+        params,
+        ...options
+      } = raycastOptions || {};
+      if (!is.equ(options, raycaster, shallowLoose)) applyProps(raycaster, {
+        enabled: true,
+        ...options
+      });
+      if (!is.equ(params, raycaster.params, shallowLoose)) applyProps(raycaster, {
+        params: { ...raycaster.params,
+          ...params
+        }
+      }); // Create default camera (one time only!)
 
-        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 (!state.camera) {
+        const isCamera = cameraOptions instanceof THREE.Camera;
+        const camera = isCamera ? cameraOptions : orthographic ? new THREE.OrthographicCamera(0, 0, 0, 0, 0.1, 1000) : new THREE.PerspectiveCamera(75, 0, 0.1, 1000);
 
-      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 (!isCamera) {
+          camera.position.z = 5;
+          if (cameraOptions) applyProps(camera, cameraOptions); // Always look at center by default
 
-      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 (!(cameraOptions != null && cameraOptions.rotation)) camera.lookAt(0, 0, 0);
+        }
 
-        if (state.size.width !== size.width || state.size.height !== size.height) state.setSize(size.width, size.height); // Check frameloop
+        state.set({
+          camera
+        });
+      } // Set up XR (one time only!)
 
-        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 (!state.xr) {
+        // Handle frame behavior in WebXR
+        const handleXRFrame = (timestamp, frame) => {
+          const state = store.getState();
+          if (state.frameloop === 'never') return;
+          advance(timestamp, true, state, frame);
+        }; // Toggle render switching on session
 
-        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
+        const handleSessionChange = () => {
+          const gl = store.getState().gl;
+          gl.xr.enabled = gl.xr.isPresenting; // @ts-expect-error
+          // WebXRManager's signature is incorrect.
+          // See: https://github.com/pmndrs/react-three-fiber/pull/2017#discussion_r790134505
 
-        store = createStore(applyProps, invalidate, advance, {
-          gl: glRenderer,
-          size,
-          ...props
-        });
-        const state = store.getState(); // Create renderer
+          gl.xr.setAnimationLoop(gl.xr.isPresenting ? handleXRFrame : null);
+        }; // WebXR session manager
 
-        fiber = reconciler.createContainer(store, ConcurrentRoot, false, null); // Map it
 
-        roots.set(canvas, {
-          fiber,
-          store
-        }); // Store events internally
+        const xr = {
+          connect() {
+            const gl = store.getState().gl;
+            gl.xr.addEventListener('sessionstart', handleSessionChange);
+            gl.xr.addEventListener('sessionend', handleSessionChange);
+          },
+
+          disconnect() {
+            const gl = store.getState().gl;
+            gl.xr.removeEventListener('sessionstart', handleSessionChange);
+            gl.xr.removeEventListener('sessionend', handleSessionChange);
+          }
 
-        if (events) state.set({
-          events: events(store)
+        }; // Subscribe to WebXR session events
+
+        if (gl.xr) xr.connect();
+        state.set({
+          xr
         });
-      }
+      } // Set shadowmap
 
-      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!';
-      }
+
+      if (gl.shadowMap) {
+        const isBoolean = is.boo(shadows);
+
+        if (isBoolean && gl.shadowMap.enabled !== shadows || !is.equ(shadows, gl.shadowMap, shallowLoose)) {
+          const old = gl.shadowMap.enabled;
+          gl.shadowMap.enabled = !!shadows;
+          if (!isBoolean) Object.assign(gl.shadowMap, shadows);else gl.shadowMap.type = THREE.PCFSoftShadowMap;
+          if (old !== gl.shadowMap.enabled) gl.shadowMap.needsUpdate = true;
+        }
+      } // Set color management
+
+
+      const outputEncoding = linear ? THREE.LinearEncoding : THREE.sRGBEncoding;
+      const toneMapping = flat ? THREE.NoToneMapping : THREE.ACESFilmicToneMapping;
+      if (gl.outputEncoding !== outputEncoding) gl.outputEncoding = outputEncoding;
+      if (gl.toneMapping !== toneMapping) gl.toneMapping = toneMapping; // Set gl props
+
+      if (glConfig && !is.fun(glConfig) && !isRenderer(glConfig) && !is.equ(glConfig, gl, shallowLoose)) applyProps(gl, glConfig); // Store events internally
+
+      if (events && !state.events.handlers) state.set({
+        events: events(store)
+      }); // Check pixelratio
+
+      if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr); // Check size, allow it to take on container bounds initially
+
+      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
+      };
+      if (!is.equ(size, state.size, shallowLoose)) state.setSize(size.width, size.height); // Check frameloop
+
+      if (state.frameloop !== frameloop) state.setFrameloop(frameloop); // Check pointer missed
+
+      if (!state.onPointerMissed) state.set({
+        onPointerMissed
+      }); // Check performance
+
+      if (performance && !is.equ(performance, state.performance, shallowLoose)) state.set(state => ({
+        performance: { ...state.performance,
+          ...performance
+        }
+      })); // Set locals
+
+      onCreated = onCreatedCallback;
+      configured = true;
+      return this;
     },
-    unmount: () => unmountComponentAtNode(canvas)
+
+    render(element) {
+      // The root has to be configured before it can be rendered
+      if (!configured) this.configure();
+      reconciler.updateContainer( /*#__PURE__*/React.createElement(Provider, {
+        store: store,
+        element: element,
+        onCreated: onCreated,
+        target: canvas
+      }), fiber, null, () => undefined);
+      return store;
+    },
+
+    unmount() {
+      unmountComponentAtNode(canvas);
+    }
+
   };
 }
 
 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);
+  const root = createRoot(canvas);
+  root.configure(config);
+  return root.render(element);
 }
 
 function Provider({
@@ -1723,7 +1767,7 @@ function unmountComponentAtNode(canvas, callback) {
             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();
+            if ((_state$gl3 = state.gl) != null && _state$gl3.xr) state.xr.disconnect();
             dispose(state);
             roots.delete(canvas);
             if (callback) callback(canvas);