77 lines
3.4 KiB
Markdown
77 lines
3.4 KiB
Markdown
# TASK: Implementasi Click-to-Source (Dev Inspector)
|
|
|
|
**ID:** `TASK-DX-001`
|
|
**Konteks:** Developer Experience (DX)
|
|
**Status:** ✅ COMPLETED
|
|
**Prioritas:** 🟡 TINGGI (Peningkatan Produktivitas)
|
|
**Estimasi:** 1 Hari Kerja
|
|
|
|
---
|
|
|
|
## 🎯 OBJEKTIF
|
|
Mengaktifkan fitur **Click-to-Source** di lingkungan pengembangan: klik elemen UI di browser sambil menekan hotkey (`Ctrl+Shift+Cmd+C` atau `Ctrl+Shift+Alt+C`) untuk langsung membuka file source code di editor (VS Code, Cursor, dll) pada baris dan kolom yang tepat.
|
|
|
|
---
|
|
|
|
## 📋 DAFTAR TUGAS (TODO)
|
|
|
|
### 1. Vite Plugin Configuration
|
|
- [x] Buat file `src/utils/dev-inspector-plugin.ts` yang berisi `inspectorPlugin()` (regex-based JSX attribute injection).
|
|
- [x] Modifikasi `src/vite.ts`:
|
|
- [x] Impor `inspectorPlugin`.
|
|
- [x] Tambahkan `inspectorPlugin()` ke array `plugins` **sebelum** `react()`.
|
|
- [x] Gunakan `enforce: 'pre'` pada plugin tersebut.
|
|
|
|
### 2. Frontend Component Development
|
|
- [x] Buat komponen `src/components/dev-inspector.tsx`:
|
|
- [x] Implementasikan hotkey listener.
|
|
- [x] Tambahkan overlay UI (border biru & tooltip nama file) saat hover.
|
|
- [x] Implementasikan `getCodeInfoFromElement` dengan fallback (fiber props -> DOM attributes).
|
|
- [x] Tambahkan fungsi `openInEditor` (POST ke `/__open-in-editor`).
|
|
|
|
### 3. Backend Integration (Elysia)
|
|
- [x] Modifikasi `src/index.ts`:
|
|
- [x] Tambahkan handler `onRequest` sebelum middleware lainnya.
|
|
- [x] Intercept request ke path `/__open-in-editor` (POST).
|
|
- [x] Gunakan `Bun.spawn()` untuk memanggil editor (berdasarkan `.env` `REACT_EDITOR`).
|
|
- [x] Gunakan `Bun.which()` untuk verifikasi keberadaan editor di system PATH.
|
|
|
|
### 4. Application Root Integration
|
|
- [x] Modifikasi `src/frontend.tsx`:
|
|
- [x] Implementasikan **Conditional Dynamic Import** untuk `DevInspector`.
|
|
- [x] Gunakan `import.meta.env?.DEV` agar tidak ada overhead di production.
|
|
- [x] Bungkus `<App />` (atau router) dengan `<DevInspectorWrapper>`.
|
|
|
|
### 5. Environment Setup
|
|
- [x] Tambahkan `REACT_EDITOR=code` (atau `cursor`, `windsurf`) di file `.env`.
|
|
- [x] Pastikan alias `@/` berfungsi dengan benar di plugin Vite untuk resolusi path.
|
|
|
|
---
|
|
|
|
## 🛠️ INSTRUKSI TEKNIS
|
|
|
|
### Urutan Plugin di Vite
|
|
Sangat krusial agar `inspectorPlugin` berjalan di fase **pre-transform** sebelum JSX diubah menjadi `React.createElement` oleh compiler Rust (OXC) milik Vite React Plugin.
|
|
|
|
### Penanganan React 19
|
|
Gunakan strategi *multi-fallback* karena React 19 menghapus `_debugSource`. Prioritas pencarian info:
|
|
1. `__reactProps$*` (React internal props)
|
|
2. `__reactFiber$*` (Fiber tree walk-up)
|
|
3. DOM attribute `data-inspector-*` (Fallback universal)
|
|
|
|
---
|
|
|
|
## ✅ DEFINITION OF DONE (DoD)
|
|
1. [ ] Hotkey `Ctrl+Shift+Cmd+C` (macOS) / `Ctrl+Shift+Alt+C` mengaktifkan mode inspeksi.
|
|
2. [ ] Klik pada elemen UI membuka file yang benar di VS Code/Cursor pada baris yang tepat.
|
|
3. [ ] Fitur hanya aktif di mode pengembangan (`bun run dev`).
|
|
4. [ ] Di mode produksi (`bun run build`), tidak ada kode `DevInspector` yang masuk ke bundle (verifikasi via `dist/` jika perlu).
|
|
5. [ ] Kode mengikuti standar linting Biome (jalankan `bun run lint`).
|
|
|
|
---
|
|
|
|
## 📝 CATATAN
|
|
- Gunakan `Bun.spawn()` dengan mode `detached: true` jika memungkinkan (atau default fire-and-forget).
|
|
- Jika menggunakan Windows (WSL), pastikan path file dikonversi dengan benar (jika ada kendala).
|
|
- Gunakan log di console saat mode inspeksi aktif untuk mempermudah debugging.
|