@react-three/fiber 8.0.8 → 8.0.11

package/dist/declarations/src/web/Canvas.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import type { Options as ResizeOptions } from 'react-use-measure';
-import { RenderProps } from '../core';
-export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    fallback?: React.ReactNode;
-    resize?: ResizeOptions;
-}
-export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;
+import * as React from 'react';
+import type { Options as ResizeOptions } from 'react-use-measure';
+import { RenderProps } from '../core';
+export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    fallback?: React.ReactNode;
+    resize?: ResizeOptions;
+}
+export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;

package/dist/declarations/src/web/events.d.ts

@@ -1,4 +1,4 @@
-import { UseBoundStore } from 'zustand';
-import { RootState } from '../core/store';
-import { EventManager } from '../core/events';
-export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;
+import { UseBoundStore } from 'zustand';
+import { RootState } from '../core/store';
+import { EventManager } from '../core/events';
+export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;

package/dist/{index-548cf96a.esm.js → index-3c7aae97.esm.js}

@@ -10,11 +10,17 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-// React currently throws a warning when using useLayoutEffect on the server.
+const isOrthographicCamera = def => def && def.isOrthographicCamera; // React currently throws a warning when using useLayoutEffect on the server.
 // To get around it, we can conditionally useEffect on the server (no-op) and
 // useLayoutEffect on the client.
+
 const isSSR = typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
 const useIsomorphicLayoutEffect = isSSR ? React.useEffect : React.useLayoutEffect;
+function useMutableCallback(fn) {
+  const ref = React.useRef(fn);
+  useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
+  return ref;
+}
 function Block({
   set
 }) {
@@ -46,11 +52,6 @@ ErrorBoundary.getDerivedStateFromError = () => ({
   error: true
 });
 
-function useMemoizedFn(fn) {
-  const fnRef = React.useRef(fn);
-  useIsomorphicLayoutEffect(() => void (fnRef.current = fn), [fn]);
-  return (...args) => fnRef.current == null ? void 0 : fnRef.current(...args);
-}
 const DEFAULT = '__default';
 const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
@@ -65,29 +66,6 @@ const getRootState = obj => {
 
   return (_r3f = obj.__r3f) == null ? void 0 : _r3f.root.getState();
 };
-/**
- * Picks or omits keys from an object
- * `omit` will filter out keys, and otherwise cherry-pick them.
- */
-
-function filterKeys(obj, omit, ...keys) {
-  const keysToSelect = new Set(keys);
-  return Object.entries(obj).reduce((acc, [key, value]) => {
-    const shouldInclude = !omit;
-    if (keysToSelect.has(key) === shouldInclude) acc[key] = value;
-    return acc;
-  }, {});
-}
-/**
- * Clones an object and cherry-picks keys.
- */
-
-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 is = {
   obj: a => a === Object(a) && !is.arr(a) && typeof a !== 'function',
@@ -313,12 +291,16 @@ function applyProps$1(instance, data) {
 
     if (value === DEFAULT + 'remove') {
       if (targetProp && targetProp.constructor) {
+        var _memoized$args;
+
         // use the prop constructor to find the default it should be
-        value = new targetProp.constructor(...memoized.args);
+        value = new targetProp.constructor(...((_memoized$args = memoized.args) != null ? _memoized$args : []));
       } else if (currentInstance.constructor) {
+        var _currentInstance$__r;
+
         // create a blank slate of the instance and copy the particular parameter.
         // @ts-ignore
-        const defaultClassCall = new currentInstance.constructor(...currentInstance.__r3f.memoizedProps.args);
+        const defaultClassCall = new currentInstance.constructor(...((_currentInstance$__r = currentInstance.__r3f.memoizedProps.args) != null ? _currentInstance$__r : []));
         value = defaultClassCall[targetProp]; // destory the instance
 
         if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
@@ -387,6 +369,25 @@ function invalidateInstance(instance) {
 function updateInstance(instance) {
   instance.onUpdate == null ? void 0 : instance.onUpdate(instance);
 }
+function updateCamera(camera, size) {
+  // https://github.com/pmndrs/react-three-fiber/issues/92
+  // Do not mess with the camera if it belongs to the user
+  if (!camera.manual) {
+    if (isOrthographicCamera(camera)) {
+      camera.left = size.width / -2;
+      camera.right = size.width / 2;
+      camera.top = size.height / 2;
+      camera.bottom = size.height / -2;
+    } else {
+      camera.aspect = size.width / size.height;
+    }
+
+    camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
+    // Update matrix world since the renderer is a frame late
+
+    camera.updateMatrixWorld();
+  }
+}
 
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
@@ -1159,8 +1160,8 @@ function createRenderer(roots, getEventPriority) {
   };
 }
 
+const privateKeys = ['set', 'get', 'setSize', 'setFrameloop', 'setDpr', 'events', 'invalidate', 'advance', 'performance', 'internal', 'size', 'viewport'];
 const isRenderer = def => !!(def != null && def.render);
-const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const context = /*#__PURE__*/React.createContext(null);
 
 const createStore = (invalidate, advance) => {
@@ -1367,24 +1368,7 @@ const createStore = (invalidate, advance) => {
     } = 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) {
-        if (isOrthographicCamera(camera)) {
-          camera.left = size.width / -2;
-          camera.right = size.width / 2;
-          camera.top = size.height / 2;
-          camera.bottom = size.height / -2;
-        } else {
-          camera.aspect = size.width / size.height;
-        }
-
-        camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
-        // Update matrix world since the renderer is a frame late
-
-        camera.updateMatrixWorld();
-      } // Update renderer
-
+      updateCamera(camera, size); // Update renderer
 
       gl.setPixelRatio(viewport.dpr);
       gl.setSize(size.width, size.height);
@@ -1551,12 +1535,11 @@ function useThree(selector = state => state, equalityFn) {
 
 function useFrame(callback, renderPriority = 0) {
   const store = useStore();
-  const subscribe = store.getState().internal.subscribe; // Update ref
+  const subscribe = store.getState().internal.subscribe; // Memoize ref
 
-  const ref = React.useRef(callback);
-  React.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
+  const ref = useMutableCallback(callback); // Subscribe on mount, unsubscribe on unmount
 
-  React.useLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
+  useIsomorphicLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
   return null;
 }
 /**
@@ -1924,6 +1907,7 @@ function Portal({
    *    {createPortal(...)} */
   const {
     events,
+    size,
     ...rest
   } = state;
   const previousRoot = useStore();
@@ -1935,45 +1919,79 @@ function Portal({
 
     if (injectState) {
       // Only the fields of "state" that do not differ from injectState
+      // Some props should be off-limits
+      // Otherwise filter out the props that are different and let the inject layer take precedence
       Object.keys(state).forEach(key => {
         if ( // Some props should be off-limits
-        !['size', 'viewport', 'internal', 'performance'].includes(key) && // Otherwise filter out the props that are different and let the inject layer take precedence
+        !privateKeys.includes(key) && // Otherwise filter out the props that are different and let the inject layer take precedence
         state[key] !== injectState[key]) delete intersect[key];
       });
     }
 
-    return { ...intersect,
+    let viewport = undefined;
+
+    if (injectState && size) {
+      const camera = injectState.camera; // Calculate the override viewport, if present
+
+      viewport = state.viewport.getCurrentViewport(camera, new THREE.Vector3(), size); // Update the portal camera, if it differs from the previous layer
+
+      if (camera !== state.camera) updateCamera(camera, size);
+    }
+
+    return { // The intersect consists of the previous root state
+      ...intersect,
+      // Portals have their own scene, which forms the root, a raycaster and a pointer
       scene: container,
-      previousRoot,
       raycaster,
+      pointer,
+      mouse: pointer,
+      // Their previous root is the layer before it
+      previousRoot,
+      // Events, size and viewport can be overridden by the inject layer
       events: { ...state.events,
         ...(injectState == null ? void 0 : injectState.events),
-        pointer,
-        mouse: pointer,
         ...events
       },
+      size: { ...state.size,
+        ...size
+      },
+      viewport: { ...state.viewport,
+        ...viewport
+      },
       ...rest
     };
   }, [state]);
-  const [useInjectStore] = React.useState(() => {
-    const store = create((set, get) => ({ ...inject(previousRoot.getState()),
+  const [usePortalStore] = React.useState(() => {
+    // Create a mirrored store, based on the previous root with a few overrides ...
+    new THREE.Vector3();
+    const previousState = previousRoot.getState();
+    const store = create((set, get) => ({ ...inject(previousState),
+      // Set and get refer to this root-state
       set,
       get,
+      // Layers are allowed to override events
       setEvents: events => set(state => ({ ...state,
         events: { ...state.events,
           ...events
         }
       }))
     }));
-    previousRoot.subscribe(state => useInjectStore.setState(injectState => inject(state, injectState)));
     return store;
   });
   React.useEffect(() => {
-    useInjectStore.setState(injectState => inject(previousRoot.getState(), injectState));
+    // Subscribe to previous root-state and copy changes over to the mirrored portal-state
+    const unsub = previousRoot.subscribe(prev => usePortalStore.setState(state => inject(prev, state)));
+    return () => {
+      unsub();
+      usePortalStore.destroy();
+    };
+  }, []);
+  React.useEffect(() => {
+    usePortalStore.setState(injectState => inject(previousRoot.getState(), injectState));
   }, [inject]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, reconciler.createPortal( /*#__PURE__*/React.createElement(context.Provider, {
-    value: useInjectStore
-  }, children), useInjectStore, null));
+    value: usePortalStore
+  }, children), usePortalStore, null));
 }
 
 reconciler.injectIntoDevTools({
@@ -1983,4 +2001,4 @@ reconciler.injectIntoDevTools({
 });
 const act = React.unstable_act;
 
-export { useGraph as A, Block as B, useLoader as C, ErrorBoundary as E, createRoot as a, useIsomorphicLayoutEffect as b, createEvents as c, unmountComponentAtNode as d, extend as e, context as f, createPortal as g, reconciler as h, applyProps as i, dispose as j, invalidate as k, advance as l, addEffect as m, addAfterEffect as n, omit as o, pick as p, addTail as q, render as r, getRootState as s, threeTypes as t, useMemoizedFn as u, act as v, roots as w, useStore as x, useThree as y, useFrame as z };
+export { Block as B, ErrorBoundary as E, createRoot as a, useIsomorphicLayoutEffect as b, createEvents as c, unmountComponentAtNode as d, extend as e, context as f, createPortal as g, reconciler as h, applyProps as i, dispose as j, invalidate as k, advance as l, addEffect as m, addAfterEffect as n, addTail as o, getRootState as p, act as q, render as r, roots as s, threeTypes as t, useMutableCallback as u, useStore as v, useThree as w, useFrame as x, useGraph as y, useLoader as z };

package/dist/{index-c4e0ac66.cjs.prod.js → index-e936c560.cjs.prod.js}

@@ -39,11 +39,17 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-// React currently throws a warning when using useLayoutEffect on the server.
+const isOrthographicCamera = def => def && def.isOrthographicCamera; // React currently throws a warning when using useLayoutEffect on the server.
 // To get around it, we can conditionally useEffect on the server (no-op) and
 // useLayoutEffect on the client.
+
 const isSSR = typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
 const useIsomorphicLayoutEffect = isSSR ? React__namespace.useEffect : React__namespace.useLayoutEffect;
+function useMutableCallback(fn) {
+  const ref = React__namespace.useRef(fn);
+  useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
+  return ref;
+}
 function Block({
   set
 }) {
@@ -75,11 +81,6 @@ ErrorBoundary.getDerivedStateFromError = () => ({
   error: true
 });
 
-function useMemoizedFn(fn) {
-  const fnRef = React__namespace.useRef(fn);
-  useIsomorphicLayoutEffect(() => void (fnRef.current = fn), [fn]);
-  return (...args) => fnRef.current == null ? void 0 : fnRef.current(...args);
-}
 const DEFAULT = '__default';
 const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
@@ -94,29 +95,6 @@ const getRootState = obj => {
 
   return (_r3f = obj.__r3f) == null ? void 0 : _r3f.root.getState();
 };
-/**
- * Picks or omits keys from an object
- * `omit` will filter out keys, and otherwise cherry-pick them.
- */
-
-function filterKeys(obj, omit, ...keys) {
-  const keysToSelect = new Set(keys);
-  return Object.entries(obj).reduce((acc, [key, value]) => {
-    const shouldInclude = !omit;
-    if (keysToSelect.has(key) === shouldInclude) acc[key] = value;
-    return acc;
-  }, {});
-}
-/**
- * Clones an object and cherry-picks keys.
- */
-
-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 is = {
   obj: a => a === Object(a) && !is.arr(a) && typeof a !== 'function',
@@ -342,12 +320,16 @@ function applyProps$1(instance, data) {
 
     if (value === DEFAULT + 'remove') {
       if (targetProp && targetProp.constructor) {
+        var _memoized$args;
+
         // use the prop constructor to find the default it should be
-        value = new targetProp.constructor(...memoized.args);
+        value = new targetProp.constructor(...((_memoized$args = memoized.args) != null ? _memoized$args : []));
       } else if (currentInstance.constructor) {
+        var _currentInstance$__r;
+
         // create a blank slate of the instance and copy the particular parameter.
         // @ts-ignore
-        const defaultClassCall = new currentInstance.constructor(...currentInstance.__r3f.memoizedProps.args);
+        const defaultClassCall = new currentInstance.constructor(...((_currentInstance$__r = currentInstance.__r3f.memoizedProps.args) != null ? _currentInstance$__r : []));
         value = defaultClassCall[targetProp]; // destory the instance
 
         if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
@@ -416,6 +398,25 @@ function invalidateInstance(instance) {
 function updateInstance(instance) {
   instance.onUpdate == null ? void 0 : instance.onUpdate(instance);
 }
+function updateCamera(camera, size) {
+  // https://github.com/pmndrs/react-three-fiber/issues/92
+  // Do not mess with the camera if it belongs to the user
+  if (!camera.manual) {
+    if (isOrthographicCamera(camera)) {
+      camera.left = size.width / -2;
+      camera.right = size.width / 2;
+      camera.top = size.height / 2;
+      camera.bottom = size.height / -2;
+    } else {
+      camera.aspect = size.width / size.height;
+    }
+
+    camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
+    // Update matrix world since the renderer is a frame late
+
+    camera.updateMatrixWorld();
+  }
+}
 
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
@@ -1188,8 +1189,8 @@ function createRenderer(roots, getEventPriority) {
   };
 }
 
+const privateKeys = ['set', 'get', 'setSize', 'setFrameloop', 'setDpr', 'events', 'invalidate', 'advance', 'performance', 'internal', 'size', 'viewport'];
 const isRenderer = def => !!(def != null && def.render);
-const isOrthographicCamera = def => def && def.isOrthographicCamera;
 const context = /*#__PURE__*/React__namespace.createContext(null);
 
 const createStore = (invalidate, advance) => {
@@ -1396,24 +1397,7 @@ const createStore = (invalidate, advance) => {
     } = 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) {
-        if (isOrthographicCamera(camera)) {
-          camera.left = size.width / -2;
-          camera.right = size.width / 2;
-          camera.top = size.height / 2;
-          camera.bottom = size.height / -2;
-        } else {
-          camera.aspect = size.width / size.height;
-        }
-
-        camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
-        // Update matrix world since the renderer is a frame late
-
-        camera.updateMatrixWorld();
-      } // Update renderer
-
+      updateCamera(camera, size); // Update renderer
 
       gl.setPixelRatio(viewport.dpr);
       gl.setSize(size.width, size.height);
@@ -1580,12 +1564,11 @@ function useThree(selector = state => state, equalityFn) {
 
 function useFrame(callback, renderPriority = 0) {
   const store = useStore();
-  const subscribe = store.getState().internal.subscribe; // Update ref
+  const subscribe = store.getState().internal.subscribe; // Memoize ref
 
-  const ref = React__namespace.useRef(callback);
-  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
+  const ref = useMutableCallback(callback); // Subscribe on mount, unsubscribe on unmount
 
-  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
+  useIsomorphicLayoutEffect(() => subscribe(ref, renderPriority, store), [renderPriority, subscribe, store]);
   return null;
 }
 /**
@@ -1953,6 +1936,7 @@ function Portal({
    *    {createPortal(...)} */
   const {
     events,
+    size,
     ...rest
   } = state;
   const previousRoot = useStore();
@@ -1964,45 +1948,79 @@ function Portal({
 
     if (injectState) {
       // Only the fields of "state" that do not differ from injectState
+      // Some props should be off-limits
+      // Otherwise filter out the props that are different and let the inject layer take precedence
       Object.keys(state).forEach(key => {
         if ( // Some props should be off-limits
-        !['size', 'viewport', 'internal', 'performance'].includes(key) && // Otherwise filter out the props that are different and let the inject layer take precedence
+        !privateKeys.includes(key) && // Otherwise filter out the props that are different and let the inject layer take precedence
         state[key] !== injectState[key]) delete intersect[key];
       });
     }
 
-    return { ...intersect,
+    let viewport = undefined;
+
+    if (injectState && size) {
+      const camera = injectState.camera; // Calculate the override viewport, if present
+
+      viewport = state.viewport.getCurrentViewport(camera, new THREE__namespace.Vector3(), size); // Update the portal camera, if it differs from the previous layer
+
+      if (camera !== state.camera) updateCamera(camera, size);
+    }
+
+    return { // The intersect consists of the previous root state
+      ...intersect,
+      // Portals have their own scene, which forms the root, a raycaster and a pointer
       scene: container,
-      previousRoot,
       raycaster,
+      pointer,
+      mouse: pointer,
+      // Their previous root is the layer before it
+      previousRoot,
+      // Events, size and viewport can be overridden by the inject layer
       events: { ...state.events,
         ...(injectState == null ? void 0 : injectState.events),
-        pointer,
-        mouse: pointer,
         ...events
       },
+      size: { ...state.size,
+        ...size
+      },
+      viewport: { ...state.viewport,
+        ...viewport
+      },
       ...rest
     };
   }, [state]);
-  const [useInjectStore] = React__namespace.useState(() => {
-    const store = create__default['default']((set, get) => ({ ...inject(previousRoot.getState()),
+  const [usePortalStore] = React__namespace.useState(() => {
+    // Create a mirrored store, based on the previous root with a few overrides ...
+    new THREE__namespace.Vector3();
+    const previousState = previousRoot.getState();
+    const store = create__default['default']((set, get) => ({ ...inject(previousState),
+      // Set and get refer to this root-state
       set,
       get,
+      // Layers are allowed to override events
       setEvents: events => set(state => ({ ...state,
         events: { ...state.events,
           ...events
         }
       }))
     }));
-    previousRoot.subscribe(state => useInjectStore.setState(injectState => inject(state, injectState)));
     return store;
   });
   React__namespace.useEffect(() => {
-    useInjectStore.setState(injectState => inject(previousRoot.getState(), injectState));
+    // Subscribe to previous root-state and copy changes over to the mirrored portal-state
+    const unsub = previousRoot.subscribe(prev => usePortalStore.setState(state => inject(prev, state)));
+    return () => {
+      unsub();
+      usePortalStore.destroy();
+    };
+  }, []);
+  React__namespace.useEffect(() => {
+    usePortalStore.setState(injectState => inject(previousRoot.getState(), injectState));
   }, [inject]);
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, reconciler.createPortal( /*#__PURE__*/React__namespace.createElement(context.Provider, {
-    value: useInjectStore
-  }, children), useInjectStore, null));
+    value: usePortalStore
+  }, children), usePortalStore, null));
 }
 
 reconciler.injectIntoDevTools({
@@ -2028,8 +2046,6 @@ exports.dispose = dispose;
 exports.extend = extend;
 exports.getRootState = getRootState;
 exports.invalidate = invalidate;
-exports.omit = omit;
-exports.pick = pick;
 exports.reconciler = reconciler;
 exports.render = render;
 exports.roots = roots;
@@ -2039,6 +2055,6 @@ exports.useFrame = useFrame;
 exports.useGraph = useGraph;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useLoader = useLoader;
-exports.useMemoizedFn = useMemoizedFn;
+exports.useMutableCallback = useMutableCallback;
 exports.useStore = useStore;
 exports.useThree = useThree;