@react-three/fiber 8.0.0-alpha-08 → 8.0.0-alpha-09

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

@@ -8,7 +8,6 @@ var constants = require('react-reconciler/constants');
 var create = require('zustand');
 var shallow = require('zustand/shallow');
 var Reconciler = require('react-reconciler');
-var scheduler = require('scheduler');
 var useAsset = require('use-asset');
 var mergeRefs = require('react-merge-refs');
 var useMeasure = require('react-use-measure');
@@ -47,6 +46,9 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
+const DEFAULT = '__default';
+const isDiffSet = def => def && !!def.memoized && !!def.changes;
+// A collection of compare functions
 const is = {
   obj: a => a === Object(a) && !is.arr(a) && typeof a !== 'function',
   fun: a => typeof a === 'function',
@@ -72,7 +74,178 @@ const is = {
     return is.und(i) ? a === b : true;
   }
 
-};
+}; // Each object in the scene carries a small LocalState descriptor
+
+function prepare(object, state) {
+  const instance = object;
+
+  if (state != null && state.primitive || !instance.__r3f) {
+    instance.__r3f = {
+      root: null,
+      memoizedProps: {},
+      handlers: {
+        count: 0
+      },
+      objects: [],
+      ...state
+    };
+  }
+
+  return object;
+} // 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,
+  ref: rN,
+  ...props
+}, {
+  children: cP,
+  key: kP,
+  ref: rP,
+  ...previous
+} = {}, remove = false) {
+  var _instance$__r3f;
+
+  const localState = (_instance$__r3f = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f : {};
+  const entries = Object.entries(props);
+  const changes = []; // Catch removed props, prepend them so they can be reset or removed
+
+  if (remove) {
+    const previousKeys = Object.keys(previous);
+
+    for (let i = 0; i < previousKeys.length; i++) if (!props.hasOwnProperty(previousKeys[i])) entries.unshift([previousKeys[i], DEFAULT + 'remove']);
+  }
+
+  entries.forEach(([key, value]) => {
+    var _instance$__r3f2;
+
+    // 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;
+    let currentInstance = instance;
+    let targetProp = currentInstance[key]; // Collect handlers and bail out
+
+    if (/^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, currentInstance, targetProp]); // Revolve dashed props
+
+    if (key.includes('-')) {
+      const entries = key.split('-');
+      targetProp = entries.reduce((acc, key) => acc[key], instance); // If the target is atomic, it forces us to switch the root
+
+      if (!(targetProp && targetProp.set)) {
+        const [name, ...reverseEntries] = entries.reverse();
+        currentInstance = reverseEntries.reverse().reduce((acc, key) => acc[key], instance);
+        key = name;
+      }
+    }
+
+    changes.push([key, value, false, currentInstance, targetProp]);
+  });
+  const memoized = { ...props
+  };
+  if (localState.memoizedProps && localState.memoizedProps.args) memoized.args = localState.memoizedProps.args;
+  if (localState.memoizedProps && localState.memoizedProps.attach) memoized.attach = localState.memoizedProps.attach;
+  return {
+    memoized,
+    changes
+  };
+} // This function applies a set of changes to the instance
+
+function applyProps$1(instance, data) {
+  var _instance$__r3f3, _root$getState, _localState$handlers, _localState$handlers2;
+
+  // Filter equals, events and reserved props
+  const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {};
+  const root = localState.root;
+  const rootState = (_root$getState = root == null ? void 0 : root.getState == null ? void 0 : root.getState()) != null ? _root$getState : {};
+  const {
+    memoized,
+    changes
+  } = isDiffSet(data) ? data : diffProps(instance, data);
+  const prevHandlers = (_localState$handlers = localState.handlers) == null ? void 0 : _localState$handlers.count; // Prepare memoized props
+
+  if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
+  changes.forEach(([key, value, isEvent, currentInstance, targetProp]) => {
+    // https://github.com/mrdoob/three.js/issues/21209
+    // HMR/fast-refresh relies on the ability to cancel out props, but threejs
+    // has no means to do this. Hence we curate a small collection of value-classes
+    // with their respective constructor/set arguments
+    // For removed props, try to set default values, if possible
+    if (value === DEFAULT + 'remove') {
+      if (targetProp && targetProp.constructor) {
+        // use the prop constructor to find the default it should be
+        value = new targetProp.constructor(memoized.args);
+      } else if (currentInstance.constructor) {
+        // create a blank slate of the instance and copy the particular parameter.
+        // @ts-ignore
+        const defaultClassCall = new currentInstance.constructor(currentInstance.__r3f.memoizedProps.args);
+        value = defaultClassCall[targetProp]; // destory the instance
+
+        if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
+      } else value = 0;
+    } // Deal with pointer events ...
+
+
+    if (isEvent) {
+      if (value) localState.handlers[key] = value;else delete localState.handlers[key];
+      localState.handlers.count = Object.keys(localState.handlers).length;
+    } // Special treatment for objects with support for set/copy, and layers
+    else if (targetProp && targetProp.set && (targetProp.copy || targetProp instanceof THREE__namespace.Layers)) {
+        // If value is an array
+        if (Array.isArray(value)) {
+          if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
+        } // Test again target.copy(class) next ...
+        else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) targetProp.copy(value); // If nothing else fits, just set the single value, ignore undefined
+          // https://github.com/react-spring/react-three-fiber/issues/274
+          else if (value !== undefined) {
+              const isColor = targetProp instanceof THREE__namespace.Color; // Allow setting array scalars
+
+              if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
+              else if (targetProp instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) targetProp.mask = value.mask; // Otherwise just set ...
+                else targetProp.set(value); // Auto-convert sRGB colors, for now ...
+              // https://github.com/react-spring/react-three-fiber/issues/344
+
+              if (!rootState.linear && isColor) targetProp.convertSRGBToLinear();
+            } // Else, just overwrite the value
+
+      } else {
+        currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
+        // https://github.com/react-spring/react-three-fiber/issues/344
+
+        if (!rootState.linear && currentInstance[key] instanceof THREE__namespace.Texture) currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
+      }
+
+    invalidateInstance(instance);
+  });
+
+  if (rootState.internal && instance.raycast && prevHandlers !== ((_localState$handlers2 = localState.handlers) == null ? void 0 : _localState$handlers2.count)) {
+    // Pre-emptively remove the instance from the interaction manager
+    const index = rootState.internal.interaction.indexOf(instance);
+    if (index > -1) rootState.internal.interaction.splice(index, 1); // Add the instance to the interaction manager only when it has handlers
+
+    if (localState.handlers.count) rootState.internal.interaction.push(instance);
+  } // Call the update lifecycle when it is being updated, but only when it is part of the scene
+
+
+  if (changes.length && instance.parent) updateInstance(instance);
+}
+function invalidateInstance(instance) {
+  var _instance$__r3f4, _instance$__r3f4$root;
+
+  const state = (_instance$__r3f4 = instance.__r3f) == null ? void 0 : (_instance$__r3f4$root = _instance$__r3f4.root) == null ? void 0 : _instance$__r3f4$root.getState == null ? void 0 : _instance$__r3f4$root.getState();
+  if (state && state.internal.frames === 0) state.invalidate();
+}
+function updateInstance(instance) {
+  instance.onUpdate == null ? void 0 : instance.onUpdate(instance);
+}
 
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
@@ -419,8 +592,6 @@ function createEvents(store) {
   };
 }
 
-const isDiffSet = def => def && !!def.memoized && !!def.changes;
-
 // Type guard to tell a store from a portal
 const isStore = def => def && !!def.getState;
 
@@ -438,191 +609,13 @@ const getContainer = (container, child) => {
   };
 };
 
-const DEFAULT = '__default';
-const EMPTY = {};
 let catalogue = {};
 
 let extend = objects => void (catalogue = { ...catalogue,
   ...objects
-}); // 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;
-} // Each object in the scene carries a small LocalState descriptor
-
-
-function prepare(object, state) {
-  const instance = object;
-
-  if (state != null && state.primitive || !instance.__r3f) {
-    instance.__r3f = {
-      root: null,
-      memoizedProps: {},
-      handlers: {
-        count: 0
-      },
-      objects: [],
-      ...state
-    };
-  }
-
-  return object;
-}
-
-function createRenderer(roots) {
-  // This function prepares a set of changes to be applied to the instance
-  function diffProps(instance, {
-    children: cN,
-    key: kN,
-    ref: rN,
-    ...props
-  }, {
-    children: cP,
-    key: kP,
-    ref: rP,
-    ...previous
-  } = {}, accumulative = false) {
-    var _instance$__r3f;
-
-    const localState = (_instance$__r3f = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f : {};
-    const entries = Object.entries(props);
-    const changes = []; // Catch removed props, prepend them so they can be reset or removed
-
-    if (accumulative) {
-      const previousKeys = Object.keys(previous);
-
-      for (let i = 0; i < previousKeys.length; i++) if (!props.hasOwnProperty(previousKeys[i])) entries.unshift([previousKeys[i], DEFAULT + 'remove']);
-    }
-
-    entries.forEach(([key, value]) => {
-      var _instance$__r3f2;
-
-      // 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;
-      let currentInstance = instance;
-      let targetProp = currentInstance[key]; // Collect handlers and bail out
-
-      if (/^on(Pointer|Click|DoubleClick|ContextMenu|Wheel)/.test(key)) return changes.push([key, value, true, currentInstance, targetProp]); // Revolve dashed props
-
-      if (key.includes('-')) {
-        const entries = key.split('-');
-        targetProp = entries.reduce((acc, key) => acc[key], instance); // If the target is atomic, it forces us to switch the root
-
-        if (!(targetProp && targetProp.set)) {
-          const [name, ...reverseEntries] = entries.reverse();
-          currentInstance = reverseEntries.reverse().reduce((acc, key) => acc[key], instance);
-          key = name;
-        }
-      }
-
-      changes.push([key, value, false, currentInstance, targetProp]);
-    });
-    const memoized = { ...props
-    };
-    if (localState.memoizedProps && localState.memoizedProps.args) memoized.args = localState.memoizedProps.args;
-    if (localState.memoizedProps && localState.memoizedProps.attach) memoized.attach = localState.memoizedProps.attach;
-    return {
-      accumulative,
-      memoized,
-      changes
-    };
-  }
-
-  function applyProps(instance, data) {
-    var _instance$__r3f3, _root$getState, _localState$handlers, _localState$handlers2;
-
-    // Filter equals, events and reserved props
-    const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {};
-    const root = localState.root;
-    const rootState = (_root$getState = root == null ? void 0 : root.getState == null ? void 0 : root.getState()) != null ? _root$getState : {};
-    const {
-      memoized,
-      changes
-    } = isDiffSet(data) ? data : diffProps(instance, data);
-    const prevHandlers = (_localState$handlers = localState.handlers) == null ? void 0 : _localState$handlers.count; // Prepare memoized props
-
-    if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
-    changes.forEach(([key, value, isEvent, currentInstance, targetProp]) => {
-      // https://github.com/mrdoob/three.js/issues/21209
-      // HMR/fast-refresh relies on the ability to cancel out props, but threejs
-      // has no means to do this. Hence we curate a small collection of value-classes
-      // with their respective constructor/set arguments
-      // For removed props, try to set default values, if possible
-      if (value === DEFAULT + 'remove') {
-        if (targetProp && targetProp.constructor) {
-          // use the prop constructor to find the default it should be
-          value = new targetProp.constructor(memoized.args);
-        } else if (currentInstance.constructor) {
-          // create a blank slate of the instance and copy the particular parameter.
-          // @ts-ignore
-          const defaultClassCall = new currentInstance.constructor(currentInstance.__r3f.memoizedProps.args);
-          value = defaultClassCall[targetProp]; // destory the instance
-
-          if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
-        } else value = 0;
-      } // Deal with pointer events ...
-
-
-      if (isEvent) {
-        if (value) localState.handlers[key] = value;else delete localState.handlers[key];
-        localState.handlers.count = Object.keys(localState.handlers).length;
-      } // Special treatment for objects with support for set/copy, and layers
-      else if (targetProp && targetProp.set && (targetProp.copy || targetProp instanceof THREE__namespace.Layers)) {
-          // If value is an array
-          if (Array.isArray(value)) {
-            if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
-          } // Test again target.copy(class) next ...
-          else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) targetProp.copy(value); // If nothing else fits, just set the single value, ignore undefined
-            // https://github.com/react-spring/react-three-fiber/issues/274
-            else if (value !== undefined) {
-                const isColor = targetProp instanceof THREE__namespace.Color; // Allow setting array scalars
-
-                if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
-                else if (targetProp instanceof THREE__namespace.Layers && value instanceof THREE__namespace.Layers) targetProp.mask = value.mask; // Otherwise just set ...
-                  else targetProp.set(value); // Auto-convert sRGB colors, for now ...
-                // https://github.com/react-spring/react-three-fiber/issues/344
-
-                if (!rootState.linear && isColor) targetProp.convertSRGBToLinear();
-              } // Else, just overwrite the value
-
-        } else {
-          currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
-          // https://github.com/react-spring/react-three-fiber/issues/344
-
-          if (!rootState.linear && currentInstance[key] instanceof THREE__namespace.Texture) currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
-        }
-
-      invalidateInstance(instance);
-    });
-
-    if (rootState.internal && instance.raycast && prevHandlers !== ((_localState$handlers2 = localState.handlers) == null ? void 0 : _localState$handlers2.count)) {
-      // Pre-emptively remove the instance from the interaction manager
-      const index = rootState.internal.interaction.indexOf(instance);
-      if (index > -1) rootState.internal.interaction.splice(index, 1); // Add the instance to the interaction manager only when it has handlers
-
-      if (localState.handlers.count) rootState.internal.interaction.push(instance);
-    } // Call the update lifecycle when it is being updated, but only when it is part of the scene
-
-
-    if (changes.length && instance.parent) updateInstance(instance);
-  }
-
-  function invalidateInstance(instance) {
-    var _instance$__r3f4, _instance$__r3f4$root;
-
-    const state = (_instance$__r3f4 = instance.__r3f) == null ? void 0 : (_instance$__r3f4$root = _instance$__r3f4.root) == null ? void 0 : _instance$__r3f4$root.getState == null ? void 0 : _instance$__r3f4$root.getState();
-    if (state && state.internal.frames === 0) state.invalidate();
-  }
-
-  function updateInstance(instance) {
-    instance.onUpdate == null ? void 0 : instance.onUpdate(instance);
-  }
+});
 
+function createRenderer(roots, getEventPriority) {
   function createInstance(type, {
     args = [],
     ...props
@@ -682,7 +675,7 @@ function createRenderer(roots) {
     // why it passes "true" here
 
 
-    applyProps(instance, props);
+    applyProps$1(instance, props);
     return instance;
   }
 
@@ -834,7 +827,7 @@ function createRenderer(roots) {
 
 
       if (shouldDispose && child.dispose && child.type !== 'Scene') {
-        scheduler.unstable_runWithPriority(scheduler.unstable_IdlePriority, () => {
+        reconciler.runWithPriority(constants.IdleEventPriority, () => {
           try {
             child.dispose();
           } catch (e) {
@@ -879,25 +872,6 @@ function createRenderer(roots) {
   }
 
   const reconciler = Reconciler__default['default']({
-    now: scheduler.unstable_now,
-    createInstance,
-    removeChild,
-    appendChild,
-    appendInitialChild: appendChild,
-    insertBefore,
-    warnsIfNotActing: true,
-    supportsMutation: true,
-    isPrimaryRenderer: false,
-    getCurrentEventPriority: () => constants.DefaultEventPriority,
-    // @ts-ignore
-    scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    // @ts-ignore
-    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined,
-    // @ts-ignore
-    setTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    // @ts-ignore
-    clearTimeout: is.fun(clearTimeout) ? clearTimeout : undefined,
-    noTimeout: -1,
     appendChildToContainer: (parentInstance, child) => {
       const {
         container,
@@ -934,10 +908,9 @@ function createRenderer(roots) {
     },
 
     commitUpdate(instance, [reconstruct, diff], type, oldProps, newProps, fiber) {
-      //console.log(type)
       // 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) {
@@ -954,62 +927,45 @@ function createRenderer(roots) {
       }
     },
 
-    hideTextInstance() {
+    createInstance,
+    removeChild,
+    appendChild,
+    appendInitialChild: appendChild,
+    insertBefore,
+    warnsIfNotActing: true,
+    supportsMutation: true,
+    isPrimaryRenderer: false,
+    getCurrentEventPriority: () => getEventPriority ? getEventPriority() : constants.DefaultEventPriority,
+    // @ts-ignore
+    now: is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
+    // @ts-ignore
+    scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
+    // @ts-ignore
+    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined,
+    setTimeout: is.fun(setTimeout) ? setTimeout : undefined,
+    clearTimeout: is.fun(clearTimeout) ? clearTimeout : undefined,
+    noTimeout: -1,
+    hideTextInstance: () => {
       throw new Error('Text is not allowed in the R3F tree.');
     },
-
-    getPublicInstance(instance) {
-      // TODO: might fix switchInstance (?)
-      return instance;
-    },
-
-    getRootHostContext(rootContainer) {
-      return EMPTY;
-    },
-
-    getChildHostContext(parentHostContext) {
-      return parentHostContext;
-    },
-
-    createTextInstance() {},
-
-    finalizeInitialChildren() {
-      return false;
-    },
-
-    commitMount() {// noop
-    },
-
-    shouldDeprioritizeSubtree() {
-      return false;
-    },
-
-    prepareForCommit() {
-      return null;
-    },
-
-    preparePortalMount(containerInfo) {
-      prepare(containerInfo);
-    },
-
-    resetAfterCommit() {// noop
-    },
-
-    shouldSetTextContent() {
-      return false;
-    },
-
-    clearContainer() {
-      return false;
-    },
-
-    detachDeletedInstance() {// noop
-    }
-
+    // prettier-ignore
+    getPublicInstance: instance => instance,
+    getRootHostContext: () => null,
+    getChildHostContext: parentHostContext => parentHostContext,
+    createTextInstance: () => {},
+    finalizeInitialChildren: () => false,
+    commitMount: () => {},
+    shouldDeprioritizeSubtree: () => false,
+    prepareForCommit: () => null,
+    preparePortalMount: containerInfo => prepare(containerInfo),
+    resetAfterCommit: () => {},
+    shouldSetTextContent: () => false,
+    clearContainer: () => false,
+    detachDeletedInstance: () => {}
   });
   return {
     reconciler,
-    applyProps
+    applyProps: applyProps$1
   };
 }
 
@@ -1360,20 +1316,61 @@ function createLoop(roots) {
   };
 }
 
+// @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;
+  }
+}
 function createPointerEvents(store) {
   const {
     handlePointer
   } = 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],
+    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]
   };
   return {
@@ -1610,7 +1607,7 @@ const {
 const {
   reconciler,
   applyProps
-} = createRenderer();
+} = createRenderer(roots, getEventPriority);
 
 const createRendererInstance = (gl, canvas) => isRenderer(gl) ? gl : new THREE__namespace.WebGLRenderer({
   powerPreference: 'high-performance',