Feliz: Возможная ошибка: отсутствие тегов при использовании Preact

Созданный на 17 мая 2020  ·  10Комментарии  ·  Источник: Zaid-Ajaj/Feliz

Я пытался преобразовать свой существующий более крупный сайт из 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 и построив.

Самый полезный комментарий

Я только что опубликовал версию 1.8, которая преобразует элементы в массивы перед передачей в Children.toArray из React. Думаю, на данный момент это решает проблему. @VitalyBrusentsev , пожалуйста, подтвердите? В любом случае, я планирую скомпилировать этот вызов времени выполнения, когда выйдет Fable 3, так что на данный момент он должен быть достаточно хорош.

Все 10 Комментарий

Привет @ 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:

Была ли эта страница полезной?
0 / 5 - 0 рейтинги