Symbiote.js — изоморфные веб-компоненты без лишних сложностей

[Ilusha]

Было бы интересно посмотреть примеры на vue с учетом глубокой кастомизации.

[i360u]

Не уверен, что понял вас. Вы хотите пример Symbiote-компонента внутри Vue приложения?

[Ilusha]

Именно. Можно взять nuxt с SSR. Пока я слабо понимаю, как ваши компоненты будут работать с реактивностью vue. Писать обертку?

Кстати:

Hydration mismatches невозможны в принципе

Если на сервере рендерим время (да даже в формате N days ago), то в браузере все равно поймаем ошибку гидратации

[i360u]

Пока я слабо понимаю, как ваши компоненты будут работать с реактивностью vue. Писать обертку?

А причем тут реактивность vue? У Симбиота своя реактивность. Шаблон симбиота - это просто HTML с атрибутами, вывод (чанк) для последующей гидрации - аналогично - просто HTML. Если этот HTML будет полностью сформирован на стороне vue - симбиот просто подцепит его при активации. Если вы создадите кусок HTML-документа через родной SSR симбиота - он, также, просто гидриуется на клиенте. Никакой обертки не нужно. Грубо говоря, в vue шаблоне могут быть кастомные теги, если они созданы с помощью Symbiote - они сами разберутся как себя вести. Посмотрите примеры и доки по ссылкам, там все довольно наглядно.

то в браузере все равно поймаем ошибку гидратации

Нет, никакой ошибки не будет. Обновление таймера (если это таймер) просто обновит значение прилетевшее с сервера, без каких-то дополнительных действий с вашей стороны. Если это просто статичное время (странный кейс для динамического обновления) - можно вызвать notify для поля стейта. Можно время вывести через client-only компонент, можно просто оставить серверное значение и ничего специально не делать. Ни в одном из этих случаев не будет никакой ошибки.