Add lifecycle directive x-destroy or x-disconnected or x-unmounted

[hirasso]

Hi there, just started looking into alpinejs today. I'm impressed! One thing I'm missing would be a way to execute some code every time an element with x-data attached to it is being removed from the DOM. Think "the opposite of x-init".

In standard web custom elements this would be the disconnectedCallback, as described on MDN under Lifecycle Callbacks. The Vue version would be unmounted (https://v3.vuejs.org/api/options-lifecycle-hooks.html#unmounted).

I saw something about a cleanup function on the Alpinejs Docs under Custom Directives – so the functionality seems to be there. It would be amazing if it could be made as easily accessible as the init() directive.

[SimoTod]

It's undocumented but if you add a function called destroy to x-data, it gets called when a component is removed from the dom.

[Tim-Wils]

I think it’s undocumented, but just like the init() function, you can set a destroy() function to do things after the element gets removed. It’s on this line:

alpine/packages/alpinejs/src/directives/x-data.js

Line 41 in c5ffa11

reactiveData['destroy'] && evaluate(el, reactiveData['destroy'])

[hirasso]

Thanks @SimoTod and @Tim-Wils for your quick responses!

[adamlogic]

As noted in #2103, the destroy() function does not currently have access to the current element scope. This is a problem if you want to use destroy() to clean up something that was set up in init().

FWIW, here's a custom directive I'm using to accomplish this:

Alpine.directive('cleanup', (_el, { expression }, { evaluate, cleanup }) => {
  cleanup(() => {
    evaluate(expression)
  })
})

[hirasso]

Wow @adamlogic , I was JUST looking into this again. Would you mind posting a little snippet on how you would use your custom directive?

[adamlogic]

Sure! For my use case, I'm using d3.js to generate a chart (and Alpine x-init as a hook for convenience). The chart sets some window-level event listeners, so it needs to clean up after itself when Turbo removes the element from the page.

    <div x-init='this.chart = new window.AutoscaleMainChart($el, {...})'
         x-cleanup='this.chart.cleanup()'></div>

[hirasso]

Intersting – but this is a reference to the global window object if you write it inline like this. I am writing my components in separat JS files, there the this sadly becomes an empty Proxy.

[adamlogic]

Doh! You're right. 😭

Yeah, this is only working for me by coincidence, and not working as I thought. I'm still really confused when this refers to the Alpine data context and when it doesn't.

[hirasso]

I added a new issue for this problem: #2692

I would be grateful if you would add any possible comments over there that could help clarify the issue we have here.