monacode

Monakode

Pembungkus Modul ES tipis di sekitar editor Monako dan lebih cantik

Menjelajahi kelayakan mengimpor monako-editor (yang Powers vs Code) dan modul yang lebih cantik langsung ke browser; Bertujuan untuk menjadikannya satu baris mudah untuk membawa pengalaman pengeditan kode seperti asli ke aplikasi web tanpa langkah build.

Kapal dengan semua fitur yang biasanya ditemukan dalam kode VS di luar kotak: hal-hal seperti petunjuk kode, jenis inferensi, minimap, palet perintah, multi-kursor pilih, temukan dan ganti, kode lipat dll.

Selain fitur -fitur ini, lebih cantik telah diintegrasikan sehingga memukul ⌘ + s akan memformat kode.

⚡️ Lihat versi yang dihosting di https://monacode.live

Penggunaan

Instal modul sebagai modul NPM dan impor menggunakan spesifikasi modul telanjang, atau impor langsung dari UNPKG:

 import monacode from 'https://unpkg.com/monacode/index.min.js' ; // 976Kb brotli

// Create a new editor and attach to the document body
const editor = monacode ( {
  container : document . body ,
  value : 'const add = (x, y) => x + y;' ,
} ) ;

// Listen for changes within the editor
editor . getModel ( ) . onDidChangeContent ( ( change ) => {
  const newValue = editor . getValue ( ) ;
  console . log ( newValue ) ;
} ) ;

Dimungkinkan juga untuk menanamkan editor ke dalam aplikasi Anda menggunakan iframe (lihat demo):

 < iframe
  src =" https://monacode.live?theme=vs-light&value=console.log('hey') "
> </ iframe >

Lewati opsi konfigurasi ke iframe sebagai parameter pencarian URL, pastikan untuk URI mengkode nilai dengan benar. Namun harap dicatat, saat ini tidak mungkin untuk lulus dalam opsi konfigurasi bersarang.

API

Modul mengekspor fungsi default tunggal yang menerima objek konfigurasi sebagai argumen. Konfigurasi yang disediakan digabungkan dengan konfigurasi default yang merupakan subset dari opsi yang tersedia untuk mengonfigurasi editor Moanco. Beberapa nilai yang berguna untuk diketahui termasuk:

• container : elemen HTML yang ada di DOM (atau ref jika menggunakan React/Preact)
• value : String yang mewakili kode awal yang akan diterjemahkan dalam editor
• language : Sebuah string yang mewakili bahasa apa yang harus dicoba oleh editor editor
• fontSize : Nomor yang menunjukkan kode ukuran font piksel apa
• theme : Pengidentifikasi string dari tema yang diinginkan atau URL ke file tema JSON

Memanggil ekspor default mengembalikan contoh editor Monako yang mendasarinya. Cari tahu lebih lanjut tentang cara berinteraksi dengan editor dengan membaca dokumentasi API.

Perkembangan

Menjalankan perintah berikut dari akar proyek ini menggunakan servor untuk memulai server dev, lalu buka editor dan browser Anda di URL LocalHost yang sesuai.

npm start

Produksi

Menjalankan perintah berikut dari root proyek ini menggunakan esbuild Build sumber ke satu file index.min.js . Saat ini proses ini memakan waktu ~ 1 detik dan menghasilkan file output dengan berat 4,6MB (commpresses hingga kurang dari 1MB dengan Brotli).

npm run build

Lisensi

Berlisensi di bawah lisensi MIT.