Перейти к основному содержимому

Livewire и partial SPA

Проект использует Livewire как server-driven SPA layer. Это не классическая SPA на React/Vue и не Inertia.

Базовые классы​

Base​

Базовый Livewire component. Задаёт общий render lifecycle для наследников.

BaseSpa​

Добавляет browser URL lifecycle:

  • принимает popstateCustom;
  • вызывает processURL() перед render;
  • после render вызывает setURL() и setTitle();
  • отправляет Livewire browser events.

Наследник обязан реализовать:

  • getRoute();
  • processURL();
  • getTitle();
  • getPrefix().

ModernCatalog Livewire​

Главный component: app/Livewire/ModernCatalog/Spa.php.

Хранит:

  • title;
  • state.

Событие:

  • setCatalogState — обновляет state после изменения фильтров.

Методы:

  • getRoute() — строит URL из state;
  • getTitle() — строит SEO title;
  • processURL() — восстанавливает state из URL;
  • getPrefix() — возвращает prefix каталога.

Catalog grid​

Grid получает state и sort, строит QueryBuilder, получает products и отдаёт view.

По умолчанию добавляет сортировку:

  • catalog_sort desc;
  • start_date asc.

Catalog filters​

Все filter components наследуются от AFilter.

AFilter умеет:

  • загрузить активные фильтры;
  • загрузить entities;
  • добавить фильтр;
  • удалить фильтр;
  • сбросить дочерние фильтры;
  • построить route для filter item;
  • отправить setCatalogState.

ModernRoadmap Livewire​

Главный component: UnauthorizedRoadmapSpa.

Он держит roadmap state/storage и отображает roadmap для неавторизованного пользователя.

Product cards​

app/Livewire/Product/Card.php собирает display state карточки продукта из:

  • Product;
  • ProductCard;
  • ProductPage;
  • actualProductOffering;
  • Tariff;
  • ProductFormat;
  • ProductPageStatus.

Blade view карточки содержит schema.org/JSON-LD микроразметку.

Inject components​

app/Livewire/Inject/* содержит компоненты, которые вставляются поверх landing/proxy страниц.

Группы:

  • Inject/AdminBar;
  • Inject/Banner/*;
  • Inject/Product/*.

Это мост между локальным Laravel UI и страницами, полученными из legacy layout.

Как безопасно менять Livewire flow​

  1. Сначала понять, кто владеет state.
  2. Проверить, какие browser events слушает JS.
  3. Проверить, не меняет ли component URL.
  4. Проверить, не зависит ли view от $GLOBALS или grabbed layout.
  5. Проверить, не должен ли route оставаться SEO-friendly.
  6. После изменения вручную открыть прямой URL и проверить browser back/forward.