Анатомия виджета

#Два класса виджета

Виджет в папке widgets/ этой темы — одно из двух.

Статичный — только figure.html, и больше ничего. Он рендерится один раз, на сборке, и остаётся таким навсегда; передавать эстафету некому — своего widget.js у него нет. Вот весь виджет ниже:

Интерактивный — widget.js, который регистрирует себя через Taiga.widget(id, fn), обычно в паре с figure.html, который держит место до запуска JS, и widget.css — на то, чего не хватает готовым классам темы (.w-row/.w-btn/.w-num/.w-cap):

Оба — один и тот же шорткод {{< widget id="…" >}} без тела внутри — одного id достаточно, чтобы шорткод сам пошёл искать widgets/<id>/figure.html как ресурс страницы для монта. Другую форму — фолбэк прямо внутри шорткода — смотри в «Гайд — это папка».

#Слой _shared

Оба виджета выше подгружают widgets/_shared/lib.js и widgets/_shared/shared.css раньше своих собственных файлов — сборка сортирует все widgets/**.js и widgets/**.css бандла по имени, а _shared идёт раньше любой папки w-*. В этом бандле конкретно:

• _shared/lib.js держит единственный guard (var W = window.Taiga; if (!W || …) return;), на который опирается каждый widgets/<id>/widget.js бандла, плюс крошечный хелпер h(), который w-anatomy-toggle/widget.js вызывает без импорта и без повторного объявления — все файлы склеиваются в один скрипт и делят одну область видимости.
• _shared/shared.css держит .wa-tag — маленькую пилюлю, которой оба виджета выше подписывают имя файла. Она попала в _shared по самой непримечательной причине: её реально используют два виджета на этой странице.

Здесь ничто не разделено по необходимости — бандл с одним виджетом вполне мог бы держать guard прямо в widgets/<id>/widget.js. Разделение сделано нарочно, чтобы у страницы было на что показать _shared/. Бандл, где разделение действительно оправдано, выглядит так же по форме, только тяжелее: общий движок и его таблица спецификаций лежат в _shared/lib.js, а у каждого id, который этот движок обслуживает, — своя папка widgets/<id>/ под то, что реально принадлежит только ему: фигуру, переопределение в widget.css, а иногда и вовсе ничего.

#Читаем исходники

Весь бандл, рядом с этим файлом:

widget-anatomy/
  index.md, index.ru.md    ← этот текст на обоих языках
  widgets/
    _shared/
      lib.js               ← guard + хелпер h()
      shared.css            ← .wa-tag
    w-anatomy-static/
      figure.html           ← весь виджет — без widget.js
    w-anatomy-toggle/
      figure.html           ← фолбэк без JS
      widget.js             ← Taiga.widget('w-anatomy-toggle', …)
      widget.css             ← .wa-hl, класс только этого виджета

Любой файл в widgets/ необязателен — кроме тех, что дают виджету суть: статичному id нужен figure.html, интерактивному — widget.js, и любой может добавить widget.css. Виджет может и вовсе обойтись без figure.html, начав с пустого монта — именно так устроен w-ks-counter на странице «Kitchen sink».