hyva-alpine-component_skill

Overview

This skill helps you write Content-Security-Policy (CSP) compatible Alpine.js components for Hyvä themes in Magento 2. It focuses on patterns that work with Alpine CSP builds (no unsafe-eval), safe ways to pass PHP data to JavaScript, and Hyvä-specific utilities and lifecycle requirements. Use it to create maintainable, extensible components that remain secure and PCI-DSS friendly.

How this skill works

The skill prescribes a component structure: named global constructor functions returning state and methods, registered with Alpine.data inside an alpine:init listener using {once:true}. It enforces CSP-safe patterns: no inline expressions for negation or mutations, no x-model, argument passing via data attributes, and use of Hyvä utilities (hyva.safeParseNumber, hyva.createBooleanObject, etc.). It also documents escaping rules and Hyvä CSP registration calls for inline scripts.

When to use it

• Create an Alpine component for a Hyvä theme template
• Add interactivity without breaking CSP or PCI-DSS requirements
• Replace x-model with CSP-safe two-way binding patterns
• Pass PHP data into Alpine components securely
• Compose Alpine behavior using Hyvä utility functions and modular constructors

Best practices

• Declare constructor functions as named globals so other modules/themes can proxy or extend them
• Register with Alpine.data inside alpine:init and use {once:true} to avoid duplicate registration
• Avoid inline expressions in x-bind/x-show; expose computed values and negations as methods
• Use data attributes for arguments (@click handlers read this.$el.dataset) and escape with escapeHtmlAttr
• Do not use x-model in Alpine CSP; use :value + @input/@change and hyva.safeParseNumber for numeric parsing
• Call $hyvaCsp->registerInlineScript() after each <script> block and escape PHP values with escapeJs when embedded in JS strings

Example use cases

• Quantity selector for product pages using :value + @input and hyva.safeParseNumber
• Modal component composed from hyva.modal and hyva.formValidation with focus trap via hyva.trapFocus
• Checkbox array selection using data-option-id and methods to toggle selectedOptions
• Gallery component reacting to update-gallery and reset-gallery window events via eventListeners object pattern
• Country select implemented with <select @change> and method-based :selected checks