Create global Alpine.$persist to enable persisting in Alpine.store

packages/alpinejs/src/store.js

@@ -1,3 +1,4 @@
+import { initInterceptors } from "./interceptor";
 import { reactive } from "./reactivity"
 
 let stores = {}
@@ -15,6 +16,8 @@ export function store(name, value) {
     if (typeof value === 'object' && value !== null && value.hasOwnProperty('init') && typeof value.init === 'function') {
         stores[name].init()
     }
+
+    initInterceptors(stores[name])
 }
 
 export function getStores() { return stores }

packages/docs/src/en/plugins/persist.md

@@ -194,3 +194,14 @@ Alpine.data('dropdown', function () {
     }
 })
 ```
+
+<a name="using-alpine-persist-global"></a>
+## Using the Alpine.$persist global
+
+`Alpine.$persist` is exposed globally so it can be used outside of `x-data` contexts. This is useful to persist data from other sources such as `Alpine.store`.
+
+```js
+Alpine.store('darkMode', {
+    on: Alpine.$persist(true).as('darkMode_on')
+});
+```

packages/persist/src/index.js

@@ -1,10 +1,9 @@
-
 export default function (Alpine) {
-    Alpine.magic('persist', (el, { interceptor }) => {
+    let persist = () => {
         let alias
         let storage = localStorage
 
-        return interceptor((initialValue, getter, setter, path, key) => {
+        return Alpine.interceptor((initialValue, getter, setter, path, key) => {
             let lookup = alias || `_x_${path}`
 
             let initial = storageHas(lookup, storage)
@@ -26,7 +25,10 @@ export default function (Alpine) {
             func.as = key => { alias = key; return func },
             func.using = target => { storage = target; return func }
         })
-    })
+    }
+
+    Alpine.$persist = persist()
+    Alpine.magic('persist', persist)
 }
 
 function storageHas(key, storage) {

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

@@ -181,6 +181,9 @@ test('can persist to custom storage',
         reload()
         get('span').should(haveText('bar'))
         window().its('sessionStorage._x_message').should(beEqualTo(JSON.stringify('bar')))
+        window().then((win) => {
+            win.sessionStorage.clear()
+        });
     },
 )
 
@@ -197,5 +200,29 @@ test('can persist to custom storage using an alias',
         get('input').clear().type('bar')
         get('span').should(haveText('bar'))
         window().its('sessionStorage.mymessage').should(beEqualTo(JSON.stringify('bar')))
+        window().then((win) => {
+            win.sessionStorage.clear()
+        });
+    },
+)
+
+test('can persist using global Alpine.$persist within Alpine.store',
+    [html`
+        <div x-data>
+            <input x-model="$store.name.firstName">
+
+            <span x-text="$store.name.firstName"></span>
+        </div>
+    `, `
+        Alpine.store('name', {
+            firstName: Alpine.$persist('Daniel').as('dev-name')
+        })
+    `],
+    ({ get, window }, reload) => {
+        get('span').should(haveText('Daniel'))
+        get('input').clear().type('Malcolm')
+        get('span').should(haveText('Malcolm'))
+        reload()
+        get('span').should(haveText('Malcolm'))
     },
 )