# REST API Route Tester — Upgrade Plan
## Current: v1.0.0 → Target: v2.0.0
---
## Architecture Overview
```
rest-api-route-tester/
├── rest-api-route-tester.php # Main plugin, OOP class
├── includes/ # NEW: split backend concerns
│ ├── class-ajax-handler.php # AJAX request handlers
│ ├── class-route-registry.php # Route discovery logic
│ └── class-saved-requests.php # Persistence layer (wp_usermeta)
├── src/ # NEW: JS source (Vite, introduced v1.2.0)
│ ├── main.js # Entry point
│ ├── state.js # State management
│ ├── tabs.js # Tab system
│ ├── request.js # Request sending logic
│ ├── response.js # Response display
│ └── ui/ # UI components
├── assets/ # Built output (dist stays here for WP compat)
│ ├── app.js # Built by Vite (v1.0.x = manual, v1.2.0+ = built)
│ └── style.css
└── templates/
└── admin-page.php
```
**Guiding principle:** Each version is independently runnable. Versions before 1.2.0 require no build step. From 1.2.0 onward: `npm install && npm run build` (or `npm run dev` for watch mode).
---
## v1.1.0 — Security Hotfixes
**No build system. Pure PHP + vanilla JS edits.**
### PHP (`rest-api-route-tester.php`)
- Wrap `test_route()` body in `try/finally` so `wp_delete_user()` always runs even if an exception is thrown
- Add route existence check: validate submitted route exists in `rest_get_server()->get_routes()` before executing
- Add payload size guard: reject `$_POST['body']` if `strlen() > 512KB`
- Extend `$allowed_methods` to include `PATCH`, `OPTIONS`, `HEAD`
- Return HTTP status code alongside response data: `['status' => $response->get_status(), 'data' => $response->get_data()]`
### JS (`assets/app.js`)
- Replace all `.append(\`...\${route}...\`)` with DOM-safe insertion (`document.createTextNode` or `.text()`) in route dropdown rendering (lines 416, 446)
- Remove all 5 `console.log()` calls from `formatRoute()` (lines 222–230)
- Wrap all globals (`pluginRoutes`, `formattedRoutes`, `routeMethods`, `activeTabId`, `tabCounter`) in a single `const WPRRT = {}` namespace
### Visible output
Load the admin page — routes render, requests work, no console spam.
---
## v1.1.0 — Bug Fixes + Response Improvements
**No build system. Editing existing files.**
### PHP
- `get_routes()`: also return `$response->get_headers()` per route response (needed by frontend)
- `test_route()`: return `status`, `data`, and `headers` together in `wp_send_json_success()`
### JS (`assets/app.js`)
- Fix `formatRoute()`: rewrite regex to correctly handle optional groups `(?:/([^/]+))?` and trailing modifiers
- Remove the permanently-hidden `` block entirely
- Response panel: display HTTP status code as a colored badge above JSON (`2xx` green, `3xx` blue, `4xx` yellow, `5xx` red)
- Response panel: add a collapsible "Response Headers" section below the status badge
- Response time: move out of JSON body, show as a small line `200 OK · 142ms` above the pre block
- AJAX failure: replace silent fail with a visible inline error message in the response panel
### Visible output
Status badge appears, response headers are inspectable, route formatting is cleaner.
---
## v1.2.0 — Build System Introduction
**Introduces npm + Vite. From here: `npm run build` required after changes.**
### New files
- `package.json` — Vite, prismjs dependencies
- `vite.config.js` — input: `src/main.js`, output: `assets/app.js` (lib mode, IIFE, no hashing)
- `src/main.js` — entry, imports all modules
- `src/state.js` — localStorage read/write (extracted from app.js)
- `src/tabs.js` — tab create/switch/close (extracted)
- `src/request.js` — AJAX send logic (extracted)
- `src/response.js` — response render + status badge (extracted)
### Syntax highlighting
- Add `prismjs` (lightweight, ~30kb). Apply to the response `` block after render.
- Apply to body/headers textareas in `input` event for live JSON highlighting (optional at this stage).
### Build commands
```
npm install
npm run dev # watch mode
npm run build # production build → assets/app.js
```
### Visible output
`npm run dev`, edit a source file, refresh admin — syntax-highlighted JSON response.
---
## v1.3.0 — Saved Requests + Auth Presets
**Build system required (`npm run build`).**
### Layout change
`initializeApp()` in `main.js` gains a two-column wrapper:
```
┌─────────────────────┬──────────────────────────────────────┐
│ Saved Requests │ [Tabs] │
│ ───────────────── │ ┌──────────────┬───────────────┐ │
│ GET /wp/v2/posts │ │ Form │ Response │ │
│ POST /wp/v2/posts │ │ │ │ │
│ [+ Save] │ └──────────────┴───────────────┘ │
└─────────────────────┴──────────────────────────────────────┘
```
- Sidebar: fixed 240px, scrollable, sits left of `.wprrt-main`
- All existing tab machinery stays in `.wprrt-main` — no tab code changes
### PHP — `includes/class-saved-requests.php` (new file)
```
WPRRT_Saved_Requests
::save( $user_id, $name, $route, $method, $headers, $body ) → id
::get_all( $user_id ) → array
::delete( $user_id, $id ) → bool
```
- Storage: single `wp_usermeta` key `wprrt_saved_requests` per user, value = JSON array
- Each item: `{ id, name, route, method, headers, body, saved_at }`
- `id` = `uniqid('wprrt_', true)` — no DB table needed
- Max 100 saved requests per user — oldest dropped silently when limit hit
AJAX actions registered in `rest-api-route-tester.php`:
- `wprrt_save_request` — nonce + `manage_options`, calls `::save()`
- `wprrt_get_saved_requests` — nonce + `manage_options`, calls `::get_all()`
- `wprrt_delete_request` — nonce + `manage_options`, calls `::delete()`
### JS — `src/saved.js` (new file)
Responsibilities:
- `initSidebar()` — renders sidebar shell, calls `loadSaved()`
- `loadSaved()` — AJAX `wprrt_get_saved_requests` → renders list
- `renderSavedList( items )` — for each item: name, method badge, route, delete button
- Click item → `populateTab( item )` on the currently active tab
- Click delete → AJAX `wprrt_delete_request`, re-render list
- `saveCurrentTab( tabContent )` — triggered by "Save" button
- Shows inline name input below Send button (not `window.prompt`)
- On confirm: AJAX `wprrt_save_request`, re-renders list, hides input
- Empty state: "No saved requests yet" with a hint
Exports: `initSidebar`, `saveCurrentTab`
### JS — `src/auth.js` (new file)
A `