10 Alpine.js Patterns Every Hyvä Developer Needs
Generic Alpine.js docs do not tell you how to wire cart counts from PHP, why x-cloak is non-negotiable on PDP swatches, or how $dispatch lets an Alpine.js drawer talk to a Magewire form without a refresh. After shipping 40+ Hyvä modules across Magento 2.4.4 — 2.4.9, the same 10 patterns appear in nearly every one. This post walks through each — x-data hydrated from PHP, x-cloak flash-prevention, $store cross-component state, x-bind:class active tabs, x-on:click.outside drawers, x-intersect lazy loads, x-show transitions, x-html with DOMPurify, x-init with $watch + localStorage, and $dispatch for Magewire — with copy-pasteable snippets, when-to-reach-for-it notes, and the trap that bites first-time Hyvä devs.