@react-three/drei 9.74.11 → 9.74.13

package/src/core/useBoxProjectedEnv.js

@@ -0,0 +1,98 @@
+import * as THREE from 'three';
+import * as React from 'react';
+import { applyProps } from '@react-three/fiber';
+
+// and @0beqz https://gist.github.com/0beqz/8d51b4ae16d68021a09fb504af708fca
+
+const worldposReplace =
+/* glsl */
+`
+#if defined( USE_ENVMAP ) || defined( DISTANCE ) || defined ( USE_SHADOWMAP )
+  vec4 worldPosition = modelMatrix * vec4( transformed, 1.0 );
+  #ifdef BOX_PROJECTED_ENV_MAP
+    vWorldPosition = worldPosition.xyz;
+  #endif
+#endif
+`;
+const boxProjectDefinitions =
+/*glsl */
+`
+#ifdef BOX_PROJECTED_ENV_MAP
+  uniform vec3 envMapSize;
+  uniform vec3 envMapPosition;
+  varying vec3 vWorldPosition;
+    
+  vec3 parallaxCorrectNormal( vec3 v, vec3 cubeSize, vec3 cubePos ) {
+    vec3 nDir = normalize( v );
+    vec3 rbmax = ( .5 * cubeSize + cubePos - vWorldPosition ) / nDir;
+    vec3 rbmin = ( -.5 * cubeSize + cubePos - vWorldPosition ) / nDir;
+    vec3 rbminmax;
+    rbminmax.x = ( nDir.x > 0. ) ? rbmax.x : rbmin.x;
+    rbminmax.y = ( nDir.y > 0. ) ? rbmax.y : rbmin.y;
+    rbminmax.z = ( nDir.z > 0. ) ? rbmax.z : rbmin.z;
+    float correction = min( min( rbminmax.x, rbminmax.y ), rbminmax.z );
+    vec3 boxIntersection = vWorldPosition + nDir * correction;    
+    return boxIntersection - cubePos;
+  }
+#endif
+`; // will be inserted after "vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );"
+
+const getIBLIrradiance_patch =
+/* glsl */
+`
+#ifdef BOX_PROJECTED_ENV_MAP
+  worldNormal = parallaxCorrectNormal( worldNormal, envMapSize, envMapPosition );
+#endif
+`; // will be inserted after "reflectVec = inverseTransformDirection( reflectVec, viewMatrix );"
+
+const getIBLRadiance_patch =
+/* glsl */
+`
+#ifdef BOX_PROJECTED_ENV_MAP
+  reflectVec = parallaxCorrectNormal( reflectVec, envMapSize, envMapPosition );
+#endif
+`;
+
+function boxProjectedEnvMap(shader, envMapPosition, envMapSize) {
+  shader.defines.BOX_PROJECTED_ENV_MAP = true; // uniforms
+
+  shader.uniforms.envMapPosition = {
+    value: envMapPosition
+  };
+  shader.uniforms.envMapSize = {
+    value: envMapSize
+  }; // vertex shader
+
+  shader.vertexShader = `
+  varying vec3 vWorldPosition;
+  ${shader.vertexShader.replace('#include <worldpos_vertex>', worldposReplace)}`; // fragment shader
+
+  shader.fragmentShader = `
+    ${boxProjectDefinitions}
+    ${shader.fragmentShader.replace('#include <envmap_physical_pars_fragment>', THREE.ShaderChunk.envmap_physical_pars_fragment).replace('vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );', `vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );
+         ${getIBLIrradiance_patch}
+         `).replace('reflectVec = inverseTransformDirection( reflectVec, viewMatrix );', `reflectVec = inverseTransformDirection( reflectVec, viewMatrix );
+         ${getIBLRadiance_patch}
+        `)}`;
+}
+
+function useBoxProjectedEnv(position = new THREE.Vector3(), size = new THREE.Vector3()) {
+  const [config] = React.useState(() => ({
+    position: new THREE.Vector3(),
+    size: new THREE.Vector3()
+  }));
+  applyProps(config, {
+    position,
+    size
+  });
+  const ref = React.useRef(null);
+  const spread = React.useMemo(() => ({
+    ref,
+    onBeforeCompile: shader => boxProjectedEnvMap(shader, config.position, config.size),
+    customProgramCacheKey: () => JSON.stringify(config.position.toArray()) + JSON.stringify(config.size.toArray())
+  }), [...config.position.toArray(), ...config.size.toArray()]);
+  React.useLayoutEffect(() => void (ref.current.needsUpdate = true), [config]);
+  return spread;
+}
+
+export { useBoxProjectedEnv };

package/src/core/useCamera.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Raycaster, Camera } from 'three';
+import { useThree, applyProps } from '@react-three/fiber';
+
+function useCamera(camera, props) {
+  const pointer = useThree(state => state.pointer);
+  const [raycast] = React.useState(() => {
+    const raycaster = new Raycaster();
+    /**
+     * applyProps is an internal method of r3f and
+     * therefore requires its first arg to be an
+     * "Instance" a term used with the Reconciler
+     * so we have an expect error to mask this
+     */
+    // @ts-expect-error
+
+    if (props) applyProps(raycaster, props, {});
+    return function (_, intersects) {
+      raycaster.setFromCamera(pointer, camera instanceof Camera ? camera : camera.current);
+      const rc = this.constructor.prototype.raycast.bind(this);
+      if (rc) rc(raycaster, intersects);
+    };
+  });
+  return raycast;
+}
+
+export { useCamera };

package/src/core/useContextBridge.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+/* eslint-disable react-hooks/rules-of-hooks */
+function useContextBridge(...contexts) {
+  const cRef = React.useRef([]);
+  cRef.current = contexts.map(context => React.useContext(context));
+  return React.useMemo(() => ({
+    children
+  }) => contexts.reduceRight((acc, Context, i) => /*#__PURE__*/React.createElement(Context.Provider, {
+    value: cRef.current[i],
+    children: acc
+  }), children
+  /*
+   * done this way in reference to:
+   * https://github.com/DefinitelyTyped/DefinitelyTyped/issues/44572#issuecomment-625878049
+   * https://github.com/microsoft/TypeScript/issues/14729
+   */
+  ), []);
+}
+
+export { useContextBridge };

package/src/core/useCubeCamera.js

@@ -0,0 +1,49 @@
+import * as THREE from 'three';
+import { WebGLCubeRenderTarget, HalfFloatType } from 'three';
+import * as React from 'react';
+import { useMemo, useEffect } from 'react';
+import { useThree } from '@react-three/fiber';
+
+function useCubeCamera({
+  resolution = 256,
+  near = 0.1,
+  far = 1000,
+  envMap,
+  fog
+} = {}) {
+  const gl = useThree(({
+    gl
+  }) => gl);
+  const scene = useThree(({
+    scene
+  }) => scene);
+  const fbo = useMemo(() => {
+    const fbo = new WebGLCubeRenderTarget(resolution);
+    fbo.texture.type = HalfFloatType;
+    return fbo;
+  }, [resolution]);
+  useEffect(() => {
+    return () => {
+      fbo.dispose();
+    };
+  }, [fbo]);
+  const camera = useMemo(() => new THREE.CubeCamera(near, far, fbo), [near, far, fbo]);
+  let originalFog;
+  let originalBackground;
+  const update = React.useCallback(() => {
+    originalFog = scene.fog;
+    originalBackground = scene.background;
+    scene.background = envMap || originalBackground;
+    scene.fog = fog || originalFog;
+    camera.update(gl, scene);
+    scene.fog = originalFog;
+    scene.background = originalBackground;
+  }, [gl, scene, camera]);
+  return {
+    fbo,
+    camera,
+    update
+  };
+}
+
+export { useCubeCamera };

package/src/core/useCubeTexture.js

@@ -0,0 +1,18 @@
+import { CubeTextureLoader } from 'three';
+import { useLoader } from '@react-three/fiber';
+
+function useCubeTexture(files, {
+  path
+}) {
+  // @ts-ignore
+  const [cubeTexture] = useLoader( // @ts-ignore
+  CubeTextureLoader, [files], loader => loader.setPath(path));
+  return cubeTexture;
+}
+
+useCubeTexture.preload = (files, {
+  path
+}) => useLoader.preload( // @ts-ignore
+CubeTextureLoader, [files], loader => loader.setPath(path));
+
+export { useCubeTexture };

package/src/core/useDepthBuffer.js

@@ -0,0 +1,38 @@
+import { DepthTexture, DepthFormat, UnsignedShortType } from 'three';
+import * as React from 'react';
+import { useThree, useFrame } from '@react-three/fiber';
+import { useFBO } from './useFBO.js';
+
+function useDepthBuffer({
+  size = 256,
+  frames = Infinity
+} = {}) {
+  const dpr = useThree(state => state.viewport.dpr);
+  const {
+    width,
+    height
+  } = useThree(state => state.size);
+  const w = size || width * dpr;
+  const h = size || height * dpr;
+  const depthConfig = React.useMemo(() => {
+    const depthTexture = new DepthTexture(w, h);
+    depthTexture.format = DepthFormat;
+    depthTexture.type = UnsignedShortType;
+    return {
+      depthTexture
+    };
+  }, [w, h]);
+  let count = 0;
+  const depthFBO = useFBO(w, h, depthConfig);
+  useFrame(state => {
+    if (frames === Infinity || count < frames) {
+      state.gl.setRenderTarget(depthFBO);
+      state.gl.render(state.scene, state.camera);
+      state.gl.setRenderTarget(null);
+      count++;
+    }
+  });
+  return depthFBO.depthTexture;
+}
+
+export { useDepthBuffer };

package/src/core/useDetectGPU.js

@@ -0,0 +1,6 @@
+import { getGPUTier } from 'detect-gpu';
+import { suspend } from 'suspend-react';
+
+const useDetectGPU = props => suspend(() => getGPUTier(props), ['useDetectGPU']);
+
+export { useDetectGPU };

package/src/core/useEnvironment.js

@@ -0,0 +1,48 @@
+import { useLoader } from '@react-three/fiber';
+import { CubeReflectionMapping, EquirectangularReflectionMapping, CubeTextureLoader } from 'three';
+import { RGBELoader, EXRLoader } from 'three-stdlib';
+import { presetsObj } from '../helpers/environment-assets.js';
+
+const CUBEMAP_ROOT = 'https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/';
+
+const isArray = arr => Array.isArray(arr);
+
+function useEnvironment({
+  files = ['/px.png', '/nx.png', '/py.png', '/ny.png', '/pz.png', '/nz.png'],
+  path = '',
+  preset = undefined,
+  encoding = undefined,
+  extensions
+} = {}) {
+  var _files$split$pop;
+
+  let loader = null;
+  let isCubeMap = false;
+  let extension;
+
+  if (preset) {
+    if (!(preset in presetsObj)) throw new Error('Preset must be one of: ' + Object.keys(presetsObj).join(', '));
+    files = presetsObj[preset];
+    path = CUBEMAP_ROOT;
+  } // Everything else
+
+
+  isCubeMap = isArray(files);
+  extension = isArray(files) ? 'cube' : files.startsWith('data:application/exr') ? 'exr' : files.startsWith('data:application/hdr') ? 'hdr' : (_files$split$pop = files.split('.').pop()) == null ? void 0 : _files$split$pop.toLowerCase();
+  loader = isCubeMap ? CubeTextureLoader : extension === 'hdr' ? RGBELoader : extension === 'exr' ? EXRLoader : null;
+  if (!loader) throw new Error('useEnvironment: Unrecognized file extension: ' + files);
+  const loaderResult = useLoader( // @ts-expect-error
+  loader, isCubeMap ? [files] : files, loader => {
+    loader.setPath == null ? void 0 : loader.setPath(path);
+    if (extensions) extensions(loader);
+  });
+  const texture = isCubeMap ? // @ts-ignore
+  loaderResult[0] : loaderResult;
+  texture.mapping = isCubeMap ? CubeReflectionMapping : EquirectangularReflectionMapping;
+  const sRGBEncoding = 3001;
+  const LinearEncoding = 3000;
+  if ('colorSpace' in texture) texture.colorSpace = (encoding !== null && encoding !== void 0 ? encoding : isCubeMap) ? 'srgb' : 'srgb-linear';else texture.encoding = (encoding !== null && encoding !== void 0 ? encoding : isCubeMap) ? sRGBEncoding : LinearEncoding;
+  return texture;
+}
+
+export { useEnvironment };

package/src/core/useFBO.js

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import * as THREE from 'three';
+import { useThree } from '@react-three/fiber';
+
+// 👇 uncomment when TS version supports function overloads
+// export function useFBO(settings?: FBOSettings)
+function useFBO(
+/** Width in pixels, or settings (will render fullscreen by default) */
+width,
+/** Height in pixels */
+height,
+/**Settings */
+settings) {
+  const size = useThree(state => state.size);
+  const viewport = useThree(state => state.viewport);
+
+  const _width = typeof width === 'number' ? width : size.width * viewport.dpr;
+
+  const _height = typeof height === 'number' ? height : size.height * viewport.dpr;
+
+  const _settings = (typeof width === 'number' ? settings : width) || {};
+
+  const {
+    samples = 0,
+    depth,
+    ...targetSettings
+  } = _settings;
+  const target = React.useMemo(() => {
+    const target = new THREE.WebGLRenderTarget(_width, _height, {
+      minFilter: THREE.LinearFilter,
+      magFilter: THREE.LinearFilter,
+      type: THREE.HalfFloatType,
+      ...targetSettings
+    });
+
+    if (depth) {
+      target.depthTexture = new THREE.DepthTexture(_width, _height, THREE.FloatType);
+    }
+
+    target.samples = samples;
+    return target;
+  }, []);
+  React.useLayoutEffect(() => {
+    target.setSize(_width, _height);
+    if (samples) target.samples = samples;
+  }, [samples, target, _width, _height]);
+  React.useEffect(() => {
+    return () => target.dispose();
+  }, []);
+  return target;
+}
+
+export { useFBO };

package/src/core/useFBX.js

@@ -0,0 +1,12 @@
+import { FBXLoader } from 'three-stdlib';
+import { useLoader } from '@react-three/fiber';
+
+function useFBX(path) {
+  return useLoader(FBXLoader, path);
+}
+
+useFBX.preload = path => useLoader.preload(FBXLoader, path);
+
+useFBX.clear = input => useLoader.clear(FBXLoader, input);
+
+export { useFBX };

package/src/core/useFont.js

@@ -0,0 +1,20 @@
+import { FontLoader } from 'three-stdlib';
+import { suspend, preload, clear } from 'suspend-react';
+
+let fontLoader = null;
+
+async function loader(font) {
+  if (!fontLoader) fontLoader = new FontLoader();
+  let data = typeof font === 'string' ? await (await fetch(font)).json() : font;
+  return fontLoader.parse(data);
+}
+
+function useFont(font) {
+  return suspend(loader, [font]);
+}
+
+useFont.preload = font => preload(loader, [font]);
+
+useFont.clear = font => clear([font]);
+
+export { useFont };

package/src/core/useGLTF.js

@@ -0,0 +1,37 @@
+import { GLTFLoader, DRACOLoader, MeshoptDecoder } from 'three-stdlib';
+import { useLoader } from '@react-three/fiber';
+
+// @ts-ignore
+let dracoLoader = null;
+
+function extensions(useDraco, useMeshopt, extendLoader) {
+  return loader => {
+    if (extendLoader) {
+      extendLoader(loader);
+    }
+
+    if (useDraco) {
+      if (!dracoLoader) {
+        dracoLoader = new DRACOLoader();
+      }
+
+      dracoLoader.setDecoderPath(typeof useDraco === 'string' ? useDraco : 'https://www.gstatic.com/draco/versioned/decoders/1.5.5/');
+      loader.setDRACOLoader(dracoLoader);
+    }
+
+    if (useMeshopt) {
+      loader.setMeshoptDecoder(typeof MeshoptDecoder === 'function' ? MeshoptDecoder() : MeshoptDecoder);
+    }
+  };
+}
+
+function useGLTF(path, useDraco = true, useMeshOpt = true, extendLoader) {
+  const gltf = useLoader(GLTFLoader, path, extensions(useDraco, useMeshOpt, extendLoader));
+  return gltf;
+}
+
+useGLTF.preload = (path, useDraco = true, useMeshOpt = true, extendLoader) => useLoader.preload(GLTFLoader, path, extensions(useDraco, useMeshOpt, extendLoader));
+
+useGLTF.clear = input => useLoader.clear(GLTFLoader, input);
+
+export { useGLTF };

package/src/core/useHelper.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { useThree, useFrame } from '@react-three/fiber';
+
+function useHelper(object3D, helperConstructor, ...args) {
+  const helper = React.useRef();
+  const scene = useThree(state => state.scene);
+  React.useLayoutEffect(() => {
+    let currentHelper = undefined;
+
+    if (object3D && object3D != null && object3D.current && helperConstructor) {
+      helper.current = currentHelper = new helperConstructor(object3D.current, ...args);
+    }
+
+    if (currentHelper) {
+      scene.add(currentHelper);
+      return () => {
+        helper.current = undefined;
+        scene.remove(currentHelper);
+        currentHelper.dispose == null ? void 0 : currentHelper.dispose();
+      };
+    }
+  }, [scene, helperConstructor, object3D, ...args]);
+  useFrame(() => {
+    var _helper$current;
+
+    return void ((_helper$current = helper.current) == null ? void 0 : _helper$current.update == null ? void 0 : _helper$current.update());
+  });
+  return helper;
+}
+
+export { useHelper };

package/src/core/useIntersect.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { addEffect, addAfterEffect } from '@react-three/fiber';
+
+function useIntersect(onChange) {
+  const ref = React.useRef(null);
+  const check = React.useRef(false);
+  const temp = React.useRef(false);
+  const callback = React.useRef(onChange);
+  React.useLayoutEffect(() => void (callback.current = onChange), [onChange]);
+  React.useEffect(() => {
+    const obj = ref.current;
+
+    if (obj) {
+      // Stamp out frustum check pre-emptively
+      const unsub1 = addEffect(() => {
+        check.current = false;
+        return true;
+      }); // If the object is inside the frustum three will call onRender
+
+      const oldOnRender = obj.onBeforeRender;
+
+      obj.onBeforeRender = () => check.current = true; // Compare the check value against the temp value, if it differs set state
+
+
+      const unsub2 = addAfterEffect(() => {
+        if (check.current !== temp.current) callback.current == null ? void 0 : callback.current(temp.current = check.current);
+        return true;
+      });
+      return () => {
+        obj.onBeforeRender = oldOnRender;
+        unsub1();
+        unsub2();
+      };
+    }
+  }, []);
+  return ref;
+}
+
+export { useIntersect };

package/src/core/useKTX2.js

@@ -0,0 +1,38 @@
+import { useThree, useLoader } from '@react-three/fiber';
+import { useEffect } from 'react';
+import { KTX2Loader } from 'three-stdlib';
+import { IsObject } from './useTexture.js';
+
+const cdn = 'https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master';
+function useKTX2(input, basisPath = `${cdn}/basis/`) {
+  const gl = useThree(state => state.gl);
+  const textures = useLoader(KTX2Loader, IsObject(input) ? Object.values(input) : input, loader => {
+    loader.detectSupport(gl);
+    loader.setTranscoderPath(basisPath);
+  }); // https://github.com/mrdoob/three.js/issues/22696
+  // Upload the texture to the GPU immediately instead of waiting for the first render
+
+  useEffect(() => {
+    const array = Array.isArray(textures) ? textures : [textures];
+    array.forEach(gl.initTexture);
+  }, [gl, textures]);
+
+  if (IsObject(input)) {
+    const keys = Object.keys(input);
+    const keyed = {};
+    keys.forEach(key => Object.assign(keyed, {
+      [key]: textures[keys.indexOf(key)]
+    }));
+    return keyed;
+  } else {
+    return textures;
+  }
+}
+
+useKTX2.preload = (url, basisPath = `${cdn}/basis/`) => useLoader.preload(KTX2Loader, url, loader => {
+  loader.setTranscoderPath(basisPath);
+});
+
+useKTX2.clear = input => useLoader.clear(KTX2Loader, input);
+
+export { useKTX2 };

package/src/core/useMatcapTexture.js

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { useTexture } from './useTexture.js';
+import { suspend } from 'suspend-react';
+
+function getFormatString(format) {
+  switch (format) {
+    case 64:
+      return '-64px';
+
+    case 128:
+      return '-128px';
+
+    case 256:
+      return '-256px';
+
+    case 512:
+      return '-512px';
+
+    default:
+      return '';
+  }
+}
+
+const LIST_URL = 'https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/matcaps.json';
+const MATCAP_ROOT = 'https://rawcdn.githack.com/emmelleppi/matcaps/9b36ccaaf0a24881a39062d05566c9e92be4aa0d';
+function useMatcapTexture(id = 0, format = 1024, onLoad) {
+  const matcapList = suspend(() => fetch(LIST_URL).then(res => res.json()), ['matcapList']);
+  const DEFAULT_MATCAP = matcapList[0];
+  const numTot = React.useMemo(() => Object.keys(matcapList).length, []);
+  const fileHash = React.useMemo(() => {
+    if (typeof id === 'string') {
+      return id;
+    } else if (typeof id === 'number') {
+      return matcapList[id];
+    }
+
+    return null;
+  }, [id]);
+  const fileName = `${fileHash || DEFAULT_MATCAP}${getFormatString(format)}.png`;
+  const url = `${MATCAP_ROOT}/${format}/${fileName}`;
+  const matcapTexture = useTexture(url, onLoad);
+  return [matcapTexture, url, numTot];
+}
+
+export { useMatcapTexture };

package/src/core/useNormalTexture.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { useTexture } from './useTexture.js';
+import { RepeatWrapping, Vector2 } from 'three';
+import { suspend } from 'suspend-react';
+
+const NORMAL_ROOT = 'https://rawcdn.githack.com/pmndrs/drei-assets/7a3104997e1576f83472829815b00880d88b32fb';
+const LIST_URL = 'https://cdn.jsdelivr.net/gh/pmndrs/drei-assets@master/normals/normals.json';
+function useNormalTexture(id = 0, settings = {}, onLoad) {
+  const {
+    repeat = [1, 1],
+    anisotropy = 1,
+    offset = [0, 0]
+  } = settings;
+  const normalsList = suspend(() => fetch(LIST_URL).then(res => res.json()), ['normalsList']);
+  const numTot = React.useMemo(() => Object.keys(normalsList).length, []);
+  const DEFAULT_NORMAL = normalsList[0];
+  const imageName = normalsList[id] || DEFAULT_NORMAL;
+  const url = `${NORMAL_ROOT}/normals/${imageName}`;
+  const normalTexture = useTexture(url, onLoad);
+  React.useLayoutEffect(() => {
+    if (!normalTexture) return;
+    normalTexture.wrapS = normalTexture.wrapT = RepeatWrapping;
+    normalTexture.repeat = new Vector2(repeat[0], repeat[1]);
+    normalTexture.offset = new Vector2(offset[0], offset[1]);
+    normalTexture.anisotropy = anisotropy;
+  }, [normalTexture, anisotropy, repeat, offset]);
+  return [normalTexture, url, numTot];
+}
+
+export { useNormalTexture };

package/src/core/useProgress.js

@@ -0,0 +1,50 @@
+import { DefaultLoadingManager } from 'three';
+import create from 'zustand';
+
+let saveLastTotalLoaded = 0;
+const useProgress = create(set => {
+  DefaultLoadingManager.onStart = (item, loaded, total) => {
+    set({
+      active: true,
+      item,
+      loaded,
+      total,
+      progress: (loaded - saveLastTotalLoaded) / (total - saveLastTotalLoaded) * 100
+    });
+  };
+
+  DefaultLoadingManager.onLoad = () => {
+    set({
+      active: false
+    });
+  };
+
+  DefaultLoadingManager.onError = item => set(state => ({
+    errors: [...state.errors, item]
+  }));
+
+  DefaultLoadingManager.onProgress = (item, loaded, total) => {
+    if (loaded === total) {
+      saveLastTotalLoaded = total;
+    }
+
+    set({
+      active: true,
+      item,
+      loaded,
+      total,
+      progress: (loaded - saveLastTotalLoaded) / (total - saveLastTotalLoaded) * 100 || 100
+    });
+  };
+
+  return {
+    errors: [],
+    active: false,
+    progress: 0,
+    item: '',
+    loaded: 0,
+    total: 0
+  };
+});
+
+export { useProgress };