Comments 8
Было бы интересно посмотреть примеры на vue с учетом глубокой кастомизации.
Не уверен, что понял вас. Вы хотите пример Symbiote-компонента внутри Vue приложения?
Именно. Можно взять nuxt с SSR. Пока я слабо понимаю, как ваши компоненты будут работать с реактивностью vue. Писать обертку?
Кстати:
Hydration mismatches невозможны в принципе
Если на сервере рендерим время (да даже в формате N days ago), то в браузере все равно поймаем ошибку гидратации
Пока я слабо понимаю, как ваши компоненты будут работать с реактивностью vue. Писать обертку?
А причем тут реактивность vue? У Симбиота своя реактивность. Шаблон симбиота - это просто HTML с атрибутами, вывод (чанк) для последующей гидрации - аналогично - просто HTML. Если этот HTML будет полностью сформирован на стороне vue - симбиот просто подцепит его при активации. Если вы создадите кусок HTML-документа через родной SSR симбиота - он, также, просто гидриуется на клиенте. Никакой обертки не нужно. Грубо говоря, в vue шаблоне могут быть кастомные теги, если они созданы с помощью Symbiote - они сами разберутся как себя вести. Посмотрите примеры и доки по ссылкам, там все довольно наглядно.
то в браузере все равно поймаем ошибку гидратации
Нет, никакой ошибки не будет. Обновление таймера (если это таймер) просто обновит значение прилетевшее с сервера, без каких-то дополнительных действий с вашей стороны. Если это просто статичное время (странный кейс для динамического обновления) - можно вызвать notify для поля стейта. Можно время вывести через client-only компонент, можно просто оставить серверное значение и ничего специально не делать. Ни в одном из этих случаев не будет никакой ошибки.
Из статьи я не понимаю, как работать с компонентами симбиота из vue. Сидеть разбираться в коде и доке желания нет. Вы ai-скилы делали под это? Вы вообще пробовали запускаться из vue, строить со своей библиотекой интерфейсы?
То, что вы мьютите ошибку гидратации не меняет того, что dom обновится. А ведь именно этого все пытаются избежать. Да и почти все подобные ошибки являются логическими, а не инфровыми.
Если вы способны написать статью, которая осветит сразу все edge-кейсы - я вам очень завидую. Но боюсь, что это просто невозможно. Если у вас нет желания разбираться - значит оно вам не надо, тут я вам никак помочь не могу. Если вы опишите подробнее свою задачу и покажете пример кода на vue, куда нужно встроиться - я приведу вам пример оптимального кода на Symbiote.js (в разумных пределах). И да, я делал сложные виджеты для vue и строил очень сложные приложения полностью на Symbiote.js (редакторы, дэшборды с кучей живых данных и тд). AI-ref есть в репозитории по ссылке.
Никто ничего не мьютит, на клиенте изоморфный компонент читает декларации биндингов из HTML-атрибутов и привязывает к ним обработчики, оставляя пришедшие с сервера данные примитивных типов (например тексты, которые вы видите в UI) без изменений до первого явного обращения к ним. Прекращайте критиковать до того как сами разобрались как оно работает. Для того чтобы разобраться - все необходимые материалы я предоставил. Ваше желание - ваша проблема.
Symbiote.js — изоморфные веб-компоненты без лишних сложностей