mobx-downloader 0.3.0

package/ReadMe.md

@@ -0,0 +1,185 @@
+# MobX downloader
+
+File downloading SDK in Web browser, which is powered by [MobX][1].
+
+[![MobX compatibility](https://img.shields.io/badge/Compatible-1?logo=mobx&label=MobX%206%2F7)][1]
+[![NPM Dependency](https://img.shields.io/librariesio/github/idea2app/MobX-downloader.svg)][2]
+[![CI & CD](https://github.com/idea2app/MobX-downloader/actions/workflows/main.yml/badge.svg)][3]
+
+[![NPM](https://nodei.co/npm/mobx-downloader.png?downloads=true&downloadRank=true&stars=true)][4]
+
+## Usage
+
+### Installation
+
+```shell
+npm i mobx-downloader
+```
+
+#### ESM issue
+
+If you have issues with ESM, you can add the following configuration to your `package.json`:
+
+```json
+{
+    "resolutions": {
+        "native-file-system-adapter": "npm:@tech_query/native-file-system-adapter@^3.0.3"
+    }
+}
+```
+
+then install your project with [Yarn][5] or [PNPM][6].
+
+### `tsconfig.json`
+
+```json
+{
+    "compilerOptions": {
+        "target": "ES6",
+        "moduleResolution": "Node",
+        "useDefineForClassFields": true,
+        "experimentalDecorators": false,
+        "jsx": "react-jsx"
+    }
+}
+```
+
+### `model/Downloader.ts`
+
+```javascript
+import { Downloader } from 'mobx-downloader';
+
+export const downloader = new Downloader();
+```
+
+### `component/Downloader.tsx`
+
+Source code: [https://github.com/idea2app/React-MobX-Bootstrap-ts/blob/master/src/component/Downloader.tsx][7]
+
+```tsx
+import { Icon } from 'idea-react';
+import { observer } from 'mobx-react';
+import { DownloadTask } from 'mobx-downloader';
+import { FC } from 'react';
+import { Button, Card, ProgressBar } from 'react-bootstrap';
+
+import { downloader } from '../model/Downloader';
+
+export const DTCard: FC<{ task: DownloadTask }> = observer(({ task }) => (
+    <Card>
+        <Card.Body>
+            <Card.Title>{task.name}</Card.Title>
+            <ProgressBar
+                striped={task.percent < 100}
+                animated={task.executing}
+                now={task.percent}
+                label={`${task.percent}%`}
+            />
+        </Card.Body>
+        <Card.Footer className="d-flex justify-content-between align-items-center">
+            <small>
+                {task.loadedSize.toShortString()} /{' '}
+                {task.totalSize.toShortString()}
+            </small>
+            <div className="d-flex gap-3">
+                {task.percent < 100 &&
+                    (task.executing ? (
+                        <Button
+                            size="sm"
+                            variant="warning"
+                            onClick={() => task.pause()}
+                        >
+                            <Icon name="pause" />
+                        </Button>
+                    ) : (
+                        <Button
+                            size="sm"
+                            variant="success"
+                            onClick={() => task.start()}
+                        >
+                            <Icon name="play" />
+                        </Button>
+                    ))}
+                <Button
+                    size="sm"
+                    variant="danger"
+                    disabled={task.executing}
+                    onClick={() => downloader.destroyTask(task.name)}
+                >
+                    <Icon name="trash" />
+                </Button>
+            </div>
+        </Card.Footer>
+    </Card>
+));
+
+export const Downloader: FC = observer(() => (
+    <ol className="list-unstyled d-flex flex-column gap-3">
+        {downloader.tasks.map(task => (
+            <li key={task.id}>
+                <DTCard task={task} />
+            </li>
+        ))}
+    </ol>
+));
+```
+
+### `page/Downloader.tsx`
+
+Source code: [https://github.com/idea2app/React-MobX-Bootstrap-ts/blob/master/src/page/Downloader.tsx][8]
+
+```tsx
+import { observer } from 'mobx-react';
+import { FC, FormEvent } from 'react';
+import { Button, Container, FloatingLabel, Form } from 'react-bootstrap';
+import { formToJSON } from 'web-utility';
+
+import { Downloader } from '../component/Downloader';
+import { downloader } from '../model/Downloader';
+
+const addTask = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const form = event.currentTarget;
+    const { path } = formToJSON(form);
+
+    await downloader
+        .createTask(path as string)
+        .start({ chunkSize: 1024 ** 2 / 2 });
+
+    form.reset();
+};
+
+export const DownloaderPage: FC = observer(() => (
+    <Container>
+        <h1 className="my-4">Downloader</h1>
+
+        <Form
+            className="d-flex align-items-center gap-3 mb-3"
+            onSubmit={addTask}
+        >
+            <FloatingLabel className="flex-fill" label="URL">
+                <Form.Control
+                    placeholder="URL"
+                    type="url"
+                    name="path"
+                    required
+                />
+            </FloatingLabel>
+
+            <Button type="submit">+</Button>
+        </Form>
+
+        <Downloader />
+    </Container>
+));
+```
+
+[1]: https://mobx.js.org/
+[2]: https://libraries.io/npm/mobx-downloader
+[3]: https://github.com/idea2app/MobX-downloader/actions/workflows/main.yml
+[4]: https://nodei.co/npm/mobx-downloader/
+[5]: https://yarnpkg.com/
+[6]: https://pnpm.io/
+[7]: https://github.com/idea2app/React-MobX-Bootstrap-ts/blob/master/src/component/Downloader.tsx
+[8]: https://github.com/idea2app/React-MobX-Bootstrap-ts/blob/master/src/page/Downloader.tsx

package/dist/index.d.ts

@@ -0,0 +1,53 @@
+import { Context, DownloadOptions, HTTPClient, TransferProgress } from "koajax";
+import { FileSystemHandle } from "native-file-system-adapter";
+import { ReadableStream } from "web-streams-polyfill";
+import { ByteSize, Constructor } from "web-utility";
+export abstract class DownloadTask implements Partial<TransferProgress> {
+    abstract client: Pick<HTTPClient<Context>, 'download'>;
+    accessor id: string;
+    accessor name: string;
+    accessor path: string;
+    accessor fsHandle: FileSystemHandle | undefined;
+    accessor total: number;
+    accessor loaded: number;
+    accessor percent: number;
+    accessor executing: boolean;
+    accessor options: DownloadOptions | undefined;
+    stream?: ReadableStream<Partial<TransferProgress>>;
+    get totalSize(): ByteSize;
+    get loadedSize(): ByteSize;
+    static nameOf(URI: string): string;
+    constructor(path: string, name?: string);
+    toJSON(): {
+        total: number;
+        loaded: number;
+        percent: number;
+        id: string;
+        name: string;
+        path: string;
+        fsHandle: FileSystemHandle;
+        options: DownloadOptions;
+    };
+    saveMeta(data?: Partial<TransferProgress>): Partial<TransferProgress>;
+    abstract loadStream(options?: DownloadOptions): AsyncGenerator<Partial<TransferProgress>>;
+    start(options?: DownloadOptions): Promise<ReadableStream<Partial<TransferProgress>>>;
+    pause(): Promise<void>;
+    destroy(): Promise<void>;
+}
+export class HTTPDownloadTask extends DownloadTask {
+    client: DownloadTask['client'];
+    constructor(path: string, name?: string);
+    loadStream(options?: DownloadOptions): AsyncGenerator<Partial<import("koajax").TransferProgress>, void, unknown>;
+}
+export class Downloader {
+    static protocolMap: Record<string, Constructor<DownloadTask>>;
+    static createTask(path: string, name?: string): DownloadTask;
+    constructor();
+    accessor tasks: DownloadTask[];
+    get unfinishedCount(): number;
+    get executingCount(): number;
+    createTask(path: string, name?: string): DownloadTask;
+    destroyTask(name: string): Promise<void>;
+}
+
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"mappings":";;;;AAOA,OAAO,QAAQ,mBAAoB,YAAW,OAAO,CAAC,gBAAgB,CAAC;IACnE,QAAQ,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,OAAO,CAAC,EAAE,UAAU,CAAC,CAAC;IAIvD,QAAQ,CAAC,EAAE,SAAM;IAIjB,QAAQ,CAAC,IAAI,SAAM;IAInB,QAAQ,CAAC,IAAI,SAAM;IAInB,QAAQ,CAAC,QAAQ,EAAE,gBAAgB,GAAG,SAAS,CAAC;IAIhD,QAAQ,CAAC,KAAK,SAAK;IAInB,QAAQ,CAAC,MAAM,SAAK;IAIpB,QAAQ,CAAC,OAAO,SAAK;IAGrB,QAAQ,CAAC,SAAS,UAAS;IAI3B,QAAQ,CAAC,OAAO,EAAE,eAAe,GAAG,SAAS,CAAC;IAE9C,MAAM,CAAC,EAAE,eAAe,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEnD,IACI,SAAS,aAEZ;IAED,IACI,UAAU,aAEb;IAED,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM;gBAMb,IAAI,EAAE,MAAM,EAAE,IAAI,SAA4B;IAK1D,MAAM;;;;;;;;;;IAUN,QAAQ,CAAC,IAAI,GAAE,OAAO,CAAC,gBAAgB,CAAM;IAQ7C,QAAQ,CAAC,UAAU,CACf,OAAO,CAAC,EAAE,eAAe,GAC1B,cAAc,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAEtC,KAAK,CAAC,OAAO,kBAAe;IA2B5B,KAAK;IAIL,OAAO;CAKhB;ACxHD,6BAA8B,SAAQ,YAAY;IAC9C,MAAM,EAAE,YAAY,CAAC,QAAQ,CAAC,CAE3B;gBAES,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM;IAQhC,UAAU,CAAC,OAAO,CAAC,EAAE,eAAe;CAsC9C;AC/CD;IACI,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,YAAY,YAAY,CAAC,CAAC,CAG3D;IAEF,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM;;IAqB7C,QAAQ,CAAC,KAAK,EAAE,YAAY,EAAE,CAAM;IAEpC,IACI,eAAe,WAElB;IAED,IACI,cAAc,WAEjB;IAED,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM;IAahC,WAAW,CAAC,IAAI,EAAE,MAAM;CAUjC","sources":["source/source/Task.ts","source/source/HTTP.ts","source/source/index.ts","source/index.ts"],"sourcesContent":[null,null,null,"import { computed, observable } from 'mobx';\nimport { persist, restore } from 'mobx-restful';\nimport { Constructor } from 'web-utility';\n\nimport { HTTPDownloadTask } from './HTTP';\nimport { DownloadTask } from './Task';\n\nexport * from './HTTP';\nexport * from './Task';\n\nexport class Downloader {\n    static protocolMap: Record<string, Constructor<DownloadTask>> = {\n        http: HTTPDownloadTask,\n        https: HTTPDownloadTask\n    };\n\n    static createTask(path: string, name?: string) {\n        const [protocol] = path.split(':');\n        const ProtocolTask = Downloader.protocolMap[protocol];\n\n        if (!ProtocolTask)\n            throw new URIError(\n                `Protocol \"${protocol} has not been registered\"`\n            );\n        return new ProtocolTask(path, name);\n    }\n\n    constructor() {\n        restore(this, 'downloader');\n    }\n\n    @persist({\n        set: tasks => tasks.map(({ name, path }) => ({ name, path })),\n        get: list =>\n            list?.map(({ name, path }) => Downloader.createTask(path, name))\n    })\n    @observable\n    accessor tasks: DownloadTask[] = [];\n\n    @computed\n    get unfinishedCount() {\n        return this.tasks.filter(({ percent }) => percent < 100).length;\n    }\n\n    @computed\n    get executingCount() {\n        return this.tasks.filter(({ executing }) => executing).length;\n    }\n\n    createTask(path: string, name?: string) {\n        const { tasks } = this;\n        const sameTask = tasks.find(task => task.path === path);\n\n        if (sameTask) return sameTask;\n\n        const task = Downloader.createTask(path, name);\n\n        this.tasks = [...tasks, task];\n\n        return task;\n    }\n\n    async destroyTask(name: string) {\n        const { tasks } = this;\n        const index = tasks.findIndex(({ name: N }) => N === name);\n\n        if (index < 0) throw new ReferenceError(`${name} isn't found`);\n\n        await tasks[index].destroy();\n\n        this.tasks = [...tasks.slice(0, index), ...tasks.slice(index + 1)];\n    }\n}\n"],"names":[],"version":3,"file":"index.d.ts.map"}