code Developer Extensions System
Sistem untuk membuat dan menginstall custom extensions melalui Developer panel. Extensions dibuat via terminal wizard nx dev, di-push ke Git, lalu didaftarkan melalui Developer Panel.
1. Membuat Extension Baru — Wizard nx dev
Langkah 1 — Buka terminal dan navigasi ke folder project
Working directory ini menjadi lokasi folder extension yang dibuat.
Langkah 2 — Jalankan wizard: nx dev
| Step | Field | Keterangan |
|---|---|---|
| 1 | App Name | Nama folder & ID extension (huruf kecil, angka, -, _) |
| 2 | Title | Nama tampil di panel |
| 3 | Description | Deskripsi singkat |
| 4 | Author | Nama pembuat |
| 5 | Version | Format x.x.x (default: 1.0.0) |
| 6 | Place | Pilih lokasi: activity-bar / packages / edge |
| 7 | iconClass | Ikon di Extensions panel (pilih 1–10) |
| 8 | Icon | Ikon Material di Activity Bar (pilih 1–8 atau ketik nama) |
| 9 | Token | GitHub Access Token ghp_... — opsional |
Langkah 3 — Hasil
Wizard membuat folder <appName>/ berisi: package.json, index.js, sidebar.js, panel.js, .gitignore.
2. Source Control — Commit & Push ke Git
- Klik kanan folder extension di panel Explorer → pilih Add Source Control.
- Klik ikon Source Control di Activity Bar.
- Temukan bagian Changes → isi Pesan Commit → klik Commit & Push Semua File.
3. Install Extension — Daftarkan ke Aplikasi
- Buka Developer Panel → tab For Developer Extensions.
- Masukkan URL Repository (mis.
https://github.com/user/my-extension.git). - Pilih mode: Install Extension biasa, atau centang Development Mode + isi Access Token.
- Buka panel Extensions → cari nama extension → klik Install → ikon muncul di Activity Bar.
4. Development Mode — Edit & Push Langsung
Saat Development Mode aktif:
- Folder extension (path
repodev) terbuka di sidebar Discovery - Badge hijau muncul di bagian atas Developer Panel
- Setiap kali file disimpan (Ctrl+S), panel extension langsung update otomatis
Menghentikan Development Mode: Klik tombol Stop di badge hijau. Sistem akan commit & push perubahan terakhir secara otomatis, menghentikan file watcher, dan menghapus folder dari Discovery workspace.
5. Update Extension
Paste URL yang sama di form Repository URL → klik Install Extension. Sistem mendeteksi bahwa extension sudah ada dan menjalankan git pull — diperbarui tanpa uninstall.
8. Struktur Repository Extension
| File | Status | Keterangan |
|---|---|---|
README.md | Wajib | Dokumentasi extension |
package.json | Wajib | Metadata extension |
index.js | Wajib | Registrasi view |
sidebar.js | Opsional | Navigasi sidebar |
panel.js | Opsional | Konten tab |
styles.css | Opsional | Custom styles |
10. Format package.json
| Field | Wajib | Keterangan |
|---|---|---|
id | ✓ | Unique ID — sama dengan appName, tidak boleh konflik |
title | ✓ | Nama di Extensions panel |
description | Versi dan deskripsi | |
version | Versi extension | |
author | Nama pembuat | |
icon | ✓ | Material icon untuk Activity Bar |
iconClass | CSS class untuk Extensions panel | |
viewId | ✓ | Harus sama dengan nama folder repo |
place | Lokasi render (default: activity-bar) | |
repodev | Path folder sumber asli — diisi otomatis oleh nx dev |
12. Nilai place
| Nilai | Lokasi |
|---|---|
"activity-bar" | Sidebar kiri — icon di Activity Bar (default) |
"packages" | Muncul di list Packages sidebar |
"edge" | Tab di panel kanan (seperti Chat, Outline) |
16. Aturan Baku — Tema Terang / Gelap
Extension wajib mengikuti sistem tema aplikasi. Gunakan variabel CSS agar extension otomatis menyesuaikan tema:
| Variable | Kegunaan |
|---|---|
--beranda-dv-bg | Background utama panel |
--beranda-dv-text | Teks utama |
--beranda-dv-text-muted | Teks sekunder / label |
--beranda-dv-accent | Aksen / link / tombol aktif |
--beranda-dv-header-border | Border standar |
--beranda-dv-surface | Card / surface elemen |
Larangan: Jangan hard-code warna, jangan simpan preferensi tema sendiri, jangan ubah class dark-mode-grid pada body.
17. Aturan Baku — Scroll
Extension dilarang membuat scroll sendiri di dalam konten sidebar atau panel. Biarkan konten extension mengalir natural — sistem scroll panel akan menangani sisanya secara otomatis.
18. Stylesheet Extension — styles.css & nx bundle
Jika extension Anda memiliki file styles.css, jalankan nx bundle setiap kali menambah atau mengubah file CSS. Tanpa menjalankan nx bundle, tampilan extension tidak akan dimuat.
22. Troubleshooting
| Masalah | Solusi |
|---|---|
| Extension ditolak — README.md tidak ditemukan | Commit dan push README.md ke repo, lalu install ulang |
| Clone gagal — repo tidak ditemukan | Pastikan URL benar; untuk repo private gunakan URL dengan Access Token |
| Extension ditolak — ID konflik | Ubah field id di package.json menjadi unik, commit, push, install ulang |
| Development Mode — perubahan tidak terlihat otomatis | Pastikan panel extension terbuka, file sudah disimpan (Ctrl+S), dan index.js menggunakan pola _loadFresh |
nx dev — Working directory tidak ditemukan | Jalankan cd <folder> dulu sebelum nx dev |