Stencil v1: Menyiasati Kesalahan Loading Module ES dengan
Pada awalnya, kita menggunakan es modules dengan fungsi import() dan dapat memuat module dengan <link rel="modulepreload"> serta menggunakan implementasi native browser untuk pengumpulan module. Namun, efek sampingan yang terjadi adalah bahwa tipe "module" selalu asinkron, sehingga tidak akan menghambat halaman utama hingga skrip selesai di-load. Dalam kasus Stencil v1, hal ini berpengaruh pada hydrate CSS classes yang tidak ditambahkan ke <head> sebelum <body> dan komponen ditampilkan. Oleh karena itu, terdapat momen dimana HTML merender dengan cepat kemudian es module di-load dan menambahkan gaya seperti ini ke <head>:
<style data-styles>
child-component, parent-component { visibility:hidden }
.hydrated { visibility:inherit }
</style>
Dengan prerendering dan SSR, Stencil dapat menambahkan gaya-gaya tersebut ke index.html secara otomatis. Namun, untuk halaman-halaman yang di-generated dinamis seperti contoh Anda, Stencil mengalami masalah di atas.
Solusi tercepat adalah dengan cara manual menambahkan <style data-styles> seperti contoh di atas ke index.html. Akan tetapi, saya siap membahas beberapa solusi lainnya untuk kasus-kasus seperti Anda.
Terima kasih!
Balasan
Anda mengatakan bahwa kita harus membuat gaya sendiri dengan semua komponen yang menggunakan slot? Tidak seperti itu seharusnya menjadi tanggungjawab Stencil itself?
Saya ingin mendengar solusi lainnya yang saya miliki, karena komponen-komponen Anda digunakan di beberapa aplikasi, sehingga menerapkan gaya-gaya ekstra (yang kemudian akan terduplikat karena Stencil juga membuat gaya-gaya) manual tidak ideal.
Balasan
Karena skrip tersebut adalah asinkron, maka terdapat momen dimana gaya belum diterapai. Oleh karena itu, Light DOM web seperti kata "Text" dalam komponen <ion-button>Text</ion-button> akan merender dengan cepat di dalam HTML, dan ketika skrip ES module di-load, komponen tersebut di-hydrate. Hal ini terjadi dengan semua komponen yang menggunakan ES module, Stencil atau tidak.
Stencil memang menambahkan skrip seperti ini: <style data-styles> child-component, parent-component { visibility:hidden } .hydrated { visibility:inherit } </style> yang membantu mencegah kilauan di kebanyakan kasus. Namun, masih terdapat situasi di mana hal ini dapat terjadi.
Saya merekomendasikan salah satu opsi berikut: menambahkan gaya global, atau menggunakan build ES5 yang akan sinkron.
Balasan
Ada juga opsi untuk menambahkan visibility hidden ke HTML secara langsung.
html {
visibility: hidden;
}
Namun, hal ini datang dengan masalah-masalahnya:
- Jika terjadi kesalahan JavaScript di halaman, maka Anda akan melihat halaman kosong.
- Pengguna yang memiliki JavaScript dinonaktifkan akan melihat halaman kosong pula.
Apakah Anda berpikir bahwa opsi ini adalah alternatif yang layak @adamdbradley?
Balasan
Saya berpikir bahwa opsi ini adalah alternatif yang baik. Mungkin kita sebaiknya memulihkan property visibility HTML di window.onerror atau tag <noscript> 😀.
Balasan
Oh, ide yang bagus! Kolaborator saya juga mengatakan bahwa mungkin terlalu nuklear sebagai solusi. Dengan fail-safes ini, maka opsi tersebut dapat menjadi solusi yang lebih baik.
Balasan
Saya memiliki kasus yang sama.
Kasus saya adalah sedikit unorthodox, saya menggunakan Vuejs untuk membuat komponen dinamis di website yang telah ada – hal ini memiliki masalahnya sendiri, seperti harus membersihkan semua proyek Anda dari tag gaya atau skrip, sehingga render Vue instance lebih dari satu di beberapa bagian situs.
Saya memutuskan untuk mengexplore Stencil karena tampaknya akan menyelesaikan masalah-masalah yang saya hadapi dengan menggunakan Vuejs, tetapi fitur yang berguna dari Vuejs adalah attribute v-cloak – Vuejs menghapus v-cloak saat komponen di-load. Saya ingin mengetahui apakah Stencil memiliki fitur serupa.
Saya harap Anda dapat membantu!
import() dan dapat memuat module dengan <link rel="modulepreload"> serta menggunakan implementasi native browser untuk pengumpulan module. Namun, efek sampingan yang terjadi adalah bahwa tipe "module" selalu asinkron, sehingga tidak akan menghambat halaman utama hingga skrip selesai di-load. Dalam kasus Stencil v1, hal ini berpengaruh pada hydrate CSS classes yang tidak ditambahkan ke <head> sebelum <body> dan komponen ditampilkan. Oleh karena itu, terdapat momen dimana HTML merender dengan cepat kemudian es module di-load dan menambahkan gaya seperti ini ke <head>:<style data-styles>
child-component, parent-component { visibility:hidden }
.hydrated { visibility:inherit }
</style>
index.html secara otomatis. Namun, untuk halaman-halaman yang di-generated dinamis seperti contoh Anda, Stencil mengalami masalah di atas.<style data-styles> seperti contoh di atas ke index.html. Akan tetapi, saya siap membahas beberapa solusi lainnya untuk kasus-kasus seperti Anda.<ion-button>Text</ion-button> akan merender dengan cepat di dalam HTML, dan ketika skrip ES module di-load, komponen tersebut di-hydrate. Hal ini terjadi dengan semua komponen yang menggunakan ES module, Stencil atau tidak.<style data-styles> child-component, parent-component { visibility:hidden } .hydrated { visibility:inherit } </style> yang membantu mencegah kilauan di kebanyakan kasus. Namun, masih terdapat situasi di mana hal ini dapat terjadi.html {
visibility: hidden;
}
<noscript> 😀.Kasus saya adalah sedikit unorthodox, saya menggunakan Vuejs untuk membuat komponen dinamis di website yang telah ada – hal ini memiliki masalahnya sendiri, seperti harus membersihkan semua proyek Anda dari tag gaya atau skrip, sehingga render Vue instance lebih dari satu di beberapa bagian situs.
Saya memutuskan untuk mengexplore Stencil karena tampaknya akan menyelesaikan masalah-masalah yang saya hadapi dengan menggunakan Vuejs, tetapi fitur yang berguna dari Vuejs adalah attribute
v-cloak – Vuejs menghapus v-cloak saat komponen di-load. Saya ingin mengetahui apakah Stencil memiliki fitur serupa.