hyva-alpine-component — скилл для Claude Code

Что делает hyva-alpine-component

Скилл подсказывает агенту, как строить интерактив в шаблонах Hyvä без директивы unsafe-eval. Сборка Alpine CSP без неё обходится, а на страницах с оплатой она нужна для соответствия PCI-DSS 4.0 — с 1 апреля 2025 года это требование. Поэтому весь код стоит сразу писать в CSP-совместимом стиле.

Внутри разобраны рабочие приёмы. Вместо x-show="!open" объявляют метод, вместо @click="open = false" вызывают @click="close", аргументы передают через data-* и читают из this.$el.dataset. x-model в Alpine CSP не поддерживается: поле ввода связывают через :value и @input. Итерация по диапазону тоже недоступна. Отдельно описан каркас компонента: именованная глобальная функция-конструктор, регистрация через Alpine.data() по событию alpine:init с {once: true}, а после каждого блока <script> — вызов $hyvaCsp->registerInlineScript().

Значения из PHP в JavaScript прогоняют через $escaper->escapeJs(), а для data-атрибутов берут escapeHtmlAttr(). Числа из полей ввода разбирает hyva.safeParseNumber(), композиция объектов идёт через spread с .call(this). Без вызова registerInlineScript() инлайн-скрипт не зарегистрируется и политика его отклонит.