From 953d85f110b756362de66d73518da840994950d0 Mon Sep 17 00:00:00 2001
From: Simone Todaro <simone.todaro@gear4music.com>
Date: Mon, 7 Mar 2022 01:48:52 +0000
Subject: [PATCH] Feature/destroy scope (#2733)

* Add failing test

* Make current scope available in destory callback
---
 packages/alpinejs/src/directives/x-data.js    |  4 +--
 tests/cypress/integration/custom-data.spec.js | 30 ++++++++++++++++++-
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/packages/alpinejs/src/directives/x-data.js b/packages/alpinejs/src/directives/x-data.js
index ebaec0da4..e2b69f2c2 100644
--- a/packages/alpinejs/src/directives/x-data.js
+++ b/packages/alpinejs/src/directives/x-data.js
@@ -34,8 +34,8 @@ directive('data', skipDuringClone((el, { expression }, { cleanup }) => {
     reactiveData['init'] && evaluate(el, reactiveData['init'])
 
     cleanup(() => {
-        undo()
-
         reactiveData['destroy'] && evaluate(el, reactiveData['destroy'])
+
+        undo()
     })
 }))
diff --git a/tests/cypress/integration/custom-data.spec.js b/tests/cypress/integration/custom-data.spec.js
index 424fbe809..53ae04da2 100644
--- a/tests/cypress/integration/custom-data.spec.js
+++ b/tests/cypress/integration/custom-data.spec.js
@@ -159,10 +159,38 @@ test('destroy functions inside custom datas are called automatically',
         <div x-data="test">
             <button x-on:click="test()"></button>
         </div>
-        <span><span>
+        <span></span>
     `,
     ({ get }) => {
         get('button').click()
         get('span').should(haveText('foo'))
     }
 )
+
+test('destroy have access to the current scope',
+    html`
+        <script>
+            document.addEventListener('alpine:init', () => {
+                Alpine.data('test', () => ({
+                    destroy() {
+                        document.querySelector('span').textContent = this.foo
+                    },
+                    test() {
+                        Alpine.closestRoot(this.$el).remove()
+                    },
+                    foo: 'bar'
+                }))
+            })
+        </script>
+
+        <div x-data="test">
+            <button x-on:click="test()"></button>
+        </div>
+        <span>baz</span>
+    `,
+    ({ get }) => {
+        get('span').should(haveText('baz'))
+        get('button').click()
+        get('span').should(haveText('bar'))
+    }
+)