use-tus 0.6.1 → 0.7.1

package/README.md

@@ -352,7 +352,7 @@ const App = () => (
 );
 
 const Uploader = () => {
-  const { setUpload } = useTusStore('cacheKey', { autoAtart: true });
+  const { setUpload } = useTusStore('cacheKey', { autoStart: true });
 
   const handleSetUpload = useCallback((event: ChangeEvent<HTMLInputElement>) => {
       const file = event.target.files.item(0);

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

@@ -18,7 +18,7 @@ export declare const updateSuccessUpload: (cacheKey: string) => {
         readonly cacheKey: string;
     };
 };
-export declare const updateErrorUpload: (cacheKey: string, error?: Error | undefined) => {
+export declare const updateErrorUpload: (cacheKey: string, error?: Error) => {
     readonly type: "UPDATE_ERROR_UPLOAD";
     readonly payload: {
         readonly cacheKey: string;

package/dist/__stories__/components/LoadingCircle/LoadingCircle.d.ts

@@ -1,2 +1,2 @@
-import type { VFC } from "react";
-export declare const LoadingCircle: VFC;
+import type { FC } from "react";
+export declare const LoadingCircle: FC;

package/dist/__stories__/components/ProgressBar/ProgressBar.d.ts

@@ -1,7 +1,7 @@
-import { VFC } from "react";
+import { FC } from "react";
 declare type ProgressBarProps = {
     title?: string;
     value?: number;
 };
-export declare const ProgressBar: VFC<ProgressBarProps>;
+export declare const ProgressBar: FC<ProgressBarProps>;
 export {};

package/dist/__stories__/components/UploadIcon/UploadIcon.d.ts

@@ -1,2 +1,2 @@
-import { VFC } from "react";
-export declare const UploadIcon: VFC;
+import { FC } from "react";
+export declare const UploadIcon: FC;

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

@@ -1,6 +1,10 @@
 /// <reference types="jest" />
 /// <reference types="webpack-env" />
 /// <reference types="node" />
+/// <reference types="node" />
+/// <reference types="node" />
+/// <reference types="node" />
+/// <reference types="node" />
 export declare const createConsoleErrorMock: () => jest.SpyInstance<void, [message?: any, ...optionalParams: any[]]>;
 export declare const insertEnvValue: (value: NodeJS.Process["env"]) => void;
 export declare const startOrResumeUploadMock: jest.SpyInstance<void, [upload: import("tus-js-client").Upload]>;

package/dist/index.cjs.js

@@ -180,7 +180,11 @@ var createUpload = function createUpload(file, options, dispatchIsAborted) {
 
   upload.start = start;
   upload.abort = abort;
-  return upload;
+  return {
+    upload: upload,
+    originalStart: originalStart,
+    originalAbort: originalAbort
+  };
 };
 
 var startOrResumeUpload = function startOrResumeUpload(upload) {
@@ -193,7 +197,7 @@ var startOrResumeUpload = function startOrResumeUpload(upload) {
   });
 };
 
-var useAutoAbort = function useAutoAbort(upload, autoAbort) {
+var useAutoAbort = function useAutoAbort(upload, abort, autoAbort) {
   react.useEffect(function () {
     var abortUploading = function () {
       var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee() {
@@ -201,7 +205,7 @@ var useAutoAbort = function useAutoAbort(upload, autoAbort) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                if (upload) {
+                if (!(!upload || !abort)) {
                   _context.next = 2;
                   break;
                 }
@@ -210,7 +214,7 @@ var useAutoAbort = function useAutoAbort(upload, autoAbort) {
 
               case 2:
                 _context.next = 4;
-                return upload.abort();
+                return abort();
 
               case 4:
               case "end":
@@ -249,7 +253,8 @@ var initialUseTusState = Object.freeze({
   upload: undefined,
   isSuccess: false,
   isAborted: false,
-  error: undefined
+  error: undefined,
+  originalAbort: undefined
 });
 var useTus = function useTus(baseOption) {
   var _useMergeTusOptions = useMergeTusOptions(baseOption),
@@ -301,22 +306,25 @@ var useTus = function useTus(baseOption) {
       });
     };
 
-    var upload = createUpload(file, mergedUploadOptions, dispatchIsAborted);
+    var _createUpload = createUpload(file, mergedUploadOptions, dispatchIsAborted),
+        upload = _createUpload.upload,
+        originalAbort = _createUpload.originalAbort;
 
     if (autoStart) {
       startOrResumeUpload(upload);
     }
 
-    updateTusState({
-      upload: upload
-    });
+    updateTusState(_objectSpread2(_objectSpread2({}, initialUseTusState), {}, {
+      upload: upload,
+      originalAbort: originalAbort
+    }));
   }, [autoStart, updateTusState, uploadOptions]);
   var remove = react.useCallback(function () {
-    var _tusState$upload;
+    var _tusState$originalAbo;
 
-    tusState === null || tusState === void 0 ? void 0 : (_tusState$upload = tusState.upload) === null || _tusState$upload === void 0 ? void 0 : _tusState$upload.abort();
+    tusState === null || tusState === void 0 ? void 0 : (_tusState$originalAbo = tusState.originalAbort) === null || _tusState$originalAbo === void 0 ? void 0 : _tusState$originalAbo.call(tusState);
     setTusState(initialUseTusState);
-  }, [tusState === null || tusState === void 0 ? void 0 : tusState.upload]);
+  }, [tusState]);
   var tusResult = react.useMemo(function () {
     var _tusState$isSuccess, _tusState$isAborted;
 
@@ -329,7 +337,7 @@ var useTus = function useTus(baseOption) {
       remove: remove
     };
   }, [tusState, setUpload, remove]);
-  useAutoAbort(tusResult.upload, autoAbort !== null && autoAbort !== void 0 ? autoAbort : false);
+  useAutoAbort(tusResult.upload, tusState.originalAbort, autoAbort !== null && autoAbort !== void 0 ? autoAbort : false);
   return tusResult;
 };
 
@@ -420,6 +428,8 @@ var updateDefaultOptions = function updateDefaultOptions(defaultOptions) {
 };
 
 var useTusStore = function useTusStore(cacheKey, baseOption) {
+  var _tusResult$upload;
+
   var _useMergeTusOptions = useMergeTusOptions(baseOption),
       autoAbort = _useMergeTusOptions.autoAbort,
       autoStart = _useMergeTusOptions.autoStart,
@@ -458,7 +468,8 @@ var useTusStore = function useTusStore(cacheKey, baseOption) {
       tusClientDispatch(updateIsAbortedUpload(cacheKey, isAborted));
     };
 
-    var upload = createUpload(file, mergedUploadOptions, dispatchIsAborted);
+    var _createUpload = createUpload(file, mergedUploadOptions, dispatchIsAborted),
+        upload = _createUpload.upload;
 
     if (autoStart) {
       startOrResumeUpload(upload);
@@ -487,7 +498,7 @@ var useTusStore = function useTusStore(cacheKey, baseOption) {
       remove: remove
     };
   }, [targetTusState, setUpload, remove]);
-  useAutoAbort(tusResult.upload, autoAbort !== null && autoAbort !== void 0 ? autoAbort : false);
+  useAutoAbort(tusResult.upload, (_tusResult$upload = tusResult.upload) === null || _tusResult$upload === void 0 ? void 0 : _tusResult$upload.abort, autoAbort !== null && autoAbort !== void 0 ? autoAbort : false);
   return tusResult;
 };
 

package/dist/index.esm.js

@@ -176,7 +176,11 @@ var createUpload = function createUpload(file, options, dispatchIsAborted) {
 
   upload.start = start;
   upload.abort = abort;
-  return upload;
+  return {
+    upload: upload,
+    originalStart: originalStart,
+    originalAbort: originalAbort
+  };
 };
 
 var startOrResumeUpload = function startOrResumeUpload(upload) {
@@ -189,7 +193,7 @@ var startOrResumeUpload = function startOrResumeUpload(upload) {
   });
 };
 
-var useAutoAbort = function useAutoAbort(upload, autoAbort) {
+var useAutoAbort = function useAutoAbort(upload, abort, autoAbort) {
   useEffect(function () {
     var abortUploading = function () {
       var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee() {
@@ -197,7 +201,7 @@ var useAutoAbort = function useAutoAbort(upload, autoAbort) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                if (upload) {
+                if (!(!upload || !abort)) {
                   _context.next = 2;
                   break;
                 }
@@ -206,7 +210,7 @@ var useAutoAbort = function useAutoAbort(upload, autoAbort) {
 
               case 2:
                 _context.next = 4;
-                return upload.abort();
+                return abort();
 
               case 4:
               case "end":
@@ -245,7 +249,8 @@ var initialUseTusState = Object.freeze({
   upload: undefined,
   isSuccess: false,
   isAborted: false,
-  error: undefined
+  error: undefined,
+  originalAbort: undefined
 });
 var useTus = function useTus(baseOption) {
   var _useMergeTusOptions = useMergeTusOptions(baseOption),
@@ -297,22 +302,25 @@ var useTus = function useTus(baseOption) {
       });
     };
 
-    var upload = createUpload(file, mergedUploadOptions, dispatchIsAborted);
+    var _createUpload = createUpload(file, mergedUploadOptions, dispatchIsAborted),
+        upload = _createUpload.upload,
+        originalAbort = _createUpload.originalAbort;
 
     if (autoStart) {
       startOrResumeUpload(upload);
     }
 
-    updateTusState({
-      upload: upload
-    });
+    updateTusState(_objectSpread2(_objectSpread2({}, initialUseTusState), {}, {
+      upload: upload,
+      originalAbort: originalAbort
+    }));
   }, [autoStart, updateTusState, uploadOptions]);
   var remove = useCallback(function () {
-    var _tusState$upload;
+    var _tusState$originalAbo;
 
-    tusState === null || tusState === void 0 ? void 0 : (_tusState$upload = tusState.upload) === null || _tusState$upload === void 0 ? void 0 : _tusState$upload.abort();
+    tusState === null || tusState === void 0 ? void 0 : (_tusState$originalAbo = tusState.originalAbort) === null || _tusState$originalAbo === void 0 ? void 0 : _tusState$originalAbo.call(tusState);
     setTusState(initialUseTusState);
-  }, [tusState === null || tusState === void 0 ? void 0 : tusState.upload]);
+  }, [tusState]);
   var tusResult = useMemo(function () {
     var _tusState$isSuccess, _tusState$isAborted;
 
@@ -325,7 +333,7 @@ var useTus = function useTus(baseOption) {
       remove: remove
     };
   }, [tusState, setUpload, remove]);
-  useAutoAbort(tusResult.upload, autoAbort !== null && autoAbort !== void 0 ? autoAbort : false);
+  useAutoAbort(tusResult.upload, tusState.originalAbort, autoAbort !== null && autoAbort !== void 0 ? autoAbort : false);
   return tusResult;
 };
 
@@ -416,6 +424,8 @@ var updateDefaultOptions = function updateDefaultOptions(defaultOptions) {
 };
 
 var useTusStore = function useTusStore(cacheKey, baseOption) {
+  var _tusResult$upload;
+
   var _useMergeTusOptions = useMergeTusOptions(baseOption),
       autoAbort = _useMergeTusOptions.autoAbort,
       autoStart = _useMergeTusOptions.autoStart,
@@ -454,7 +464,8 @@ var useTusStore = function useTusStore(cacheKey, baseOption) {
       tusClientDispatch(updateIsAbortedUpload(cacheKey, isAborted));
     };
 
-    var upload = createUpload(file, mergedUploadOptions, dispatchIsAborted);
+    var _createUpload = createUpload(file, mergedUploadOptions, dispatchIsAborted),
+        upload = _createUpload.upload;
 
     if (autoStart) {
       startOrResumeUpload(upload);
@@ -483,7 +494,7 @@ var useTusStore = function useTusStore(cacheKey, baseOption) {
       remove: remove
     };
   }, [targetTusState, setUpload, remove]);
-  useAutoAbort(tusResult.upload, autoAbort !== null && autoAbort !== void 0 ? autoAbort : false);
+  useAutoAbort(tusResult.upload, (_tusResult$upload = tusResult.upload) === null || _tusResult$upload === void 0 ? void 0 : _tusResult$upload.abort, autoAbort !== null && autoAbort !== void 0 ? autoAbort : false);
   return tusResult;
 };
 

package/dist/index.js

@@ -15,7 +15,7 @@ const createUpload = (file, options, dispatchIsAborted) => {
     };
     upload.start = start;
     upload.abort = abort;
-    return upload;
+    return { upload, originalStart, originalAbort };
 };
 
 const startOrResumeUpload = (upload) => {
@@ -27,13 +27,13 @@ const startOrResumeUpload = (upload) => {
     });
 };
 
-const useAutoAbort = (upload, autoAbort) => {
+const useAutoAbort = (upload, abort, autoAbort) => {
     useEffect(() => {
         const abortUploading = async () => {
-            if (!upload) {
+            if (!upload || !abort) {
                 return;
             }
-            await upload.abort();
+            await abort();
         };
         return () => {
             if (!autoAbort) {
@@ -41,6 +41,7 @@ const useAutoAbort = (upload, autoAbort) => {
             }
             abortUploading();
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [autoAbort, upload]);
 };
 
@@ -58,6 +59,7 @@ const initialUseTusState = Object.freeze({
     isSuccess: false,
     isAborted: false,
     error: undefined,
+    originalAbort: undefined,
 });
 const useTus = (baseOption) => {
     const { autoAbort, autoStart, uploadOptions } = useMergeTusOptions(baseOption);
@@ -89,16 +91,18 @@ const useTus = (baseOption) => {
         const dispatchIsAborted = (isAborted) => {
             updateTusState({ isAborted });
         };
-        const upload = createUpload(file, mergedUploadOptions, dispatchIsAborted);
+        const { upload, originalAbort } = createUpload(file, mergedUploadOptions, dispatchIsAborted);
         if (autoStart) {
             startOrResumeUpload(upload);
         }
-        updateTusState({ upload });
+        updateTusState({ ...initialUseTusState, upload, originalAbort });
     }, [autoStart, updateTusState, uploadOptions]);
     const remove = useCallback(() => {
-        tusState?.upload?.abort();
+        // `upload.abort` function will set `isAborted` state.
+        // So call the original function for restore state.
+        tusState?.originalAbort?.();
         setTusState(initialUseTusState);
-    }, [tusState?.upload]);
+    }, [tusState]);
     const tusResult = useMemo(() => ({
         upload: tusState?.upload,
         isSuccess: tusState?.isSuccess ?? false,
@@ -107,7 +111,7 @@ const useTus = (baseOption) => {
         setUpload,
         remove,
     }), [tusState, setUpload, remove]);
-    useAutoAbort(tusResult.upload, autoAbort ?? false);
+    useAutoAbort(tusResult.upload, tusState.originalAbort, autoAbort ?? false);
     return tusResult;
 };
 
@@ -205,7 +209,7 @@ const useTusStore = (cacheKey, baseOption) => {
         const dispatchIsAborted = (isAborted) => {
             tusClientDispatch(updateIsAbortedUpload(cacheKey, isAborted));
         };
-        const upload = createUpload(file, mergedUploadOptions, dispatchIsAborted);
+        const { upload } = createUpload(file, mergedUploadOptions, dispatchIsAborted);
         if (autoStart) {
             startOrResumeUpload(upload);
         }
@@ -224,7 +228,7 @@ const useTusStore = (cacheKey, baseOption) => {
         setUpload,
         remove,
     }), [targetTusState, setUpload, remove]);
-    useAutoAbort(tusResult.upload, autoAbort ?? false);
+    useAutoAbort(tusResult.upload, tusResult.upload?.abort, autoAbort ?? false);
     return tusResult;
 };
 

package/dist/useTus/useTus.d.ts

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

package/dist/useTus/useTusStore.d.ts

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

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

@@ -1,3 +1,7 @@
 import { Upload } from "tus-js-client";
 export declare type DispatchIsAborted = (isAborted: boolean) => void;
-export declare const createUpload: (file: Upload["file"], options: Upload["options"], dispatchIsAborted: DispatchIsAborted) => Upload;
+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 +1,2 @@
 import { Upload } from "tus-js-client";
-export declare const useAutoAbort: (upload: Upload | undefined, autoAbort: boolean) => void;
+export declare const useAutoAbort: (upload: Upload | undefined, abort: Upload["abort"] | undefined, autoAbort: boolean) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-tus",
-  "version": "0.6.1",
+  "version": "0.7.1",
   "description": "React hooks for resumable file uploads using tus-js-client",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -59,8 +59,7 @@
     "@storybook/addon-links": "^6.2.9",
     "@storybook/react": "^6.2.9",
     "@testing-library/jest-dom": "^5.11.10",
-    "@testing-library/react": "^11.2.6",
-    "@testing-library/react-hooks": "^5.1.1",
+    "@testing-library/react": "^13.3.0",
     "@types/jest": "^26.0.22",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
@@ -87,17 +86,17 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^7",
     "prettier": "^2.2.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.44.0",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "ts-jest": "^26.5.4",
-    "typescript": "^4.2.3",
-    "tus-js-client": "^2.2.0"
+    "tus-js-client": "^2.2.0",
+    "typescript": "^4.7.3"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
+    "react": ">=16.8",
     "tus-js-client": "^2.2.0"
   },
   "dependencies": {}