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 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
+ ```
@@ -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
+ }>;
@@ -0,0 +1,8 @@
1
+ export interface HistoryItem {
2
+ url: string;
3
+ method: string;
4
+ headers: string;
5
+ body: string;
6
+ }
7
+ export declare function saveHistory(item: HistoryItem): void;
8
+ export declare function getHistory(): HistoryItem[];
@@ -0,0 +1,11 @@
1
+ export interface WePostConfig {
2
+ proxyUrl?: string;
3
+ defaultUrl?: string;
4
+ }
5
+ export declare class WePost {
6
+ private ui;
7
+ constructor(config?: WePostConfig);
8
+ mount(): void;
9
+ unmount(): void;
10
+ }
11
+ export default WePost;
@@ -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
+ }