Feliz: Potensi Bug: Tag hilang saat menggunakan Preact

Hai @l3m , saya tidak melakukan sesuatu yang istimewa untuk membuat Feliz bekerja untuk Preact sesuai dengan premis preact/compat, itu "seharusnya" bekerja di luar kotak tetapi sepertinya tidak.

Saya akan segera menyelidikinya

Saya menutup dan membuka kembali karena saya pikir preact juga merusak React.Fable, tetapi ternyata saya hanya memiliki komponen Feliz yang tinggi di pohon dom dan itu merusaknya.

Saya melihat-lihat sedikit dan melakukan beberapa pengujian. Ini berfungsi dengan daftar ReactElements , tetapi segera setelah Anda menambahkan ekspresi if atau match di tengah daftar itu rusak. Selain itu, jika saya menarik daftar kerja ke dalam nilai terikat let , itu berhenti bekerja.

Bekerja:

prop.children [
    Html.text "Blah"
]

Tidak berfungsi:

prop.children [
    if true then Html.text "Blah"
]

Juga tidak berfungsi:

let children = [
    Html.text "Blah"
]
...

prop.children children

Saya pikir masalah Preact ini terkait. Saya membuat semua kasus gagal di atas berfungsi dengan menggunakan array alih-alih seq atau daftar.

@Zaid-Ajaj apakah mungkin untuk menambahkan kelebihan lain ke prop.children ? Itu bisa menyelesaikan masalah preact tanpa membuat perubahan yang melanggar.

Seperti yang dinyatakan oleh @BennieCopeland , masalahnya adalah bahwa Preact tidak mendukung iterator untuk children (dan itulah yang dihasilkan Fable ketika menemukan daftar dengan konten dinamis). Ini aneh, karena daftar di F# seharusnya dihitung dengan penuh semangat (tidak yakin mengapa Fable berpikir sebaliknya).
Jika daftar diwujudkan menjadi array, Preact akan bekerja dengan baik (dan menghemat banyak lalu lintas dan waktu muat! :))

Saya berhasil membuat pandangan saya bekerja dengan materialisasi seq yang bersemangat dan definisi ini membayangi prop.children

let childrenInternal elems = elems |> Array.ofSeq |> prop.children
module prop =
  let children = childrenInternal

Jika Anda menambahkan kelebihan prop.children mengambil ReactElement list alih-alih seq (dan mewujudkan daftar ke Array, seperti di atas), masalah ini akan terpecahkan. Pengguna kelebihan seq perlu menggunakan React, tetapi versi daftar akan kompatibel dengan Preact.

Saya dapat membuat PR jika Anda tertarik.

Saya tidak melihat alasan kuat untuk ini untuk tidak hanya menjadi daftar daripada seq. Seharusnya tidak benar-benar merusak apa pun afaik.

Saya baru saja menerbitkan v1.8 yang mengubah elemen menjadi array sebelum diteruskan ke Children.toArray dari React. Saya pikir itu memperbaiki masalah untuk saat ini. @VitalyBrusentsev bisa tolong konfirmasi? Bagaimanapun, saya berencana untuk mengkompilasi permintaan runtime ini ketika Fable 3 keluar sehingga seharusnya cukup baik untuk saat ini

Saya telah memperbarui Feliz ke 1.10 dan dapat mengonfirmasi bahwa aplikasi berfungsi dengan tepat!
Kerja bagus 👍

@VitalyBrusentsev Terima kasih banyak atas konfirmasinya! Itu berita bagus :smile: @BennieCopeland dan @l3m Bisakah Anda memeriksa kembali apakah Feliz berfungsi sebagaimana mestinya dengan Preact? :berdoa:

Saya akan menganggap dukungan Preact sudah diperbaiki, silakan buka kembali jika masalah berlanjut :senyum: