use-tus 0.3.0 → 0.6.0

package/dist/index.js

@@ -0,0 +1,345 @@
+import { useEffect, useMemo, useState, useCallback, createContext, useContext, useReducer, createElement } from 'react';
+import { Upload, isSupported } from 'tus-js-client';
+
+const createUpload = (file, options, dispatchIsAborted) => {
+    const upload = new Upload(file, options);
+    const originalStart = upload.start.bind(upload);
+    const originalAbort = upload.abort.bind(upload);
+    const start = () => {
+        originalStart();
+        dispatchIsAborted(false);
+    };
+    const abort = async () => {
+        originalAbort();
+        dispatchIsAborted(true);
+    };
+    upload.start = start;
+    upload.abort = abort;
+    return upload;
+};
+
+const startOrResumeUpload = (upload) => {
+    upload.findPreviousUploads().then((previousUploads) => {
+        if (previousUploads.length) {
+            upload.resumeFromPreviousUpload(previousUploads[0]);
+        }
+        upload.start();
+    });
+};
+
+const useAutoAbort = (upload, autoAbort) => {
+    useEffect(() => {
+        const abortUploading = async () => {
+            if (!upload) {
+                return;
+            }
+            await upload.abort();
+        };
+        return () => {
+            if (!autoAbort) {
+                return;
+            }
+            abortUploading();
+        };
+    }, [autoAbort, upload]);
+};
+
+const defaultUseTusOptionsValue = Object.freeze({
+    autoAbort: true,
+    autoStart: false,
+});
+const useMergeTusOptions = (options) => useMemo(() => ({
+    ...defaultUseTusOptionsValue,
+    ...(options || {}),
+}), [options]);
+
+const initialUseTusState = Object.freeze({
+    upload: undefined,
+    isSuccess: false,
+    isAborted: false,
+    error: undefined,
+});
+const useTus = (baseOption) => {
+    const { autoAbort, autoStart, uploadOptions } = useMergeTusOptions(baseOption);
+    const [tusState, setTusState] = useState(initialUseTusState);
+    const updateTusState = useCallback((newOptions) => {
+        setTusState((tus) => ({
+            ...tus,
+            ...newOptions,
+        }));
+    }, []);
+    const setUpload = useCallback((file, options = {}) => {
+        const targetOptions = {
+            ...uploadOptions,
+            ...options,
+        };
+        const onSuccess = () => {
+            updateTusState({ isSuccess: true });
+            targetOptions?.onSuccess?.();
+        };
+        const onError = (error) => {
+            updateTusState({ error });
+            targetOptions?.onError?.(error);
+        };
+        const mergedUploadOptions = {
+            ...targetOptions,
+            onSuccess,
+            onError,
+        };
+        const dispatchIsAborted = (isAborted) => {
+            updateTusState({ isAborted });
+        };
+        const upload = createUpload(file, mergedUploadOptions, dispatchIsAborted);
+        if (autoStart) {
+            startOrResumeUpload(upload);
+        }
+        updateTusState({ upload });
+    }, [autoStart, updateTusState, uploadOptions]);
+    const remove = useCallback(() => {
+        tusState?.upload?.abort();
+        setTusState(initialUseTusState);
+    }, [tusState?.upload]);
+    const tusResult = useMemo(() => ({
+        upload: tusState?.upload,
+        isSuccess: tusState?.isSuccess ?? false,
+        error: tusState?.error,
+        isAborted: tusState?.isAborted ?? false,
+        setUpload,
+        remove,
+    }), [tusState, setUpload, remove]);
+    useAutoAbort(tusResult.upload, autoAbort ?? false);
+    return tusResult;
+};
+
+const ERROR_MESSAGES = {
+    tusClientHasNotFounded: "No TusClient set, use TusClientProvider to set one",
+    tusIsNotSupported: "This browser does not support uploads. Please use a modern browser instead.",
+};
+
+const TusClientStateContext = createContext(undefined);
+const TusClientDispatchContext = createContext(undefined);
+const useTusClientState = () => {
+    const tusClientState = useContext(TusClientStateContext);
+    if (!tusClientState && process.env.NODE_ENV !== "production") {
+        throw new Error(ERROR_MESSAGES.tusClientHasNotFounded);
+    }
+    return useMemo(() => tusClientState, [tusClientState]);
+};
+const useTusClientDispatch = () => {
+    const tusClientDispatch = useContext(TusClientDispatchContext);
+    if (!tusClientDispatch && process.env.NODE_ENV !== "production") {
+        throw new Error(ERROR_MESSAGES.tusClientHasNotFounded);
+    }
+    return useMemo(() => tusClientDispatch, [
+        tusClientDispatch,
+    ]);
+};
+
+const insertUploadInstance = (cacheKey, upload) => ({
+    type: "INSERT_UPLOAD_INSTANCE",
+    payload: {
+        cacheKey,
+        uploadState: {
+            upload,
+            isSuccess: false,
+            isAborted: false,
+        },
+    },
+});
+const updateSuccessUpload = (cacheKey) => ({
+    type: "UPDATE_SUCCESS_UPLOAD",
+    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,
+    },
+});
+const removeUploadInstance = (cacheKey) => ({
+    type: "REMOVE_UPLOAD_INSTANCE",
+    payload: {
+        cacheKey,
+    },
+});
+const updateDefaultOptions = (defaultOptions) => ({
+    type: "UPDATE_DEFAULT_OPTIONS",
+    payload: {
+        defaultOptions,
+    },
+});
+
+const useTusStore = (cacheKey, baseOption) => {
+    const { autoAbort, autoStart, uploadOptions } = useMergeTusOptions(baseOption);
+    const { defaultOptions, uploads } = useTusClientState();
+    const tusClientDispatch = useTusClientDispatch();
+    const setUpload = useCallback((file, options = {}) => {
+        const targetOptions = {
+            ...defaultOptions?.(file),
+            ...uploadOptions,
+            ...options,
+        };
+        const onSuccess = () => {
+            tusClientDispatch(updateSuccessUpload(cacheKey));
+            targetOptions?.onSuccess?.();
+        };
+        const onError = (error) => {
+            tusClientDispatch(updateErrorUpload(cacheKey, error));
+            targetOptions?.onError?.(error);
+        };
+        const mergedUploadOptions = {
+            ...targetOptions,
+            onSuccess,
+            onError,
+        };
+        const dispatchIsAborted = (isAborted) => {
+            tusClientDispatch(updateIsAbortedUpload(cacheKey, isAborted));
+        };
+        const upload = createUpload(file, mergedUploadOptions, dispatchIsAborted);
+        if (autoStart) {
+            startOrResumeUpload(upload);
+        }
+        tusClientDispatch(insertUploadInstance(cacheKey, upload));
+    }, [autoStart, cacheKey, defaultOptions, tusClientDispatch, uploadOptions]);
+    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, autoAbort ?? false);
+    return tusResult;
+};
+
+const tusClientReducer = (state, actions) => {
+    switch (actions.type) {
+        case "INSERT_UPLOAD_INSTANCE": {
+            const { cacheKey, uploadState } = actions.payload;
+            return {
+                ...state,
+                uploads: {
+                    ...state.uploads,
+                    [cacheKey]: uploadState,
+                },
+            };
+        }
+        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;
+            const target = state.uploads[cacheKey];
+            if (!target) {
+                return state;
+            }
+            return {
+                ...state,
+                uploads: {
+                    ...state.uploads,
+                    [cacheKey]: {
+                        ...target,
+                        isAborted,
+                    },
+                },
+            };
+        }
+        case "REMOVE_UPLOAD_INSTANCE": {
+            const { cacheKey } = actions.payload;
+            const newUploads = state.uploads;
+            delete newUploads[cacheKey];
+            return {
+                ...state,
+                uploads: newUploads,
+            };
+        }
+        case "UPDATE_DEFAULT_OPTIONS": {
+            const { defaultOptions } = actions.payload;
+            return {
+                ...state,
+                defaultOptions,
+            };
+        }
+        default:
+            return state;
+    }
+};
+const tusClientInitialState = {
+    uploads: {},
+    defaultOptions: undefined,
+};
+
+const TusClientProvider = ({ defaultOptions, children, }) => {
+    const [tusClientState, tusClientDispatch] = useReducer(tusClientReducer, {
+        ...tusClientInitialState,
+        defaultOptions,
+    });
+    // Output error if tus has not supported
+    useEffect(() => {
+        if (isSupported || process.env.NODE_ENV === "production") {
+            return;
+        }
+        // eslint-disable-next-line no-console
+        console.error(ERROR_MESSAGES.tusIsNotSupported);
+    }, []);
+    // Set defaultOptions to the context
+    useEffect(() => {
+        if (tusClientState.defaultOptions === defaultOptions) {
+            return;
+        }
+        tusClientDispatch(updateDefaultOptions(defaultOptions));
+    }, [defaultOptions, tusClientState.defaultOptions]);
+    const tusClientDispatchContextProviderElement = createElement(TusClientDispatchContext.Provider, { value: tusClientDispatch }, children);
+    return createElement(TusClientStateContext.Provider, {
+        value: tusClientState,
+    }, tusClientDispatchContextProviderElement);
+};
+
+export { TusClientProvider, useTus, useTusStore };

package/dist/useTus/index.d.ts

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

package/dist/useTus/types.d.ts

@@ -1,15 +1,14 @@
-import type { Upload } from 'tus-js-client';
-export declare type UseTusOptions = {
-    cacheKey?: string;
-    autoAbort?: boolean;
-    autoStart?: boolean;
-};
-export declare type UseTusResult = {
-    upload?: Upload;
-    setUpload: (file: Upload['file'], options?: Upload['options']) => void;
-    remove: () => void;
-    isSuccess: boolean;
-    isAborted: boolean;
-    error?: Error;
-};
-export declare type UseTusState = Pick<UseTusResult, 'upload' | 'isSuccess' | 'error' | 'isAborted'>;
+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/useTus.d.ts

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

package/dist/useTus/useTusStore.d.ts

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

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

@@ -0,0 +1,3 @@
+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;

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

@@ -0,0 +1,2 @@
+import { Upload } from "tus-js-client";
+export declare const startOrResumeUpload: (upload: Upload) => void;

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

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

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

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

package/dist/useTusClient/index.d.ts

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

package/dist/useTusClient/useTusClient.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-tus",
-  "version": "0.3.0",
+  "version": "0.6.0",
   "description": "React hooks for resumable file uploads using tus-js-client",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -11,8 +11,8 @@
     "test": "cross-env NODE_ENV=TEST jest",
     "type": "tsc --noEmit",
     "format": "npm-run-all -s format:*",
-    "format:fix": "prettier --write './src/**/*.{ts,tsx,js,jsx,json}'",
-    "format:lint": "eslint ./src --ext .ts,.tsx",
+    "format:fix": "prettier --write './**/*.{ts,tsx,js,jsx,json}'",
+    "format:lint": "eslint ./ --ext .ts,.tsx",
     "clean": "rimraf ./dist",
     "prepublishOnly": "npm run build",
     "prepare": "husky install",
@@ -53,6 +53,7 @@
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^18.0.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-typescript": "^8.3.0",
     "@storybook/addon-actions": "^6.2.9",
     "@storybook/addon-essentials": "^6.2.9",
     "@storybook/addon-links": "^6.2.9",
@@ -90,15 +91,14 @@
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
     "rollup": "^2.44.0",
-    "rollup-plugin-typescript2": "^0.30.0",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "ts-jest": "^26.5.4",
-    "typescript": "^4.2.3"
+    "typescript": "^4.2.3",
+    "tus-js-client": "^2.2.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
-  },
-  "dependencies": {
+    "react": "^16.8.0 || ^17.0.0",
     "tus-js-client": "^2.2.0"
-  }
+  },
+  "dependencies": {}
 }

package/dist/TusClientProvider/TusController.d.ts

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-import { TusConfigs } from '../core/tusHandler';
-export declare type TusControllerProps = Readonly<TusConfigs>;
-export declare const TusController: FC<TusControllerProps>;

package/dist/core/constants.d.ts

@@ -1,4 +0,0 @@
-export declare const ERROR_MESSAGES: {
-    tusClientHasNotFounded: string;
-    tusIsNotSupported: string;
-};

package/dist/core/tusHandler.d.ts

@@ -1,17 +0,0 @@
-import * as tus from 'tus-js-client';
-import { Upload } from 'tus-js-client';
-export declare type DefaultOptions = (file: Upload['file']) => tus.UploadOptions;
-export declare type TusConfigs = Partial<{
-    canStoreURLs: boolean;
-    defaultOptions: DefaultOptions;
-}>;
-export declare type Tus = Readonly<Omit<typeof tus, 'defaultOptions'> & Required<TusConfigs>>;
-export declare const initialDefaultOptions: DefaultOptions;
-export declare class TusHandler {
-    private tus;
-    constructor(tusConfigs?: TusConfigs);
-    get getTus(): Readonly<Omit<typeof tus, "defaultOptions"> & Required<Partial<{
-        canStoreURLs: boolean;
-        defaultOptions: DefaultOptions;
-    }>>>;
-}

package/dist/core/types.d.ts

@@ -1,8 +0,0 @@
-import { Upload } from 'tus-js-client';
-export declare type BaseUseTusResult = {
-    upload?: Upload;
-    setUpload: (file: Upload['file'], options?: Upload['options']) => void;
-    isSuccess: boolean;
-    error?: Error;
-};
-export declare type BaseUseTusOptions = {};

package/dist/useTus/utils.d.ts

@@ -1,16 +0,0 @@
-import { SetStateAction } from 'react';
-import { Upload } from 'tus-js-client';
-import { TusClientActions } from '../core/tucClientActions';
-import { UseTusOptions, UseTusState } from './types';
-export declare type Dispatcher = {
-    dispatch: (value: TusClientActions) => void;
-    internalDispatch: (value: SetStateAction<UseTusState>) => void;
-    cacheKey: UseTusOptions['cacheKey'];
-};
-declare type OptionHandler = Pick<Upload['options'], 'onError' | 'onSuccess'>;
-declare type CreateUpload = (file: Upload['file'], options: Upload['options'], dispatcher: Dispatcher) => Upload;
-declare type CreateOptionHandler = (handlers: OptionHandler, dispatcher: Dispatcher) => OptionHandler;
-export declare const createOptionHandler: CreateOptionHandler;
-export declare const startOrResumeUpload: (upload: Upload) => void;
-export declare const createUpload: CreateUpload;
-export {};

package/dist/utils/uid.d.ts

@@ -1 +0,0 @@
-export declare const createUid: () => string;