Skip to content

Commit ce37db3

Browse files
authored
[refactor] use Event Target class to implement fetch() progress (#17)
1 parent 963fbab commit ce37db3

13 files changed

+1265
-1402
lines changed

ReadMe.md

+44-7
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ Automatic Parsed type:
3535

3636
#### Installation
3737

38-
```shell
38+
```powershell
3939
npm install koajax
4040
```
4141

@@ -55,15 +55,16 @@ npm install koajax
5555

5656
#### Installation
5757

58-
```shell
59-
npm install koajax jsdom
58+
```powershell
59+
npm install koajax core-js jsdom
6060
```
6161

6262
#### `index.ts`
6363

6464
```javascript
65+
import { polyfill } from 'koajax/source/polyfill';
66+
6567
import { HTTPClient } from 'koajax';
66-
import { polyfill } from 'koajax/source/polyfill'
6768

6869
const origin = 'https://your-target-origin.com';
6970

@@ -80,7 +81,7 @@ polyfill(origin).then(() => {
8081

8182
#### Execution
8283

83-
```shell
84+
```powershell
8485
npx tsx index.ts
8586
```
8687

@@ -141,9 +142,44 @@ document.querySelector('input[type="file"]').onchange = async ({
141142
};
142143
```
143144

145+
#### Single HTTP request based on Fetch `duplex` streams
146+
147+
> This experimental feature has [some limitations][7].
148+
149+
```diff
150+
-import { request } from 'koajax';
151+
+import { requestFetch } from 'koajax';
152+
153+
document.querySelector('input[type="file"]').onchange = async ({
154+
target: { files }
155+
}) => {
156+
for (const file of files) {
157+
- const { upload, download, response } = request({
158+
+ const { upload, download, response } = requestFetch({
159+
method: 'POST',
160+
path: '/files',
161+
+ headers: {
162+
+ 'Content-Type': file.type,
163+
+ 'Content-Length': file.size + ''
164+
+ },
165+
- body: file,
166+
+ body: file.stream(),
167+
responseType: 'json'
168+
});
169+
170+
for await (const { loaded } of upload)
171+
console.log(`Upload ${file.name} : ${(loaded / file.size) * 100}%`);
172+
173+
const { body } = await response;
174+
175+
console.log(`Upload ${file.name} : ${body.url}`);
176+
}
177+
};
178+
```
179+
144180
#### Multiple HTTP requests based on `Range` header
145181

146-
```shell
182+
```powershell
147183
npm i native-file-system-adapter # Web standard API polyfill
148184
```
149185

@@ -176,7 +212,7 @@ document.querySelector('#download').onclick = async () => {
176212

177213
### Global Error fallback
178214

179-
```shell
215+
```powershell
180216
npm install browser-unhandled-rejection # Web standard API polyfill
181217
```
182218

@@ -226,3 +262,4 @@ document.querySelector('input[type="file"]').onchange = async ({
226262
[4]: https://www.jsdelivr.com/package/npm/koajax
227263
[5]: https://nodei.co/npm/koajax/
228264
[6]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of#Iterating_over_async_generators
265+
[7]: https://developer.chrome.com/docs/capabilities/web-apis/fetch-streaming-requests#restrictions

package.json

+15-14
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "koajax",
3-
"version": "3.0.3",
3+
"version": "3.1.0",
44
"license": "LGPL-3.0",
55
"author": "[email protected]",
66
"description": "HTTP Client based on Koa-like middlewares",
@@ -25,36 +25,37 @@
2525
"main": "dist/index.js",
2626
"module": "dist/index.esm.js",
2727
"dependencies": {
28-
"@swc/helpers": "^0.5.13",
29-
"core-js": "^3.38.1",
28+
"@swc/helpers": "^0.5.15",
3029
"regenerator-runtime": "^0.14.1",
3130
"web-streams-polyfill": "^4.0.0",
32-
"web-utility": "^4.4.1"
31+
"web-utility": "^4.4.2"
3332
},
3433
"peerDependencies": {
34+
"core-js": ">=3",
3535
"jsdom": ">=21"
3636
},
3737
"devDependencies": {
38-
"@parcel/packager-ts": "~2.12.0",
39-
"@parcel/transformer-typescript-types": "~2.12.0",
40-
"@types/core-js": "^2.5.8",
38+
"@parcel/packager-ts": "~2.13.2",
39+
"@parcel/transformer-typescript-types": "~2.13.2",
4140
"@types/jest": "^29.5.14",
4241
"@types/jsdom": "^21.1.7",
43-
"@types/node": "^20.17.1",
42+
"@types/node": "^20.17.9",
43+
"abortcontroller-polyfill": "^1.7.6",
44+
"core-js": "^3.39.0",
4445
"cross-env": "^7.0.3",
45-
"husky": "^9.1.6",
46+
"husky": "^9.1.7",
4647
"jest": "^29.7.0",
4748
"jest-environment-jsdom": "^29.7.0",
4849
"jsdom": "^25.0.1",
4950
"lint-staged": "^15.2.10",
5051
"open-cli": "^8.0.0",
51-
"parcel": "~2.12.0",
52-
"prettier": "^3.3.3",
52+
"parcel": "~2.13.2",
53+
"prettier": "^3.4.1",
5354
"ts-jest": "^29.2.5",
5455
"ts-node": "^10.9.2",
55-
"typedoc": "^0.26.10",
56-
"typedoc-plugin-mdn-links": "^3.3.5",
57-
"typescript": "~5.6.3"
56+
"typedoc": "^0.27.2",
57+
"typedoc-plugin-mdn-links": "^4.0.2",
58+
"typescript": "~5.7.2"
5859
},
5960
"prettier": {
6061
"singleQuote": true,

0 commit comments

Comments
 (0)