Я пытался преобразовать свой существующий более крупный сайт из Fable.React в Feliz. Он использует Preact (atm v10.3.1), и это безупречно работает с Fable.React.
Конвертируя его в Feliz, я заметил отсутствие тегов. Кажется, что некоторые дочерние элементы даже не находятся в dom, а некоторые страницы просто пусты, за исключением корневого тега.
Мне удалось частично воспроизвести проблему на упрощенном примере SAFE.Simplified в ветке preact-1 (https://github.com/l3m/SAFE.Simplified/tree/preact-1)
В примере тег счетчика тоже пуст, при использовании preact, работает при переходе к мастеру и использовании response. И в SAFE.Simplified, и на моем сайте я могу заставить его работать / сломать, просто проверив фиксацию с помощью response / preact, переустановив deps и построив.
Привет @ l3m , я не делаю ничего особенного, чтобы Feliz работал с Preact 🤔 согласно предпосылкам preact / compat, он «должен» работать из коробки, но похоже, что это не так.
Я скоро исследую это
Я закрыл и снова открыл, потому что думал, что preact также сломал React.Fable, но оказалось, что у меня только что был компонент Feliz наверху в дереве доменов, и это сломало его.
Я немного покопался и провел небольшое тестирование. Он работает со списком ReactElements
, но как только вы добавляете выражение if
или match
в середину списка, оно ломается. Кроме того, если я вытягиваю рабочий список в его собственное связанное значение let
, он перестает работать.
Работает:
prop.children [
Html.text "Blah"
]
Не работает:
prop.children [
if true then Html.text "Blah"
]
Также не работает:
let children = [
Html.text "Blah"
]
...
prop.children children
Я думаю, эта проблема с Preact связана с этим. У меня все вышеперечисленные неудачные случаи работали, используя массивы вместо seq или list.
@ Zaid-Ajaj, можно ли добавить еще одну перегрузку в prop.children
? Это может решить проблему с предварительным запуском без внесения критических изменений.
Как заявил @BennieCopeland , проблема в том, что Preact не поддерживает итераторы для children
(и это то, что Fable генерирует, когда встречает списки с динамическим содержимым). Это странно, так как списки в F # должны быть быстро вычислены (не уверен, почему Fable думает иначе).
Если бы списки были материализованы в массивы, Preact работал бы нормально (и сэкономил нам массу трафика и время загрузки! :))
Мне удалось заставить мои представления работать с нетерпеливой материализацией seq, и это определение затмевает исходный prop.children
let childrenInternal elems = elems |> Array.ofSeq |> prop.children
module prop =
let children = childrenInternal
Если вы добавили перегрузку prop.children
взяв ReactElement list
вместо seq
(и материализуя список в массив, как указано выше), эта проблема будет решена. Пользователям перегрузки seq
потребуется использовать React, но версия списка будет совместима с Preact.
Если интересно, могу создать пиар.
Я не вижу веских причин для того, чтобы это не просто список, а не последовательность. Ничего особенного не должно сломать.
Я только что опубликовал версию 1.8, которая преобразует элементы в массивы перед передачей в Children.toArray
из React. Думаю, на данный момент это решает проблему. @VitalyBrusentsev , пожалуйста, подтвердите? В любом случае, я планирую скомпилировать этот вызов времени выполнения, когда выйдет Fable 3, так что на данный момент он должен быть достаточно хорош.
Я обновил Feliz до 1.10 и могу подтвердить, что приложение работает с preact!
Хорошая работа 👍
@VitalyBrusentsev Спасибо за подтверждение! Это отличные новости: smile: @BennieCopeland и @ l3m Не могли бы вы еще раз проверить, работает ли Feliz с Preact должным образом? :молиться:
Я предполагаю, что поддержка Preact исправлена, пожалуйста, откройте снова, если проблема не исчезнет: smile:
Самый полезный комментарий
Я только что опубликовал версию 1.8, которая преобразует элементы в массивы перед передачей в
Children.toArray
из React. Думаю, на данный момент это решает проблему. @VitalyBrusentsev , пожалуйста, подтвердите? В любом случае, я планирую скомпилировать этот вызов времени выполнения, когда выйдет Fable 3, так что на данный момент он должен быть достаточно хорош.