use-tus 0.2.5 → 0.5.0

package/dist/index.js

@@ -0,0 +1,385 @@
+import { createContext, useMemo, useContext, useState, useCallback, useEffect, createElement, Fragment, useReducer } from 'react';
+import * as tus from 'tus-js-client';
+import { Upload } from 'tus-js-client';
+
+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 updateTusHandlerOptions = (payload) => ({
+    type: 'UPDATE_TUS_HANDLER_OPTIONS',
+    payload,
+});
+
+const createOptionHandler = (handlers, { dispatch, internalDispatch, cacheKey }) => {
+    const onSuccess = () => {
+        if (cacheKey) {
+            dispatch(updateSuccessUpload(cacheKey));
+        }
+        if (!cacheKey) {
+            internalDispatch((internalTusState) => ({
+                ...internalTusState,
+                isSuccess: true,
+            }));
+        }
+        if (handlers.onSuccess) {
+            handlers.onSuccess();
+        }
+    };
+    const onError = (err) => {
+        if (cacheKey) {
+            dispatch(updateErrorUpload(cacheKey, err));
+        }
+        if (!cacheKey) {
+            internalDispatch((internalTusState) => ({
+                ...internalTusState,
+                error: err,
+            }));
+        }
+        if (handlers.onError) {
+            handlers.onError(err);
+        }
+    };
+    return {
+        onSuccess,
+        onError,
+    };
+};
+const startOrResumeUpload = (upload) => {
+    upload.findPreviousUploads().then((previousUploads) => {
+        if (previousUploads.length) {
+            upload.resumeFromPreviousUpload(previousUploads[0]);
+        }
+        upload.start();
+    });
+};
+const createUpload = (file, options, { dispatch, internalDispatch, cacheKey }) => {
+    const upload = new Upload(file, options);
+    const originalStart = upload.start.bind(upload);
+    const originalAbort = upload.abort.bind(upload);
+    const dispatchIsAborted = (isAborted) => {
+        if (cacheKey) {
+            dispatch(updateIsAbortedUpload(cacheKey, isAborted));
+            return;
+        }
+        internalDispatch((internalTusState) => ({
+            ...internalTusState,
+            isAborted,
+        }));
+    };
+    const start = () => {
+        originalStart();
+        dispatchIsAborted(false);
+    };
+    const abort = async () => {
+        originalAbort();
+        dispatchIsAborted(true);
+    };
+    upload.start = start;
+    upload.abort = abort;
+    return upload;
+};
+
+const defaultUseTusOptionsValue = Object.freeze({
+    cacheKey: undefined,
+    autoAbort: true,
+    autoStart: false,
+});
+const initialUseTusState = Object.freeze({
+    upload: undefined,
+    isSuccess: false,
+    isAborted: false,
+    error: undefined,
+});
+const useTus = (useTusOptions) => {
+    const { cacheKey, autoAbort, autoStart } = {
+        ...defaultUseTusOptionsValue,
+        ...(useTusOptions || {}),
+    };
+    const [internalTusState, setInternalTusState] = useState(initialUseTusState);
+    const tusClientState = useTusClientState();
+    const tusClientDispatch = useTusClientDispatch();
+    const tus = tusClientState.tusHandler.getTus;
+    const setUpload = useCallback((file, options = {}) => {
+        const dispatcher = {
+            cacheKey,
+            dispatch: tusClientDispatch,
+            internalDispatch: setInternalTusState,
+        };
+        const targetOptions = {
+            ...tus.defaultOptions(file),
+            ...options,
+        };
+        const { onSuccess, onError } = createOptionHandler({
+            onError: targetOptions.onError,
+            onSuccess: targetOptions.onSuccess,
+        }, dispatcher);
+        const uploadOptions = {
+            ...targetOptions,
+            onSuccess,
+            onError,
+        };
+        const upload = createUpload(file, uploadOptions, dispatcher);
+        if (autoStart) {
+            startOrResumeUpload(upload);
+        }
+        if (cacheKey) {
+            tusClientDispatch(insertUploadInstance(cacheKey, upload));
+            return;
+        }
+        setInternalTusState({
+            ...initialUseTusState,
+            upload,
+        });
+    }, [tusClientDispatch, cacheKey, tus, autoStart]);
+    const targetTusState = useMemo(() => (cacheKey ? tusClientState.uploads[cacheKey] : internalTusState), [cacheKey, tusClientState, internalTusState]);
+    const remove = useCallback(() => {
+        targetTusState?.upload?.abort();
+        if (!cacheKey) {
+            setInternalTusState(initialUseTusState);
+            return;
+        }
+        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]);
+    // For autoAbort option
+    useEffect(() => {
+        const abortUploading = async () => {
+            if (!tusResult.upload) {
+                return;
+            }
+            await tusResult.upload.abort();
+        };
+        return () => {
+            if (!autoAbort) {
+                return;
+            }
+            abortUploading();
+        };
+    }, [autoAbort, tusResult.upload]);
+    return tusResult;
+};
+
+const initialDefaultOptions = () => tus.defaultOptions;
+class TusHandler {
+    constructor(tusConfigs) {
+        const { canStoreURLs = tus.canStoreURLs, defaultOptions = initialDefaultOptions, } = tusConfigs || {};
+        this.tus = {
+            ...tus,
+            canStoreURLs,
+            defaultOptions,
+        };
+    }
+    get getTus() {
+        return this.tus;
+    }
+}
+
+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 'RESET_CLIENT': {
+            return {
+                tusHandler: new TusHandler(),
+                uploads: {},
+            };
+        }
+        case 'UPDATE_TUS_HANDLER_OPTIONS': {
+            const { canStoreURLs, defaultOptions } = actions.payload;
+            return {
+                ...state,
+                tusHandler: new TusHandler({
+                    canStoreURLs,
+                    defaultOptions,
+                }),
+            };
+        }
+        default:
+            return state;
+    }
+};
+const tusClientInitialState = {
+    uploads: {},
+    tusHandler: new TusHandler(),
+};
+
+const TusController = ({ canStoreURLs, defaultOptions = initialDefaultOptions, children, }) => {
+    const { tusHandler } = useTusClientState();
+    const tus = tusHandler.getTus;
+    const tusClientDispatch = useTusClientDispatch();
+    useEffect(() => {
+        if (tusHandler.getTus.isSupported ||
+            process.env.NODE_ENV === 'production') {
+            return;
+        }
+        // eslint-disable-next-line no-console
+        console.error(ERROR_MESSAGES.tusIsNotSupported);
+    }, [tusHandler.getTus.isSupported]);
+    useEffect(() => {
+        if (tus.defaultOptions === defaultOptions &&
+            tus.canStoreURLs === canStoreURLs) {
+            return;
+        }
+        tusClientDispatch(updateTusHandlerOptions({ canStoreURLs, defaultOptions }));
+    }, [
+        tusClientDispatch,
+        canStoreURLs,
+        defaultOptions,
+        tus.canStoreURLs,
+        tus.defaultOptions,
+    ]);
+    return createElement(Fragment, {}, children);
+};
+
+const TusClientProvider = ({ canStoreURLs, defaultOptions, children, }) => {
+    const [tusClientState, tusClientDispatch] = useReducer(tusClientReducer, {
+        ...tusClientInitialState,
+        tusHandler: new TusHandler({
+            canStoreURLs,
+            defaultOptions,
+        }),
+    });
+    const tusControllerElement = createElement(TusController, {
+        canStoreURLs,
+        defaultOptions,
+    }, children);
+    const tusClientDispatchContextProviderElement = createElement(TusClientDispatchContext.Provider, { value: tusClientDispatch }, tusControllerElement);
+    return createElement(TusClientStateContext.Provider, {
+        value: tusClientState,
+    }, tusClientDispatchContextProviderElement);
+};
+
+export { TusClientProvider, useTus };

package/dist/useTus/index.d.ts

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

package/dist/useTus/types.d.ts

@@ -1,15 +1,15 @@
-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 } 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'>;

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: (useTusOptions?: UseTusOptions | undefined) => UseTusResult;

package/dist/useTus/utils.d.ts

@@ -1,16 +1,16 @@
-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 {};
+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/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("../core/tusClientReducer").UploadState | undefined;
+    };
+    removeUpload: (cacheKey: string) => void;
+    reset: () => void;
+};

package/dist/utils/uid.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-tus",
-  "version": "0.2.5",
+  "version": "0.5.0",
   "description": "React hooks for resumable file uploads using tus-js-client",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -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": {}
 }