Write CSP-compatible Alpine.js components for Hyvä themes in Magento 2. This skill should be used when the user wants to create Alpine components, add interactivity to Hyvä templates, write JavaScript for Hyvä themes, or needs help with Alpine.js patterns that work with Content Security Policy. Trig

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: 1. Register constructor with Alpine.data() inside alpine:init event listener 2. Use {once: true} to prevent duplicate registrations 3. Call $hyvaCsp registerInlineScript() after every <script block 4. Use $escaper escapeJs() for PHP values in JavaScript strings 5. Use $escaper escapeHtmlAttr() for data attributes (not escapeJs ) Constructor Functions Basic Registration Why named global functions? Constructor functions are declared as named functions in global scope (not inlined in the Alpine.data() callback) so they can be proxied and extended in other templates. This is an extensibility feature of Hyvä Themes other modules or child themes can wrap or override these functions before they are registered with Alpine. Composing Multiple Objects When combining objects (e.g., with hyva.modal ), use spread syntax inside the constructor: Use .call(this) to pass Alpine context to composed functions. Property Access Patterns Value Properties with Dot Notation Transforming Values (Negation, Conditions) CSP does not allow inline transformations. Create methods instead: Wrong (CSP incompatible): Correct: Negation Method Shorthand For simple boolean negation, use bracket notation: Property Mutation Patterns Extract Mutations to Methods Wrong (CSP incompatible): Correct: Passing Arguments via Dataset Wrong (CSP incompatible): Correct: Important: Use escapeHtmlAttr for data attributes, not escapeJs . Accessing Event and Loop Variables in Methods Methods can access Alpine's special properties: x model Alternatives x model is not available in Alpine CSP. Use two way binding patterns instead. Text Inputs Number Inputs Use hyva.safeParseNumber() for numeric values: Textarea Checkboxes Checkbox Arrays Select Elements x for Patterns Basic Iteration Using Methods in Loops Loop variables ( product , index ) are accessible in methods: Function as Value Provider The value provider can be a method (called without parentheses): Note: Range iteration ( x for="i in 10" ) is not supported in Alpine CSP. Hyva Utility Functions The global hyva object provides these utilities: Form and Security hyva.getFormKey() Get/generate form key for POST requests hyva.getUenc() Base64 encode current URL for redirects hyva.postForm({action, data, skipUenc}) Submit a POST form programmatically Cookies hyva.getCookie(name) Get cookie value (respects consent) hyva.setCookie(name, value, days, skipSetDomain) Set cookie hyva.setSessionCookie(name, value, skipSetDomain) Set session cookie Formatting hyva.formatPrice(value, showSign, options) Format currency hyva.str(template, ...args) String interpolation with %1, %2 placeholders hyva.strf(template, ...args) Zero based string interpolation (%0, %1) Numbers hyva.safeParseNumber(rawValue) Parse number safely (for x model.number replacement) DOM hyva.replaceDomElement(selector, content) Replace DOM element with HTML content hyva.trapFocus(rootElement) Trap focus within element (for modals) hyva.releaseFocus(rootElement) Release focus trap Storage hyva.getBrowserStorage() Get localStorage/sessionStorage safely Boolean Object Helper For toggle components, use hyva.createBooleanObject : This generates: open() , notOpen() , toggleOpen() , setOpenTrue() , setOpenFalse() Alpine Initialization Event Patterns Listening to Custom Events Dispatching Events Common Hyvä Events private content loaded Customer section data loaded reload customer section data Request customer data refresh update gallery Product gallery images changed reset gallery Reset gallery to initial state Event Listeners Object Pattern For multiple window/document event listeners, use the x bind pattern: Dynamic Classes Pattern Return class objects from methods: Passing PHP Data to Components Via Data Attributes Via Inline JavaScript (with escaping) Complete Example: Quantity Selector 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 <! Copyright © Hyvä Themes https://hyva.io. All rights reserved. Licensed under OSL 3.0

hyva-alpine-component