[add] first Stable version migrated from MobX-RESTful

.github/pr-badge.yml

@@ -0,0 +1,17 @@
+- icon: visualstudio
+  label: 'GitHub.dev'
+  message: 'PR-$prNumber'
+  color: 'blue'
+  url: 'https://github.dev/$owner/$repo/pull/$prNumber'
+
+- icon: github
+  label: 'GitHub codespaces'
+  message: 'PR-$prNumber'
+  color: 'black'
+  url: 'https://codespaces.new/$owner/$repo/pull/$prNumber'
+
+- icon: git
+  label: 'GitPod.io'
+  message: 'PR-$prNumber'
+  color: 'orange'
+  url: 'https://gitpod.io/?autostart=true#https://github.com/$owner/$repo/pull/$prNumber'

.github/settings.yml

@@ -0,0 +1,85 @@
+# These settings are synced to GitHub by https://probot.github.io/apps/settings/
+
+repository:
+    allow_merge_commit: false
+
+    delete_branch_on_merge: true
+
+    enable_vulnerability_alerts: true
+
+labels:
+    - name: bug
+      color: '#d73a4a'
+      description: Something isn't working
+
+    - name: documentation
+      color: '#0075ca'
+      description: Improvements or additions to documentation
+
+    - name: duplicate
+      color: '#cfd3d7'
+      description: This issue or pull request already exists
+
+    - name: enhancement
+      color: '#a2eeef'
+      description: Some improvements
+
+    - name: feature
+      color: '#16b33f'
+      description: New feature or request
+
+    - name: good first issue
+      color: '#7057ff'
+      description: Good for newcomers
+
+    - name: help wanted
+      color: '#008672'
+      description: Extra attention is needed
+
+    - name: invalid
+      color: '#e4e669'
+      description: This doesn't seem right
+
+    - name: question
+      color: '#d876e3'
+      description: Further information is requested
+
+    - name: wontfix
+      color: '#ffffff'
+      description: This will not be worked on
+
+branches:
+    - name: master
+      # https://docs.github.com/en/rest/reference/repos#update-branch-protection
+      protection:
+          # Required. Require at least one approving review on a pull request, before merging. Set to null to disable.
+          required_pull_request_reviews:
+              # The number of approvals required. (1-6)
+              required_approving_review_count: 1
+              # Dismiss approved reviews automatically when a new commit is pushed.
+              dismiss_stale_reviews: true
+              # Blocks merge until code owners have reviewed.
+              require_code_owner_reviews: true
+              # Specify which users and teams can dismiss pull request reviews.
+              # Pass an empty dismissal_restrictions object to disable.
+              # User and team dismissal_restrictions are only available for organization-owned repositories.
+              # Omit this parameter for personal repositories.
+              dismissal_restrictions:
+                  # users: []
+                  # teams: []
+          # Required. Require status checks to pass before merging. Set to null to disable
+          required_status_checks:
+              # Required. Require branches to be up to date before merging.
+              strict: true
+              # Required. The list of status checks to require in order to merge into this branch
+              contexts: []
+          # Required. Enforce all configured restrictions for administrators.
+          # Set to true to enforce required status checks for repository administrators.
+          # Set to null to disable.
+          enforce_admins: true
+          # Prevent merge commits from being pushed to matching branches
+          required_linear_history: true
+          # Required. Restrict who can push to this branch.
+          # Team and user restrictions are only available for organization-owned repositories.
+          # Set to null to disable.
+          restrictions: null

.github/workflows/main.yml

@@ -0,0 +1,36 @@
+name: CI & CD
+on:
+    push:
+        tags:
+            - v*
+jobs:
+    Build-and-Publish:
+        runs-on: ubuntu-latest
+        permissions:
+            contents: write
+            id-token: write
+        steps:
+            - uses: actions/checkout@v4
+
+            - uses: pnpm/action-setup@v4
+              with:
+                  version: 9
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+                  registry-url: https://registry.npmjs.org
+                  cache: pnpm
+            - name: Install Dependencies
+              run: pnpm i --frozen-lockfile
+
+            - name: Build & Publish
+              run: npm publish --access public --provenance
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+            - name: Update document
+              uses: peaceiris/actions-gh-pages@v4
+              with:
+                  publish_dir: ./docs
+                  personal_token: ${{ secrets.GITHUB_TOKEN }}
+                  force_orphan: true

.gitignore

@@ -0,0 +1,7 @@
+node_modules/
+package-lock.json
+yarn.lock
+.parcel-cache/
+dist/
+docs/
+.vscode/settings.json

.husky/pre-commit

@@ -0,0 +1 @@
+npm test

.husky/pre-push

@@ -0,0 +1 @@
+npm run build

.npmignore

@@ -0,0 +1,2 @@
+.*
+docs/

.npmrc

@@ -0,0 +1 @@
+auto-install-peers = false

.parcelrc

@@ -0,0 +1,8 @@
+{
+    "extends": "@parcel/config-default",
+    "transformers": {
+        "*.{ts,tsx}": [
+            "@parcel/transformer-typescript-tsc"
+        ]
+    }
+}

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