tgx:component#

Подключает компонент или шаблон.

Синтаксис#

<tgx tgx:component="header"></tgx>

Пример 1: минимум (копипаст для старта)#

<tgx tgx:component="header"></tgx>

Пример 2: реальный сценарий#

<tgx tgx:component="@global/cookie"></tgx>

Разбор#

Используйте для переиспользуемых блоков: header, footer, shared-компоненты.

Когда использовать#

Когда блок повторяется на разных страницах (header, footer, карточки, FAQ-блоки) и его нужно переиспользовать.
Когда важно разделить структуру страницы и переиспользуемые части, чтобы править контент быстрее.

Поведение в runtime#

Тип: пользовательская директива.
В sandbox директива tgx:component: разрешена.

Параметры#

Обязательные#

tgx:component — селектор компонента (@global/..., /components/..., #id, .class, @ext:...).

Необязательные#

payload — объект/переменная для передачи в компонент.
Любые дополнительные обычные атрибуты на <tgx> попадают в payload.*.

По умолчанию#

Если компонент не найден/недоступен, runtime рендерит предупреждение.

Типы#

payload: объект, JSON или ссылка на переменную через шаблонное выражение (<< variable >>).

Типы данных и приведение#

Поддерживаются локальные селекторы шаблона (#id, .class) и компоненты по имени/пути.
Alias-форматы: @global/..., @ext:<slug>/..., @conn:<slot>.<key>/....
Для @ext:<slug>/... рендер доступен владельцу расширения или при активном подключении расширения.
В sandbox допустим только локальный селектор #....
Атрибуты узла (и payload) передаются в контекст компонента как входные данные.

Частые ошибки#

Путать форматы селектора: #.../. ... — это локальный узел, @global/..., @ext:..., @conn:<slot>.<key>/... — это alias-пути компонентов.
Ожидать доступ к @ext:... без активного подключения расширения или прав владельца.

Проверка перед публикацией#

Пример рендерится без ошибок в sandbox.
Значения по умолчанию обработаны (|fallback) там, где данные могут отсутствовать.
Проверен корректный формат селектора компонента (#..., @global/..., @ext:..., @conn:<slot>.<key>/...).
Для @ext:... проверен сценарий доступа: компонент рендерится только при доступном подключении расширения.

См. также#

Передача значений в компонент#

Внутри компонента входные данные доступны в payload.

<tgx
  tgx:component="@global/ui/badge"
  payload='{"text":"Новый","tone":"success"}'
  count="<< /orders/:count >>"
></tgx>

Внутри компонента:

<span class="badge badge-<< payload.tone|secondary >>">
  << payload.text >> (<< payload.count|0 >>)
</span>

Что передается автоматически:

payload.inner.html — внутренний HTML тега <tgx ...>...</tgx>.

payload.inner.text — текстовая версия внутреннего содержимого.

payload.component — селектор компонента.

Любые обычные атрибуты тега (count, label, ...) становятся payload.<name>.

payload="<< local >>" передает текущий локальный контекст в компонент.

inner и component — зарезервированные ключи payload: их нельзя переопределить через payload=.

Возврат значений из компонента#

Внутри компонента можно заполнить return.* через tgx:set:

<tgx tgx:set="return.result">ok</tgx>
<tgx tgx:set="return.total"><< payload.count|0 >></tgx>

После рендера return не протекает напрямую в родителя:
runtime сохраняет снимок return в local.<component-key>.

component-key формируется из селектора компонента:
убираются служебные префиксы (например @global/), а / заменяется на -.

Для @global/ui/badge ключ будет ui-badge, и в родителе можно читать:

<tgx tgx:component="@global/ui/badge" payload='{"count":3}'></tgx>
<p>Статус: << local.ui-badge.result|нет >></p>
<p>Итого: << local.ui-badge.total|0 >></p>