wip

index.html

@@ -4,15 +4,24 @@
     <script src="./packages/history/dist/cdn.js"></script>
     <script src="./packages/persist/dist/cdn.js"></script>
     <script src="./packages/trap/dist/cdn.js"></script>
+    <script src="./packages/collapse/dist/cdn.js"></script>
     <script src="./packages/alpinejs/dist/cdn.js" defer></script>
     <!-- <script src="https://unpkg.com/alpinejs@3.0.0/dist/cdn.min.js" defer></script> -->
 
     <!-- Play around. -->
-    <div x-data="{ open: false }">
-        <button @click="open = !open">Toggle</button>
+    <div x-data>
+        <button @click="$store.open.on = !$store.open.on">Toggle</button>
 
-        <span x-show="open">
+        <div x-show="$store.open.on">
             Content...
-        </span>
+        </div>
     </div>
+
+    <script>
+        document.addEventListener('alpine:init', () => {
+            Alpine.store('open', {
+                on: Alpine.$persist(false),
+            })
+        })
+    </script>
 </html>

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/persist/src/index.js

@@ -1,10 +1,11 @@
 
+
 export default function (Alpine) {
-    Alpine.magic('persist', (el, { interceptor }) => {
+    let thing = () => {
         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 +27,14 @@ export default function (Alpine) {
             func.as = key => { alias = key; return func },
             func.using = target => { storage = target; return func }
         })
+    }
+
+    Object.defineProperty(Alpine, '$persist', {
+        get: thing,
+        enumerable: true,
     })
+
+    Alpine.magic('$persist', thing)
 }
 
 function storageHas(key, storage) {