Component destroy event

[rhurling]

Does there exist an destroy event that gets fired when an alpine component is removed?

I'm using Pikaday and it is creating a div for each initiation that could be removed using a .destroy() method

Here is a basic example

window.alpinePikaday = () => {
  let pikaday = false
  return {
    initPikaday(el) {
      if (pikaday) {
        return
      }
      pikaday = new Pikaday({ field: el })
    },
    destroyPikaday() {
      pikaday && pikaday.destroy()
    }
  }
}

<div x-data="{open: false}">
  <button x-on:click.prevent="open = !open">
  <div x-if="open">
    <input type="text" x-data x-ref="input" x-init="initPikaday($refs.input)">
  </div>
</div>

How would i call the destroyPikaday() function when the nested Alpine component is removed / destroyed?

[HugoDF]

A callback returned from the x-init callback is run when the component gets destroyed.

<div 
  x-data="{open: false}" 
  x-init="() => {
    if (window.pikaday) {
     return
    }
    window.pikaday = new Pikaday({ field: el })
    return () => {
       if(window.pikaday) window.pikaday.destroy()
    }
  }"
>
  <button x-on:click.prevent="open = !open">
  <div x-if="open">
    <input type="text" x-data x-ref="input" x-init="initPikaday($refs.input)">
  </div>
</div>

[rhurling]

That doesn't seem to work and also does not correspond to what is mentioned in the docs:

If you wish to run code AFTER Alpine has made its initial updates to the DOM (something like a mounted() hook in VueJS), you can return a callback from x-init

And I implemented it by returning it and the pikaday component was destroyed immediately

[SimoTod]

There's no destroy callback in Alpine.

You can use $watch (https://github.com/alpinejs/alpine#watch) to check when open becomes false.

Note, there are a few bugs in that snippet: you never set pikaday to false after calling destroy, you use x-if on a div rather then template, etc.

To be fair, I would use x-show (with x-if you have to fiddle with nextTicks and/or timeouts) and encapsulate all the logic in your component. https://codepen.io/SimoTod/pen/jOWEvjx

[rhurling]

Thank you very much, that works with some adaptions for x-if (via the nextTicks).

The snippet was quickly adapted from my use-case and I'm using it to show a form (5+ Fields) in an Accordion (~30 items, but can be unlimited) so x-if allows me to only deal with the correct form (for validation etc.), especially since I'm persisting the open accordion id into the URL query params.