Bug ($persist) Multiple components (#1841)

* Add additional tests for different data type

* Add failing test

* Fix $persist when a page uses multiple component persisting the same property

packages/persist/src/index.js

@@ -10,7 +10,7 @@ export default function (Alpine) {
                 ? storageGet(lookup)
                 : initialValue
 
-            setter(initialValue)
+            setter(initial)
 
             Alpine.effect(() => {
                 let value = getter()

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

@@ -1,6 +1,6 @@
-import { haveText, html, test } from '../../utils'
+import { beVisible, haveText, html, notBeVisible, test } from '../../utils'
 
-test('can perist number',
+test('can persist number',
     [html`
         <div x-data="{ count: $persist(1) }">
             <button @click="count++">Inc</button>
@@ -16,7 +16,7 @@ test('can perist number',
     },
 )
 
-test('can perist string',
+test('can persist string',
     [html`
         <div x-data="{ message: $persist('foo') }">
             <input x-model="message">
@@ -33,7 +33,7 @@ test('can perist string',
     },
 )
 
-test('can perist array',
+test('can persist array',
     [html`
         <div x-data="{ things: $persist(['foo', 'bar']) }">
             <button @click="things.push('baz')"></button>
@@ -49,3 +49,65 @@ test('can perist array',
         get('span').should(haveText('foo-bar-baz'))
     },
 )
+
+test('can persist object',
+    [html`
+        <div x-data="{ something: $persist({foo: 'bar'}) }">
+            <button id="one" @click="something.foo = 'baz'"></button>
+            <button id="two" @click="something = {foo: 'bob'}"></button>
+
+            <span x-text="something.foo"></span>
+        </div>
+    `],
+    ({ get }, reload) => {
+        get('span').should(haveText('bar'))
+        get('button#one').click()
+        get('span').should(haveText('baz'))
+        reload()
+        get('span').should(haveText('baz'))
+        get('button#two').click()
+        get('span').should(haveText('bob'))
+        reload()
+        get('span').should(haveText('bob'))
+    },
+)
+
+test('can persist boolean',
+    [html`
+        <div x-data="{ show: $persist(false) }">
+            <button @click="show = true"></button>
+
+            <template x-if="show">
+                <span>Foo</span>
+            </template>
+        </div>
+    `],
+    ({ get }, reload) => {
+        get('span').should(notBeVisible())
+        get('button').click()
+        get('span').should(beVisible())
+        reload()
+        get('span').should(beVisible())
+    },
+)
+
+test('can persist multiple components using the same property',
+    [html`
+        <div x-data="{ duplicate: $persist('foo') }">
+            <button @click="duplicate = 'bar'"></button>
+            <span id="one" x-text="duplicate"></span>
+        </div>
+        <div x-data="{ duplicate: $persist('foo') }">
+            <span id="two" x-text="duplicate"></span>
+        </div>
+    `],
+    ({ get }, reload) => {
+        get('span#one').should(haveText('foo'))
+        get('span#two').should(haveText('foo'))
+        get('button').click()
+        get('span#one').should(haveText('bar'))
+        reload()
+        get('span#one').should(haveText('bar'))
+        get('span#two').should(haveText('bar'))
+    },
+)