Feature/destroy scope (#2733)

* Add failing test * Make current scope available in destory callback
alpinejs · Mar 7, 2022 · 953d85f · 953d85f
1 parent c7be8a8
commit 953d85f
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git 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
@@ -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'))
+    }
+)