🐛 Initializes Interceptors before store (#4278)

* 🧪 Adds failing tests for store interceptors

* ✅ Initializes Interceptors before initializing store

Author: ekwoka

packages/alpinejs/src/store.js

@@ -13,11 +13,11 @@ export function store(name, value) {
 
     stores[name] = value
 
+    initInterceptors(stores[name])
+
     if (typeof value === 'object' && value !== null && value.hasOwnProperty('init') && typeof value.init === 'function') {
         stores[name].init()
     }
-
-    initInterceptors(stores[name])
 }
 
 export function getStores() { return stores }

tests/cypress/integration/plugins/persist.spec.js

@@ -227,6 +227,25 @@ test('can persist using global Alpine.$persist within Alpine.store',
     },
 )
 
+test('persist in Stores is available in init call',
+    [html`
+        <div x-data>
+            <span x-text="$store.name.name"></span>
+        </div>
+    `, `
+        Alpine.store('name', {
+            firstName: Alpine.$persist('Daniel').as('dev-name'),
+            name: null,
+            init() {
+                this.name = String(this.firstName)
+            }
+        })
+    `],
+    ({ get }) => {
+        get('span').should(haveText('Daniel'))
+    },
+)
+
 test('multiple aliases work when using global Alpine.$persist',
     [html`
         <div x-data>

tests/cypress/integration/store.spec.js

@@ -89,3 +89,26 @@ test('store\'s "this" context is reactive for init function',
         get('span').should(haveText('1'))
     }
 )
+
+test('stores can have interceptors', 
+    [html`
+        <div x-data>
+        <span x-text="$store.test.count"></span>
+        </div>
+    `,
+    `
+        Alpine.store('test', {
+            init() {
+                this.count++
+            },
+            count: {
+                _x_interceptor: true,
+                initialize() {
+                    return 9
+                }
+            },
+        })
+    `],({ get }) => {
+        get('span').should(haveText('10'))
+    }
+)