wepost 1.0.0
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/LICENSE +21 -0
- package/README.md +508 -0
- package/dist/engine.d.ts +15 -0
- package/dist/history.d.ts +8 -0
- package/dist/index.d.ts +11 -0
- package/dist/styles.d.ts +1 -0
- package/dist/ui.d.ts +19 -0
- package/dist/wepost.es.js +462 -0
- package/dist/wepost.umd.js +299 -0
- package/package.json +35 -0
- package/proxy/server.js +38 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,508 @@
|
|
|
1
|
+
# โก WEPOST โ Floating API DevTools
|
|
2
|
+
|
|
3
|
+
A lightweight, embeddable Postman-like tool that lives inside your browser, WebView, or any frontend framework. WEPOST is a **floating API debugging widget** that can be injected into any web application with a single script or installed via npm. It is designed for developers who want to test APIs instantly without switching tools.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# ๐ Language / Bahasa / ่ฏญ่จ / ์ธ์ด
|
|
8
|
+
|
|
9
|
+
- [๐บ๐ธ English](#-english)
|
|
10
|
+
- [๐ฎ๐ฉ Bahasa Indonesia](#-bahasa-indonesia)
|
|
11
|
+
- [๐จ๐ณ ไธญๆ](#-ไธญๆ)
|
|
12
|
+
- [๐ฐ๐ท ํ๊ตญ์ด](#-ํ๊ตญ์ด)
|
|
13
|
+
|
|
14
|
+
---
|
|
15
|
+
|
|
16
|
+
## ๐บ๐ธ English
|
|
17
|
+
|
|
18
|
+
### โจ Features
|
|
19
|
+
- โก **Floating "WP" button:** DevTools-style launcher widget.
|
|
20
|
+
- ๐ช **Draggable API panel:** Freely repositionable user interface.
|
|
21
|
+
- ๐ **HTTP methods:** Full support for `GET`, `POST`, `PUT`, `DELETE`, and `PATCH`.
|
|
22
|
+
- ๐งพ **Advanced Editor:** Embedded Headers and JSON body editor.
|
|
23
|
+
- ๐ก **Live response viewer:** Inspect status codes, response times, and payloads.
|
|
24
|
+
- ๐พ **Request history:** Locally persisted logs using `localStorage`.
|
|
25
|
+
- ๐ **One-click replay:** Instantly re-run previous API requests.
|
|
26
|
+
- ๐ฑ **Mobile-Optimized:** Fully functional within Android & iOS WebViews.
|
|
27
|
+
- ๐จ **Sleek UI:** Clean, dark developer tools aesthetics.
|
|
28
|
+
- ๐ง **Framework Agnostic:** Seamless integration with React, Vue, Angular, etc.
|
|
29
|
+
|
|
30
|
+
### ๐ Installation
|
|
31
|
+
|
|
32
|
+
#### ๐ฆ NPM
|
|
33
|
+
```bash
|
|
34
|
+
npm install wepost
|
|
35
|
+
|
|
36
|
+
```
|
|
37
|
+
#### ๐ CDN
|
|
38
|
+
```html
|
|
39
|
+
<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
|
|
40
|
+
|
|
41
|
+
```
|
|
42
|
+
#### โก Auto Init (Quick Start)
|
|
43
|
+
```html
|
|
44
|
+
<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)" data-auto-init="true"></script>
|
|
45
|
+
|
|
46
|
+
```
|
|
47
|
+
### ๐งช Usage
|
|
48
|
+
#### ๐ข JavaScript (NPM / Module)
|
|
49
|
+
```javascript
|
|
50
|
+
import WePost from "wepost";
|
|
51
|
+
|
|
52
|
+
const wepost = new WePost({
|
|
53
|
+
defaultUrl: "[https://jsonplaceholder.typicode.com/todos/1](https://jsonplaceholder.typicode.com/todos/1)"
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
wepost.mount();
|
|
57
|
+
|
|
58
|
+
```
|
|
59
|
+
#### ๐ CDN (Vanilla JS)
|
|
60
|
+
```html
|
|
61
|
+
<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
|
|
62
|
+
<script>
|
|
63
|
+
const wepost = new WePost({
|
|
64
|
+
defaultUrl: "[https://api.example.com](https://api.example.com)"
|
|
65
|
+
});
|
|
66
|
+
wepost.mount();
|
|
67
|
+
</script>
|
|
68
|
+
|
|
69
|
+
```
|
|
70
|
+
#### ๐ฑ Android WebView / iOS WebView
|
|
71
|
+
Just inject the script into your core web layout:
|
|
72
|
+
```html
|
|
73
|
+
<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
|
|
74
|
+
|
|
75
|
+
```
|
|
76
|
+
๐ *The floating WP button will automatically appear in the lower corner of the viewport.*
|
|
77
|
+
### ๐ง How It Works
|
|
78
|
+
1. A floating **WP** button appears on the page.
|
|
79
|
+
2. Click it โ The main **DevTools panel** slides open.
|
|
80
|
+
3. Enter API request details: **URL**, **Method**, **Headers**, and **Body**.
|
|
81
|
+
4. Click **Send** to execute.
|
|
82
|
+
5. View the real-time **Response** payload instantly.
|
|
83
|
+
### ๐งฉ Optional Proxy Mode (CORS Fix)
|
|
84
|
+
If your target API restricts client-side browser requests via CORS, initialize the proxy layer:
|
|
85
|
+
```bash
|
|
86
|
+
npm run proxy
|
|
87
|
+
|
|
88
|
+
```
|
|
89
|
+
Then configure your instance:
|
|
90
|
+
```javascript
|
|
91
|
+
const wepost = new WePost({
|
|
92
|
+
proxyUrl: "http://localhost:4000/proxy"
|
|
93
|
+
});
|
|
94
|
+
|
|
95
|
+
```
|
|
96
|
+
### ๐ Framework Support
|
|
97
|
+
WEPOST runs everywhere modern JavaScript does:
|
|
98
|
+
* React โ๏ธ / Vue ๐ข / Angular ๐ฆ / Svelte ๐งก
|
|
99
|
+
* Next.js / Nuxt ๐
|
|
100
|
+
* Vanilla JS ๐
|
|
101
|
+
* Laravel Blade / PHP ๐
|
|
102
|
+
* Android WebView ๐ฑ / iOS WebView ๐
|
|
103
|
+
#### โก Example Usage in Laravel
|
|
104
|
+
```html
|
|
105
|
+
@if (app()->environment('local'))
|
|
106
|
+
<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
|
|
107
|
+
<script>
|
|
108
|
+
new WePost({
|
|
109
|
+
defaultUrl: "/api"
|
|
110
|
+
}).mount();
|
|
111
|
+
</script>
|
|
112
|
+
@endif
|
|
113
|
+
|
|
114
|
+
```
|
|
115
|
+
### ๐ฅ Use Cases
|
|
116
|
+
* In-context API debugging without leaving the browser tab.
|
|
117
|
+
* Lightweight alternative to external apps (like Postman or Insomnia) for testing environments.
|
|
118
|
+
* Real-time mobile API inspection inside cross-platform WebViews.
|
|
119
|
+
* Pre-integrated utility for Internal Admin Dashboards.
|
|
120
|
+
* Embeddable SaaS platform developer widgets.
|
|
121
|
+
### ๐ฆ Equivalent cURL Example
|
|
122
|
+
Every request structured via WEPOST corresponds to standard specifications:
|
|
123
|
+
```bash
|
|
124
|
+
curl -X POST [https://api.example.com/users](https://api.example.com/users) \
|
|
125
|
+
-H "Content-Type: application/json" \
|
|
126
|
+
-H "Authorization: Bearer TOKEN" \
|
|
127
|
+
-d '{"name":"John"}'
|
|
128
|
+
|
|
129
|
+
```
|
|
130
|
+
### ๐ Why WEPOST?
|
|
131
|
+
* **No Context Switching:** Test endpoint states within the app context.
|
|
132
|
+
* **Ultra Lightweight:** Minimal bundle footprint.
|
|
133
|
+
* **Developer-First Design:** Clean layouts mapped directly to development mental workflows.
|
|
134
|
+
### ๐ค Contribute
|
|
135
|
+
We welcome all community suggestions! Planned feature vectors include:
|
|
136
|
+
* Request Collections & Environment Variables.
|
|
137
|
+
* Cloud Synchronization & Shared Team Workspaces.
|
|
138
|
+
* Native GraphQL Schema Introspection.
|
|
139
|
+
* Automation & Assertions runner.
|
|
140
|
+
### ๐ License
|
|
141
|
+
Licensed under the **MIT License** โ feel free to modify, extend, and deploy.
|
|
142
|
+
## ๐ฎ๐ฉ Bahasa Indonesia
|
|
143
|
+
### โจ Fitur Utama
|
|
144
|
+
* โก **Tombol Floating "WP":** Peluncur widget dengan gaya DevTools yang minimalis.
|
|
145
|
+
* ๐ช **Panel Fleksibel:** Antarmuka panel API yang dapat digeser secara bebas.
|
|
146
|
+
* ๐ **Metode HTTP Komplit:** Mendukung penuh GET, POST, PUT, DELETE, dan PATCH.
|
|
147
|
+
* ๐งพ **Editor Header & JSON Body:** Kelola payload dan header autentikasi dengan mudah.
|
|
148
|
+
* ๐ก **Viewer Live Response:** Pantau status kode, waktu respons, dan data kembalian secara real-time.
|
|
149
|
+
* ๐พ **Riwayat Otomatis:** Menyimpan log request sebelumnya menggunakan localStorage.
|
|
150
|
+
* ๐ **Jalankan Ulang Instan:** Eksekusi kembali request lama hanya dengan satu klik.
|
|
151
|
+
* ๐ฑ **Kompatibel Seluler:** Berjalan mulus di dalam Android WebView maupun iOS WebView.
|
|
152
|
+
* ๐จ **UI Dark Mode Elegan:** Desain gelap khas alat pengembangan profesional.
|
|
153
|
+
* ๐ง **Bebas Framework:** Dapat diintegrasikan langsung pada React, Vue, Angular, dsb.
|
|
154
|
+
### ๐ Instalasi
|
|
155
|
+
#### ๐ฆ NPM
|
|
156
|
+
```bash
|
|
157
|
+
npm install wepost
|
|
158
|
+
|
|
159
|
+
```
|
|
160
|
+
#### ๐ CDN
|
|
161
|
+
```html
|
|
162
|
+
<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
|
|
163
|
+
|
|
164
|
+
```
|
|
165
|
+
#### โก Inisialisasi Otomatis (Cepat)
|
|
166
|
+
```html
|
|
167
|
+
<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)" data-auto-init="true"></script>
|
|
168
|
+
|
|
169
|
+
```
|
|
170
|
+
### ๐งช Cara Penggunaan
|
|
171
|
+
#### ๐ข JavaScript (NPM / Modul)
|
|
172
|
+
```javascript
|
|
173
|
+
import WePost from "wepost";
|
|
174
|
+
|
|
175
|
+
const wepost = new WePost({
|
|
176
|
+
defaultUrl: "[https://jsonplaceholder.typicode.com/todos/1](https://jsonplaceholder.typicode.com/todos/1)"
|
|
177
|
+
});
|
|
178
|
+
|
|
179
|
+
wepost.mount();
|
|
180
|
+
|
|
181
|
+
```
|
|
182
|
+
#### ๐ CDN (Vanilla JS)
|
|
183
|
+
```html
|
|
184
|
+
<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
|
|
185
|
+
<script>
|
|
186
|
+
const wepost = new WePost({
|
|
187
|
+
defaultUrl: "[https://api.example.com](https://api.example.com)"
|
|
188
|
+
});
|
|
189
|
+
wepost.mount();
|
|
190
|
+
</script>
|
|
191
|
+
|
|
192
|
+
```
|
|
193
|
+
#### ๐ฑ Android WebView / iOS WebView
|
|
194
|
+
Cukup injeksikan script berikut ke dalam file layout utama Anda:
|
|
195
|
+
```html
|
|
196
|
+
<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
|
|
197
|
+
|
|
198
|
+
```
|
|
199
|
+
๐ *Tombol floating WP akan muncul secara otomatis di sudut layar Anda.*
|
|
200
|
+
### ๐ง Cara Kerja
|
|
201
|
+
1. Tombol melayang **WP** muncul di halaman web.
|
|
202
|
+
2. Klik tombol tersebut โ **Panel DevTools** utama akan terbuka.
|
|
203
|
+
3. Masukkan detail request API: **URL**, **Metode HTTP**, **Header**, dan **Body JSON**.
|
|
204
|
+
4. Klik **Send** untuk mengirim.
|
|
205
|
+
5. Lihat hasil **Response** secara instan di tempat yang sama.
|
|
206
|
+
### ๐งฉ Mode Proxy Opsional (Solusi CORS)
|
|
207
|
+
Jika API Anda memblokir request langsung dari browser karena masalah kebijakan CORS:
|
|
208
|
+
```bash
|
|
209
|
+
npm run proxy
|
|
210
|
+
|
|
211
|
+
```
|
|
212
|
+
Lalu konfigurasikan instance seperti ini:
|
|
213
|
+
```javascript
|
|
214
|
+
const wepost = new WePost({
|
|
215
|
+
proxyUrl: "http://localhost:4000/proxy"
|
|
216
|
+
});
|
|
217
|
+
|
|
218
|
+
```
|
|
219
|
+
### ๐ Dukungan Framework
|
|
220
|
+
WEPOST bekerja di semua framework frontend modern:
|
|
221
|
+
* React โ๏ธ / Vue ๐ข / Angular ๐ฆ / Svelte ๐งก
|
|
222
|
+
* Next.js / Nuxt ๐
|
|
223
|
+
* Vanilla JS ๐
|
|
224
|
+
* Laravel Blade / PHP ๐
|
|
225
|
+
* Android WebView ๐ฑ / iOS WebView ๐
|
|
226
|
+
#### โก Contoh Penggunaan di Laravel
|
|
227
|
+
```html
|
|
228
|
+
@if (app()->environment('local'))
|
|
229
|
+
<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
|
|
230
|
+
<script>
|
|
231
|
+
new WePost({
|
|
232
|
+
defaultUrl: "/api"
|
|
233
|
+
}).mount();
|
|
234
|
+
</script>
|
|
235
|
+
@endif
|
|
236
|
+
|
|
237
|
+
```
|
|
238
|
+
### ๐ฅ Kasus Penggunaan
|
|
239
|
+
* Debugging API langsung di dalam aplikasi tanpa perlu berpindah tab browser.
|
|
240
|
+
* Menggantikan aplikasi eksternal (seperti Postman) untuk pengujian cepat di lingkungan lokal.
|
|
241
|
+
* Pengujian endpoint API seluler langsung dari dalam WebView bawaan.
|
|
242
|
+
* Dashboard Admin internal atau utilitas alat pengembang bawaan SaaS.
|
|
243
|
+
### ๐ฆ Contoh cURL yang Setara
|
|
244
|
+
Setiap request yang disusun di WEPOST setara dengan standar perintah cURL berikut:
|
|
245
|
+
```bash
|
|
246
|
+
curl -X POST [https://api.example.com/users](https://api.example.com/users) \
|
|
247
|
+
-H "Content-Type: application/json" \
|
|
248
|
+
-H "Authorization: Bearer TOKEN" \
|
|
249
|
+
-d '{"name":"John"}'
|
|
250
|
+
|
|
251
|
+
```
|
|
252
|
+
### ๐ Mengapa Memilih WEPOST?
|
|
253
|
+
* **Tanpa Pindah Aplikasi:** Fokus pada alur kerja Anda tanpa distraksi aplikasi eksternal.
|
|
254
|
+
* **Sangat Ringan:** Tidak membebani performa pemuatan aplikasi.
|
|
255
|
+
* **Desain Khusus Developer:** UI efisien yang disesuaikan untuk kenyamanan debugging cepat.
|
|
256
|
+
### ๐ค Kontribusi
|
|
257
|
+
Kami sangat terbuka dengan saran pengembangan fitur baru! Beberapa rencana ke depan:
|
|
258
|
+
* Manajemen Koleksi Request & Environment Variables.
|
|
259
|
+
* Sinkronisasi Cloud & Ruang Kerja Tim.
|
|
260
|
+
* Dukungan Introspeksi Skema GraphQL.
|
|
261
|
+
* Pengujian API Otomatis.
|
|
262
|
+
### ๐ Lisensi
|
|
263
|
+
Dilisensikan di bawah **MIT License** โ Bebas digunakan, dimodifikasi, dan didistribusikan kembali.
|
|
264
|
+
## ๐จ๐ณ ไธญๆ
|
|
265
|
+
### โจ ๅ่ฝ็นๆง
|
|
266
|
+
* โก **ๆฌๆตฎ "WP" ๆ้ฎ๏ผ** ็ปๅ
ธๅผๅ่
ๅทฅๅ
ท้ฃๆ ผ็ๆฌๆตฎๅฏๅจๆ้ฎใ
|
|
267
|
+
* ๐ช **ๅฏๆๆฝ API ้ขๆฟ๏ผ** ่ช็ฑ่ฐๆดไฝ็ฝฎ๏ผไธ้ฎๆก็ฝ้กตๅ
ๅฎนใ
|
|
268
|
+
* ๐ **ๅ
จ้ข็ HTTP ๆนๆณๆฏๆ๏ผ** ๅฎๆดๆฏๆ GET, POST, PUT, DELETE ๅ PATCH ่ฏทๆฑใ
|
|
269
|
+
* ๐งพ **้ซ็บง็ผ่พๅจ๏ผ** ๅ
็ฝฎๅ่ฝๅฎๅ็ Headers ่ฏทๆฑๅคดไธ JSON Body ็ผ่พๅจใ
|
|
270
|
+
* ๐ก **ๅฎๆถๅๅบๆฅ็ๅจ๏ผ** ๅฟซ้ๆฅ็็ถๆ็ ใ่ๆถๅๅๅบๆฐๆฎใ
|
|
271
|
+
* ๐พ **่ฏทๆฑๅๅฒ่ฎฐๅฝ๏ผ** ๅบไบ localStorage ่ชๅจๆไน
ๅๆฌๅฐๅๅฒๆฅๅฟใ
|
|
272
|
+
* ๐ **ไธ้ฎ้่ฏ๏ผ** ๅๅปๅณๅฏ้ๆฐ่ฟ่กๅ
ๅ็ API ่ฏทๆฑใ
|
|
273
|
+
* ๐ฑ **็งปๅจ็ซฏๆทฑๅบฆไผๅ๏ผ** ๅฎ็พ้้
Android WebView ๅ iOS WebView ็ฏๅขใ
|
|
274
|
+
* ๐จ **ๆ็ฎๆๅฎข UI๏ผ** ๆธ
็ฝ็้ซ็บงๆ้ป็ณป DevTools ็้ข้ฃๆ ผใ
|
|
275
|
+
* ๐ง **ๆกๆถๆ ๅ
ณๆง๏ผ** 100% ๅ
ผๅฎน React, Vue, Angular, Svelte ็ญๅ็ฑปๅ็ซฏๆกๆถใ
|
|
276
|
+
### ๐ ๅฎ่ฃ
ๆๅ
|
|
277
|
+
#### ๐ฆ NPM
|
|
278
|
+
```bash
|
|
279
|
+
npm install wepost
|
|
280
|
+
|
|
281
|
+
```
|
|
282
|
+
#### ๐ CDN
|
|
283
|
+
```html
|
|
284
|
+
<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
|
|
285
|
+
|
|
286
|
+
```
|
|
287
|
+
#### โก ่ชๅจๅๅงๅ (ๅฟซ้ๅผๅง)
|
|
288
|
+
```html
|
|
289
|
+
<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)" data-auto-init="true"></script>
|
|
290
|
+
|
|
291
|
+
```
|
|
292
|
+
### ๐งช ไฝฟ็จๆนๆณ
|
|
293
|
+
#### ๐ข JavaScript (NPM / ๆจกๅๅๅฏผๅ
ฅ)
|
|
294
|
+
```javascript
|
|
295
|
+
import WePost from "wepost";
|
|
296
|
+
|
|
297
|
+
const wepost = new WePost({
|
|
298
|
+
defaultUrl: "[https://jsonplaceholder.typicode.com/todos/1](https://jsonplaceholder.typicode.com/todos/1)"
|
|
299
|
+
});
|
|
300
|
+
|
|
301
|
+
wepost.mount();
|
|
302
|
+
|
|
303
|
+
```
|
|
304
|
+
#### ๐ CDN (ๅ็ JavaScript)
|
|
305
|
+
```html
|
|
306
|
+
<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
|
|
307
|
+
<script>
|
|
308
|
+
const wepost = new WePost({
|
|
309
|
+
defaultUrl: "[https://api.example.com](https://api.example.com)"
|
|
310
|
+
});
|
|
311
|
+
wepost.mount();
|
|
312
|
+
</script>
|
|
313
|
+
|
|
314
|
+
```
|
|
315
|
+
#### ๐ฑ Android WebView / iOS WebView
|
|
316
|
+
ๅช้ๅฐ่ๆฌๆณจๅ
ฅๅฐๆจ็ๆ ธๅฟ Web ่งๅพๅฑ๏ผ
|
|
317
|
+
```html
|
|
318
|
+
<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
|
|
319
|
+
|
|
320
|
+
```
|
|
321
|
+
๐ *ๆฌๆตฎ็ WP ๆ้ฎๅฐ่ชๅจๆพ็คบๅจ่ง็ช็ไธ่งใ*
|
|
322
|
+
### ๐ง ๆ ธๅฟๅทฅไฝๅ็
|
|
323
|
+
1. ้กต้ขไธไผๅ็ฐไธไธชๆฌๆตฎ็ **WP** ๆ้ฎใ
|
|
324
|
+
2. ็นๅปๆ้ฎ โ ไพง่พนๆๅบ้จ **DevTools ้ขๆฟ** ๅฑๅผใ
|
|
325
|
+
3. ่พๅ
ฅ API ่ฏฆๆ
๏ผ**URL**ใ**่ฏทๆฑๆนๆณ**ใ**Headers** ๅ **Body** ๅๆฐใ
|
|
326
|
+
4. ็นๅป **Send** ๅ้่ฏทๆฑใ
|
|
327
|
+
5. ๅจไธๆนๆ ็ผ**ๅฎๆถๆฅ็ๅๅบ**็ปๆใ
|
|
328
|
+
### ๐งฉ ๅฏ้ไปฃ็ๆจกๅผ (่งฃๅณ CORS ่ทจๅ้ๅถ)
|
|
329
|
+
ๅฆๆๆจ็็ฎๆ ๆฅๅฃ็ฑไบๆต่งๅจ็ๅๆบ็ญ็ฅ้ๅถไบ CORS ่ฏทๆฑ๏ผ่ฏทๅผๅฏๅ
็ฝฎไปฃ็๏ผ
|
|
330
|
+
```bash
|
|
331
|
+
npm run proxy
|
|
332
|
+
|
|
333
|
+
```
|
|
334
|
+
็ถๅๅๅงๅๅฆไธ้
็ฝฎ๏ผ
|
|
335
|
+
```javascript
|
|
336
|
+
const wepost = new WePost({
|
|
337
|
+
proxyUrl: "http://localhost:4000/proxy"
|
|
338
|
+
});
|
|
339
|
+
|
|
340
|
+
```
|
|
341
|
+
### ๐ ๆกๆถๅ
ผๅฎนๆง
|
|
342
|
+
WEPOST ๆฏๆๆๆ็ฐไปฃไธปๆต็ๅ็ซฏๆๆฏๆ ๏ผ
|
|
343
|
+
* React โ๏ธ / Vue ๐ข / Angular ๐ฆ / Svelte ๐งก
|
|
344
|
+
* Next.js / Nuxt ๐
|
|
345
|
+
* Vanilla JS ๐
|
|
346
|
+
* Laravel Blade / PHP ๐
|
|
347
|
+
* Android WebView ๐ฑ / iOS WebView ๐
|
|
348
|
+
#### โก Laravel ็ฏๅขไธญ็ๅตๅ
ฅ็คบไพ
|
|
349
|
+
```html
|
|
350
|
+
@if (app()->environment('local'))
|
|
351
|
+
<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
|
|
352
|
+
<script>
|
|
353
|
+
new WePost({
|
|
354
|
+
defaultUrl: "/api"
|
|
355
|
+
}).mount();
|
|
356
|
+
</script>
|
|
357
|
+
@endif
|
|
358
|
+
|
|
359
|
+
```
|
|
360
|
+
### ๐ฅ ้็จๅบๆฏ
|
|
361
|
+
* ็ฝ้กตๅ
็ดๆฅ่ฐ่ฏ API๏ผๆ ้ๅจๆต่งๅจๅๅค้จๅทฅๅ
ท้ด้ข็นๅๆขๆ ็ญพใ
|
|
362
|
+
* ไฝไธบ็งปๅจ็ซฏ WebView ๆททๅๅบ็จไธญ๏ผๅฟซ้ๆฃๆตๅ็ซฏๆฅๅฃ็่ฝป้็บงๅๅคๆนๆกใ
|
|
363
|
+
* ๅ
ๅป่่ฟ็ๅค้จๅบ็จ๏ผๅฆ PostmanใInsomnia๏ผ๏ผๅ ้ๆฌๅฐๅฟซ้้ช่ฏใ
|
|
364
|
+
* ่ฝปๆพ้ๆ่ณๅ
้จ็ฎก็ๅๅฐใSaaS ๅผๅ่
ๆงๅถๅฐๆ้ข่ง็ฏๅขใ
|
|
365
|
+
### ๐ฆ ็ญๆ cURL ็คบไพ
|
|
366
|
+
ๅจ WEPOST ไธญๆๅปบ็ไปปไฝ่ฏทๆฑๅๅฏไปฅๆ ๅ cURL ่ง่ๅ็ฐ๏ผ
|
|
367
|
+
```bash
|
|
368
|
+
curl -X POST [https://api.example.com/users](https://api.example.com/users) \
|
|
369
|
+
-H "Content-Type: application/json" \
|
|
370
|
+
-H "Authorization: Bearer TOKEN" \
|
|
371
|
+
-d '{"name":"John"}'
|
|
372
|
+
|
|
373
|
+
```
|
|
374
|
+
### ๐ ไธบไปไน้ๆฉ WEPOST๏ผ
|
|
375
|
+
* **็ปไธ่ทณๅบ๏ผ** ๅ็ๅ
ๅต๏ผ่ฎฉ API ่ฐ่ฏๅๅฝๆๅปบ็ๅ็ๅฐใ
|
|
376
|
+
* **ๆ่ด่ฝป้๏ผ** ๆไฝ็ๆไปถไฝ็งฏๅ ็จ๏ผ็ง็บงๅ ่ฝฝใ
|
|
377
|
+
* **ๅผๅ่
่ณไธ๏ผ** ้ๅฏนๆฅๅธธ้ซ้ขๆๆฅๆตๆทฑๅบฆ็ฒพ็ฎ็ไบคไบ้ป่พใ
|
|
378
|
+
### ๐ค ๅไธ่ดก็ฎ
|
|
379
|
+
ๆไปฌ้ๅธธๆๅพ
็คพๅบ็ๅ ๅ
ฅ๏ผไปฅไธๆฏๅณๅฐๆฉๅฑ็ๅ่ฝ๏ผ
|
|
380
|
+
* ่ฏทๆฑ้ๅ๏ผRequest Collections๏ผไธๅค็ฏๅขๅ้็ฎก็ใ
|
|
381
|
+
* ไบ็ซฏๅๆญฅไธๅข้ๅไฝๅ
ฑไบซ็ฉบ้ดใ
|
|
382
|
+
* ๅ็ GraphQL ๆถๆๅ
็ไธ่ฏทๆฑๆฏๆใ
|
|
383
|
+
* ่ชๅจๅ็ซฏๅฐ็ซฏๆต่ฏ็จไพๆง่กใ
|
|
384
|
+
### ๐ ๅผๆบๅ่ฎฎ
|
|
385
|
+
้ตๅพช **MIT ๅผๆบๅ่ฎฎ** โ ้ผๅฑ่ช็ฑไฝฟ็จใไฟฎๆนไธ่ก็ๅผๅใ
|
|
386
|
+
## ๐ฐ๐ท ํ๊ตญ์ด
|
|
387
|
+
### โจ ์ฃผ์ ๊ธฐ๋ฅ
|
|
388
|
+
* โก **ํ๋กํ
"WP" ๋ฒํผ:** DevTools ์คํ์ผ์ ์ง๊ด์ ์ธ ์คํ ๋ฒํผ ์ง์.
|
|
389
|
+
* ๐ช **๋๋๊ทธ ๊ฐ๋ฅํ API ํจ๋:** ํ๋ฉด ์ด๋๋ ์์ ๋กญ๊ฒ ์ด๋ ๊ฐ๋ฅํ ํจ๋ ๋ ์ด์์.
|
|
390
|
+
* ๐ **HTTP ๋ฉ์๋ ์๋ฒฝ ์ง์:** GET, POST, PUT, DELETE, PATCH ์ง์.
|
|
391
|
+
* ๐งพ **๊ณ ๊ธ ์๋ํฐ ๋ด์ฅ:** Headers ๋ฐ JSON Body ์์ ๊ธฐ๋ฅ ํ์ฌ.
|
|
392
|
+
* ๐ก **๋ผ์ด๋ธ ์๋ต ๋ทฐ์ด:** ์ํ ์ฝ๋, ์๋ต ์๋ ๋ฐ ๋ฐ์ดํฐ๋ฅผ ์ค์๊ฐ์ผ๋ก ์ธ์คํ์
.
|
|
393
|
+
* ๐พ **์์ฒญ ๊ธฐ๋ก ์ ์ฅ:** localStorage๋ฅผ ํตํ ์ด์ ์์ฒญ ํ์คํ ๋ฆฌ ์๋ ๋ณด์กด.
|
|
394
|
+
* ๐ **์ํด๋ฆญ ์ฌ์คํ:** ์๋ ์ฌ์
๋ ฅ ์์ด ์ด์ API ์์ฒญ์ ์ฆ์ ๋ค์ ์คํ.
|
|
395
|
+
* ๐ฑ **๋ชจ๋ฐ์ผ ์น๋ทฐ ์ต์ ํ:** Android WebView ๋ฐ iOS WebView ๋ด ์๋ฒฝ ์๋.
|
|
396
|
+
* ๐จ **์ธ๋ จ๋ ๋คํฌ UI:** ๊น๋ํ๊ณ ๋ชฐ์
๋ ๋์ ๊ฐ๋ฐ์ ์ ์ฉ ๋คํฌ ํ
๋ง.
|
|
397
|
+
* ๐ง **ํ๋ ์์ํฌ ๋
๋ฆฝ์ฑ:** React, Vue, Angular ๋ฑ ์ด๋ ํ ํ๊ฒฝ์์๋ ์๋ฒฝ ๊ฐ๋.
|
|
398
|
+
### ๐ ์ค์น ๋ฐฉ๋ฒ
|
|
399
|
+
#### ๐ฆ NPM
|
|
400
|
+
```bash
|
|
401
|
+
npm install wepost
|
|
402
|
+
|
|
403
|
+
```
|
|
404
|
+
#### ๐ CDN
|
|
405
|
+
```html
|
|
406
|
+
<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
|
|
407
|
+
|
|
408
|
+
```
|
|
409
|
+
#### โก ์๋ ์ด๊ธฐํ (๋น ๋ฅธ ์์)
|
|
410
|
+
```html
|
|
411
|
+
<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)" data-auto-init="true"></script>
|
|
412
|
+
|
|
413
|
+
```
|
|
414
|
+
### ๐งช ์ฌ์ฉ๋ฒ
|
|
415
|
+
#### ๐ข JavaScript (NPM / ๋ชจ๋ ๋ฐฉ์)
|
|
416
|
+
```javascript
|
|
417
|
+
import WePost from "wepost";
|
|
418
|
+
|
|
419
|
+
const wepost = new WePost({
|
|
420
|
+
defaultUrl: "[https://jsonplaceholder.typicode.com/todos/1](https://jsonplaceholder.typicode.com/todos/1)"
|
|
421
|
+
});
|
|
422
|
+
|
|
423
|
+
wepost.mount();
|
|
424
|
+
|
|
425
|
+
```
|
|
426
|
+
#### ๐ CDN (๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ)
|
|
427
|
+
```html
|
|
428
|
+
<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
|
|
429
|
+
<script>
|
|
430
|
+
const wepost = new WePost({
|
|
431
|
+
defaultUrl: "[https://api.example.com](https://api.example.com)"
|
|
432
|
+
});
|
|
433
|
+
wepost.mount();
|
|
434
|
+
</script>
|
|
435
|
+
|
|
436
|
+
```
|
|
437
|
+
#### ๐ฑ Android WebView / iOS WebView
|
|
438
|
+
๋ฉ์ธ ์น ๋ ์ด์์์ ์๋ ์คํฌ๋ฆฝํธ๋ฅผ ์ฝ์
ํ๊ธฐ๋ง ํ๋ฉด ๋ฉ๋๋ค:
|
|
439
|
+
```html
|
|
440
|
+
<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
|
|
441
|
+
|
|
442
|
+
```
|
|
443
|
+
๐ *ํ๋กํ
WP ๋ฒํผ์ด ํ๋ฉด ํ ๊ตฌ์์ ์๋์ผ๋ก ๋ํ๋ฉ๋๋ค.*
|
|
444
|
+
### ๐ง ์๋ ์๋ฆฌ
|
|
445
|
+
1. ํ๋ฉด์ ํ๋กํ
**WP** ๋ฒํผ์ด ์์ฑ๋ฉ๋๋ค.
|
|
446
|
+
2. ๋ฒํผ์ ํด๋ฆญํ๋ฉด ๋ฉ์ธ **DevTools ํจ๋**์ด ์ด๋ฆฝ๋๋ค.
|
|
447
|
+
3. API ์์ฒญ ์ธ๋ถ ์ ๋ณด์ธ **URL**, **๋ฉ์๋**, **Headers**, **Body**๋ฅผ ์
๋ ฅํฉ๋๋ค.
|
|
448
|
+
4. **Send** ๋ฒํผ์ ํด๋ฆญํ์ฌ API ์์ฒญ์ ์ ์กํฉ๋๋ค.
|
|
449
|
+
5. ์ค์๊ฐ์ผ๋ก ๋ฐํ๋๋ **์๋ต(Response)** ๊ฒฐ๊ณผ๋ฅผ ํจ๋์์ ์ฆ์ ํ์ธํฉ๋๋ค.
|
|
450
|
+
### ๐งฉ ํ๋ก์ ๋ชจ๋ ํ์ฑํ (CORS ๋ฌธ์ ํด๊ฒฐ)
|
|
451
|
+
๋์ API ์๋ฒ๊ฐ ๋ธ๋ผ์ฐ์ ์ CORS ์ ์ฑ
์ผ๋ก ์ธํด ์์ฒญ์ ์ฐจ๋จํ๋ ๊ฒฝ์ฐ, ๋ก์ปฌ ํ๋ก์ ์๋ฒ๋ฅผ ๊ฐ๋ํ์ธ์:
|
|
452
|
+
```bash
|
|
453
|
+
npm run proxy
|
|
454
|
+
|
|
455
|
+
```
|
|
456
|
+
๊ทธ๋ฐ ๋ค์ ์ธ์คํด์ค ์ค์ ์ ์ ์ฉํฉ๋๋ค:
|
|
457
|
+
```javascript
|
|
458
|
+
const wepost = new WePost({
|
|
459
|
+
proxyUrl: "http://localhost:4000/proxy"
|
|
460
|
+
});
|
|
461
|
+
|
|
462
|
+
```
|
|
463
|
+
### ๐ ํ๋ ์์ํฌ ์ง์
|
|
464
|
+
WEPOST๋ ๋ชจ๋ ํ๋ก ํธ์๋ ์์ฝ์์คํ
๊ณผ ์ํธ ํธํ๋ฉ๋๋ค:
|
|
465
|
+
* React โ๏ธ / Vue ๐ข / Angular ๐ฆ / Svelte ๐งก
|
|
466
|
+
* Next.js / Nuxt ๐
|
|
467
|
+
* Vanilla JS ๐
|
|
468
|
+
* Laravel Blade / PHP ๐
|
|
469
|
+
* Android WebView ๐ฑ / iOS WebView ๐
|
|
470
|
+
#### โก Laravel ํ๊ฒฝ ์ ์ฉ ์์
|
|
471
|
+
```html
|
|
472
|
+
@if (app()->environment('local'))
|
|
473
|
+
<script src="[https://unpkg.com/wepost/dist/wepost.umd.js](https://unpkg.com/wepost/dist/wepost.umd.js)"></script>
|
|
474
|
+
<script>
|
|
475
|
+
new WePost({
|
|
476
|
+
defaultUrl: "/api"
|
|
477
|
+
}).mount();
|
|
478
|
+
</script>
|
|
479
|
+
@endif
|
|
480
|
+
|
|
481
|
+
```
|
|
482
|
+
### ๐ฅ ์ฃผ์ ์ ์ค์ผ์ด์ค
|
|
483
|
+
* ๋ณ๋์ ์ฐฝ ์ ํ ์์ด ๋ธ๋ผ์ฐ์ ๋ด๋ถ์์ ๋ค์ด๋ ํธ๋ก ์งํํ๋ ์ฆ๊ฐ์ ์ธ API ๋๋ฒ๊น
.
|
|
484
|
+
* ๊ฐ๋ฒผ์ด ํ
์คํธ ํ๊ฒฝ ๊ตฌ์ถ์ ์ํด ๋ฌด๊ฑฐ์ด ์ธ๋ถ ์ฑ(Postman ๋ฑ)์ ์ ๋ฉด ๋์ฒด.
|
|
485
|
+
* ํ์ด๋ธ๋ฆฌ๋ ๋ชจ๋ฐ์ผ WebView ๊ฐ๋ฐ ๋จ๊ณ์์ ๋คํธ์ํฌ ๋ฐ์ดํฐ ๊ฒ์ฆ์ฉ ๋๊ตฌ๋ก ํ์ฉ.
|
|
486
|
+
* ์ฌ๋ด ์ ์ฉ ์ด๋๋ฏผ ๋์๋ณด๋ ๋ฐ SaaS ๊ฐ๋ฐ์ ๋๊ตฌ ์์ ฏ ์๋ฒ ๋ฉ.
|
|
487
|
+
### ๐ฆ ๋์ผํ cURL ๋ช
๋ น์ด ์์
|
|
488
|
+
WEPOST์์ ํ
์คํธํ ๋ชจ๋ ์์ฒญ ๊ตฌ์กฐ๋ ํ์ค cURL ํํ๋ก ์ํธ ํธํ๋ฉ๋๋ค:
|
|
489
|
+
```bash
|
|
490
|
+
curl -X POST [https://api.example.com/users](https://api.example.com/users) \
|
|
491
|
+
-H "Content-Type: application/json" \
|
|
492
|
+
-H "Authorization: Bearer TOKEN" \
|
|
493
|
+
-d '{"name":"John"}'
|
|
494
|
+
|
|
495
|
+
```
|
|
496
|
+
### ๐ ์ WEPOST ์ธ๊ฐ์?
|
|
497
|
+
* **ํ๋ฉด ์ ํ ์ ๋ก:** ๊ฐ๋ฐ ์ค์ธ ๋๋ฉ์ธ ํ๊ฒฝ ๋ด๋ถ์์ ๊ทธ๋๋ก ํ
์คํธํ ์ ์์ต๋๋ค.
|
|
498
|
+
* **์ด๊ฒฝ๋ ๋ฒ๋ค:** ๋ฒ๋ค ํฌ๊ธฐ๋ฅผ ํ์ ์ ์ผ๋ก ์์ถํ์ฌ ์ฌ์ดํธ ์ฑ๋ฅ์ ์ํฅ์ ์ฃผ์ง ์์ต๋๋ค.
|
|
499
|
+
* **๊ฐ๋ฐ์ ์นํ์ ์ค๊ณ:** ๋๋ฒ๊น
์ ํต์ฌ์ ์ธ ์์๋ฅผ ์์ถํ ๋ฏธ๋๋ฉ ๋์์ธ.
|
|
500
|
+
### ๐ค ๊ธฐ์ฌํ๊ธฐ
|
|
501
|
+
์ปค๋ฎค๋ํฐ์ ๋ค์ํ ํผ๋๋ฐฑ๊ณผ ์ฐธ์ฌ๋ฅผ ํ์ํฉ๋๋ค! ์์ ๋ ๋ก๋๋งต์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
|
|
502
|
+
* ์์ฒญ ์ปฌ๋ ์
(Postman ์คํ์ผ) ๋ฐ ํ๊ฒฝ ๋ณ์ ์ค์ ๊ธฐ๋ฅ.
|
|
503
|
+
* ํด๋ผ์ฐ๋ ๋๊ธฐํ ๋ฐ ํ ๋จ์ ๊ณต์ ์ํฌ์คํ์ด์ค ์ ๊ณต.
|
|
504
|
+
* ๋ค์ดํฐ๋ธ GraphQL ์ธํธ๋ก์คํ์
๋ฐ ์ฟผ๋ฆฌ ์ง์.
|
|
505
|
+
* ํ
์คํธ ์๋ํ ์คํ ์คํฌ๋ฆฝํธ ๋๊ตฌ ์ง์.
|
|
506
|
+
### ๐ ๋ผ์ด์ ์ค
|
|
507
|
+
๋ณธ ํ๋ก์ ํธ๋ **MIT License** ํ์ ๋ฐฐํฌ๋ฉ๋๋ค โ ์์ ๋กญ๊ฒ ์์ , ํ์ฉ ๋ฐ ๊ตฌ์ถํ ์ ์์ต๋๋ค.
|
|
508
|
+
```
|
package/dist/engine.d.ts
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export interface RequestOptions {
|
|
2
|
+
url: string;
|
|
3
|
+
method: string;
|
|
4
|
+
headers: Record<string, string>;
|
|
5
|
+
body: any;
|
|
6
|
+
proxyUrl?: string;
|
|
7
|
+
}
|
|
8
|
+
export declare function sendRequest(opts: RequestOptions): Promise<{
|
|
9
|
+
status: number;
|
|
10
|
+
statusText: string;
|
|
11
|
+
data: string;
|
|
12
|
+
headers: {
|
|
13
|
+
[k: string]: string;
|
|
14
|
+
};
|
|
15
|
+
}>;
|
package/dist/index.d.ts
ADDED
package/dist/styles.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function getStyles(): string;
|
package/dist/ui.d.ts
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { WePostConfig } from './index';
|
|
2
|
+
|
|
3
|
+
export declare class WePostUI {
|
|
4
|
+
private container;
|
|
5
|
+
private shadow;
|
|
6
|
+
private config;
|
|
7
|
+
private isOpen;
|
|
8
|
+
private isLightMode;
|
|
9
|
+
constructor(config: WePostConfig);
|
|
10
|
+
mount(): void;
|
|
11
|
+
unmount(): void;
|
|
12
|
+
private render;
|
|
13
|
+
private attachEvents;
|
|
14
|
+
private applyTheme;
|
|
15
|
+
private syncPanelPosition;
|
|
16
|
+
private makeElementDraggable;
|
|
17
|
+
private handleRequest;
|
|
18
|
+
private loadLastRequest;
|
|
19
|
+
}
|