use-tus 0.7.3 → 0.8.1

package/README.md

@@ -86,7 +86,7 @@ const Uploader = () => {
 ### `useTus` hooks
 
 ```tsx
-const { upload, setUpload, isSuccess, isAborted, error, remove } = useTus({ autoAbort, autoStart, uploadOptions });
+const { upload, setUpload, isSuccess, isAborted, isUploading, error, remove } = useTus({ autoAbort, autoStart, uploadOptions, Upload });
 ```
 
 `useTus` is a hooks that creates an object to perform Resumable file upload.
@@ -98,9 +98,33 @@ const { upload, setUpload, isSuccess, isAborted, error, remove } = useTus({ auto
 - `autoStart` (type: `boolean | undefined`) (default: false)
   - Whether or not to start upload the file after `setUpload` function.
 
-- `uploadOptions` (type: `UploadOptions | undefined`) (default: undefined)
+- `uploadOptions` (type: `TusHooksUploadFnOptions | undefined`) (default: undefined)
   - Option to used by upload object that generated by that hooks.
-  - For detail type information of `UploadOptions`, please see [here](https://github.com/tus/tus-js-client/blob/master/lib/index.d.ts#L22).
+
+- `Upload` (type: `Upload | undefined`) (default: undefined)
+  - Option to specify customized own Upload class with this hooks.
+
+#### About `uploadOptions`
+This option extends the UploadOptions provided by `tus-js-client`, but it has been extended so that every callback can receive the upload instance as the final argument.
+
+For detail type information of `UploadOptions`, please see [here](https://github.com/tus/tus-js-client/blob/master/lib/index.d.ts#L22).
+
+e.g.
+
+```ts
+setUplaod(file, {
+  onSuccess: (upload) => {
+    console.log(upload.url)
+  },
+  onError: (error, upload) => {
+    console.log(error)
+
+    setTimeout(() => {
+      upload.start()
+    }, 1000)
+  }
+})
+```
 
 ### Returns
 - `upload` (type: `tus.Upload | undefined`)
@@ -108,7 +132,7 @@ const { upload, setUpload, isSuccess, isAborted, error, remove } = useTus({ auto
   - This value is undefined unless the `setUpload` function called.
   - For detail usage, please see [here](https://github.com/tus/tus-js-client#example)
 
-- `setUpload` (type: `(file: tus.Upload['file'], options?: UploadOptions) => void`)
+- `setUpload` (type: `(file: tus.Upload['file'], options?: TusHooksUploadFnOptions) => void`)
   - Function to create an `Upload`.
   - The property specified in `uploadOptions` will be overwritten if property of `options` are speicified.
 
@@ -118,6 +142,9 @@ const { upload, setUpload, isSuccess, isAborted, error, remove } = useTus({ auto
 - `isAborted` (type: `boolean`)
   - Whether the upload was aborted or not.
 
+- `isUploading` (type: `boolean`)
+  - Indicates if an uploading is in progress or not.
+
 - `error` (type: `Error | undefined`)
   - Error when upload fails.
 
@@ -127,7 +154,7 @@ const { upload, setUpload, isSuccess, isAborted, error, remove } = useTus({ auto
 ### `useTusStore` hooks
 
 ```tsx
-const { upload, setUpload, isSuccess, isAborted, error, remove } = useTusStore(cacheKey, { autoAbort, autoStart, uploadOptions  });
+const { upload, setUpload, isSuccess, isAborted, isUploading, error, remove } = useTusStore(cacheKey, { autoAbort, autoStart, uploadOptions, Upload  });
 ```
 
 `useTusStore` is a hooks that creates an object for resumable file upload and stores it in a context.
@@ -146,9 +173,17 @@ This hooks is useful when you want to handle uploads across pages or components.
 - `autoStart` (type: `boolean | undefined`) (default: false)
   - Whether or not to start upload the file after `setUpload` function.
 
-- `uploadOptions` (type: `UploadOptions | undefined`) (default: undefined)
+- `uploadOptions` (type: `TusHooksUploadFnOptions | undefined`) (default: undefined)
   - Option to used by upload object that generated by that hooks.
-  - For detail type information of `UploadOptions`, please see [here](https://github.com/tus/tus-js-client/blob/master/lib/index.d.ts#L22).
+  - For detail type information of `TusHooksUploadFnOptions`, please see [here](https://github.com/tus/tus-js-client/blob/master/lib/index.d.ts#L22).
+
+- `Upload` (type: `Upload | undefined`) (default: undefined)
+  - Option to specify customized own Upload class with this hooks.
+
+### Returns
+- `upload` (type: `tus.Upload | undefined`)
+  - Object to be used when performing Resumable file upload.
+  - This value is undefined unless the `setUpload` function called.
 
 ### Returns
 - `upload` (type: `tus.Upload | undefined`)
@@ -166,6 +201,9 @@ This hooks is useful when you want to handle uploads across pages or components.
 - `isAborted` (type: `boolean`)
   - Whether the upload was aborted or not.
 
+- `isUploading` (type: `boolean`)
+  - Indicates if an uploading is in progress or not.
+
 - `error` (type: `Error | undefined`)
   - Error when upload fails.
 
@@ -185,7 +223,7 @@ This hooks is useful when you want to handle uploads across pages or components.
 `TusClientProvider` is the provider that stores the `Upload` with `useTusStore` hooks.
 
 ### Props
-- `defaultOptions` (type: `(file: tus.Upload['file']) => UploadOptions | undefined`)
+- `defaultOptions` (type: `(file: tus.Upload['file']) => TusHooksUploadFnOptions | undefined`)
   - An object containing the default options used when creating a new upload. [detail](https://github.com/tus/tus-js-client/blob/master/docs/api.md#tusdefaultoptions)
 
 ### `useTusClient`

package/dist/TusClientProvider/store/tucClientActions.d.ts

@@ -1,35 +1,18 @@
-import type { Upload } from "tus-js-client";
 import { DefaultOptions } from "../types";
-export type TusClientActions = ReturnType<typeof insertUploadInstance | typeof removeUploadInstance | typeof updateSuccessUpload | typeof updateErrorUpload | typeof updateIsAbortedUpload | typeof resetClient | typeof updateDefaultOptions>;
-export declare const insertUploadInstance: (cacheKey: string, upload: Upload) => {
+import { TusTruthlyContext } from "../../types";
+export type TusClientActions = ReturnType<typeof insertUploadInstance | typeof removeUploadInstance | typeof updateUploadContext | typeof resetClient | typeof updateDefaultOptions>;
+export declare const insertUploadInstance: (cacheKey: string, state: TusTruthlyContext) => {
     readonly type: "INSERT_UPLOAD_INSTANCE";
     readonly payload: {
         readonly cacheKey: string;
-        readonly uploadState: {
-            readonly upload: Upload;
-            readonly isSuccess: false;
-            readonly isAborted: false;
-        };
+        readonly uploadState: TusTruthlyContext;
     };
 };
-export declare const updateSuccessUpload: (cacheKey: string) => {
-    readonly type: "UPDATE_SUCCESS_UPLOAD";
+export declare const updateUploadContext: (cacheKey: string, context: Partial<TusTruthlyContext>) => {
+    readonly type: "UPDATE_UPLOAD_CONTEXT";
     readonly payload: {
         readonly cacheKey: string;
-    };
-};
-export declare const updateErrorUpload: (cacheKey: string, error?: Error) => {
-    readonly type: "UPDATE_ERROR_UPLOAD";
-    readonly payload: {
-        readonly cacheKey: string;
-        readonly error: Error | undefined;
-    };
-};
-export declare const updateIsAbortedUpload: (cacheKey: string, isAborted: boolean) => {
-    readonly type: "UPDATE_IS_ABORTED_UPLOAD";
-    readonly payload: {
-        readonly cacheKey: string;
-        readonly isAborted: boolean;
+        readonly context: Partial<TusTruthlyContext>;
     };
 };
 export declare const removeUploadInstance: (cacheKey: string) => {

package/dist/TusClientProvider/store/tusClientReducer.d.ts

@@ -1,16 +1,10 @@
 import type { Reducer } from "react";
-import type { Upload } from "tus-js-client";
 import { DefaultOptions } from "../types";
 import { TusClientActions } from "./tucClientActions";
-export type UploadState = {
-    upload: Upload | undefined;
-    isSuccess: boolean;
-    isAborted: boolean;
-    error?: Error;
-};
+import { TusTruthlyContext } from "../../types";
 export type TusClientState = {
     uploads: {
-        [cacheKey: string]: UploadState | undefined;
+        [cacheKey: string]: TusTruthlyContext | undefined;
     };
     defaultOptions: DefaultOptions | undefined;
 };

package/dist/TusClientProvider/types.d.ts

@@ -1,2 +1,3 @@
-import { Upload, UploadOptions } from "tus-js-client";
-export type DefaultOptions = (file: Upload["file"]) => UploadOptions;
+import { Upload } from "tus-js-client";
+import { TusHooksUploadOptions } from "../types";
+export type DefaultOptions = (file: Upload["file"]) => TusHooksUploadOptions;

package/dist/__stories__/Basic.stories.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-export declare const Basic: () => JSX.Element;
 declare const _default: {
     title: string;
-    component: () => JSX.Element;
 };
 export default _default;
+export declare const Basic: () => JSX.Element;

package/dist/__stories__/CacheKey.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const CacheKey: () => JSX.Element;

package/dist/__stories__/DefaultOptions.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const WithDefaultOptions: () => JSX.Element;

package/dist/__tests__/createUpload.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/utils/createMock.d.ts

@@ -0,0 +1 @@
+export declare function createMock<T>(value?: unknown): T;

package/dist/__tests__/utils/getDefaultOptions.d.ts

@@ -1,2 +1,2 @@
-import { Upload } from "tus-js-client";
-export declare const getDefaultOptions: () => Upload["options"];
+import { TusHooksUploadOptions } from "../../types";
+export declare const getDefaultOptions: () => TusHooksUploadOptions;

package/dist/__tests__/utils/mock.d.ts

@@ -1,4 +1,6 @@
 /// <reference types="jest" />
+import type { Upload } from "tus-js-client";
+export declare const createUploadMock: (start: jest.Mock, abort: jest.Mock) => typeof Upload;
 export declare const createConsoleErrorMock: () => jest.SpyInstance<void, [message?: any, ...optionalParams: any[]], any>;
 export declare const insertEnvValue: (value: NodeJS.Process["env"]) => void;
-export declare const startOrResumeUploadMock: jest.SpyInstance<void, [upload: import("tus-js-client").Upload], any>;
+export declare const startOrResumeUploadMock: jest.SpyInstance<void, [upload: Upload], any>;

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var a=require("react"),_=require("tus-js-client");const P=(e,s,t)=>{const o=new _.Upload(e,s),r=o.start.bind(o),c=o.abort.bind(o),n=()=>{r(),t(!1)},u=async()=>{c(),t(!0)};return o.start=n,o.abort=u,{upload:o,originalStart:r,originalAbort:c}},D=e=>{e.findPreviousUploads().then(s=>{s.length&&e.resumeFromPreviousUpload(s[0]),e.start()})},f=(e,s,t)=>{a.useEffect(()=>{const o=async()=>{!e||!s||await s()};return()=>{t&&o()}},[t,e])},R=Object.freeze({autoAbort:!0,autoStart:!1}),v=e=>a.useMemo(()=>({...R,...e||{}}),[e]),C=Object.freeze({upload:void 0,isSuccess:!1,isAborted:!1,error:void 0,originalAbort:void 0}),I=e=>{const{autoAbort:s,autoStart:t,uploadOptions:o}=v(e),[r,c]=a.useState(C),n=a.useCallback(i=>{c(l=>({...l,...i}))},[]),u=a.useCallback((i,l={})=>{const A={...o,...l},T={...A,onSuccess:()=>{n({isSuccess:!0}),A?.onSuccess?.()},onError:p=>{n({error:p}),A?.onError?.(p)}},E=p=>{n({isAborted:p})},{upload:O,originalAbort:U}=P(i,T,E);t&&D(O),n({...C,upload:O,originalAbort:U})},[t,n,o]),S=a.useCallback(()=>{r?.originalAbort?.(),c(C)},[r]),d=a.useMemo(()=>({upload:r?.upload,isSuccess:r?.isSuccess??!1,error:r?.error,isAborted:r?.isAborted??!1,setUpload:u,remove:S}),[r,u,S]);return f(d.upload,r.originalAbort,s??!1),d},y={tusClientHasNotFounded:"No TusClient set, use TusClientProvider to set one",tusIsNotSupported:"This browser does not support uploads. Please use a modern browser instead."},N=a.createContext(void 0),h=a.createContext(void 0),m=()=>{const e=a.useContext(N);if(!e&&process.env.NODE_ENV!=="production")throw new Error(y.tusClientHasNotFounded);return a.useMemo(()=>e,[e])},L=()=>{const e=a.useContext(h);if(!e&&process.env.NODE_ENV!=="production")throw new Error(y.tusClientHasNotFounded);return a.useMemo(()=>e,[e])},M=(e,s)=>({type:"INSERT_UPLOAD_INSTANCE",payload:{cacheKey:e,uploadState:{upload:s,isSuccess:!1,isAborted:!1}}}),K=e=>({type:"UPDATE_SUCCESS_UPLOAD",payload:{cacheKey:e}}),g=(e,s)=>({type:"UPDATE_ERROR_UPLOAD",payload:{cacheKey:e,error:s}}),w=(e,s)=>({type:"UPDATE_IS_ABORTED_UPLOAD",payload:{cacheKey:e,isAborted:s}}),x=e=>({type:"REMOVE_UPLOAD_INSTANCE",payload:{cacheKey:e}}),F=e=>({type:"UPDATE_DEFAULT_OPTIONS",payload:{defaultOptions:e}}),k=(e,s)=>{const{autoAbort:t,autoStart:o,uploadOptions:r}=v(s),{defaultOptions:c,uploads:n}=m(),u=L(),S=a.useCallback((A,T={})=>{const E={...c?.(A),...r,...T},O={...E,onSuccess:()=>{u(K(e)),E?.onSuccess?.()},onError:b=>{u(g(e,b)),E?.onError?.(b)}},U=b=>{u(w(e,b))},{upload:p}=P(A,O,U);o&&D(p),u(M(e,p))},[o,e,c,u,r]),d=a.useMemo(()=>n[e],[e,n]),i=a.useCallback(()=>{d?.upload?.abort(),u(x(e))},[d,u,e]),l=a.useMemo(()=>({upload:d?.upload,isSuccess:d?.isSuccess??!1,error:d?.error,isAborted:d?.isAborted??!1,setUpload:S,remove:i}),[d,S,i]);return f(l.upload,l.upload?.abort,t??!1),l},V=(e,s)=>{switch(s.type){case"INSERT_UPLOAD_INSTANCE":{const{cacheKey:t,uploadState:o}=s.payload;return{...e,uploads:{...e.uploads,[t]:o}}}case"UPDATE_SUCCESS_UPLOAD":{const{cacheKey:t}=s.payload,o=e.uploads[t];return o?{...e,uploads:{...e.uploads,[t]:{...o||{},isSuccess:!0}}}:e}case"UPDATE_ERROR_UPLOAD":{const{cacheKey:t,error:o}=s.payload,r=e.uploads[t];return r?{...e,uploads:{...e.uploads,[t]:{...r,error:o}}}:e}case"UPDATE_IS_ABORTED_UPLOAD":{const{cacheKey:t,isAborted:o}=s.payload,r=e.uploads[t];return r?{...e,uploads:{...e.uploads,[t]:{...r,isAborted:o}}}:e}case"REMOVE_UPLOAD_INSTANCE":{const{cacheKey:t}=s.payload,o=e.uploads;return delete o[t],{...e,uploads:o}}case"UPDATE_DEFAULT_OPTIONS":{const{defaultOptions:t}=s.payload;return{...e,defaultOptions:t}}default:return e}},j={uploads:{},defaultOptions:void 0},H=({defaultOptions:e,children:s})=>{const[t,o]=a.useReducer(V,{...j,defaultOptions:e});a.useEffect(()=>{_.isSupported||process.env.NODE_ENV==="production"||console.error(y.tusIsNotSupported)},[]),a.useEffect(()=>{t.defaultOptions!==e&&o(F(e))},[e,t.defaultOptions]);const r=a.createElement(h.Provider,{value:o},s);return a.createElement(N.Provider,{value:t},r)};exports.TusClientProvider=H,exports.useTus=I,exports.useTusStore=k;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("react"),h=require("tus-js-client");const V=Object.freeze({autoAbort:!0,autoStart:!1,uploadOptions:void 0,Upload:h.Upload}),D=o=>({...V,...o}),m=({upload:o,abort:t,autoAbort:e})=>{r.useEffect(()=>{const s=async()=>{!o||!t||await t()};return()=>{e&&s()}},[e,o])},q=(o,t,e)=>{let s=o[e];const a=Object.getOwnPropertyDescriptor(o,e);Object.defineProperty(o,e,{get(){return a?.get?.()??s},set(n){a?.set?a.set.call(o,n):s=n,t(this)}})},I=({Upload:o,file:t,uploadOptions:e,uploadFnOptions:s,onChange:a,onStart:n,onAbort:d})=>{const u=new o(t,e),i=u.start.bind(u),l=u.abort.bind(u),U=()=>{i(),n()},E=async()=>{l(),d()};return u.start=U,u.abort=E,q(u,a,"url"),Object.entries(s).forEach(([A,p])=>{if(typeof p!="function")return;const c=(...O)=>p(...O,u);u.options[A]=c}),{upload:u,originalStart:i,originalAbort:l}};function R(o){const t=Object.entries(o).reduce((s,[a,n])=>({...s,[a]:typeof n!="function"?n:void 0}),{}),e=Object.entries(o).reduce((s,[a,n])=>({...s,[a]:typeof n=="function"?n:void 0}),{});return{uploadOptions:t,uploadFnOptions:e}}const F=o=>{o.findPreviousUploads().then(t=>{t.length&&o.resumeFromPreviousUpload(t[0]),o.start()})},w=Object.freeze({upload:void 0,isSuccess:!1,isAborted:!1,isUploading:!1,error:void 0}),z=(o={})=>{const{autoAbort:t,autoStart:e,uploadOptions:s,Upload:a}=D(o),[n,d]=r.useState(w),[u,i]=r.useState({originalAbort:void 0}),l=p=>{d(c=>c.upload===void 0?c:{...c,...p})},U=r.useCallback((p,c={})=>{const O={...s,...c};function T(){l({isSuccess:!0,isUploading:!1}),O?.onSuccess?.(b)}const v={...O,onSuccess:T,onError:f=>{l({error:f,isUploading:!1}),O?.onError?.(f,b)}},g=f=>{d(K=>({...K,upload:f}))},y=()=>{l({isUploading:!0,isAborted:!1})},N=()=>{l({isUploading:!1,isAborted:!0})},{uploadOptions:_,uploadFnOptions:S}=R(v),{upload:b,originalAbort:H}=I({Upload:a,file:p,uploadOptions:_,uploadFnOptions:S,onChange:g,onStart:y,onAbort:N});e&&F(b),d({upload:b,error:void 0,isSuccess:!1,isAborted:!1,isUploading:!1}),i({originalAbort:H})},[a,e,s]),E=r.useCallback(()=>{u?.originalAbort?.(),d(w),i({originalAbort:void 0})},[u]),A={...n,setUpload:U,remove:E};return m({upload:A.upload,abort:u.originalAbort,autoAbort:t??!1}),A},P={tusClientHasNotFounded:"No TusClient set, use TusClientProvider to set one",tusIsNotSupported:"This browser does not support uploads. Please use a modern browser instead."},x=r.createContext(void 0),L=r.createContext(void 0),k=()=>{const o=r.useContext(x);if(!o&&process.env.NODE_ENV!=="production")throw new Error(P.tusClientHasNotFounded);return r.useMemo(()=>o,[o])},j=()=>{const o=r.useContext(L);if(!o&&process.env.NODE_ENV!=="production")throw new Error(P.tusClientHasNotFounded);return r.useMemo(()=>o,[o])},X=(o,t)=>({type:"INSERT_UPLOAD_INSTANCE",payload:{cacheKey:o,uploadState:t}}),C=(o,t)=>({type:"UPDATE_UPLOAD_CONTEXT",payload:{cacheKey:o,context:t}}),M=o=>({type:"REMOVE_UPLOAD_INSTANCE",payload:{cacheKey:o}}),G=()=>({type:"RESET_CLIENT"}),J=o=>({type:"UPDATE_DEFAULT_OPTIONS",payload:{defaultOptions:o}}),B=(o,t={})=>{const{autoAbort:e,autoStart:s,uploadOptions:a,Upload:n}=D(t),{defaultOptions:d,uploads:u}=k(),i=j(),l=r.useCallback((p,c={})=>{const O={...d?.(p),...a,...c},T={...O,onSuccess:()=>{i(C(o,{isSuccess:!0,isUploading:!1})),O?.onSuccess?.(S)},onError:b=>{i(C(o,{error:b,isUploading:!1})),O?.onError?.(b,S)}},v=b=>{i(C(o,{upload:b}))},g=()=>{i(C(o,{isAborted:!1,isUploading:!0}))},y=()=>{i(C(o,{isAborted:!0,isUploading:!1}))},{uploadOptions:N,uploadFnOptions:_}=R(T),{upload:S}=I({Upload:n,file:p,uploadOptions:N,uploadFnOptions:_,onChange:v,onStart:g,onAbort:y});s&&F(S),i(X(o,{upload:S,error:void 0,isSuccess:!1,isAborted:!1,isUploading:!1}))},[n,s,o,d,a,i]),U=r.useMemo(()=>u[o],[o,u]),E=r.useCallback(()=>{U?.upload?.abort(),i(M(o))},[U,i,o]),A=U?{...U,setUpload:l,remove:E}:{upload:void 0,error:void 0,isSuccess:!1,isAborted:!1,isUploading:!1,setUpload:l,remove:E};return m({upload:A.upload,abort:A.upload?.abort,autoAbort:e??!1}),A},Q=()=>{const o=k(),t=j(),e=o.uploads,s=r.useCallback(n=>{t(M(n))},[t]),a=r.useCallback(()=>t(G()),[t]);return{state:e,removeUpload:s,reset:a}},W=(o,t)=>{switch(t.type){case"INSERT_UPLOAD_INSTANCE":{const{cacheKey:e,uploadState:s}=t.payload;return{...o,uploads:{...o.uploads,[e]:s}}}case"UPDATE_UPLOAD_CONTEXT":{const{cacheKey:e,context:s}=t.payload,a=o.uploads[e];return a?{...o,uploads:{...o.uploads,[e]:{...a,...s}}}:o}case"REMOVE_UPLOAD_INSTANCE":{const{cacheKey:e}=t.payload,s=o.uploads;return delete s[e],{...o,uploads:s}}case"UPDATE_DEFAULT_OPTIONS":{const{defaultOptions:e}=t.payload;return{...o,defaultOptions:e}}case"RESET_CLIENT":return{...o,uploads:{}};default:return o}},Y={uploads:{},defaultOptions:void 0},Z=({defaultOptions:o,children:t})=>{const[e,s]=r.useReducer(W,{...Y,defaultOptions:o});r.useEffect(()=>{h.isSupported||process.env.NODE_ENV==="production"||console.error(P.tusIsNotSupported)},[]),r.useEffect(()=>{e.defaultOptions!==o&&s(J(o))},[o,e.defaultOptions]);const a=r.createElement(L.Provider,{value:s},t);return r.createElement(x.Provider,{value:e},a)};exports.TusClientProvider=Z,exports.useTus=z,exports.useTusClient=Q,exports.useTusStore=B;

package/dist/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./useTus";
+export * from "./useTusStore";
+export * from "./useTusClient";
 export * from "./TusClientProvider";
-export type { Upload, UploadOptions, UrlStorage, PreviousUpload, FileReader, FileSource, SliceResult, HttpStack, HttpRequest, HttpResponse, } from "tus-js-client";
+export type { TusHooksResult, TusHooksOptions, TusHooksUploadFnOptions, TusHooksUploadOptions, } from "./types";

package/dist/index.esm.js

@@ -1 +1 @@
-import{useEffect as _,useMemo as O,useState as w,useCallback as T,createContext as N,useContext as f,useReducer as F,createElement as h}from"react";import{Upload as x,isSupported as M}from"tus-js-client";const R=(o,s,t)=>{const e=new x(o,s),r=e.start.bind(e),A=e.abort.bind(e),l=()=>{r(),t(!1)},S=async()=>{A(),t(!0)};return e.start=l,e.abort=S,{upload:e,originalStart:r,originalAbort:A}},I=o=>{o.findPreviousUploads().then(s=>{s.length&&o.resumeFromPreviousUpload(s[0]),o.start()})},m=(o,s,t)=>{_(()=>{const e=async()=>{!o||!s||await s()};return()=>{t&&e()}},[t,o])},V=Object.freeze({autoAbort:!0,autoStart:!1}),L=o=>O(()=>({...V,...o||{}}),[o]),D=Object.freeze({upload:void 0,isSuccess:!1,isAborted:!1,error:void 0,originalAbort:void 0}),H=o=>{const{autoAbort:s,autoStart:t,uploadOptions:e}=L(o),[r,A]=w(D),l=T(a=>{A(i=>({...i,...a}))},[]),S=T((a,i={})=>{const u={...e,...i},d={...u,onSuccess:()=>{var p;l({isSuccess:!0}),(p=u==null?void 0:u.onSuccess)==null||p.call(u)},onError:p=>{var b;l({error:p}),(b=u==null?void 0:u.onError)==null||b.call(u,p)}},E=p=>{l({isAborted:p})},{upload:c,originalAbort:y}=R(a,d,E);t&&I(c),l({...D,upload:c,originalAbort:y})},[t,l,e]),n=T(()=>{var a;(a=r==null?void 0:r.originalAbort)==null||a.call(r),A(D)},[r]),U=O(()=>{var a,i;return{upload:r==null?void 0:r.upload,isSuccess:(a=r==null?void 0:r.isSuccess)!=null?a:!1,error:r==null?void 0:r.error,isAborted:(i=r==null?void 0:r.isAborted)!=null?i:!1,setUpload:S,remove:n}},[r,S,n]);return m(U.upload,r.originalAbort,s!=null?s:!1),U},P={tusClientHasNotFounded:"No TusClient set, use TusClientProvider to set one",tusIsNotSupported:"This browser does not support uploads. Please use a modern browser instead."},K=N(void 0),g=N(void 0),j=()=>{const o=f(K);if(!o&&process.env.NODE_ENV!=="production")throw new Error(P.tusClientHasNotFounded);return O(()=>o,[o])},z=()=>{const o=f(g);if(!o&&process.env.NODE_ENV!=="production")throw new Error(P.tusClientHasNotFounded);return O(()=>o,[o])},B=(o,s)=>({type:"INSERT_UPLOAD_INSTANCE",payload:{cacheKey:o,uploadState:{upload:s,isSuccess:!1,isAborted:!1}}}),k=o=>({type:"UPDATE_SUCCESS_UPLOAD",payload:{cacheKey:o}}),G=(o,s)=>({type:"UPDATE_ERROR_UPLOAD",payload:{cacheKey:o,error:s}}),$=(o,s)=>({type:"UPDATE_IS_ABORTED_UPLOAD",payload:{cacheKey:o,isAborted:s}}),q=o=>({type:"REMOVE_UPLOAD_INSTANCE",payload:{cacheKey:o}}),J=o=>({type:"UPDATE_DEFAULT_OPTIONS",payload:{defaultOptions:o}}),Q=(o,s)=>{var t;const{autoAbort:e,autoStart:r,uploadOptions:A}=L(s),{defaultOptions:l,uploads:S}=j(),n=z(),U=T((d,E={})=>{const c={...l==null?void 0:l(d),...A,...E},y={...c,onSuccess:()=>{var v;n(k(o)),(v=c==null?void 0:c.onSuccess)==null||v.call(c)},onError:v=>{var C;n(G(o,v)),(C=c==null?void 0:c.onError)==null||C.call(c,v)}},p=v=>{n($(o,v))},{upload:b}=R(d,y,p);r&&I(b),n(B(o,b))},[r,o,l,n,A]),a=O(()=>S[o],[o,S]),i=T(()=>{var d;(d=a==null?void 0:a.upload)==null||d.abort(),n(q(o))},[a,n,o]),u=O(()=>{var d,E;return{upload:a==null?void 0:a.upload,isSuccess:(d=a==null?void 0:a.isSuccess)!=null?d:!1,error:a==null?void 0:a.error,isAborted:(E=a==null?void 0:a.isAborted)!=null?E:!1,setUpload:U,remove:i}},[a,U,i]);return m(u.upload,(t=u.upload)==null?void 0:t.abort,e!=null?e:!1),u},W=(o,s)=>{switch(s.type){case"INSERT_UPLOAD_INSTANCE":{const{cacheKey:t,uploadState:e}=s.payload;return{...o,uploads:{...o.uploads,[t]:e}}}case"UPDATE_SUCCESS_UPLOAD":{const{cacheKey:t}=s.payload,e=o.uploads[t];return e?{...o,uploads:{...o.uploads,[t]:{...e||{},isSuccess:!0}}}:o}case"UPDATE_ERROR_UPLOAD":{const{cacheKey:t,error:e}=s.payload,r=o.uploads[t];return r?{...o,uploads:{...o.uploads,[t]:{...r,error:e}}}:o}case"UPDATE_IS_ABORTED_UPLOAD":{const{cacheKey:t,isAborted:e}=s.payload,r=o.uploads[t];return r?{...o,uploads:{...o.uploads,[t]:{...r,isAborted:e}}}:o}case"REMOVE_UPLOAD_INSTANCE":{const{cacheKey:t}=s.payload,e=o.uploads;return delete e[t],{...o,uploads:e}}case"UPDATE_DEFAULT_OPTIONS":{const{defaultOptions:t}=s.payload;return{...o,defaultOptions:t}}default:return o}},X={uploads:{},defaultOptions:void 0},Y=({defaultOptions:o,children:s})=>{const[t,e]=F(W,{...X,defaultOptions:o});_(()=>{M||process.env.NODE_ENV==="production"||console.error(P.tusIsNotSupported)},[]),_(()=>{t.defaultOptions!==o&&e(J(o))},[o,t.defaultOptions]);const r=h(g.Provider,{value:e},s);return h(K.Provider,{value:t},r)};export{Y as TusClientProvider,H as useTus,Q as useTusStore};
+import{useEffect as D,useState as R,useCallback as T,createContext as F,useContext as w,useMemo as m,useReducer as B,createElement as L}from"react";import{Upload as J,isSupported as Q}from"tus-js-client";const W=Object.freeze({autoAbort:!0,autoStart:!1,uploadOptions:void 0,Upload:J}),x=o=>({...W,...o}),j=({upload:o,abort:t,autoAbort:e})=>{D(()=>{const s=async()=>{!o||!t||await t()};return()=>{e&&s()}},[e,o])},Y=(o,t,e)=>{let s=o[e];const n=Object.getOwnPropertyDescriptor(o,e);Object.defineProperty(o,e,{get(){var r,d;return(d=(r=n==null?void 0:n.get)==null?void 0:r.call(n))!=null?d:s},set(r){n!=null&&n.set?n.set.call(o,r):s=r,t(this)}})},K=({Upload:o,file:t,uploadOptions:e,uploadFnOptions:s,onChange:n,onStart:r,onAbort:d})=>{const a=new o(t,e),E=a.start.bind(a),l=a.abort.bind(a),S=()=>{E(),r()},O=async()=>{l(),d()};return a.start=S,a.abort=O,Y(a,n,"url"),Object.entries(s).forEach(([A,u])=>{if(typeof u!="function")return;const i=(...p)=>u(...p,a);a.options[A]=i}),{upload:a,originalStart:E,originalAbort:l}};function H(o){const t=Object.entries(o).reduce((s,[n,r])=>({...s,[n]:typeof r!="function"?r:void 0}),{}),e=Object.entries(o).reduce((s,[n,r])=>({...s,[n]:typeof r=="function"?r:void 0}),{});return{uploadOptions:t,uploadFnOptions:e}}const V=o=>{o.findPreviousUploads().then(t=>{t.length&&o.resumeFromPreviousUpload(t[0]),o.start()})},k=Object.freeze({upload:void 0,isSuccess:!1,isAborted:!1,isUploading:!1,error:void 0}),Z=(o={})=>{const{autoAbort:t,autoStart:e,uploadOptions:s,Upload:n}=x(o),[r,d]=R(k),[a,E]=R({originalAbort:void 0}),l=u=>{d(i=>i.upload===void 0?i:{...i,...u})},S=T((u,i={})=>{const p={...s,...i};function v(){var c;l({isSuccess:!0,isUploading:!1}),(c=p==null?void 0:p.onSuccess)==null||c.call(p,b)}const g={...p,onSuccess:v,onError:c=>{var C;l({error:c,isUploading:!1}),(C=p==null?void 0:p.onError)==null||C.call(p,c,b)}},y=c=>{d(C=>({...C,upload:c}))},N=()=>{l({isUploading:!0,isAborted:!1})},_=()=>{l({isUploading:!1,isAborted:!0})},{uploadOptions:h,uploadFnOptions:P}=H(g),{upload:b,originalAbort:U}=K({Upload:n,file:u,uploadOptions:h,uploadFnOptions:P,onChange:y,onStart:N,onAbort:_});e&&V(b),d({upload:b,error:void 0,isSuccess:!1,isAborted:!1,isUploading:!1}),E({originalAbort:U})},[n,e,s]),O=T(()=>{var u;(u=a==null?void 0:a.originalAbort)==null||u.call(a),d(k),E({originalAbort:void 0})},[a]),A={...r,setUpload:S,remove:O};return j({upload:A.upload,abort:a.originalAbort,autoAbort:t!=null?t:!1}),A},I={tusClientHasNotFounded:"No TusClient set, use TusClientProvider to set one",tusIsNotSupported:"This browser does not support uploads. Please use a modern browser instead."},M=F(void 0),z=F(void 0),X=()=>{const o=w(M);if(!o&&process.env.NODE_ENV!=="production")throw new Error(I.tusClientHasNotFounded);return m(()=>o,[o])},G=()=>{const o=w(z);if(!o&&process.env.NODE_ENV!=="production")throw new Error(I.tusClientHasNotFounded);return m(()=>o,[o])},$=(o,t)=>({type:"INSERT_UPLOAD_INSTANCE",payload:{cacheKey:o,uploadState:t}}),f=(o,t)=>({type:"UPDATE_UPLOAD_CONTEXT",payload:{cacheKey:o,context:t}}),q=o=>({type:"REMOVE_UPLOAD_INSTANCE",payload:{cacheKey:o}}),oo=()=>({type:"RESET_CLIENT"}),to=o=>({type:"UPDATE_DEFAULT_OPTIONS",payload:{defaultOptions:o}}),eo=(o,t={})=>{var e;const{autoAbort:s,autoStart:n,uploadOptions:r,Upload:d}=x(t),{defaultOptions:a,uploads:E}=X(),l=G(),S=T((i,p={})=>{const v={...a==null?void 0:a(i),...r,...p},g={...v,onSuccess:()=>{var U;l(f(o,{isSuccess:!0,isUploading:!1})),(U=v==null?void 0:v.onSuccess)==null||U.call(v,b)},onError:U=>{var c;l(f(o,{error:U,isUploading:!1})),(c=v==null?void 0:v.onError)==null||c.call(v,U,b)}},y=U=>{l(f(o,{upload:U}))},N=()=>{l(f(o,{isAborted:!1,isUploading:!0}))},_=()=>{l(f(o,{isAborted:!0,isUploading:!1}))},{uploadOptions:h,uploadFnOptions:P}=H(g),{upload:b}=K({Upload:d,file:i,uploadOptions:h,uploadFnOptions:P,onChange:y,onStart:N,onAbort:_});n&&V(b),l($(o,{upload:b,error:void 0,isSuccess:!1,isAborted:!1,isUploading:!1}))},[d,n,o,a,r,l]),O=m(()=>E[o],[o,E]),A=T(()=>{var i;(i=O==null?void 0:O.upload)==null||i.abort(),l(q(o))},[O,l,o]),u=O?{...O,setUpload:S,remove:A}:{upload:void 0,error:void 0,isSuccess:!1,isAborted:!1,isUploading:!1,setUpload:S,remove:A};return j({upload:u.upload,abort:(e=u.upload)==null?void 0:e.abort,autoAbort:s!=null?s:!1}),u},so=()=>{const o=X(),t=G(),e=o.uploads,s=T(r=>{t(q(r))},[t]),n=T(()=>t(oo()),[t]);return{state:e,removeUpload:s,reset:n}},no=(o,t)=>{switch(t.type){case"INSERT_UPLOAD_INSTANCE":{const{cacheKey:e,uploadState:s}=t.payload;return{...o,uploads:{...o.uploads,[e]:s}}}case"UPDATE_UPLOAD_CONTEXT":{const{cacheKey:e,context:s}=t.payload,n=o.uploads[e];return n?{...o,uploads:{...o.uploads,[e]:{...n,...s}}}:o}case"REMOVE_UPLOAD_INSTANCE":{const{cacheKey:e}=t.payload,s=o.uploads;return delete s[e],{...o,uploads:s}}case"UPDATE_DEFAULT_OPTIONS":{const{defaultOptions:e}=t.payload;return{...o,defaultOptions:e}}case"RESET_CLIENT":return{...o,uploads:{}};default:return o}},ro={uploads:{},defaultOptions:void 0},ao=({defaultOptions:o,children:t})=>{const[e,s]=B(no,{...ro,defaultOptions:o});D(()=>{Q||process.env.NODE_ENV==="production"||console.error(I.tusIsNotSupported)},[]),D(()=>{e.defaultOptions!==o&&s(to(o))},[o,e.defaultOptions]);const n=L(z.Provider,{value:s},t);return L(M.Provider,{value:e},n)};export{ao as TusClientProvider,Z as useTus,so as useTusClient,eo as useTusStore};

package/dist/index.js

@@ -1,23 +1,93 @@
-import { useEffect, useMemo, useState, useCallback, createContext, useContext, useReducer, createElement } from 'react';
+import { useEffect, useState, useCallback, createContext, useContext, useMemo, useReducer, createElement } from 'react';
 import { Upload, isSupported } from 'tus-js-client';
 
-const createUpload = (file, options, dispatchIsAborted) => {
-    const upload = new Upload(file, options);
+const defaultUseTusOptionsValue = Object.freeze({
+    autoAbort: true,
+    autoStart: false,
+    uploadOptions: undefined,
+    Upload,
+});
+const mergeUseTusOptions = (options) => ({
+    ...defaultUseTusOptionsValue,
+    ...options,
+});
+
+const useAutoAbort = ({ upload, abort, autoAbort, }) => {
+    useEffect(() => {
+        const abortUploading = async () => {
+            if (!upload || !abort) {
+                return;
+            }
+            await abort();
+        };
+        return () => {
+            if (!autoAbort) {
+                return;
+            }
+            abortUploading();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [autoAbort, upload]);
+};
+
+const bindOnChange = (upload, onChange, key) => {
+    let property = upload[key];
+    const originalUrlDescriptor = Object.getOwnPropertyDescriptor(upload, key);
+    Object.defineProperty(upload, key, {
+        get() {
+            return originalUrlDescriptor?.get?.() ?? property;
+        },
+        set(value) {
+            if (originalUrlDescriptor?.set) {
+                originalUrlDescriptor.set.call(upload, value);
+            }
+            else {
+                property = value;
+            }
+            onChange(this);
+        },
+    });
+};
+const createUpload = ({ Upload, file, uploadOptions, uploadFnOptions, onChange, onStart, onAbort, }) => {
+    const upload = new Upload(file, uploadOptions);
     const originalStart = upload.start.bind(upload);
     const originalAbort = upload.abort.bind(upload);
     const start = () => {
         originalStart();
-        dispatchIsAborted(false);
+        onStart();
     };
     const abort = async () => {
         originalAbort();
-        dispatchIsAborted(true);
+        onAbort();
     };
     upload.start = start;
     upload.abort = abort;
+    bindOnChange(upload, onChange, "url");
+    Object.entries(uploadFnOptions).forEach(([key, value]) => {
+        if (typeof value !== "function") {
+            return;
+        }
+        const bindedFn = (...args) => value(...args, upload);
+        upload.options[key] = bindedFn;
+    });
     return { upload, originalStart, originalAbort };
 };
 
+function splitTusHooksUploadOptions(options) {
+    const uploadOptions = Object.entries(options).reduce((acc, [key, value]) => ({
+        ...acc,
+        [key]: typeof value !== "function" ? value : undefined,
+    }), {});
+    const uploadFnOptions = Object.entries(options).reduce((acc, [key, value]) => ({
+        ...acc,
+        [key]: typeof value === "function" ? value : undefined,
+    }), {});
+    return {
+        uploadOptions,
+        uploadFnOptions,
+    };
+}
+
 const startOrResumeUpload = (upload) => {
     upload.findPreviousUploads().then((previousUploads) => {
         if (previousUploads.length) {
@@ -27,91 +97,97 @@ const startOrResumeUpload = (upload) => {
     });
 };
 
-const useAutoAbort = (upload, abort, autoAbort) => {
-    useEffect(() => {
-        const abortUploading = async () => {
-            if (!upload || !abort) {
-                return;
-            }
-            await abort();
-        };
-        return () => {
-            if (!autoAbort) {
-                return;
-            }
-            abortUploading();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [autoAbort, upload]);
-};
-
-const defaultUseTusOptionsValue = Object.freeze({
-    autoAbort: true,
-    autoStart: false,
-});
-const useMergeTusOptions = (options) => useMemo(() => ({
-    ...defaultUseTusOptionsValue,
-    ...(options || {}),
-}), [options]);
-
-const initialUseTusState = Object.freeze({
+const initialTusContext = Object.freeze({
     upload: undefined,
     isSuccess: false,
     isAborted: false,
+    isUploading: false,
     error: undefined,
-    originalAbort: undefined,
 });
-const useTus = (baseOption) => {
-    const { autoAbort, autoStart, uploadOptions } = useMergeTusOptions(baseOption);
-    const [tusState, setTusState] = useState(initialUseTusState);
-    const updateTusState = useCallback((newOptions) => {
-        setTusState((tus) => ({
-            ...tus,
-            ...newOptions,
-        }));
-    }, []);
+const useTus = (baseOption = {}) => {
+    const { autoAbort, autoStart, uploadOptions: baseUploadOptions, Upload, } = mergeUseTusOptions(baseOption);
+    const [tusContext, setTusContext] = useState(initialTusContext);
+    const [tusInternalState, setTusInternalState] = useState({
+        originalAbort: undefined,
+    });
+    const updateTusTruthlyContext = (context) => {
+        setTusContext((prev) => {
+            if (prev.upload === undefined) {
+                return prev; // TODO: Add appriopriate error handling
+            }
+            return { ...prev, ...context };
+        });
+    };
     const setUpload = useCallback((file, options = {}) => {
         const targetOptions = {
-            ...uploadOptions,
+            ...baseUploadOptions,
             ...options,
         };
-        const onSuccess = () => {
-            updateTusState({ isSuccess: true });
-            targetOptions?.onSuccess?.();
-        };
+        function onSuccess() {
+            updateTusTruthlyContext({ isSuccess: true, isUploading: false });
+            targetOptions?.onSuccess?.(upload);
+        }
         const onError = (error) => {
-            updateTusState({ error });
-            targetOptions?.onError?.(error);
+            updateTusTruthlyContext({
+                error,
+                isUploading: false,
+            });
+            targetOptions?.onError?.(error, upload);
         };
         const mergedUploadOptions = {
             ...targetOptions,
             onSuccess,
             onError,
         };
-        const dispatchIsAborted = (isAborted) => {
-            updateTusState({ isAborted });
+        const onChange = (newUpload) => {
+            // For re-rendering when `upload` object is changed.
+            setTusContext((prev) => ({ ...prev, upload: newUpload }));
+        };
+        const onStart = () => {
+            updateTusTruthlyContext({ isUploading: true, isAborted: false });
         };
-        const { upload, originalAbort } = createUpload(file, mergedUploadOptions, dispatchIsAborted);
+        const onAbort = () => {
+            updateTusTruthlyContext({ isUploading: false, isAborted: true });
+        };
+        const { uploadOptions, uploadFnOptions } = splitTusHooksUploadOptions(mergedUploadOptions);
+        const { upload, originalAbort } = createUpload({
+            Upload,
+            file,
+            uploadOptions,
+            uploadFnOptions,
+            onChange,
+            onStart,
+            onAbort,
+        });
         if (autoStart) {
             startOrResumeUpload(upload);
         }
-        updateTusState({ ...initialUseTusState, upload, originalAbort });
-    }, [autoStart, updateTusState, uploadOptions]);
+        setTusContext({
+            upload,
+            error: undefined,
+            isSuccess: false,
+            isAborted: false,
+            isUploading: false,
+        });
+        setTusInternalState({ originalAbort });
+    }, [Upload, autoStart, baseUploadOptions]);
     const remove = useCallback(() => {
         // `upload.abort` function will set `isAborted` state.
         // So call the original function for restore state.
-        tusState?.originalAbort?.();
-        setTusState(initialUseTusState);
-    }, [tusState]);
-    const tusResult = useMemo(() => ({
-        upload: tusState?.upload,
-        isSuccess: tusState?.isSuccess ?? false,
-        error: tusState?.error,
-        isAborted: tusState?.isAborted ?? false,
+        tusInternalState?.originalAbort?.();
+        setTusContext(initialTusContext);
+        setTusInternalState({ originalAbort: undefined });
+    }, [tusInternalState]);
+    const tusResult = {
+        ...tusContext,
         setUpload,
         remove,
-    }), [tusState, setUpload, remove]);
-    useAutoAbort(tusResult.upload, tusState.originalAbort, autoAbort ?? false);
+    };
+    useAutoAbort({
+        upload: tusResult.upload,
+        abort: tusInternalState.originalAbort,
+        autoAbort: autoAbort ?? false,
+    });
     return tusResult;
 };
 
@@ -137,35 +213,18 @@ const useTusClientDispatch = () => {
     return useMemo(() => tusClientDispatch, [tusClientDispatch]);
 };
 
-const insertUploadInstance = (cacheKey, upload) => ({
+const insertUploadInstance = (cacheKey, state) => ({
     type: "INSERT_UPLOAD_INSTANCE",
     payload: {
         cacheKey,
-        uploadState: {
-            upload,
-            isSuccess: false,
-            isAborted: false,
-        },
+        uploadState: state,
     },
 });
-const updateSuccessUpload = (cacheKey) => ({
-    type: "UPDATE_SUCCESS_UPLOAD",
+const updateUploadContext = (cacheKey, context) => ({
+    type: "UPDATE_UPLOAD_CONTEXT",
     payload: {
         cacheKey,
-    },
-});
-const updateErrorUpload = (cacheKey, error) => ({
-    type: "UPDATE_ERROR_UPLOAD",
-    payload: {
-        cacheKey,
-        error,
-    },
-});
-const updateIsAbortedUpload = (cacheKey, isAborted) => ({
-    type: "UPDATE_IS_ABORTED_UPLOAD",
-    payload: {
-        cacheKey,
-        isAborted,
+        context,
     },
 });
 const removeUploadInstance = (cacheKey) => ({
@@ -174,6 +233,9 @@ const removeUploadInstance = (cacheKey) => ({
         cacheKey,
     },
 });
+const resetClient = () => ({
+    type: "RESET_CLIENT",
+});
 const updateDefaultOptions = (defaultOptions) => ({
     type: "UPDATE_DEFAULT_OPTIONS",
     payload: {
@@ -181,55 +243,116 @@ const updateDefaultOptions = (defaultOptions) => ({
     },
 });
 
-const useTusStore = (cacheKey, baseOption) => {
-    const { autoAbort, autoStart, uploadOptions } = useMergeTusOptions(baseOption);
+const useTusStore = (cacheKey, baseOption = {}) => {
+    const { autoAbort, autoStart, uploadOptions: defaultUploadOptions, Upload, } = mergeUseTusOptions(baseOption);
     const { defaultOptions, uploads } = useTusClientState();
     const tusClientDispatch = useTusClientDispatch();
     const setUpload = useCallback((file, options = {}) => {
         const targetOptions = {
             ...defaultOptions?.(file),
-            ...uploadOptions,
+            ...defaultUploadOptions,
             ...options,
         };
         const onSuccess = () => {
-            tusClientDispatch(updateSuccessUpload(cacheKey));
-            targetOptions?.onSuccess?.();
+            tusClientDispatch(updateUploadContext(cacheKey, { isSuccess: true, isUploading: false }));
+            targetOptions?.onSuccess?.(upload);
         };
         const onError = (error) => {
-            tusClientDispatch(updateErrorUpload(cacheKey, error));
-            targetOptions?.onError?.(error);
+            tusClientDispatch(updateUploadContext(cacheKey, { error, isUploading: false }));
+            targetOptions?.onError?.(error, upload);
         };
         const mergedUploadOptions = {
             ...targetOptions,
             onSuccess,
             onError,
         };
-        const dispatchIsAborted = (isAborted) => {
-            tusClientDispatch(updateIsAbortedUpload(cacheKey, isAborted));
+        const onChange = (newUpload) => {
+            // For re-rendering when `upload` object is changed.
+            tusClientDispatch(updateUploadContext(cacheKey, { upload: newUpload }));
         };
-        const { upload } = createUpload(file, mergedUploadOptions, dispatchIsAborted);
+        const onStart = () => {
+            tusClientDispatch(updateUploadContext(cacheKey, {
+                isAborted: false,
+                isUploading: true,
+            }));
+        };
+        const onAbort = () => {
+            tusClientDispatch(updateUploadContext(cacheKey, {
+                isAborted: true,
+                isUploading: false,
+            }));
+        };
+        const { uploadOptions, uploadFnOptions } = splitTusHooksUploadOptions(mergedUploadOptions);
+        const { upload } = createUpload({
+            Upload,
+            file,
+            uploadOptions,
+            uploadFnOptions,
+            onChange,
+            onStart,
+            onAbort,
+        });
         if (autoStart) {
             startOrResumeUpload(upload);
         }
-        tusClientDispatch(insertUploadInstance(cacheKey, upload));
-    }, [autoStart, cacheKey, defaultOptions, tusClientDispatch, uploadOptions]);
+        tusClientDispatch(insertUploadInstance(cacheKey, {
+            upload,
+            error: undefined,
+            isSuccess: false,
+            isAborted: false,
+            isUploading: false,
+        }));
+    }, [
+        Upload,
+        autoStart,
+        cacheKey,
+        defaultOptions,
+        defaultUploadOptions,
+        tusClientDispatch,
+    ]);
     const targetTusState = useMemo(() => uploads[cacheKey], [cacheKey, uploads]);
     const remove = useCallback(() => {
         targetTusState?.upload?.abort();
         tusClientDispatch(removeUploadInstance(cacheKey));
     }, [targetTusState, tusClientDispatch, cacheKey]);
-    const tusResult = useMemo(() => ({
-        upload: targetTusState?.upload,
-        isSuccess: targetTusState?.isSuccess ?? false,
-        error: targetTusState?.error,
-        isAborted: targetTusState?.isAborted ?? false,
-        setUpload,
-        remove,
-    }), [targetTusState, setUpload, remove]);
-    useAutoAbort(tusResult.upload, tusResult.upload?.abort, autoAbort ?? false);
+    const tusResult = targetTusState
+        ? {
+            ...targetTusState,
+            setUpload,
+            remove,
+        }
+        : {
+            upload: undefined,
+            error: undefined,
+            isSuccess: false,
+            isAborted: false,
+            isUploading: false,
+            setUpload,
+            remove,
+        };
+    useAutoAbort({
+        upload: tusResult.upload,
+        abort: tusResult.upload?.abort,
+        autoAbort: autoAbort ?? false,
+    });
     return tusResult;
 };
 
+const useTusClient = () => {
+    const tusClientState = useTusClientState();
+    const tusClientDispatch = useTusClientDispatch();
+    const state = tusClientState.uploads;
+    const removeUpload = useCallback((cacheKey) => {
+        tusClientDispatch(removeUploadInstance(cacheKey));
+    }, [tusClientDispatch]);
+    const reset = useCallback(() => tusClientDispatch(resetClient()), [tusClientDispatch]);
+    return {
+        state,
+        removeUpload,
+        reset,
+    };
+};
+
 const tusClientReducer = (state, actions) => {
     switch (actions.type) {
         case "INSERT_UPLOAD_INSTANCE": {
@@ -242,55 +365,15 @@ const tusClientReducer = (state, actions) => {
                 },
             };
         }
-        case "UPDATE_SUCCESS_UPLOAD": {
-            const { cacheKey } = actions.payload;
-            const target = state.uploads[cacheKey];
-            if (!target) {
-                return state;
-            }
-            return {
-                ...state,
-                uploads: {
-                    ...state.uploads,
-                    [cacheKey]: {
-                        ...(target || {}),
-                        isSuccess: true,
-                    },
-                },
-            };
-        }
-        case "UPDATE_ERROR_UPLOAD": {
-            const { cacheKey, error } = actions.payload;
-            const target = state.uploads[cacheKey];
-            if (!target) {
-                return state;
-            }
-            return {
-                ...state,
-                uploads: {
-                    ...state.uploads,
-                    [cacheKey]: {
-                        ...target,
-                        error,
-                    },
-                },
-            };
-        }
-        case "UPDATE_IS_ABORTED_UPLOAD": {
-            const { cacheKey, isAborted } = actions.payload;
+        case "UPDATE_UPLOAD_CONTEXT": {
+            const { cacheKey, context } = actions.payload;
             const target = state.uploads[cacheKey];
             if (!target) {
                 return state;
             }
             return {
                 ...state,
-                uploads: {
-                    ...state.uploads,
-                    [cacheKey]: {
-                        ...target,
-                        isAborted,
-                    },
-                },
+                uploads: { ...state.uploads, [cacheKey]: { ...target, ...context } },
             };
         }
         case "REMOVE_UPLOAD_INSTANCE": {
@@ -309,8 +392,15 @@ const tusClientReducer = (state, actions) => {
                 defaultOptions,
             };
         }
-        default:
+        case "RESET_CLIENT": {
+            return {
+                ...state,
+                uploads: {},
+            };
+        }
+        default: {
             return state;
+        }
     }
 };
 const tusClientInitialState = {
@@ -344,4 +434,4 @@ const TusClientProvider = ({ defaultOptions, children, }) => {
     }, tusClientDispatchContextProviderElement);
 };
 
-export { TusClientProvider, useTus, useTusStore };
+export { TusClientProvider, useTus, useTusClient, useTusStore };

package/dist/types.d.ts

@@ -0,0 +1,41 @@
+import type { Upload, UploadOptions } from "tus-js-client";
+export interface TusHooksOptions {
+    autoAbort?: boolean;
+    autoStart?: boolean;
+    uploadOptions?: TusHooksUploadOptions;
+    Upload?: typeof Upload;
+}
+export type Merge<T extends Record<PropertyKey, any>, R extends Record<PropertyKey, any>> = {
+    [P in keyof Omit<T, keyof R>]: T[P];
+} & R;
+type AddUploadParamater<F> = F extends (...args: infer A) => infer R ? (...args: [...A, ...[upload: Upload]]) => R : never;
+type Callbacks<T> = {
+    [P in keyof T as P extends `on${string}` ? NonNullable<T[P]> extends Function ? P : never : never]: T[P];
+};
+export type TusHooksUploadFnOptions = {
+    [K in keyof Callbacks<UploadOptions>]: AddUploadParamater<Callbacks<UploadOptions>[K]>;
+};
+export type TusHooksUploadOptions = Merge<UploadOptions, TusHooksUploadFnOptions>;
+export type UploadFile = Upload["file"];
+export type SetUpload = (file: Upload["file"], options?: TusHooksUploadOptions) => void;
+export type TusHooksResultFn = {
+    setUpload: SetUpload;
+    remove: () => void;
+};
+export type TusFalselyContext = {
+    upload: undefined;
+    error: undefined;
+    isSuccess: false;
+    isAborted: false;
+    isUploading: false;
+};
+export type TusTruthlyContext = {
+    upload: Upload;
+    error?: Error;
+    isSuccess: boolean;
+    isAborted: boolean;
+    isUploading: boolean;
+};
+export type TusContext = TusFalselyContext | TusTruthlyContext;
+export type TusHooksResult = TusContext & TusHooksResultFn;
+export {};

package/dist/useTus/index.d.ts

@@ -1,3 +1 @@
 export { useTus } from "./useTus";
-export { useTusStore } from "./useTusStore";
-export type { UseTusResult, UseTusOptions } from "./types";

package/dist/useTus/useTus.d.ts

@@ -1,2 +1,2 @@
-import { UseTusOptions, UseTusResult } from "./types";
-export declare const useTus: (baseOption?: UseTusOptions) => UseTusResult;
+import { TusHooksOptions, TusHooksResult } from "../types";
+export declare const useTus: (baseOption?: TusHooksOptions) => TusHooksResult;

package/dist/useTusClient/useTusClient.d.ts

@@ -1,6 +1,6 @@
 export declare const useTusClient: () => {
     state: {
-        [cacheKey: string]: import("../TusClientProvider/store/tusClientReducer").UploadState | undefined;
+        [cacheKey: string]: import("../types").TusTruthlyContext | undefined;
     };
     removeUpload: (cacheKey: string) => void;
     reset: () => void;

package/dist/useTusStore/index.d.ts

@@ -0,0 +1 @@
+export { useTusStore } from "./useTusStore";

package/dist/useTusStore/useTusStore.d.ts

@@ -0,0 +1,2 @@
+import { TusHooksOptions, TusHooksResult } from "../types";
+export declare const useTusStore: (cacheKey: string, baseOption?: TusHooksOptions) => TusHooksResult;

package/dist/utils/core/createUpload.d.ts

@@ -0,0 +1,16 @@
+import { UploadOptions, type Upload as UploadType } from "tus-js-client";
+import { TusHooksUploadFnOptions, UploadFile } from "../../types";
+export type CreateUploadParams = {
+    Upload: typeof UploadType;
+    file: UploadFile;
+    uploadOptions: UploadOptions;
+    uploadFnOptions: TusHooksUploadFnOptions;
+    onChange: (upload: UploadType) => void;
+    onStart: () => void;
+    onAbort: () => void;
+};
+export declare const createUpload: ({ Upload, file, uploadOptions, uploadFnOptions, onChange, onStart, onAbort, }: CreateUploadParams) => {
+    upload: UploadType;
+    originalStart: () => void;
+    originalAbort: (shouldTerminate?: boolean | undefined) => Promise<void>;
+};

package/dist/utils/core/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./createUpload";
+export * from "./splitTusHooksUploadOptions";
+export * from "./startOrResumeUpload";

package/dist/utils/core/splitTusHooksUploadOptions.d.ts

@@ -0,0 +1,6 @@
+import { UploadOptions } from "tus-js-client";
+import { TusHooksUploadFnOptions, TusHooksUploadOptions } from "../../types";
+export declare function splitTusHooksUploadOptions(options: TusHooksUploadOptions): {
+    uploadOptions: UploadOptions;
+    uploadFnOptions: TusHooksUploadFnOptions;
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./options";
+export * from "./core";

package/dist/utils/options/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./mergeUseTusOptions";
+export * from "./useAutoAbort";

package/dist/utils/options/mergeUseTusOptions.d.ts

@@ -0,0 +1,8 @@
+import { Upload } from "tus-js-client";
+import { TusHooksOptions } from "../../types";
+export declare const mergeUseTusOptions: (options: TusHooksOptions) => {
+    autoAbort: boolean;
+    autoStart: boolean;
+    uploadOptions: import("../../types").TusHooksUploadOptions | undefined;
+    Upload: typeof Upload;
+};

package/dist/utils/options/useAutoAbort.d.ts

@@ -0,0 +1,8 @@
+import { Upload } from "tus-js-client";
+type UseAutoAbortParams = {
+    upload: Upload | undefined;
+    abort: (() => Promise<void>) | undefined;
+    autoAbort: boolean;
+};
+export declare const useAutoAbort: ({ upload, abort, autoAbort, }: UseAutoAbortParams) => void;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-tus",
-  "version": "0.7.3",
+  "version": "0.8.1",
   "description": "React hooks for resumable file uploads using tus-js-client",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -73,13 +73,13 @@
     "storybook": "^7.5.1",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "ts-jest": "^29.1.1",
-    "tus-js-client": "^2.2.0",
+    "tus-js-client": "^4.0.0",
     "typescript": "^5.2.2",
     "vite": "^4.5.0"
   },
   "peerDependencies": {
     "react": ">=16.8",
-    "tus-js-client": "^2.2.0"
+    "tus-js-client": ">=2.2.0"
   },
   "packageManager": "pnpm@8.8.0",
   "scripts": {

package/dist/useTus/types.d.ts

@@ -1,14 +0,0 @@
-import type { Upload, UploadOptions } from "tus-js-client";
-export interface UseTusOptions {
-    autoAbort?: boolean;
-    autoStart?: boolean;
-    uploadOptions?: UploadOptions;
-}
-export interface UseTusResult {
-    upload?: Upload;
-    setUpload: (file: Upload["file"], options?: Upload["options"]) => void;
-    isSuccess: boolean;
-    isAborted: boolean;
-    error?: Error;
-    remove: () => void;
-}

package/dist/useTus/useTusStore.d.ts

@@ -1,2 +0,0 @@
-import { UseTusOptions, UseTusResult } from "./types";
-export declare const useTusStore: (cacheKey: string, baseOption?: UseTusOptions) => UseTusResult;

package/dist/useTus/utils/createUpload.d.ts

@@ -1,7 +0,0 @@
-import { Upload } from "tus-js-client";
-export type DispatchIsAborted = (isAborted: boolean) => void;
-export declare const createUpload: (file: Upload["file"], options: Upload["options"], dispatchIsAborted: DispatchIsAborted) => {
-    upload: Upload;
-    originalStart: () => void;
-    originalAbort: (shouldTerminate?: boolean | undefined) => Promise<void>;
-};

package/dist/useTus/utils/useAutoAbort.d.ts

@@ -1,2 +0,0 @@
-import { Upload } from "tus-js-client";
-export declare const useAutoAbort: (upload: Upload | undefined, abort: Upload["abort"] | undefined, autoAbort: boolean) => void;

package/dist/useTus/utils/useMergeTusOptions.d.ts

@@ -1,6 +0,0 @@
-import { UseTusOptions } from "../types";
-export declare const useMergeTusOptions: (options: UseTusOptions | undefined) => {
-    autoAbort?: boolean | undefined;
-    autoStart?: boolean | undefined;
-    uploadOptions?: import("tus-js-client").UploadOptions | undefined;
-};