Hyvä Alpine Component Overview
This skill provides guidance for writing CSP-compatible Alpine.js components in Hyvä themes. Alpine CSP is a specialized Alpine.js build that operates without the unsafe-eval CSP directive, which is required for PCI-DSS 4.0 compliance on payment-related pages (mandatory from April 1, 2025).
Key principle: CSP-compatible code functions in both standard and Alpine CSP builds. Write all Alpine code using CSP patterns for future-proofing.
CSP Constraints Summary Capability Standard Alpine Alpine CSP Property reads x-show="open" Same Negation x-show="!open" Method: x-show="isNotOpen" Mutations @click="open = false" Method: @click="close" Method args @click="setTab('info')" Dataset: @click="setTab" data-tab="info" x-model Available Not supported - use :value + @input Range iteration x-for="i in 10" Not supported Component Structure Pattern
Every Alpine component in Hyvä follows this structure:
Critical requirements:
Register constructor with Alpine.data() inside alpine:init event listener Use {once: true} to prevent duplicate registrations Call $hyvaCsp->registerInlineScript() after every registerInlineScript() ?> References Hyvä CSP Documentation: https://docs.hyva.io/hyva-themes/writing-code/csp/alpine-csp.html Alpine.js Documentation: https://alpinejs.dev/ Example components: vendor/hyva-themes/magento2-default-theme-csp/ Core utilities: vendor/hyva-themes/magento2-theme-module/src/view/frontend/templates/page/js/hyva.phtml