use-tus 0.5.0 → 0.7.0

package/README.md

@@ -14,6 +14,7 @@
 
 ## Features
 - Resumable file uploads on react.
+- Lightweight and simple interface hooks.
 - Managing the [Upload](https://github.com/tus/tus-js-client/blob/master/docs/api.md#tusuploadfile-options) by using context.
 - TypeScript support.
 
@@ -28,6 +29,7 @@ npm install use-tus tus-js-client
 ```
 
 or
+
 ```sh
 yarn add use-tus tus-js-client
 ```
@@ -36,13 +38,7 @@ yarn add use-tus tus-js-client
 We can use `useTus` as following.
 
 ```tsx
-import { useTus, TusClientProvider } from 'use-tus'
-
-const App = () => (
-  <TusClientProvider>
-    <Uploader />
-  </TusClientProvider>
-);
+import { useTus } from 'use-tus'
 
 const Uploader = () => {
   const { upload, setUpload, isSuccess, error, remove } = useTus();
@@ -70,7 +66,7 @@ const Uploader = () => {
       return;
     }
 
-    // Start upload the file.
+    // Start to upload the file.
     upload.start();
   }, [upload]);
 
@@ -90,27 +86,79 @@ const Uploader = () => {
 ### `useTus` hooks
 
 ```tsx
-const { upload, setUpload, isSuccess, isAborted, error, remove } = useTus({ cacheKey, autoAbort, autoStart });
+const { upload, setUpload, isSuccess, isAborted, error, remove } = useTus({ autoAbort, autoStart, uploadOptions });
 ```
 
-`useTus` is a hooks to get or create an `Upload` of tus.
+`useTus` is a hooks that creates an object to perform Resumable file upload.
 
 ### Arguments
-- `cacheKey` (type: `string | undefined`)
-  - Specify the key associated with the `Upload` if it's undefined, a random string will be specified.
-
 - `autoAbort` (type: `boolean | undefined`) (default: true)
   - Whether or not to automatically abort uploads when useTus hooks is unmounted.
 
 - `autoStart` (type: `boolean | undefined`) (default: false)
   - Whether or not to start upload the file after `setUpload` function.
 
+- `uploadOptions` (type: `UploadOptions | 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).
+
+### Returns
+- `upload` (type: `tus.Upload | undefined`)
+  - Object to be used when performing Resumable file upload.
+  - 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`)
+  - Function to create an `Upload`.
+  - The property specified in `uploadOptions` will be overwritten if property of `options` are speicified.
+
+- `isSuccess` (type: `boolean`)
+  - Whether the upload was successful or not.
+
+- `isAborted` (type: `boolean`)
+  - Whether the upload was aborted or not.
+
+- `error` (type: `Error | undefined`)
+  - Error when upload fails.
+
+- `remove` (type: `() => void`)
+  - Function to reset states.
+
+### `useTusStore` hooks
+
+```tsx
+const { upload, setUpload, isSuccess, isAborted, error, remove } = useTusStore(cacheKey, { autoAbort, autoStart, uploadOptions  });
+```
+
+`useTusStore` is a hooks that creates an object for resumable file upload and stores it in a context.
+
+This hooks is useful when you want to handle uploads across pages or components.
+
+**Note that using `useTusStore` hooks, the `TusClientProvider` must be specified as the parent or higher element.**
+
+### Arguments
+- `cacheKey` (type: `string`)
+  - Specify the key associated with the `Upload` object is created by `setUpload` function.
+
+- `autoAbort` (type: `boolean | undefined`) (default: true)
+  - Whether or not to automatically abort uploads when useTusStore hooks is unmounted.
+
+- `autoStart` (type: `boolean | undefined`) (default: false)
+  - Whether or not to start upload the file after `setUpload` function.
+
+- `uploadOptions` (type: `UploadOptions | 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).
+
 ### Returns
 - `upload` (type: `tus.Upload | undefined`)
-  - The value of the `Upload` associated with the cacheKey in the TusClientProvider. If not present, undefined.
+  - Object to be used when performing Resumable file upload.
+  - This value of the `Upload` associated with the cacheKey in the TusClientProvider. If not present, undefined.
+  - For detail usage, please see [here](https://github.com/tus/tus-js-client#example)
 
 - `setUpload` (type: `(file: tus.Upload['file'], options?: tus.Upload['options']) => void`)
-  - Function to create an `Upload` and store it in TusClientProvider.
+  - Function to create an `Upload`.
+  - The property specified in `uploadOptions` will be overwritten if property of `options` are speicified.
 
 - `isSuccess` (type: `boolean`)
   - Whether the upload was successful or not.
@@ -128,21 +176,16 @@ const { upload, setUpload, isSuccess, isAborted, error, remove } = useTus({ cach
 
 ```tsx
 () => (
-  <TusClientProvider>
+  <TusClientProvider defaultOptions={defaultOptions}>
     {children}
   </TusClientProvider>
 )
 ```
 
-`TusClientProvider` is the provider that stores the `Upload` with `useTus` hooks.
-
-**In order to use `useTus`, you need to set `TusClientProvider`.**
+`TusClientProvider` is the provider that stores the `Upload` with `useTusStore` hooks.
 
 ### Props
-- `canStoreURLs` (type: `boolean | undefined`)
-  - A boolean indicating whether the current environment allows storing URLs enabling the corresponding upload to be resumed. [detail](https://github.com/tus/tus-js-client/blob/master/docs/api.md#tuscanstoreurls)
-
-- `defaultOptions` (type: `(file: tus.Upload['file']) => tus.DefaltOptions | undefined`)
+- `defaultOptions` (type: `(file: tus.Upload['file']) => UploadOptions | 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`
@@ -165,8 +208,6 @@ const { state, removeUpload, reset } = useTusClient();
 ## Examples
 The following are some example of how to use `use-tus`.
 
-Note that the `TusClientProvider` must be specified as the parent or higher element.
-
 ### Uploading a file
 The setUpload and `upload.start` functions can be used to perform resumable file uploads.
 
@@ -288,7 +329,7 @@ const Uploader = () => {
 You can specify default options in the `defaultOptions` props of the `TusClientProvider`.
 
 ```tsx
-import { useTus, DefaultOptions, TusClientProvider } from 'use-tus'
+import { useTusStore, DefaultOptions, TusClientProvider } from 'use-tus'
 
 const defaultOptions: DefaultOptions = (contents) => {
   const file = contents instanceof File ? contents : undefined;
@@ -311,7 +352,7 @@ const App = () => (
 );
 
 const Uploader = () => {
-  const { setUpload } = useTus({ autoAtart: true });
+  const { setUpload } = useTusStore('cacheKey', { autoAtart: true });
 
   const handleSetUpload = useCallback((event: ChangeEvent<HTMLInputElement>) => {
       const file = event.target.files.item(0);
@@ -336,18 +377,18 @@ const Uploader = () => {
 ```
 
 ### Specify upload key
-If you specify `cacheKey` as an argument to useTus, you can get the `upload` associated with it. This is useful for cross-page file uploads.
+If you specify `cacheKey` as an argument to useTusStore, you can get the `upload` associated with it. This is useful for cross-page file uploads.
 
 ```tsx
 const SelectFileComponent = (file: File) => {
   // Create upload accosiated with 'upload-thumbnail' key
-  const { setUpload } = useTus({ cacheKey: 'upload-thumbnail' })
+  const { setUpload } = useTusStore('upload-thumbnail')
 
   setUpload(file)
 }
 
 const UploadFileComponent = () => {
-  const { upload } = useTus({ cacheKey: 'upload-thumbnail' })
+  const { upload } = useTusStore('upload-thumbnail')
 
   upload.start()
 }

package/dist/TusClientProvider/TusClientProvider.d.ts

@@ -1,4 +1,7 @@
-import { FC } from 'react';
-import { TusConfigs } from '../core/tusHandler';
-export declare type TusClientProviderProps = Readonly<TusConfigs>;
+import { FC } from "react";
+import { DefaultOptions } from "./types";
+export declare type TusClientProviderProps = Readonly<{
+    children?: React.ReactNode;
+    defaultOptions?: DefaultOptions;
+}>;
 export declare const TusClientProvider: FC<TusClientProviderProps>;

package/dist/TusClientProvider/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const ERROR_MESSAGES: {
+    readonly tusClientHasNotFounded: "No TusClient set, use TusClientProvider to set one";
+    readonly tusIsNotSupported: "This browser does not support uploads. Please use a modern browser instead.";
+};

package/dist/TusClientProvider/index.d.ts

@@ -1,2 +1,3 @@
-export { TusClientProvider } from './TusClientProvider';
-export type { TusClientProviderProps } from './TusClientProvider';
+export { TusClientProvider } from "./TusClientProvider";
+export type { TusClientProviderProps } from "./TusClientProvider";
+export type { DefaultOptions } from "./types";

package/dist/{core → TusClientProvider/store}/contexts.d.ts

@@ -1,6 +1,6 @@
-import type { Dispatch } from 'react';
-import { TusClientActions } from './tucClientActions';
-import { TusClientState } from './tusClientReducer';
+import type { Dispatch } from "react";
+import { TusClientActions } from "./tucClientActions";
+import { TusClientState } from "./tusClientReducer";
 export declare const TusClientStateContext: import("react").Context<TusClientState | undefined>;
 export declare const TusClientDispatchContext: import("react").Context<Dispatch<TusClientActions> | undefined>;
 export declare const useTusClientState: () => TusClientState;

package/dist/{core → TusClientProvider/store}/tucClientActions.d.ts

@@ -1,6 +1,6 @@
-import type { Upload } from 'tus-js-client';
-import { TusConfigs } from './tusHandler';
-export declare type TusClientActions = ReturnType<typeof insertUploadInstance | typeof removeUploadInstance | typeof resetClient | typeof updateSuccessUpload | typeof updateErrorUpload | typeof updateIsAbortedUpload | typeof updateTusHandlerOptions>;
+import type { Upload } from "tus-js-client";
+import { DefaultOptions } from "../types";
+export declare 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) => {
     readonly type: "INSERT_UPLOAD_INSTANCE";
     readonly payload: {
@@ -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;
@@ -41,10 +41,9 @@ export declare const removeUploadInstance: (cacheKey: string) => {
 export declare const resetClient: () => {
     readonly type: "RESET_CLIENT";
 };
-export declare const updateTusHandlerOptions: (payload: TusConfigs) => {
-    readonly type: "UPDATE_TUS_HANDLER_OPTIONS";
-    readonly payload: Partial<{
-        canStoreURLs: boolean;
-        defaultOptions: import("./tusHandler").DefaultOptions;
-    }>;
+export declare const updateDefaultOptions: (defaultOptions: DefaultOptions | undefined) => {
+    readonly type: "UPDATE_DEFAULT_OPTIONS";
+    readonly payload: {
+        readonly defaultOptions: DefaultOptions | undefined;
+    };
 };

package/dist/{core → TusClientProvider/store}/tusClientReducer.d.ts

@@ -1,7 +1,7 @@
-import type { Reducer } from 'react';
-import type { Upload } from 'tus-js-client';
-import { TusClientActions } from './tucClientActions';
-import { TusHandler } from './tusHandler';
+import type { Reducer } from "react";
+import type { Upload } from "tus-js-client";
+import { DefaultOptions } from "../types";
+import { TusClientActions } from "./tucClientActions";
 export declare type UploadState = {
     upload: Upload | undefined;
     isSuccess: boolean;
@@ -12,7 +12,7 @@ export declare type TusClientState = {
     uploads: {
         [cacheKey: string]: UploadState | undefined;
     };
-    tusHandler: TusHandler;
+    defaultOptions: DefaultOptions | undefined;
 };
 export declare const tusClientReducer: Reducer<TusClientState, TusClientActions>;
 export declare const tusClientInitialState: TusClientState;

package/dist/TusClientProvider/types.d.ts

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

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Meta } from '@storybook/react';
+import { Meta } from "@storybook/react";
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Basic: () => JSX.Element;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Meta } from '@storybook/react';
+import { Meta } from "@storybook/react";
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const CacheKey: () => JSX.Element;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Meta } from '@storybook/react';
+import { Meta } from "@storybook/react";
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const WithDefaultOptions: () => JSX.Element;

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

@@ -1,9 +1,9 @@
-import { ComponentProps } from 'react';
+import { ComponentProps } from "react";
 declare type BasicButtonProps = {
-    onClick: ComponentProps<'button'>['onClick'];
+    onClick: ComponentProps<"button">["onClick"];
     title: string;
-    disabled?: ComponentProps<'button'>['disabled'];
-    styleColor?: 'primary' | 'basic' | 'error';
+    disabled?: ComponentProps<"button">["disabled"];
+    styleColor?: "primary" | "basic" | "error";
 };
 export declare const BasicButton: import("react").ForwardRefExoticComponent<BasicButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/__stories__/components/BasicButton/index.d.ts

@@ -1 +1 @@
-export { BasicButton } from './BasicButton';
+export { BasicButton } from "./BasicButton";

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/LoadingCircle/index.d.ts

@@ -1 +1 @@
-export { LoadingCircle } from './LoadingCircle';
+export { LoadingCircle } from "./LoadingCircle";

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/ProgressBar/index.d.ts

@@ -1 +1 @@
-export { ProgressBar } from './ProgressBar';
+export { ProgressBar } from "./ProgressBar";

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/__stories__/components/UploadIcon/index.d.ts

@@ -1 +1 @@
-export { UploadIcon } from './UploadIcon';
+export { UploadIcon } from "./UploadIcon";

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

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

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

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

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

@@ -1,5 +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 insertEnvValue: (value: NodeJS.Process["env"]) => void;
+export declare const startOrResumeUploadMock: jest.SpyInstance<void, [upload: import("tus-js-client").Upload]>;