From 04d49136c532050552d71a03ba4a9e0a395a142b Mon Sep 17 00:00:00 2001
From: Rasso Hilber <mail@rassohilber.com>
Date: Tue, 14 Mar 2023 09:18:40 +0100
Subject: [PATCH 1/5] Wait for first mutation before updating storage

---
 packages/persist/src/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/persist/src/index.js b/packages/persist/src/index.js
index 31ed3d40f..295e8d766 100644
--- a/packages/persist/src/index.js
+++ b/packages/persist/src/index.js
@@ -2,6 +2,7 @@ export default function (Alpine) {
     let persist = () => {
         let alias
         let storage = localStorage
+        let isInitial = true
 
         return Alpine.interceptor((initialValue, getter, setter, path, key) => {
             let lookup = alias || `_x_${path}`
@@ -15,9 +16,11 @@ export default function (Alpine) {
             Alpine.effect(() => {
                 let value = getter()
 
-                storageSet(lookup, value, storage)
+                if (!isInitial) storageSet(lookup, value, storage)
 
                 setter(value)
+
+                isInitial = false
             })
 
             return initial

From 009dac5c1e2b4a6210ba5f734964c75ca98bd0a4 Mon Sep 17 00:00:00 2001
From: Rasso Hilber <mail@rassohilber.com>
Date: Tue, 14 Mar 2023 12:32:47 +0100
Subject: [PATCH 2/5] Add modifier `defer` to control deferring storage

---
 packages/persist/src/index.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/persist/src/index.js b/packages/persist/src/index.js
index 295e8d766..132787a8d 100644
--- a/packages/persist/src/index.js
+++ b/packages/persist/src/index.js
@@ -2,11 +2,14 @@ export default function (Alpine) {
     let persist = () => {
         let alias
         let storage = localStorage
+        let defer = false
         let isInitial = true
 
         return Alpine.interceptor((initialValue, getter, setter, path, key) => {
             let lookup = alias || `_x_${path}`
 
+            console.log('defer:', defer);
+
             let initial = storageHas(lookup, storage)
                 ? storageGet(lookup, storage)
                 : initialValue
@@ -16,7 +19,7 @@ export default function (Alpine) {
             Alpine.effect(() => {
                 let value = getter()
 
-                if (!isInitial) storageSet(lookup, value, storage)
+                if (!defer || !isInitial) storageSet(lookup, value, storage)
 
                 setter(value)
 
@@ -26,7 +29,8 @@ export default function (Alpine) {
             return initial
         }, func => {
             func.as = key => { alias = key; return func },
-            func.using = target => { storage = target; return func }
+            func.using = target => { storage = target; return func },
+            func.defer = target => { defer = true; return func }
         })
     }
 

From 82f8ca5037ca56fbfdd4103ecc7f97603c1626f5 Mon Sep 17 00:00:00 2001
From: Rasso Hilber <mail@rassohilber.com>
Date: Tue, 14 Mar 2023 12:44:56 +0100
Subject: [PATCH 3/5] Add passing test for deferring a string

---
 .../cypress/integration/plugins/persist.spec.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/tests/cypress/integration/plugins/persist.spec.js b/tests/cypress/integration/plugins/persist.spec.js
index 0fe1a6c28..2967ae5cc 100644
--- a/tests/cypress/integration/plugins/persist.spec.js
+++ b/tests/cypress/integration/plugins/persist.spec.js
@@ -33,6 +33,23 @@ test('can persist string',
     },
 )
 
+test('can defer persisting a string',
+    [html`
+        <div x-data="{ message: $persist('foo').defer() }">
+            <input x-model="message">
+
+            <span x-text="message"></span>
+        </div>
+    `],
+    ({ get }, reload) => {
+        get('span').should(haveText('foo'))
+        get('input').clear().type('bar')
+        get('span').should(haveText('bar'))
+        reload()
+        get('span').should(haveText('bar'))
+    },
+)
+
 test('can persist array',
     [html`
         <div x-data="{ things: $persist(['foo', 'bar']) }">

From 615565fddd25fa3dd2958b12c377d08ae0930d8e Mon Sep 17 00:00:00 2001
From: Rasso Hilber <mail@rassohilber.com>
Date: Tue, 14 Mar 2023 12:45:46 +0100
Subject: [PATCH 4/5] Add failing test for deferring an array

---
 .../cypress/integration/plugins/persist.spec.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/tests/cypress/integration/plugins/persist.spec.js b/tests/cypress/integration/plugins/persist.spec.js
index 2967ae5cc..2b3dd5e18 100644
--- a/tests/cypress/integration/plugins/persist.spec.js
+++ b/tests/cypress/integration/plugins/persist.spec.js
@@ -67,6 +67,23 @@ test('can persist array',
     },
 )
 
+test('can defer persisting an array',
+    [html`
+        <div x-data="{ things: $persist(['foo', 'bar']).defer() }">
+            <button @click="things.push('baz')"></button>
+
+            <span x-text="things.join('-')"></span>
+        </div>
+    `],
+    ({ get }, reload) => {
+        get('span').should(haveText('foo-bar'))
+        get('button').click()
+        get('span').should(haveText('foo-bar-baz'))
+        reload()
+        get('span').should(haveText('foo-bar-baz'))
+    },
+)
+
 test('can persist object',
     [html`
         <div x-data="{ something: $persist({foo: 'bar'}) }">

From e0a1dfa455fbbc131bb232bc467f112e7e513536 Mon Sep 17 00:00:00 2001
From: Rasso Hilber <mail@rassohilber.com>
Date: Tue, 14 Mar 2023 13:24:53 +0100
Subject: [PATCH 5/5] Remove `console.log`

---
 packages/persist/src/index.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/persist/src/index.js b/packages/persist/src/index.js
index 132787a8d..6018c4c9a 100644
--- a/packages/persist/src/index.js
+++ b/packages/persist/src/index.js
@@ -8,8 +8,6 @@ export default function (Alpine) {
         return Alpine.interceptor((initialValue, getter, setter, path, key) => {
             let lookup = alias || `_x_${path}`
 
-            console.log('defer:', defer);
-
             let initial = storageHas(lookup, storage)
                 ? storageGet(lookup, storage)
                 : initialValue