Beranda>Terkait pemrograman>Kode Sumber AI
Unduh

Impuls: Alat dev yang mustahil untuk bereaksi dan tailwind

Bangun situs web modern tepat di browser Anda tanpa menyerah pada kode.

Impulse.dev | Perselisihan

Dibuat oleh @krogovoy dan @ivolchenskov

Impuls dibuat untuk bekerja dengan situs web React dalam mode dev (makna, berjalan di localhost Anda).

Ini memungkinkan Anda untuk mengedit UI Anda tepat di browser sambil secara otomatis mengubah kode Anda dengan tepat seperti yang Anda lakukan secara manual. Ini seperti ekstensi editor kode yang melampaui editor kode.

  • Dibangun ke dalam aplikasi Anda: Tidak perlu menginstal ekstensi atau aplikasi desktop apa pun
  • Tidak ada layanan eksternal, bekerja secara langsung dengan kode
  • Dibuat khusus untuk pengembang, bukan desainer
  • Addon, bukan pengganti: memberi Anda alat baru sambil tidak menambahkan batasan apa pun

? Lihat demo di impuls.dev

Dibandingkan dengan menulis kode secara manual:

  • Lebih cepat
  • Lebih menyenangkan
  • Kode yang sama diproduksi

Persyaratan

Bahasa:

  • ✅ JavaScript
  • ✅ naskah type (typings built in)

Rendering Libraries:

  • ✅ Bereaksi 17+
  • ⬜️ vue (mungkin di masa depan)
  • Svelte (tidak ada rencana untuk dukungan)
  • Angular (tidak ada rencana untuk dukungan)

Bereaksi Kerangka dan Bundler:

  • ✅ Next.js
  • ✅ Buat Aplikasi React
  • ✅ vite
  • ✅ Esbuild
  • ⬜️ Remix
  • ⬜️ Parcel
  • ✅ Sistem kustom apa pun yang dibangun di atas Babel/Webpack/Rollup

Kerangka kerja CSS:

  • ✅ Tailwind
  • Tidak ada rencana untuk mendukung kerangka kerja CSS lainnya untuk saat ini

Browser:

  • ✅ Berbasis kromium
  • Firefox
  • Safari

(Impuls bergantung pada API akses sistem file yang hanya berfungsi dengan baik di browser berbasis kromium)

Integrasi Editor:

  • ✅ vs kode
  • ⬜️ lebih banyak datang

Memasang

Ada tiga cara untuk mencoba impuls.

Opsi 1: coba sekarang

Salin dan tempel kode di bawah ini ke konsol browser Anda. 

 d = document ; s = d . createElement ( 'script' ) ; s . src = `https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js` ; d . body . appendChild ( s )

Cara mudah untuk bermain dengan alat tanpa menginstal apa pun, tetapi itu akan hilang begitu Anda menyegarkan halaman.

Opsi 2: NPM (Direkomendasikan)

Siapkan sekali dan untuk semua untuk seluruh tim. 

npm i -D @impulse.dev/runtime@latest

Tempel ke dalam file apa pun yang selalu diimpor. Biasanya itu akan menjadi file reaksi "utama", seperti _app.jsx di next.js. 

 if ( process . env . NODE_ENV === 'development' ) {
  import ( '@impulse.dev/runtime' ) . then ( ( impulse ) => impulse . run ( ) )
}

Opsi 3: Tag <script>

Tempel tag skrip ini di akhir <body> 

 {
  process . env . NODE_ENV === 'development' && (
    < script src = "https://cdn.jsdelivr.net/npm/@impulse.dev/runtime@latest/inject.js" > </ script >
  )
}

Jangan mengirimkan impuls ke produksi

Penting: Pastikan Anda tidak mengirim impuls dalam pembangunan produksi Anda! Ini akan kembung ukuran bundel Anda!

Sebagian besar bundler memotong semua kode di dalam if (process.env.NODE_ENV === 'development') { ... } , tetapi disarankan untuk membuat produksi membangun dan membandingkan ukuran bundel dengan apa yang sebelumnya.

Konfigurasikan

Setelah terpasang, impuls siap untuk bekerja. Di bawah ini adalah beberapa hal yang mungkin ingin Anda atur untuk dorongan untuk bekerja paling baik untuk Anda.

Browser

Jika Anda menggunakan Brave, aktifkan API akses sistem file:

  1. Pergi ke Brave: // Flags
  2. Cari file system access api
  3. Ubah menjadi "diaktifkan"

Impuls hanya berfungsi jika Anda menjalankan lingkungan pengembangan Anda di komputer yang sama dengan yang Anda gunakan browser. Impuls tidak bekerja dengan lingkungan jarak jauh karena tidak dapat mengedit file di komputer lain.

Untuk alasan keamanan, API akses sistem file hanya berfungsi untuk localhost saat http: // digunakan. Jika Anda menggunakan nama host yang berbeda meskipun lingkungannya lokal, Anda harus:

  1. Pergi ke Chrome: // Bendera
  2. Cari Insecure origins treated as secure
  3. Tambahkan asal Anda (misalnya http: // my_origin) ke daftar

Konfigurasi yang lebih cantik

Impuls mengedit kode Anda. Secara default, ia mencoba yang terbaik untuk membuat perubahan itu minimal mungkin.

Namun, tidak benar -benar tahu cara memformat kode Anda.

Jika Anda ingin menggunakan lebih cantik setelah setiap perubahan kode (disarankan), lewati konfigurasi Anda untuk run() : 

if (process.env.NODE_ENV === 'development') {
-  import('@impulse.dev/runtime').then((impulse) => impulse.run())
+  import('@impulse.dev/runtime').then((impulse) => impulse.run({
+    prettierConfig: require('./path_to/.prettierrc.js')
+  }))
}

Konfigurasi Tailwind

Jika Anda telah memperpanjang tema standar di Tailwind, lewati tailwind.config.js Anda untuk run() : 

if (process.env.NODE_ENV === 'development') {
-  import('@impulse.dev/runtime').then((impulse) => impulse.run())
+  import('@impulse.dev/runtime').then((impulse) => impulse.run({
+     tailwindConfig: require('./path_to/tailwind.config.js'),
+  }))
}

Menggunakan

  • Opsi/Alt+Klik untuk memilih elemen apa pun di halaman
  • ESC untuk menghapus seleksi dan keluar dari impuls
  • Tombol panah atau h, j, k, l untuk navigasi keyboard
  • Gunakan editor kelas di sebelah kanan untuk menambah, mengganti, atau menghapus kelas tailwind
  • Ruang atau masuk untuk membuka bilah perintah
  • Gunakan bilah perintah atau hotkey (ditentukan di sebelah kanan untuk setiap tindakan) untuk melakukan tindakan

bilah perintah

Apa yang dapat Anda lakukan:

  • Lompat ke kode elemen yang dipilih
  • Melompat ke tempat komponen reaksi dari elemen yang dipilih disebut
  • Tambahkan atau hapus kelas (sejauh ini hanya berfungsi jika daftar kelas dalam kode hardcoded tanpa syarat)
  • Hapus elemennya
  • Masukkan <div></div> yang baru
  • Ubah tag elemen (misalnya div -> p)
  • Masukkan teks baru
  • Pindahkan elemen (pertukaran dengan saudara kandung sebelumnya/berikutnya)
  • Batalkan perubahan terbaru

Dapatkan Bantuan atau Bagikan Umpan Balik

  • Server Perselisihan
  • Diskusi tentang GitHub

Menyumbang

Persyaratan:

  • Node 16+
  • NPM 8.9.0+

Kloning repo: 

git clone [email protected]:impulse-oss/impulse.git && cd impulse

Instal dependensi: 

npm install

Jalankan server dev: 

npm run dev

Buka http: // localhost: 3005/. Ini adalah taman bermain untuk mengembangkan dan menguji aplikasi.

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua