@react-three/fiber 8.0.0-beta-04 → 8.0.0-beta.1

package/dist/{index-eb414398.cjs.prod.js → index-85b2df17.cjs.prod.js}

@@ -70,29 +70,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;
   }
@@ -183,15 +192,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,
@@ -223,7 +225,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
 
@@ -420,7 +422,7 @@ function createEvents(store) {
   /** Sets up defaultRaycaster */
 
   function prepareRay(event) {
-    var _raycaster$computeOff;
+    var _customOffsets$offset, _customOffsets$offset2, _customOffsets$width, _customOffsets$height;
 
     const state = store.getState();
     const {
@@ -431,14 +433,11 @@ function createEvents(store) {
     } = state; // https://github.com/pmndrs/react-three-fiber/pull/782
     // Events trigger outside of canvas when moved
 
-    const {
-      offsetX,
-      offsetY
-    } = (_raycaster$computeOff = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state)) != null ? _raycaster$computeOff : event;
-    const {
-      width,
-      height
-    } = size;
+    const customOffsets = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state);
+    const offsetX = (_customOffsets$offset = customOffsets == null ? void 0 : customOffsets.offsetX) != null ? _customOffsets$offset : event.offsetX;
+    const offsetY = (_customOffsets$offset2 = customOffsets == null ? void 0 : customOffsets.offsetY) != null ? _customOffsets$offset2 : event.offsetY;
+    const width = (_customOffsets$width = customOffsets == null ? void 0 : customOffsets.width) != null ? _customOffsets$width : size.width;
+    const height = (_customOffsets$height = customOffsets == null ? void 0 : customOffsets.height) != null ? _customOffsets$height : size.height;
     mouse.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
     raycaster.setFromCamera(mouse, camera);
   }
@@ -997,10 +996,13 @@ function createRenderer(roots, getEventPriority) {
 
     instance.__r3f.objects = [];
     removeChild(parent, instance);
-    appendChild(parent, newInstance) // This evil hack switches the react-internal fiber node
-    // https://github.com/facebook/react/issues/14983
-    // https://github.com/facebook/react/pull/15021
-    ;
+    appendChild(parent, newInstance); // Re-bind event handlers
+
+    if (newInstance.raycast && newInstance.__r3f.eventCount) {
+      const rootState = newInstance.__r3f.root.getState();
+
+      rootState.internal.interaction.push(newInstance);
+    } // This evil hack switches the react-internal fiber node
     [fiber, fiber.alternate].forEach(fiber => {
       if (fiber !== null) {
         fiber.stateNode = newInstance;
@@ -1094,7 +1096,7 @@ function createRenderer(roots, getEventPriority) {
     isPrimaryRenderer: false,
     getCurrentEventPriority: () => getEventPriority ? getEventPriority() : constants.DefaultEventPriority,
     // @ts-ignore
-    now: is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
+    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
     // @ts-ignore
     scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
     // @ts-ignore
@@ -1152,63 +1154,8 @@ const isRenderer = def => !!(def != null && def.render);
 const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const context = /*#__PURE__*/React__namespace.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__namespace.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__namespace.PCFSoftShadowMap;
-  } // Set color preferences
-
-
-  if (linear) gl.outputEncoding = THREE__namespace.LinearEncoding;
-  if (flat) gl.toneMapping = THREE__namespace.NoToneMapping; // clock.elapsedTime is updated using advance(timestamp)
-
-  if (frameloop === 'never') {
-    clock.stop();
-    clock.elapsedTime = 0;
-  }
-
+const createStore = (invalidate, advance) => {
   const rootState = create__default['default']((set, get) => {
-    // Create custom raycaster
-    const raycaster = new THREE__namespace.Raycaster();
-    const {
-      params,
-      ...options
-    } = raycastOptions || {};
-    applyProps(raycaster, {
-      enabled: true,
-      ...options,
-      params: { ...raycaster.params,
-        ...params
-      }
-    }); // Create default camera
-
-    const isCamera = cameraOptions instanceof THREE__namespace.Camera;
-    const camera = isCamera ? cameraOptions : orthographic ? new THREE__namespace.OrthographicCamera(0, 0, 0, 0, 0.1, 1000) : new THREE__namespace.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__namespace.Vector3();
     const defaultTarget = new THREE__namespace.Vector3();
     const tempTarget = new THREE__namespace.Vector3();
@@ -1252,60 +1199,34 @@ const createStore = (applyProps, invalidate, advance, props) => {
       performance: { ...state.performance,
         current
       }
-    })); // Handle frame behavior in WebXR
-
-
-    const handleXRFrame = timestamp => {
-      const state = get();
-      if (state.frameloop === 'never') return;
-      advance(timestamp, true);
-    }; // Toggle render switching on session
-
-
-    const handleSessionChange = () => {
-      gl.xr.enabled = gl.xr.isPresenting;
-      gl.setAnimationLoop(gl.xr.isPresenting ? handleXRFrame : null); // If exiting session, request frame
-
-      if (!gl.xr.isPresenting) invalidate(get());
-    }; // 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__namespace.Scene()),
-      camera,
       controls: null,
-      raycaster,
-      clock,
+      clock: new THREE__namespace.Clock(),
       mouse: new THREE__namespace.Vector2(),
-      frameloop,
-      onPointerMissed,
+      frameloop: 'always',
+      onPointerMissed: undefined,
       performance: {
         current: 1,
         min: 0.5,
         max: 1,
         debounce: 200,
-        ...performance,
         regress: () => {
           const state = get(); // Clear timeout
 
@@ -1321,8 +1242,8 @@ const createStore = (applyProps, invalidate, advance, props) => {
         height: 0
       },
       viewport: {
-        initialDpr,
-        dpr: initialDpr,
+        initialDpr: 0,
+        dpr: 0,
         width: 0,
         height: 0,
         aspect: 0,
@@ -1331,6 +1252,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
         getCurrentViewport
       },
       setSize: (width, height) => {
+        const camera = get().camera;
         const size = {
           width,
           height
@@ -1342,22 +1264,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__namespace.createRef(),
         interaction: [],
         hovered: new Map(),
@@ -1365,7 +1299,6 @@ const createStore = (applyProps, invalidate, advance, props) => {
         initialClick: [0, 0],
         initialHits: [],
         capturedMap: new Map(),
-        xr,
         subscribe: (ref, priority = 0) => {
           set(({
             internal
@@ -1409,13 +1342,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__namespace.Camera)) {
+      if (!camera.manual) {
         if (isOrthographicCamera(camera)) {
           camera.left = size.width / -2;
           camera.right = size.width / 2;
@@ -1437,69 +1371,13 @@ 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
 
   return rootState;
 };
 
-function useStore() {
-  const store = React__namespace.useContext(context);
-  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
-  return store;
-}
-function useThree(selector = state => state, equalityFn) {
-  return useStore()(selector, equalityFn);
-}
-function useFrame(callback, renderPriority = 0) {
-  const subscribe = useStore().getState().internal.subscribe; // Update ref
-
-  const ref = React__namespace.useRef(callback);
-  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
-
-  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
-  return null;
-}
-function useGraph(object) {
-  return React__namespace.useMemo(() => buildGraph(object), [object]);
-}
-
-function loadingFn(extensions, onProgress) {
-  return function (Proto, ...input) {
-    // Construct new loader and run extensions
-    const loader = new Proto();
-    if (extensions) extensions(loader); // Go through the urls and load them
-
-    return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => {
-      if (data.scene) Object.assign(data, buildGraph(data.scene));
-      res(data);
-    }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
-  };
-}
-
-function useLoader(Proto, input, extensions, onProgress) {
-  // Use suspense to load async assets
-  const keys = Array.isArray(input) ? input : [input];
-  const results = suspendReact.suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
-    equal: is.equ
-  }); // Return the object/s
-
-  return Array.isArray(input) ? results : results[0];
-}
-
-useLoader.preload = function (Proto, input, extensions) {
-  const keys = Array.isArray(input) ? input : [input];
-  return suspendReact.preload(loadingFn(extensions), [Proto, ...keys]);
-};
-
-useLoader.clear = function (Proto, input) {
-  const keys = Array.isArray(input) ? input : [input];
-  return suspendReact.clear([Proto, ...keys]);
-};
-
 function createSubs(callback, subs) {
   const index = subs.length;
   subs.push(callback);
@@ -1518,7 +1396,9 @@ function run(effects, timestamp) {
   for (i = 0; i < effects.length; i++) effects[i](timestamp);
 }
 
-function render$1(timestamp, state) {
+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
 
@@ -1529,7 +1409,9 @@ function render$1(timestamp, state) {
   } // Call subscribers (useFrame)
 
 
-  for (i = 0; i < state.internal.subscribers.length; i++) state.internal.subscribers[i].ref.current(state, delta); // 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
@@ -1541,29 +1423,35 @@ function render$1(timestamp, state) {
 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) {
@@ -1580,9 +1468,9 @@ function createLoop(roots) {
     }
   }
 
-  function advance(timestamp, runGlobalEffects = true, state) {
+  function advance(timestamp, runGlobalEffects = true, state, frame) {
     if (runGlobalEffects) run(globalEffects, timestamp);
-    if (!state) roots.forEach(root => render$1(timestamp, root.store.getState()));else render$1(timestamp, state);
+    if (!state) roots.forEach(root => render$1(timestamp, root.store.getState()));else render$1(timestamp, state, frame);
     if (runGlobalEffects) run(globalAfterEffects, timestamp);
   }
 
@@ -1593,6 +1481,60 @@ function createLoop(roots) {
   };
 }
 
+function useStore() {
+  const store = React__namespace.useContext(context);
+  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
+  return store;
+}
+function useThree(selector = state => state, equalityFn) {
+  return useStore()(selector, equalityFn);
+}
+function useFrame(callback, renderPriority = 0) {
+  const subscribe = useStore().getState().internal.subscribe; // Update ref
+
+  const ref = React__namespace.useRef(callback);
+  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
+
+  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
+  return null;
+}
+function useGraph(object) {
+  return React__namespace.useMemo(() => buildGraph(object), [object]);
+}
+
+function loadingFn(extensions, onProgress) {
+  return function (Proto, ...input) {
+    // Construct new loader and run extensions
+    const loader = new Proto();
+    if (extensions) extensions(loader); // Go through the urls and load them
+
+    return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => {
+      if (data.scene) Object.assign(data, buildGraph(data.scene));
+      res(data);
+    }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
+  };
+}
+
+function useLoader(Proto, input, extensions, onProgress) {
+  // Use suspense to load async assets
+  const keys = Array.isArray(input) ? input : [input];
+  const results = suspendReact.suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
+    equal: is.equ
+  }); // Return the object/s
+
+  return Array.isArray(input) ? results : results[0];
+}
+
+useLoader.preload = function (Proto, input, extensions) {
+  const keys = Array.isArray(input) ? input : [input];
+  return suspendReact.preload(loadingFn(extensions), [Proto, ...keys]);
+};
+
+useLoader.clear = function (Proto, input) {
+  const keys = Array.isArray(input) ? input : [input];
+  return suspendReact.clear([Proto, ...keys]);
+};
+
 const roots = new Map();
 const {
   invalidate,
@@ -1602,113 +1544,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__namespace.WebGLRenderer({
+  if (isRenderer(customRenderer)) return customRenderer;else return 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
+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
 
-function createRoot(canvas, config) {
+  const fiber = prevFiber || reconciler.createContainer(store, constants.ConcurrentRoot, false, null); // Map it
+
+  if (!prevRoot) roots.set(canvas, {
+    fiber,
+    store
+  }); // Locals
+
+  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__namespace.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__namespace.Camera;
+        const camera = isCamera ? cameraOptions : orthographic ? new THREE__namespace.OrthographicCamera(0, 0, 0, 0, 0.1, 1000) : new THREE__namespace.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);
+        }
 
-      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();
+        state.set({
+          camera
+        });
+      } // Set up XR (one time only!)
 
-      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.size.width !== size.width || state.size.height !== size.height) state.setSize(size.width, size.height); // Check frameloop
+      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 (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;
+        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
 
-        if (linearChanged) {
-          unmountComponentAtNode(canvas);
-          fiber = undefined;
-        }
-      }
+          gl.xr.setAnimationLoop(gl.xr.isPresenting ? handleXRFrame : null);
+        }; // WebXR session manager
 
-      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
+        const xr = {
+          connect() {
+            const gl = store.getState().gl;
+            gl.xr.addEventListener('sessionstart', handleSessionChange);
+            gl.xr.addEventListener('sessionend', handleSessionChange);
+          },
 
-        fiber = reconciler.createContainer(store, constants.ConcurrentRoot, false, null); // Map it
+          disconnect() {
+            const gl = store.getState().gl;
+            gl.xr.removeEventListener('sessionstart', handleSessionChange);
+            gl.xr.removeEventListener('sessionend', handleSessionChange);
+          }
 
-        roots.set(canvas, {
-          fiber,
-          store
-        }); // Store events internally
+        }; // Subscribe to WebXR session events
 
-        if (events) state.set({
-          events: events(store)
+        if (gl.xr) xr.connect();
+        state.set({
+          xr
         });
-      }
+      } // Set shadowmap
 
-      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!';
-      }
+
+      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__namespace.PCFSoftShadowMap;
+          if (old !== gl.shadowMap.enabled) gl.shadowMap.needsUpdate = true;
+        }
+      } // Set color management
+
+
+      const outputEncoding = linear ? THREE__namespace.LinearEncoding : THREE__namespace.sRGBEncoding;
+      const toneMapping = flat ? THREE__namespace.NoToneMapping : THREE__namespace.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;
+    },
+
+    render(element) {
+      // The root has to be configured before it can be rendered
+      if (!configured) this.configure();
+      reconciler.updateContainer( /*#__PURE__*/React__namespace.createElement(Provider, {
+        store: store,
+        element: element,
+        onCreated: onCreated,
+        target: canvas
+      }), fiber, null, () => undefined);
+      return store;
     },
-    unmount: () => unmountComponentAtNode(canvas)
+
+    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({
@@ -1751,7 +1796,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);
@@ -1782,7 +1827,6 @@ exports.addEffect = addEffect;
 exports.addTail = addTail;
 exports.advance = advance;
 exports.applyProps = applyProps;
-exports.buildGraph = buildGraph;
 exports.context = context;
 exports.createEvents = createEvents;
 exports.createPortal = createPortal;
@@ -1790,7 +1834,6 @@ exports.createRoot = createRoot;
 exports.dispose = dispose;
 exports.extend = extend;
 exports.invalidate = invalidate;
-exports.is = is;
 exports.omit = omit;
 exports.pick = pick;
 exports.reconciler = reconciler;