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

package/dist/{hooks-15c12e3e.esm.js → index-fccd77b0.esm.js}

@@ -1,10 +1,10 @@
-import Reconciler from 'react-reconciler';
-import { unstable_scheduleCallback, unstable_IdlePriority } from 'scheduler';
-import { DefaultEventPriority } from 'react-reconciler/constants';
-import * as THREE from 'three';
 import * as React from 'react';
 import { suspend, preload, clear } from 'suspend-react';
+import * as THREE from 'three';
+import { DefaultEventPriority, ContinuousEventPriority, DiscreteEventPriority, ConcurrentRoot } from 'react-reconciler/constants';
 import create from 'zustand';
+import Reconciler from 'react-reconciler';
+import { unstable_scheduleCallback, unstable_IdlePriority } from 'scheduler';
 
 var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
@@ -212,7 +212,7 @@ function diffProps(instance, {
   };
 } // This function applies a set of changes to the instance
 
-function applyProps(instance, data) {
+function applyProps$1(instance, data) {
   var _instance$__r3f3, _root$getState;
 
   // Filter equals, events and reserved props
@@ -322,13 +322,41 @@ function updateInstance(instance) {
 
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
+} // 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 DiscreteEventPriority;
+
+    case 'pointermove':
+    case 'pointerout':
+    case 'pointerover':
+    case 'pointerenter':
+    case 'pointerleave':
+    case 'wheel':
+      return ContinuousEventPriority;
+
+    default:
+      return DefaultEventPriority;
+  }
 }
 /**
  * Release pointer captures.
  * This is called by releasePointerCapture in the API, and when an object is removed.
  */
 
-
 function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
   const captureData = captures.get(obj);
 
@@ -800,7 +828,7 @@ function createRenderer(roots, getEventPriority) {
     // why it passes "true" here
 
 
-    applyProps(instance, props);
+    applyProps$1(instance, props);
     return instance;
   }
 
@@ -998,7 +1026,7 @@ function createRenderer(roots, getEventPriority) {
     commitUpdate(instance, [reconstruct, diff], type, oldProps, newProps, fiber) {
       // Reconstruct when args or <primitive object={...} have changes
       if (reconstruct) switchInstance(instance, type, newProps, fiber); // Otherwise just overwrite props
-      else applyProps(instance, diff);
+      else applyProps$1(instance, diff);
     },
 
     hideInstance(instance) {
@@ -1087,7 +1115,7 @@ function createRenderer(roots, getEventPriority) {
   });
   return {
     reconciler,
-    applyProps
+    applyProps: applyProps$1
   };
 }
 
@@ -1389,6 +1417,60 @@ const createStore = (applyProps, invalidate, advance, props) => {
   return rootState;
 };
 
+function useStore() {
+  const store = React.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.useRef(callback);
+  React.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
+
+  React.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
+  return null;
+}
+function useGraph(object) {
+  return React.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 = 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 preload(loadingFn(extensions), [Proto, ...keys]);
+};
+
+useLoader.clear = function (Proto, input) {
+  const keys = Array.isArray(input) ? input : [input];
+  return clear([Proto, ...keys]);
+};
+
 function createSubs(callback, subs) {
   const index = subs.length;
   subs.push(callback);
@@ -1407,7 +1489,7 @@ function run(effects, timestamp) {
   for (i = 0; i < effects.length; i++) effects[i](timestamp);
 }
 
-function render(timestamp, state) {
+function render$1(timestamp, state) {
   // Run local effects
   let delta = state.clock.getDelta(); // In frameloop='never' mode, clock times are updated using the provided timestamp
 
@@ -1443,7 +1525,7 @@ function createLoop(roots) {
       const 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(timestamp, state);
+        repeat += render$1(timestamp, state);
       }
     }); // Run after-effects
 
@@ -1471,7 +1553,7 @@ function createLoop(roots) {
 
   function advance(timestamp, runGlobalEffects = true, state) {
     if (runGlobalEffects) run(globalEffects, timestamp);
-    if (!state) roots.forEach(root => render(timestamp, root.store.getState()));else render(timestamp, state);
+    if (!state) roots.forEach(root => render$1(timestamp, root.store.getState()));else render$1(timestamp, state);
     if (runGlobalEffects) run(globalAfterEffects, timestamp);
   }
 
@@ -1482,58 +1564,187 @@ function createLoop(roots) {
   };
 }
 
-function useStore() {
-  const store = React.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 roots = new Map();
+const {
+  invalidate,
+  advance
+} = createLoop(roots);
+const {
+  reconciler,
+  applyProps
+} = createRenderer(roots, getEventPriority);
+
+const createRendererInstance = (gl, canvas) => {
+  const customRenderer = typeof gl === 'function' ? gl(canvas) : gl;
+  if (isRenderer(customRenderer)) return customRenderer;
+  const renderer = 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
+
+  if (gl) applyProps(renderer, gl);
+  return renderer;
+};
 
-  const ref = React.useRef(callback);
-  React.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
+function createRoot(canvas, config) {
+  return {
+    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
+        };
+      }
 
-  React.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
-  return null;
+      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 !== 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.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 (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 = createStore(applyProps, invalidate, advance, {
+          gl: glRenderer,
+          size,
+          ...props
+        });
+        const state = store.getState(); // Create renderer
+
+        fiber = reconciler.createContainer(store, 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.createElement(Provider, {
+          store: store,
+          element: element,
+          onCreated: onCreated,
+          target: canvas
+        }), fiber, null, () => undefined);
+        return store;
+      } else {
+        throw 'Error creating root!';
+      }
+    },
+    unmount: () => unmountComponentAtNode(canvas)
+  };
 }
-function useGraph(object) {
-  return React.useMemo(() => buildGraph(object), [object]);
+
+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 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
+function Provider({
+  store,
+  element,
+  onCreated,
+  target
+}) {
+  React.useEffect(() => {
+    const state = store.getState(); // Flag the canvas active, rendering will now begin
+
+    state.set(state => ({
+      internal: { ...state.internal,
+        active: true
+      }
+    })); // Connect events
 
-    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}`)))));
-  };
+    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.createElement(context.Provider, {
+    value: store
+  }, element);
 }
 
-function useLoader(Proto, input, extensions, onProgress) {
-  // Use suspense to load async assets
-  const keys = Array.isArray(input) ? input : [input];
-  const results = suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
-    equal: is.equ
-  }); // Return the object/s
+function unmountComponentAtNode(canvas, callback) {
+  const root = roots.get(canvas);
+  const fiber = root == null ? void 0 : root.fiber;
 
-  return Array.isArray(input) ? results : results[0];
+  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();
+            dispose(state);
+            roots.delete(canvas);
+            if (callback) callback(canvas);
+          } catch (e) {
+            /* ... */
+          }
+        }, 500);
+      }
+    });
+  }
 }
 
-useLoader.preload = function (Proto, input, extensions) {
-  const keys = Array.isArray(input) ? input : [input];
-  return preload(loadingFn(extensions), [Proto, ...keys]);
-};
+const act = React.unstable_act;
 
-useLoader.clear = function (Proto, input) {
-  const keys = Array.isArray(input) ? input : [input];
-  return clear([Proto, ...keys]);
-};
+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'
+});
 
-export { createLoop as a, createRenderer as b, createEvents as c, calculateDpr as d, createStore as e, context as f, dispose as g, extend as h, isRenderer as i, addEffect as j, addAfterEffect as k, addTail as l, useThree as m, useFrame as n, omit as o, pick as p, useGraph as q, useLoader as r, buildGraph as s, threeTypes as t, useStore as u, is as v };
+export { is as A, createRoot as a, useStore as b, createEvents as c, useThree as d, extend as e, useFrame as f, useGraph as g, useLoader as h, context as i, createPortal as j, reconciler as k, applyProps as l, dispose as m, invalidate as n, omit as o, pick as p, advance as q, render as r, addEffect as s, threeTypes as t, unmountComponentAtNode as u, addAfterEffect as v, addTail as w, act as x, roots as y, buildGraph as z };