Alpine JS not working within components

[pthynam]

Hi,

I installed alpine.js as per the example app, and can get the alpine example dropdown working on a static twig template, but not within a yoyo component template. Seems like the re-rendering of the component is causing something about the alpine code not to run:

<div x-data="{ open: false }">
    <button @click="open = true">Open Dropdown</button>
    <ul x-show="open" @click.away="open = false">Dropdown Body</ul>
</div>

I tried to reinstantiate alpine with Alpine.discoverUninitializedComponents(function(el){ Alpine.initializeComponent(el) }) after the component renders, but doesn't seem to make a difference. I see in yoyo.js - the handleswap function seems to attempt to fix this but can't get it to fire?

Thanks!

Btw - great framework

Pieter

[jreviews]

Thanks! Glad to hear you are finding it useful.

Try replacing the @click with x-on:click. I am pretty sure the the PHP DOMDocument class that's used by the Yoyo compiler cannot deal with the ampersands as HTML attributes.

[dwenaus]

Yes, that was the issue. I was just coming here to write that! Thanks :D

[jreviews]

Oh, and in yoyo.js there is indeed some stuff specific for Alpine, but you need to also load morphdom on your own and change the swap style in the Yoyo component to morphdom:

<div yoyo:swap="morphdom">...</div>

I haven't finalized this because there's an open issue bigskysoftware/htmx#214

What this would do is retain the previous Alpine component data state even after the swap. So if you have open = true before the swap, that will be remembered instead of changing back to false.

[dwenaus]

Thanks for the background on all that. We're going to skip using Alpine heavily for now.