torus
Minor rendering bug fixes
torus-dom )Torus adalah kerangka UI model-view yang digerakkan oleh acara untuk web, berfokus pada menjadi kecil, efisien, dan bebas dari dependensi .
Anda dapat menemukannya? Dokumentasi lengkap untuk Torus di sini, di halaman GitHub .
Torus juga memiliki versi basis kode yang beranotasi dan mudah dibaca dari seluruh (cukup ringkas), juga di halaman GitHub. Lihat jika Anda ingin mempelajari lebih lanjut tentang bagaimana kerangka kerja dirancang, dan bagaimana DOM virtual dan templating bekerja!
Inilah yang terlihat seperti Torus! Ini adalah aplikasi penghitung yang berfungsi penuh, tidak ada langkah kompilasi atau bundling yang diperlukan.
Jatuhkan tag skrip ini di html Anda
< script src =" https://unpkg.com/torus-dom/dist/index.min.js " > </ script >... dan muat skrip ini.
// every view extends Component or StyledComponent
class App extends Torus . StyledComponent {
init ( ) {
// initialize our local state
this . count = 0 ;
}
styles ( ) {
// we can define dynamically and efficiently injected
// styles for our component with styles(), like this.
// These styles are also automatically scoped to the
// component, and we can use the full, nested SCSS syntax.
return css `
font-family: system-ui, sans-serif;
h1 {
text-align: center;
}
button {
padding: 4px 8px;
&:hover {
opacity: .8;
}
}
` ;
}
compose ( ) {
// We define the structure of our component in compose(),
// using a JSX- and lit-html-like syntax as a template string.
return jdom `<main>
<h1>Hi! You clicked ${ this . count } times.</h1>
<button onclick=" ${ ( ) => {
this . count ++ ;
this . render ( ) ;
} } ">Count up!</button>
</main>` ;
}
}
// mount the app to the page
document . body . appendChild ( new App ( ) . node ) ; Torus tidak memiliki dependensi produksi, tidak memerlukan langkah build untuk memanfaatkan semua fiturnya, dan beratnya di bawah 5kB Gzipped termasuk mesin templating, renderer, komponen dan sistem acara, dan pembungkus CSS-in-JS. Ini membuatnya mudah untuk mengadopsi dan mengirim, untuk apa pun mulai dari merender satu komponen pada halaman hingga membangun aplikasi skala penuh.
Torus tidak dirancang untuk menjadi perpustakaan DOM virtual tercepat (ada alternatif hebat seperti inferno ), tetapi kinerja dan responsif adalah salah satu tujuan utama proyek. Sementara tetap kecil, Torus mencoba untuk menjadi secepat dan responsif mungkin, terutama dalam rendering. Dikombinasikan dengan ukuran bundel kecil, ini membuat torus bagus untuk membangun aplikasi web untuk di mana saja, di perangkat apa pun.
Arsitektur Torus merangkum semua logika rendering dan memperbarui dalam komponen itu sendiri, jadi aman untuk mengambil Component#node dan memperlakukannya sebagai penunjuk sederhana ke elemen dom root dari komponen. Anda dapat memindahkannya di sekitar halaman, membawanya masuk dan keluar dari dokumen, menanamkannya dalam komponen React atau Vue atau bahkan komponen web, dan jika tidak menggunakannya di mana saja elemen DOM tradisional dapat digunakan. Ini memungkinkan Anda untuk memasukkan komponen dan aplikasi torus dalam berbagai arsitektur frontend.
Dikombinasikan dengan ukuran torus yang kecil, ini membuatnya masuk akal untuk mengirimkan Torus dengan hanya satu atau beberapa komponen untuk proyek yang lebih besar yang mencakup elemen dari kerangka kerja lain, jika Anda tidak ingin atau tidak dapat mengirimkan seluruh aplikasi Torus.
Torus tidak berkaitan dengan internasionalisasi, tetapi sebagai pengembang, kami dapat menggunakan API yang tersedia bagi kami membuat internasionalisasi menjadi mungkin di dalam komponen Torus kami. Torus memperlihatkan banyak proses rendering dan DOM virtual kepada Anda, pengembang, dan yang penting memungkinkan kami membuat preprocessor yang dapat mengambil dalam JDOM, dan memodifikasinya sebelum mencapai renderer, sehingga kami dapat membuat modifikasi pada DOM yang dilihat oleh renderer dengan kode kami sendiri. Ini membuat torus sangat dapat diperluas dan ideal untuk i18n. Faktanya, komponen preprocessor komponen adalah apa yang memungkinkan komponen Styled() . ( Styled() menambahkan nama kelas baru ke JDOM sebelum komponen diberikan.)
Misalnya, kita dapat membuat I18nComponent , yang dapat bertindak sebagai kelas komponen dasar untuk proyek internasional, seperti ini.
class I18nComponent extends Component {
// The default preprocess method just returns the jdom as-is. We can override it
// to modify the JDOM given by component's `#compose()` method before it reaches the
// virtual DOM renderer.
preprocess ( jdom , _data ) {
// Here, we might recursively traverse the JDOM tree of children
// and call some custom `translate()` function on each string child
// and any displayed props like `placeholder` and `title`.
// As a trivial example, if we only cared about text nodes on the page,
// we could write...
const translate = jdom => {
if ( typeof jdom === 'string' ) {
// translate text nodes
return yourImplementationOfTranslateString ( jdom ) ;
} else if ( Array . isArray ( jdom . children ) ) {
// it's an object-form JDOM, so recursively translate children
jdom . children = jdom . children . map ( yourImplementationOfTranslateString ) ;
return jdom ;
}
return jdom ;
}
// In production, we'd also want to translate some user-visible properties,
// so we may also detect and translate attrs like `title` and `placeholder`.
return translate ( jdom ) ;
}
} Saya (Linus) menggunakan torus untuk sebagian besar proyek pribadi saya ketika saya membutuhkan perpustakaan UI sisi klien. Beberapa proyek ini meliputi:
API Torus adalah campuran antarmuka deklaratif untuk mendefinisikan antarmuka dan pandangan pengguna, dan pola penting untuk manajemen negara, yang secara pribadi saya temukan adalah keseimbangan terbaik dari dua gaya saat membangun aplikasi besar. Sebagai praktik umum, komponen harus mencoba untuk tetap deklaratif dan idempoten, dan berinteraksi dengan model data / negara melalui API publik yang stabil yang diekspos oleh model data.
Desain Torus diilhami oleh arsitektur yang digerakkan oleh komponen React, dan meminjam konsep umum dari ekosistem React, seperti gagasan berbeda dalam DOM virtual sebelum memberikan, komposisi dengan komponen urutan yang lebih tinggi, dan mencampur CS dan markup ke dalam javascript untuk memisahkan kekhawatiran untuk setiap komponen menjadi satu kelas. Tetapi Torus dibangun di atas ide-ide itu dengan memberikan API tingkat bawah yang lebih minim, kurang berpendapat, dan memilih model data yang stateful daripada lapisan tampilan/pengontrol yang berusaha untuk menjadi murni fungsional.
Torus juga meminjam dari tulang punggung dalam desain model data, untuk catatan dan toko, karena memiliki desain yang digerakkan oleh acara di balik bagaimana pembaruan data terikat pada tampilan dan model lainnya.
Terakhir, tag template jdom Torus diilhami oleh HTM dan LIT-HTML, kedua tag template untuk memproses markup HTML menjadi DOM virtual.
Frontend Development Tooling telah menjadi tren untuk melakukan lebih banyak dan lebih banyak pada waktu pembuatan / waktu kompilasi, membuat sintaksis dan fitur yang lebih kaya mungkin, seperti mengadopsi fitur javascript trek proposal dan JSX. Svelte adalah contoh yang bagus tentang bagaimana alat kompilasi dapat menciptakan cara berpikir yang berbeda secara kategoris tentang membangun antarmuka pengguna.
Torus tidak mencoba menjadi alat pembuatan waktu lain. Salah satu tujuan Torus adalah menjadi sama bermanfaatnya saat runtime sambil mengorbankan kinerja dan overhead sesedikit mungkin, sehingga kita dapat menghilangkan langkah kompilasi dalam pengembangan. Akibatnya, Torus adalah pengalaman standar emas dari prototipe Ide Antarmuka Pengguna: Cukup jatuhkan tag <script> dalam dokumen dan mulai menulis. Kelemahan dari prioritas sadar runtime ini lebih dari waktu kompilasi adalah bahwa beberapa fitur yang bukan bagian dari sintaks JavaScript tidak mungkin tanpa langkah kompilasi. Khususnya, sintaks dekorator ecmascript dan sintaks JSX tidak mungkin, tetapi akan berguna, apakah ada langkah kompilasi dalam membangun aplikasi torus. Kita bisa menulis template JDOM di JSX, yang secara sintaksis sangat mirip, dan membungkus metode pembaruan status dan pendengar acara di @render dan @bind dekorator daripada menyebut this.render() dan .bind(this) di setiap contoh.
Menambahkan dukungan kompilasi saat ini tidak ada di peta jalan, tetapi harus langsung, karena Torus adalah subset dari JavaScript modern. Kita mungkin kembali untuk mengatasi manfaat marjinal dari kompilasi di masa depan ini, terutama jika dekorator tidak menunjukkan kemajuan di jalur proposal.
Kerangka kerja UI deklaratif yang serupa seperti React dan Preact telah memperkenalkan gagasan fragmen, yang merupakan gula sintaks untuk membuat array node dom (virtual) dari suatu fungsi. Ini karena saat memiliki komponen mengembalikan serangkaian node tidak masuk akal sendiri, seringkali berguna untuk memiliki fungsi internal yang mengembalikan bagian komponen dan tampilan sebagai node tanpa elemen pembungkus. Torus secara asli mendukung representasi array dari daftar node - cukup bungkus objek JDom dalam array! Meskipun, tidak seperti di React, komponen tidak dapat membuat lebih dari satu node, sebagian besar kasus penggunaan fragmen ditutupi dengan hanya dapat melewati representasi daftar node dalam array secara internal di dalam komponen, dan ini didukung secara intuitif di luar kotak dalam torus.
Saya telah bermain -main dengan gagasan memodifikasi tag template jdom untuk dapat mengubah representasi templat fragmen seperti <>...</> menjadi array node. jdom juga mampu mem-parsing elemen tingkat atas yang berdekatan dalam templat dan mengembalikannya dalam satu array. Namun, saya memutuskan untuk tidak mengirimkan fitur -fitur ini untuk saat ini, karena saya percaya kasus penggunaan ini cukup ditutupi dengan dapat mengembalikan .children dari Template JDOM, bahkan mungkin yang dibungkus di dalam penanda fragmen <>...</> untuk keterbacaan, atau hanya mengembalikan berbagai objek JDom. Saya menghargai eksplisit dari langkah ekstra yang terlibat dalam mengembalikan susunan non -tradisional dari operasi rendering, dan saya pikir biaya pengembalian array sesekali sebagai representasi perantara bagian -bagian dari suatu tampilan tidak sebanding dengan biaya fitur tambahan.
Torus menggunakan simbol, peta, dan set, jadi kompatibel dengan versi terbaru dari semua browser utama kecuali Internet Explorer 11. Pada browser yang lebih lama yang tidak mendukung operator spread array misalnya, Anda mungkin perlu mentranspile perpustakaan ke ES5 menggunakan alat seperti Babel.
Anda dapat menginstal Torus dari NPM sebagai torus-dom . Torus masih dianggap beta , dan belum rilis 1.0. Saya percaya API stabil sekarang dan sebagian besar serangga utama telah terjepit, tetapi tidak ada jaminan sampai 1.0.
npm install --save torus-dom
# or
yarn add torus-dom import { StyledComponent , Record , Store , Router } from 'torus-dom' ;Atau, Anda juga dapat mengimpor torus dengan:
< script src =" https://unpkg.com/torus-dom/dist/index.min.js " > </ script > Torus akan mengekspor semua global default ke window.Torus , sehingga mereka dapat diakses sebagai nama global ke skrip Anda. Ini tidak direkomendasikan dalam aplikasi produksi, tetapi bagus untuk bereksperimen.
Jika Anda menemukan bug, buka masalah atau tarik permintaan tarik dengan tes untuk membuat ulang bug terhadap apa yang Anda harapkan untuk dilakukan Torus. Jika Anda memiliki permintaan fitur, saya mungkin tidak perlu menghormatinya, karena Torus dibangun sebagian besar agar sesuai dengan alur kerja pribadi dan preferensi arsitektur saya. Tapi saya terbuka untuk mendengar pendapat Anda! Jadi jangan ragu untuk membuka masalah, dengan harapan bahwa saya mungkin tidak memutuskan untuk menambahkan fitur ke torus (terutama jika itu akan mengembang ukuran bundel atau memerlukan transpiler.)
Anda dapat menggunakan NPM dan benang untuk mengembangkan torus, tetapi skrip NPM menggunakan benang, dan benang secara resmi didukung karena itu yang saya gunakan untuk mengembangkan dan membangun torus.
Untuk membangun torus dari sumber, jalankan
yarn build Ini akan berjalan ./src/torus.js melalui toolchain khusus, pertama -tama menghapus panggilan fungsi debug dan menjalankan hasil itu melalui webpack, melalui mode development dan production . Kedua output, serta versi vanilla dari Torus tanpa pemrosesan webpack, disimpan ke ./dist/ . Berlari yarn clean akan menghapus artefak bangunan semacam itu, serta laporan cakupan yang dihasilkan.
Torus memiliki sistem unik untuk menghasilkan dokumentasi dari komentar kode yang dimulai dengan //> . Untuk menghasilkan dokumen komentar, jalankan
yarn docs File dokumen akan dihasilkan di ./docs/ dan dapat dilihat di browser web. Lihat halaman GitHub untuk proyek ini untuk contoh apa yang dihasilkan skrip ini.
Untuk menjalankan tes unit Torus dan menghasilkan laporan cakupan untuk coverage/ , jalankan
yarn testIni akan menjalankan suite tes dasar pada pembangunan pengembangan torus. Tes integrasi yang lebih komprehensif menggunakan antarmuka pengguna lengkap seperti TODO Apps ada di peta jalan.
Kami juga dapat menjalankan tes pada build produksi, dengan:
yarn test:prod Ini tidak akan menghasilkan laporan cakupan , tetapi akan menjalankan tes terhadap build produksi yang lebih kecil di dist/torus.min.js untuk memverifikasi tidak ada bug kompilasi yang terjadi.
Torus serat dengan eslint, menggunakan konfigurasi khusus. Untuk menjalankan linter, jalankan
yarn lintAtau pertimbangkan untuk menggunakan plugin editor untuk Eslint.
