reqwise-core 1.1.0 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +67 -0
- package/package.json +23 -21
package/README.md
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
# @reqwise-core 🚀
|
|
2
|
+
|
|
3
|
+
> **Reqwise** is a powerful developer tool npm package that captures, logs, and visualizes HTTP API requests (Axios/Fetch) within React and vanilla JavaScript applications.
|
|
4
|
+
|
|
5
|
+
It operates like a mini **Postman** or **Chrome DevTools Network** panel embedded directly inside your application. Through a floating aside panel, developers can inspect requests in real-time, browse page history, and send manual test requests with a single click.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## ✨ Features
|
|
10
|
+
|
|
11
|
+
- 🔄 **Full HTTP Interception:** Automatically logs all payloads (method, url, body, headers, duration, response) passing through `ReqwiseClient`.
|
|
12
|
+
- 💾 **Persistence:** Stores requests securely in `localStorage` (under the `reqwise_log` key), keeping data intact even after page reloads.
|
|
13
|
+
- 🛡️ **Security Masking:** Built-in support to obfuscate sensitive data via `maskHeaders` (e.g., Authorization) and `maskFields` (e.g., password).
|
|
14
|
+
- 🌍 **Internationalization (i18n):** Out-of-the-box support for 15 languages powered by an intelligent `t(key, lang)` helper.
|
|
15
|
+
- ⌨️ **Hotkey Support:** Toggle panel visibility instantly using customizable keyboard shortcuts (e.g., `ctrl+shift+e`).
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## 📦 Installation
|
|
20
|
+
|
|
21
|
+
Add the core package to your project using `npm` or `pnpm`:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install @reqwise-core
|
|
25
|
+
# or
|
|
26
|
+
pnpm add @reqwise-core
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
## 🚀 Architecture Flow
|
|
32
|
+
|
|
33
|
+
Reqwise acts as a seamless bridge between your frontend application and the backend services:
|
|
34
|
+
|
|
35
|
+
front ➔ ReqwiseClient ➔ axios (or fetch fallback) ➔ backend
|
|
36
|
+
|
|
37
|
+
1. **Request Sent** ➔ Payload is captured and recorded in the `ReqwiseEntry` schema format.
|
|
38
|
+
2. **Execution** ➔ The actual HTTP network request is securely executed.
|
|
39
|
+
3. **Response Captured** ➔ HTTP status code, response data, and precise round-trip duration are logged.
|
|
40
|
+
4. **Synchronization** ➔ Entry is committed to `reqwise_log` in storage, and a custom DOM event `reqwise:update` is dispatched.
|
|
41
|
+
5. **UI Update** ➔ The injected `#reqwise-panel` layout refreshes immediately to reflect the new log.
|
|
42
|
+
|
|
43
|
+
---
|
|
44
|
+
|
|
45
|
+
## 🛠️ Configuration Example
|
|
46
|
+
|
|
47
|
+
Initialize and configure the core infrastructure using the `core.configure()` API method:
|
|
48
|
+
|
|
49
|
+
```typescript
|
|
50
|
+
import { core } from "@reqwise-core";
|
|
51
|
+
|
|
52
|
+
core.configure({
|
|
53
|
+
theme: "dark",
|
|
54
|
+
placement: "right",
|
|
55
|
+
enabled: true,
|
|
56
|
+
maxItems: 500,
|
|
57
|
+
persistHistory: true,
|
|
58
|
+
ignore: ["/health", "/ping"],
|
|
59
|
+
maskHeaders: ["Authorization"]
|
|
60
|
+
});
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
---
|
|
64
|
+
|
|
65
|
+
## 📄 License
|
|
66
|
+
|
|
67
|
+
MIT © Alizadeh
|
package/package.json
CHANGED
|
@@ -1,26 +1,28 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reqwise-core",
|
|
3
|
-
"version": "1.1.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
3
|
+
"version": "1.1.2",
|
|
4
|
+
"description": "Core vanilla TypeScript HTTP interceptor and floating developer panel for Reqwise ecosystem.",
|
|
5
|
+
"main": "./dist/index.js",
|
|
6
|
+
"module": "./dist/index.mjs",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"keywords": [
|
|
9
|
+
"reqwise",
|
|
10
|
+
"devtools",
|
|
11
|
+
"http-logger",
|
|
12
|
+
"network-inspector",
|
|
13
|
+
"monorepo",
|
|
14
|
+
"axios-interceptor",
|
|
15
|
+
"fetch-logger"
|
|
16
|
+
],
|
|
17
|
+
"author": "Ali Zadeh <alizadehh04@example.com>",
|
|
18
|
+
"license": "MIT",
|
|
19
|
+
"repository": {
|
|
20
|
+
"type": "git",
|
|
21
|
+
"url": "git+https://github.com",
|
|
22
|
+
"directory": "packages/core"
|
|
13
23
|
},
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"type-check": "tsc -p tsconfig.json --noEmit"
|
|
24
|
+
"bugs": {
|
|
25
|
+
"url": "https://github.com"
|
|
17
26
|
},
|
|
18
|
-
"
|
|
19
|
-
"axios": ">=1.0.0"
|
|
20
|
-
},
|
|
21
|
-
"peerDependenciesMeta": {
|
|
22
|
-
"axios": {
|
|
23
|
-
"optional": true
|
|
24
|
-
}
|
|
25
|
-
}
|
|
27
|
+
"homepage": "https://github.com"
|
|
26
28
|
}
|