Pertanyaannya adalah, apa proyek saya? Tapi saya tidak tahu. Rencana sedang berubah. Ada banyak ide. Tetapi selalu ada fungsi dasar umum. Sejauh ini, saya membicarakan hal ini. Sudah 5 bulan. Setelah eksaserbasi musim semi, dalam kesepian, saya ingin berbagi beberapa perkembangan.
Langkah pertama adalah menggunakan Create React App. Itu harus diselesaikan dengan file. Sudah lama dimungkinkan untuk menyiasati perintah eject yang menakutkan dengan react-app-rewired. Sinful, config-overrides.js sepenuhnya milikku; Ternyata dengan canggung, saya ingin menulis ulang pada lensa fungsional. Tapi semuanya berfungsi: ruang kerja benang, babel-plugins, less-loader (untuk penyesuaian Ant-Design), jalur impor absolut.
Prettier dikonfigurasi sedemikian rupa sehingga proyek memiliki satu konfigurasi untuk VSCode dan commit (.prettierrc berada di root). Pada titik tertentu, panggung yang dipentaskan berhenti memuaskan, saya tidak ingat mengapa. Pretty-quick datang untuk menggantinya (untuk cara terhubung, lihat package.json). Dan itu sangat menjengkelkan bahwa lebih cantik memformat ulang file layanan json. Menambahkan pengecualian ke .prettierignore untuk package.json dan untuk tsconfig.json - sedikit lebih sedikit sampah dalam commit.
Beberapa kata tentang utilitas nvm. Pada root adalah .nvmrc dengan versi yang ditentukan dari simpul + bundel npm, dalam kasus saya "stabil". Cukup untuk melakukan $ nvm use untuk berpindah lingkungan. Sangat nyaman
Lerna pernah tampak seperti monster yang menakutkan. Sebagai hasilnya, saya menggunakan secara eksplisit hanya satu $ lerna publish . Paket dalam repositori tunggal saya diterbitkan di npmjs.com dengan pembaruan versi mereka sendiri, yang Anda pilih dalam mode interaktif. Dalam kombinasi dengan ruang kerja benang, dimungkinkan untuk menguraikan proyek menjadi paket dan mengembangkannya pada saat yang sama (hot-reload bekerja untuk semua kode). Perwujudan praktis dari keterhubungan dan keterhubungan. Google jika Anda tidak tahu apa itu; banyak membantu untuk mengelola kompleksitas kode. Dia juga mengacaukan rollup untuk membangun paket, dan dia menggunakan pengaturan naskah umum dari aplikasi host mono-repositori.
Tentang Ant-Design. Sungguh menakjubkan betapa banyak manajer dan pengembang tidak memahami manfaat membangun rumah dari batu bata jadi, dan terburu-buru untuk memproduksi batu bata mereka sendiri. Apakah benar-benar perlu untuk menemukan kembali implementasi modal window? Belajar untuk menyesuaikan dan menulis adalah praktik yang diterapkan kembali, ini adalah tingkat berikutnya dari abstraksi dalam membangun kompleksitas teknologi. Hanya perlu sedikit mengubah pendekatan untuk desain, mengingat batasannya. Harus menari dari kompor, alih-alih seperti biasa "Aku melihatnya." Tetapi manfaatnya bagi saya jelas dan substansial.
Di dalam Ant-Design, lebih sedikit digunakan - preprosesor css. Sekitar 700 variabel tersedia. Kustomisasi - Saya tidak mau. Namun, pilihan saya adalah css-in-js. Maka Anda perlu mencabut variabel yang diperlukan dalam javascript - di dalam less-loader ada opsi ubahVars. Untuk menggunakan kembali theme.js yang sama di NodeJS dan ES, saya menggunakan esm: const requireForES = require('esm')(module /*, options*/) . Tetapi banyak variabel yang diturunkan dari yang lain, misalnya @primary-color: @blue-6 . Proxy membantu untuk bidang tema: primaryColor: (theme) => theme.blue6 ; jika bidang dalam tema adalah fungsi, maka panggil fungsi tersebut, dan begitu secara rekursif ke bidang berikutnya, sampai kita sampai ke bidang dengan nilai akhir. Dan ada kurang-mixin - ini js-code dikemas dalam lebih sedikit; misalnya, saya menyalin fungsi colorPalette: primaryColor5: (theme) => colorPalette(theme.primaryColor, 5) kembali ke javascript. Sumber theme.js .
Oh, saya memakan anjing itu dengan komponen yang ditata. Tetapi Anda tidak perlu membuang waktu untuk cerita, karena pelepasan reshadow sudah dekat (saya benar-benar ingin percaya). Presentasi yang sangat menginspirasi di React Russia 2019. Untuk mengantisipasi liburan, ini akan menjadi tingkat kenyamanan pengembangan yang berbeda. Sementara itu, hanya sekitar satu poin umum, saya termasuk dalam pengaturan "editor.foldingStrategy": "indentation" untuk secara normal menutup kode css di dalam string template. Kesal bahwa editor tidak ingat diminimalkan. Penting untuk mencari plugin.
Proyek-proyek dalam rencana saya berbeda, tetapi selalu, bahwa proyek-proyek itu untuk peserta aktif. Maka Anda memerlukan fungsionalitas otorisasi. Lebih disukai tanpa kata sandi. Jawab: Kit Akun Facebook. Kode digital pendek untuk login datang melalui surat, atau SMS (gratis), atau pesan di WhatsApp. Dia menulis pembungkusnya di atas API sementara dia tinggal di dalam proyek sebagai komponen reaksi. Ini bekerja dengan baik. Sekarang saya ingin memasukkannya ke dalam paket npm, pada waktu itu saya tidak tahu cara menggunakan ruang kerja lerna + benang.
Banyak proyek tentang konten teks. Perlu editor teks. Hanya penurunan harga - tidak cukup. Ya, di dalam format penurunan harga, Anda dapat menambahkan sisipan HTML, tetapi ini bukan editor untuk konsumen massal, tetapi untuk peretas. Outputnya adalah editor blok. Dan untuk blok Anda perlu menyimpan data meta. Misalnya, widget galeri gambar - beberapa klik mouse dan Anda selesai. Dan saya juga ingin mengatur ulang blok, juga dengan mouse. Saya suka koenig-editor di dalam Ghost dan masih domestik EditorJS . Jelas bahwa medium.com adalah leluhurnya. Tapi saya tidak puas dengan fungsionalitas hingga 100%. Dan ini bukan tentang Bereaksi. Bisakah mengambil DraftJS melalui Facebook? Sayangnya, terlontar. SlateJS yang terinspirasi olehnya secara komparatif memenangkan momen tersebut. Tetapi SlateJS adalah konstruktor plugin. Seharusnya ada majelis yang sudah jadi berdasarkan itu. Di bawah spoiler adalah daftar panjang pro dan kontra dari beberapa.
Teks tersembunyicanner-slate-editor
[+] tidak menampilkan Menu Melayang ketika mouse memilih header atau teks di dalam blok dengan kode
[-] ketika operasi drag'n'drop selesai untuk gambar, kursor yang tidak ditarik diamati
[+] tanda plus dengan menu konteks ketika kursor berada pada baris kosong di luar blok kode (seperti pada Ghost, tetapi ada juga tanda tambah ketika Anda membawa mouse ke akhir teks)
[+] Tanda plus dengan menu konteks muncul di akhir baris (tetapi jika garis tersebut didekorasi dengan "H2", maka tanda tambah tidak muncul lagi - ini bukan bug, tetapi fitur)
[+] plus tanda animasi dengan menu konteks (tidak ada yang seperti itu di Ghost); dan tanda plus berubah menjadi tanda silang ketika menu terbuka
[-] di menu konteks ada tombol untuk memformat teks (di Ghost hanya ada widget)
[+] aplikasi komponen antd untuk alat di dalam editor
[+] fungsi yang kaya untuk memuat gambar: drag'n'drop, url, buka file
[-] Gambar hanya dapat diunduh satu per satu (tanpa widget galeri)
[+] ada penyelarasan gambar dan blok lainnya
[+] mengedit ukuran gambar (tetapi akan lebih mudah, seperti pada mode Ghost regular-white-full)
[+] aplikasi format markdown
[-] drag'n'drop untuk kartu yang hilang (dalam terminologi Ghost)
Widget tabel [+], seperti pada MS Word lama yang baik
[-] oleh url, Anda hanya dapat menyisipkan video (di Ghost, ini adalah widget "Lainnya ...", yang mendukung banyak hal lain - "konten yang disematkan")
[-] tautan widget tidak memungkinkan pengeditan (di Ghost dimungkinkan)
[-] Hovering Menu dan tautan url-popup muncul pada saat yang sama (dalam Ghost, pemilihan teks menyembunyikan tautan url-popup)
[-] Hovering Menu merayap di tepi area yang diedit (dalam Ghost itu sejajar dengan tepi)
halaman reaksi (ory-editor)
Mode [+] untuk mengubah komposisi blok melalui drag'n'drop
Mode ubah ukuran [+] untuk gambar dan blok lain, jika ada beberapa dari mereka di baris yang sama (tetapi hanya melalui drag'n'drop)
Mode [+] untuk menambahkan widget (tetapi hanya melalui drag'n'drop)
Mode "+ pratinjau" [+] mengubah perilaku widget (misalnya: gambar menjadi dapat diklik)
[+] dalam mode mengubah komposisi blok, blok dengan gambar dapat dimasukkan ke dalam blok dengan teks melalui drag'n'drop - sehingga teks membingkai gambar; ditambah ada "perlindungan dari orang bodoh": sehingga Anda dapat memasukkan hanya satu gambar
[-] tanpa mouse fungsinya sangat terbatas
[-] tidak ada peregangan ukuran gambar (seperti pada mode Ghost biasa-putih-penuh)
[-] tidak ada format penurunan harga sama sekali (ada dua mode di Ghost: dalam teks, dalam widget terpisah)
[-] tidak jelas cara menghapus blok gambar (Anda harus menyeretnya ke keranjang melalui drag'n'drop) - Anda harus memindahkan ikon keranjang keluar dari teks
[-] tidak ada bingkai fokus untuk widget gambar dalam mode edit properti (meskipun ada widget video HTML5, mungkin indikasi browser menetapkan indikasi fokus)
[+] bilah alat untuk mengedit elemen saat ini (bilah alat untuk teks, atau dialog untuk gambar dll.) muncul di ruang bawah tanah dan berlabuh di sana
[-] mode penambahan widget kembali ke keadaan awal pemilihan widget setelah memasukkan widget apa pun, tetapi saya ingin melanjutkan mengedit widget yang ditambahkan; Ini mungkin yang dimaksudkan: pertama, lempar blok, dan baru kemudian edit pada gilirannya
[-] url tautan dihapus secara bodoh dengan mengklik tombolnya, tetapi saya ingin sembulan dengan tampilan url tautan dan dialog pengeditan tautan (Ghost juga tidak memiliki pengeditan, hanya bidang masukan kosong untuk tautan baru); jelas bahwa trade-off karena kemungkinan konflik dalam menambah tautan ke tautan harus dilakukan; dalam kewarasan, satu dialog berfungsi untuk mengedit tautan (dan menampilkannya) dan mengikuti tautan ini
[-] tidak ada drag'n'drop di alat pengeditan gambar untuk menambahkan gambar asli
[-] tidak ada widget untuk kode
[-] drag'n'drop tidak diterapkan untuk memuat gambar
[-] dialog pemilihan file sistem untuk mengunduh gambar tidak memfilter file yang valid (hanya gambar yang akan ditampilkan)
[-] dalam Ghost, dalam mode drag'n'drop, elemen lainnya digeser secara animasi untuk bilah penunjuk tempat penurunan akan dieksekusi
[-] dalam mode mengubah komposisi blok melalui drag'n'drop, penunjuk strip parasit ditampilkan dalam duplikat (tampaknya karena elemen div tambahan)
netlify-cms-widget-markdown
[+] Anda dapat melihat bagaimana cara menikah dengan slate dan ucapan (commentSlate.js, slateRemark.js)
[+] plug-in built-in daftar edit-batu tulis dan tabel-edit batu tulis
[+] dua implementasi editor: RawEditor & VisualEditor
kewarasan
[+] pilihan pangkas untuk gambar (lihat lampiran) - tidak berlaku untuk slate-js
[+] tempel markdown (?)
Oke, saya harus mengotak-atik build SlateJS terbaik saya. Kemudian habr.com akan mengacaukannya sendiri. Pikirkan mengapa Anda membutuhkan VueJS (lelucon). Jadi, pertama Anda memerlukan komposisi kontrol untuk mengontrol editor: untuk menambah blok baru, untuk mengontrol blok yang dipilih, untuk mengubah pengaturan blok, untuk memformat teks yang dipilih. Saya menyalin beberapa kali, sepertinya sudah beres, sementara saya menyukainya. Kontrol berdasarkan Ant-Design. Kontrol daftar paket npm yang dipublikasikan. Jangan menilai dengan keras - ini adalah anak yang dicintai.
Sumber proyek masa depan .