From 003a424f8b1a952c68982990ff32212da567f5e2 Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Tue, 17 Jan 2023 11:38:58 -0500
Subject: [PATCH 01/13] wip

---
 index.html                                  |  11 +-
 packages/alpinejs/src/directives/x-model.js |   2 -
 packages/alpinejs/src/entangle.js           |   4 +-
 packages/alpinejs/src/utils/bind.js         |   4 +-
 packages/history/builds/module.js           |   2 +
 packages/history/src/index.js               | 147 +++++++++++++++-----
 packages/morph/src/morph.js                 |   2 +
 7 files changed, 131 insertions(+), 41 deletions(-)
diff --git a/index.html b/index.html
index 213a0853b..33474e4fb 100644
--- a/index.html
+++ b/index.html
@@ -1,15 +1,20 @@
 <html>
     <!-- <script src="./packages/intersect/dist/cdn.js" defer></script>
     <script src="./packages/morph/dist/cdn.js" defer></script>
-    <script src="./packages/history/dist/cdn.js"></script>
     <script src="./packages/persist/dist/cdn.js"></script>
     <script src="./packages/focus/dist/cdn.js"></script>
     <script src="./packages/mask/dist/cdn.js"></script>
     <script src="./packages/ui/dist/cdn.js" defer></script> -->
+    <script src="./packages/history/dist/cdn.js"></script>
     <script src="./packages/alpinejs/dist/cdn.js" defer></script>
     <!-- <script src="//cdn.tailwindcss.com"></script> -->
     <script src="//cdn.tailwindcss.com"></script>
 
+    <div x-data="{ count: $queryString(1) }">
+        <input type="text" x-model="count">
+        <span x-text="count"></span>
+    </div>
+
     <div x-data="{ users: [{ name: 'lebowski' }] }">
         <template x-for="(user, idx) in users">
             <span x-text="users[idx].name" x-yo></span>
@@ -18,6 +23,10 @@
         <button @click="users = []">Reset</button>
     </div>
 
+    <div x-data="{ foo: undefined }">
+        Yo: <input type="text" x-model="foo">
+    </div>
+
     <!-- Play around here... -->
 
     <div x-data>
diff --git a/packages/alpinejs/src/directives/x-model.js b/packages/alpinejs/src/directives/x-model.js
index 08f0c0e5a..f50469c7e 100644
--- a/packages/alpinejs/src/directives/x-model.js
+++ b/packages/alpinejs/src/directives/x-model.js
@@ -97,8 +97,6 @@ directive('model', (el, { modifiers, expression }, { effect, cleanup }) => {
     }
 
     el._x_forceModelUpdate = (value) => {
-        value = value === undefined ? getValue() : value
-
         // If nested model key is undefined, set the default value to empty string.
         if (value === undefined && typeof expression === 'string' && expression.match(/\./)) value = ''
 
diff --git a/packages/alpinejs/src/entangle.js b/packages/alpinejs/src/entangle.js
index e310429da..81cff12df 100644
--- a/packages/alpinejs/src/entangle.js
+++ b/packages/alpinejs/src/entangle.js
@@ -9,7 +9,7 @@ export function entangle({ get: outerGet, set: outerSet }, { get: innerGet, set:
 
         if (firstRun) {
             outer = outerGet()
-            innerSet(outer)
+            innerSet(JSON.parse(JSON.stringify(outer))) // We need to break internal references using parse/stringify...
             inner = innerGet()
             firstRun = false
         } else {
@@ -24,7 +24,7 @@ export function entangle({ get: outerGet, set: outerSet }, { get: innerGet, set:
                 innerSet(outer)
                 inner = outer // Assign inner to outer so that it can be serialized for diffing...
             } else { // If inner changed...
-                outerSet(inner)
+                outerSet(JSON.parse(JSON.stringify(inner))) // We need to break internal references using parse/stringify...
                 outer = inner // Assign outer to inner so that it can be serialized for diffing...
             }
         }
diff --git a/packages/alpinejs/src/utils/bind.js b/packages/alpinejs/src/utils/bind.js
index 256cbc888..b53e4909b 100644
--- a/packages/alpinejs/src/utils/bind.js
+++ b/packages/alpinejs/src/utils/bind.js
@@ -48,7 +48,7 @@ function bindInputValue(el, value) {
         // automatically.
         if (Number.isInteger(value)) {
             el.value = value
-        } else if (! Number.isInteger(value) && ! Array.isArray(value) && typeof value !== 'boolean' && ! [null, undefined].includes(value)) {
+        } else if (! Array.isArray(value) && typeof value !== 'boolean' && ! [null, undefined].includes(value)) {
             el.value = String(value)
         } else {
             if (Array.isArray(value)) {
@@ -62,7 +62,7 @@ function bindInputValue(el, value) {
     } else {
         if (el.value === value) return
 
-        el.value = value
+        el.value = value === undefined ? '' : value
     }
 }
 
diff --git a/packages/history/builds/module.js b/packages/history/builds/module.js
index a7d9aba46..122f73ea5 100644
--- a/packages/history/builds/module.js
+++ b/packages/history/builds/module.js
@@ -1,3 +1,5 @@
 import history from '../src/index.js'
+import { track } from '../src/index.js'
 
 export default history
+export { track }
diff --git a/packages/history/src/index.js b/packages/history/src/index.js
index f230d809a..81388ace3 100644
--- a/packages/history/src/index.js
+++ b/packages/history/src/index.js
@@ -3,60 +3,80 @@ export default function history(Alpine) {
         let alias
 
         return interceptor((initialValue, getter, setter, path, key) => {
-            let pause = false
             let queryKey = alias || path
 
-            let value = initialValue
+            let { initial, replace } = track(queryKey, initialValue)
+
+            setter(initial)
+
+            Alpine.effect(() => {
+                replace(getter())
+            })
+
+            return initial
+        }, func => {
+            func.as = key => { alias = key; return func }
+        })
+    })
+
+    Alpine.history = { track }
+}
+
+export function track(name, initialValue, except = null) {
+    let pause = false
+    let url = new URL(window.location.href)
+    let value = initialValue
+
+    if (url.searchParams.has(name)) {
+        value = url.searchParams.get(name)
+    }
+
+    // Nothing happens here...
+    // let object = { value }
+
+    // url.searchParams.set(name, value)
+
+    // replace(url.toString(), name, object)
+
+    return {
+        initial: value, // Initial value...
+        replace(newValue) { // Update via replaceState...
+            let object = { value: newValue }
+
             let url = new URL(window.location.href)
 
-            if (url.searchParams.has(queryKey)) {
-                value = url.searchParams.get(queryKey)
-            }
+            url.searchParams.set(name, newValue)
 
-            setter(value)
+            replace(url.toString(), name, object)
+        },
+        push(newValue) { // Update via pushState...
+            if (pause) return
 
-            let object = { value }
+            let object = { value: newValue }
 
-            url.searchParams.set(queryKey, value)
+            let url = new URL(window.location.href)
 
-            replace(url.toString(), path, object)
+            url.searchParams.set(name, newValue)
 
+            push(url.toString(), name, object)
+        },
+        pop(receiver) { // onPopState...
             window.addEventListener('popstate', (e) => {
                 if (! e.state) return
                 if (! e.state.alpine) return
 
-                Object.entries(e.state.alpine).forEach(([newKey, { value }]) => {
-                    if (newKey !== key) return
+                Object.entries(e.state.alpine).forEach(([newName, { value }]) => {
+                    if (newName !== name) return
 
                     pause = true
 
-                    Alpine.disableEffectScheduling(() => {
-                        setter(value)
-                    })
+                    receiver(value)
 
                     pause = false
                 })
             })
-
-            Alpine.effect(() => {
-                let value = getter()
-
-                if (pause) return
-
-                let object = { value }
-
-                let url = new URL(window.location.href)
-
-                url.searchParams.set(queryKey, value)
-
-                push(url.toString(), path, object)
-            })
-
-            return value
-        }, func => {
-            func.as = key => { alias = key; return func }
-        })
-    })
+        }
+    }
 }
 
 function replace(url, key, object) {
@@ -74,3 +94,62 @@ function push(url, key, object) {
 
     window.history.pushState(state, '', url)
 }
+
+// Alpine.magic('queryString', (el, { interceptor }) =>  {
+//     let alias
+
+//     return interceptor((initialValue, getter, setter, path, key) => {
+//         let pause = false
+//         let queryKey = alias || path
+
+//         let value = initialValue
+//         let url = new URL(window.location.href)
+
+//         if (url.searchParams.has(queryKey)) {
+//             value = url.searchParams.get(queryKey)
+//         }
+
+//         setter(value)
+
+//         let object = { value }
+
+//         url.searchParams.set(queryKey, value)
+
+//         replace(url.toString(), path, object)
+
+//         window.addEventListener('popstate', (e) => {
+//             if (! e.state) return
+//             if (! e.state.alpine) return
+
+//             Object.entries(e.state.alpine).forEach(([newKey, { value }]) => {
+//                 if (newKey !== key) return
+
+//                 pause = true
+
+//                 Alpine.disableEffectScheduling(() => {
+//                     setter(value)
+//                 })
+
+//                 pause = false
+//             })
+//         })
+
+//         Alpine.effect(() => {
+//             let value = getter()
+
+//             if (pause) return
+
+//             let object = { value }
+
+//             let url = new URL(window.location.href)
+
+//             url.searchParams.set(queryKey, value)
+
+//             push(url.toString(), path, object)
+//         })
+
+//         return value
+//     }, func => {
+//         func.as = key => { alias = key; return func }
+//     })
+// })
diff --git a/packages/morph/src/morph.js b/packages/morph/src/morph.js
index b03f7217b..703874415 100644
--- a/packages/morph/src/morph.js
+++ b/packages/morph/src/morph.js
@@ -99,6 +99,8 @@ export function morph(from, toHtml, options) {
     }
 
     function patchAttributes(from, to) {
+        if (from._x_transitioning) return
+
         if (from._x_isShown && ! to._x_isShown) {
             return
         }

From 3e6609663a96afb6c29974fdcca4fec6e1df97d4 Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Mon, 23 Jan 2023 13:40:50 -0500
Subject: [PATCH 02/13] New historyState stuff

---
 packages/history/src/index.js                 | 242 ++++++++++++------
 .../integration/plugins/history.spec.js       | 157 ++++++++++--
 2 files changed, 297 insertions(+), 102 deletions(-)

diff --git a/packages/history/src/index.js b/packages/history/src/index.js
index 81388ace3..23d35ba57 100644
--- a/packages/history/src/index.js
+++ b/packages/history/src/index.js
@@ -1,20 +1,35 @@
+
 export default function history(Alpine) {
     Alpine.magic('queryString', (el, { interceptor }) =>  {
         let alias
+        let alwaysShow = false
+        let usePush = false
 
-        return interceptor((initialValue, getter, setter, path, key) => {
+        return interceptor((initialSeedValue, getter, setter, path, key) => {
             let queryKey = alias || path
 
-            let { initial, replace } = track(queryKey, initialValue)
+            let { initial, replace, push, pop } = track(queryKey, initialSeedValue, alwaysShow)
 
             setter(initial)
 
-            Alpine.effect(() => {
-                replace(getter())
-            })
+            if (! usePush) {
+                Alpine.effect(() => replace(getter()))
+            } else {
+                Alpine.effect(() => push(getter()))
+
+                pop(async newValue => {
+                    setter(newValue)
+
+                    let tillTheEndOfTheMicrotaskQueue = () => Promise.resolve()
+
+                    await tillTheEndOfTheMicrotaskQueue() // ...so that we preserve the internal lock...
+                })
+            }
 
             return initial
         }, func => {
+            func.alwaysShow = () => { alwaysShow = true; return func }
+            func.usePush = () => { usePush = true; return func }
             func.as = key => { alias = key; return func }
         })
     })
@@ -22,57 +37,65 @@ export default function history(Alpine) {
     Alpine.history = { track }
 }
 
-export function track(name, initialValue, except = null) {
-    let pause = false
-    let url = new URL(window.location.href)
-    let value = initialValue
+export function track(name, initialSeedValue, alwaysShow = false) {
+    let { has, get, set, remove } = queryStringUtils()
 
-    if (url.searchParams.has(name)) {
-        value = url.searchParams.get(name)
-    }
-
-    // Nothing happens here...
-    // let object = { value }
+    let url = new URL(window.location.href)
+    let isInitiallyPresentInUrl = has(url, name)
+    let initialValue = isInitiallyPresentInUrl ? get(url, name) : initialSeedValue
+    let initialValueMemo = JSON.stringify(initialValue)
+    let hasReturnedToInitialValue = (newValue) => JSON.stringify(newValue) === initialValueMemo
 
-    // url.searchParams.set(name, value)
+    if (alwaysShow) url = set(url, name, initialValue)
 
-    // replace(url.toString(), name, object)
+    replace(url, name, { value: initialValue })
 
-    return {
-        initial: value, // Initial value...
-        replace(newValue) { // Update via replaceState...
-            let object = { value: newValue }
+    let lock = false
 
-            let url = new URL(window.location.href)
+    let update = (strategy, newValue) => {
+        if (lock) return
 
-            url.searchParams.set(name, newValue)
+        let url = new URL(window.location.href)
 
-            replace(url.toString(), name, object)
-        },
-        push(newValue) { // Update via pushState...
-            if (pause) return
+        if (! alwaysShow && ! isInitiallyPresentInUrl && hasReturnedToInitialValue(newValue)) {
+            url = remove(url, name)
+        } else {
+            url = set(url, name, newValue)
+        }
 
-            let object = { value: newValue }
+        strategy(url, name, { value: newValue})
+    }
 
-            let url = new URL(window.location.href)
+    return {
+        initial: initialValue,
 
-            url.searchParams.set(name, newValue)
+        replace(newValue) { // Update via replaceState...
+            update(replace, newValue)
+        },
 
-            push(url.toString(), name, object)
+        push(newValue) { // Update via pushState...
+            update(push, newValue)
         },
-        pop(receiver) { // onPopState...
+
+        pop(receiver) { // "popstate" handler...
             window.addEventListener('popstate', (e) => {
-                if (! e.state) return
-                if (! e.state.alpine) return
+                if (! e.state || ! e.state.alpine) return
 
-                Object.entries(e.state.alpine).forEach(([newName, { value }]) => {
-                    if (newName !== name) return
+                Object.entries(e.state.alpine).forEach(([iName, { value: newValue }]) => {
+                    if (iName !== name) return
 
-                    pause = true
+                    lock = true
 
-                    receiver(value)
+                    // Allow the "receiver" to be an async function in case a non-syncronous
+                    // operation (like an ajax) requests needs to happen while preserving
+                    // the "locking" mechanism ("lock = true" in this case)...
+                    let result = receiver(newValue)
 
-                    pause = false
+                    if (result instanceof Promise) {
+                        result.finally(() => lock = false)
+                    } else {
+                        lock = false
+                    }
                 })
             })
         }
@@ -84,72 +107,127 @@ function replace(url, key, object) {
 
     if (! state.alpine) state.alpine = {}
 
-    state.alpine[key] = object
+    state.alpine[key] = unwrap(object)
 
-    window.history.replaceState(state, '', url)
+    window.history.replaceState(state, '', url.toString())
 }
 
 function push(url, key, object) {
-    let state = { alpine: {...window.history.state.alpine, ...{[key]: object}} }
+    let state = { alpine: {...window.history.state.alpine, ...{[key]: unwrap(object)}} }
 
-    window.history.pushState(state, '', url)
+    window.history.pushState(state, '', url.toString())
 }
 
-// Alpine.magic('queryString', (el, { interceptor }) =>  {
-//     let alias
+function unwrap(object) {
+    return JSON.parse(JSON.stringify(object))
+}
 
-//     return interceptor((initialValue, getter, setter, path, key) => {
-//         let pause = false
-//         let queryKey = alias || path
+function queryStringUtils() {
+    return {
+        has(url, key) {
+            let search = url.search
 
-//         let value = initialValue
-//         let url = new URL(window.location.href)
+            if (! search) return false
 
-//         if (url.searchParams.has(queryKey)) {
-//             value = url.searchParams.get(queryKey)
-//         }
+            let data = fromQueryString(search)
 
-//         setter(value)
+            return Object.keys(data).includes(key)
+        },
+        get(url, key) {
+            let search = url.search
 
-//         let object = { value }
+            if (! search) return false
 
-//         url.searchParams.set(queryKey, value)
+            let data = fromQueryString(search)
 
-//         replace(url.toString(), path, object)
+            return data[key]
+        },
+        set(url, key, value) {
+            let data = fromQueryString(url.search)
 
-//         window.addEventListener('popstate', (e) => {
-//             if (! e.state) return
-//             if (! e.state.alpine) return
+            data[key] = value
 
-//             Object.entries(e.state.alpine).forEach(([newKey, { value }]) => {
-//                 if (newKey !== key) return
+            url.search = toQueryString(data)
 
-//                 pause = true
+            return url
+        },
+        remove(url, key) {
+            let data = fromQueryString(url.search)
+
+            delete data[key]
+
+            url.search = toQueryString(data)
+
+            return url
+        },
+    }
+}
+
+// This function converts JavaScript data to bracketed query string notation...
+// { items: [['foo']] } -> "items[0][0]=foo"
+function toQueryString(data) {
+    let isObjecty = (subject) => typeof subject === 'object' && subject !== null
+
+    let buildQueryStringEntries = (data, entries = {}, baseKey = '') => {
+        Object.entries(data).forEach(([iKey, iValue]) => {
+            let key = baseKey === '' ? iKey : `${baseKey}[${iKey}]`
+
+            if (! isObjecty(iValue)) {
+                entries[key] = encodeURIComponent(iValue)
+                    .replaceAll('%20', '+') // Conform to RFC1738
+            } else {
+                entries = {...entries, ...buildQueryStringEntries(iValue, entries, key)}
+            }
+        })
+
+        return entries
+    }
+
+    let entries = buildQueryStringEntries(data)
 
-//                 Alpine.disableEffectScheduling(() => {
-//                     setter(value)
-//                 })
 
-//                 pause = false
-//             })
-//         })
+    return Object.entries(entries).map(([key, value]) => `${key}=${value}`).join('&')
+}
+
+// This function converts bracketed query string notation back to JS data...
+// "items[0][0]=foo" -> { items: [['foo']] }
+function fromQueryString(search) {
+    search = search.replace('?', '')
+
+    if (search === '') return {}
+
+    let insertDotNotatedValueIntoData = (key, value, data) => {
+        let [first, second, ...rest] = key.split('.')
+
+        // We're at a leaf node, let's make the assigment...
+        if (! second) return data[key] = value
+
+        // This is where we fill in empty arrays/objects allong the way to the assigment...
+        if (data[first] === undefined) {
+            data[first] = isNaN(second) ? {} : []
+        }
+
+        // Keep deferring assignment until the full key is built up...
+        insertDotNotatedValueIntoData([second, ...rest].join('.'), value, data[first])
+    }
 
-//         Alpine.effect(() => {
-//             let value = getter()
+    let entries = search.split('&').map(i => i.split('='))
 
-//             if (pause) return
+    let data = {}
 
-//             let object = { value }
+    entries.forEach(([key, value]) => {
+        value = decodeURIComponent(value.replaceAll('+', '%20'))
 
-//             let url = new URL(window.location.href)
+        if (! key.includes('[')) {
+            data[key] = value
+        } else {
+            // Convert to dot notation because it's easier...
+            let dotNotatedKey = key.replaceAll('[', '.').replaceAll(']', '')
 
-//             url.searchParams.set(queryKey, value)
+            insertDotNotatedValueIntoData(dotNotatedKey, value, data)
+        }
+    })
 
-//             push(url.toString(), path, object)
-//         })
+    return data
+}
 
-//         return value
-//     }, func => {
-//         func.as = key => { alias = key; return func }
-//     })
-// })
diff --git a/tests/cypress/integration/plugins/history.spec.js b/tests/cypress/integration/plugins/history.spec.js
index 7fd7820c7..8c1bc9524 100644
--- a/tests/cypress/integration/plugins/history.spec.js
+++ b/tests/cypress/integration/plugins/history.spec.js
@@ -1,84 +1,129 @@
 import { haveText, html, test } from '../../utils'
 
-test('can go back and forth',
+test('value is reflected in query string upon changing',
     [html`
         <div x-data="{ count: $queryString(1) }">
             <button @click="count++">Inc</button>
+            <h1 @click="count--">Dec</h1>
             <span x-text="count"></span>
         </div>
     `],
     ({ get, url, go }) => {
         get('span').should(haveText('1'))
-        url().should('include', '?count=1')
+        url().should('not.include', '?count=1')
         get('button').click()
         get('span').should(haveText('2'))
         url().should('include', '?count=2')
-        go('back')
+        get('button').click()
+        get('span').should(haveText('3'))
+        url().should('include', '?count=3')
+        get('h1').click()
+        get('h1').click()
+        get('span').should(haveText('1'))
+        url().should('not.include', '?count=1')
+    },
+)
+
+test('can configure always making the query string value present',
+    [html`
+        <div x-data="{ count: $queryString(1).alwaysShow() }">
+            <button @click="count++">Inc</button>
+            <h1 @click="count--">Dec</h1>
+            <span x-text="count"></span>
+        </div>
+    `],
+    ({ get, url, go }) => {
         get('span').should(haveText('1'))
         url().should('include', '?count=1')
-        go('forward')
+        get('button').click()
         get('span').should(haveText('2'))
         url().should('include', '?count=2')
+        get('h1').click()
+        get('span').should(haveText('1'))
+        url().should('include', '?count=1')
     },
 )
 
-test('property is set from the query string on load',
+test('value is persisted across requests',
     [html`
         <div x-data="{ count: $queryString(1) }">
             <button @click="count++">Inc</button>
             <span x-text="count"></span>
         </div>
     `],
-    ({ get, url }, reload) => {
+    ({ get, url, go }, reload) => {
         get('span').should(haveText('1'))
-        url().should('include', '?count=1')
+        url().should('not.include', '?count=1')
         get('button').click()
         get('span').should(haveText('2'))
         url().should('include', '?count=2')
+
         reload()
+
+        url().should('include', '?count=2')
         get('span').should(haveText('2'))
     },
 )
 
-test('can use a query string key alias',
+test('can provide an alias',
     [html`
-        <div x-data="{ count: $queryString(1).as('foo') }">
+        <div x-data="{ count: $queryString(1).as('tnuoc') }">
             <button @click="count++">Inc</button>
             <span x-text="count"></span>
         </div>
     `],
-    ({ get, url }, reload) => {
+    ({ get, url, go }) => {
         get('span').should(haveText('1'))
-        url().should('include', '?foo=1')
+        url().should('not.include', '?tnuoc=1')
         get('button').click()
         get('span').should(haveText('2'))
-        url().should('include', '?foo=2')
-        reload()
+        url().should('include', '?tnuoc=2')
+    },
+)
+
+test('can use pushState',
+    [html`
+        <div x-data="{ count: $queryString(1).usePush() }">
+            <button @click="count++">Inc</button>
+            <span x-text="count"></span>
+        </div>
+    `],
+    ({ get, url, go }) => {
+        get('span').should(haveText('1'))
+        url().should('not.include', '?count=1')
+        get('button').click()
         get('span').should(haveText('2'))
+        url().should('include', '?count=2')
+        go('back')
+        get('span').should(haveText('1'))
+        url().should('not.include', '?count=1')
+        go('forward')
+        get('span').should(haveText('2'))
+        url().should('include', '?count=2')
     },
 )
 
 test('can go back and forth with multiple components',
     [html`
-        <div x-data="{ foo: $queryString(1) }" id="foo">
+        <div x-data="{ foo: $queryString(1).usePush() }" id="foo">
             <button @click="foo++">Inc</button>
             <span x-text="foo"></span>
         </div>
 
-        <div x-data="{ bar: $queryString(1) }" id="bar">
+        <div x-data="{ bar: $queryString(1).usePush() }" id="bar">
             <button @click="bar++">Inc</button>
             <span x-text="bar"></span>
         </div>
     `],
     ({ get, url, go }) => {
         get('#foo span').should(haveText('1'))
-        url().should('include', 'foo=1')
+        url().should('not.include', 'foo=1')
         get('#foo button').click()
         get('#foo span').should(haveText('2'))
         url().should('include', 'foo=2')
 
         get('#bar span').should(haveText('1'))
-        url().should('include', 'bar=1')
+        url().should('not.include', 'bar=1')
         get('#bar button').click()
         get('#bar span').should(haveText('2'))
         url().should('include', 'bar=2')
@@ -86,15 +131,87 @@ test('can go back and forth with multiple components',
         go('back')
 
         get('#bar span').should(haveText('1'))
-        url().should('include', 'bar=1')
+        url().should('not.include', 'bar=1')
         get('#foo span').should(haveText('2'))
         url().should('include', 'foo=2')
 
         go('back')
 
         get('#bar span').should(haveText('1'))
-        url().should('include', 'bar=1')
+        url().should('not.include', 'bar=1')
         get('#foo span').should(haveText('1'))
-        url().should('include', 'foo=1')
+        url().should('not.include', 'foo=1')
+    },
+)
+
+test('supports arrays',
+    [html`
+        <div x-data="{ items: $queryString(['foo']) }">
+            <button @click="items.push('bar')">Inc</button>
+            <span x-text="JSON.stringify(items)"></span>
+        </div>
+    `],
+    ({ get, url, go }, reload) => {
+        get('span').should(haveText('["foo"]'))
+        url().should('not.include', '?items')
+        get('button').click()
+        get('span').should(haveText('["foo","bar"]'))
+        url().should('include', '?items[0]=foo&items[1]=bar')
+        reload()
+        url().should('include', '?items[0]=foo&items[1]=bar')
+        get('span').should(haveText('["foo","bar"]'))
+    },
+)
+
+test('supports deep arrays',
+    [html`
+        <div x-data="{ items: $queryString(['foo', ['bar', 'baz']]) }">
+            <button @click="items[1].push('bob')">Inc</button>
+            <span x-text="JSON.stringify(items)"></span>
+        </div>
+    `],
+    ({ get, url, go }, reload) => {
+        get('span').should(haveText('["foo",["bar","baz"]]'))
+        url().should('not.include', '?items')
+        get('button').click()
+        get('span').should(haveText('["foo",["bar","baz","bob"]]'))
+        url().should('include', '?items[0]=foo&items[1][0]=bar&items[1][1]=baz&items[1][2]=bob')
+        reload()
+        url().should('include', '?items[0]=foo&items[1][0]=bar&items[1][1]=baz&items[1][2]=bob')
+        get('span').should(haveText('["foo",["bar","baz","bob"]]'))
+    },
+)
+
+test('supports objects',
+    [html`
+        <div x-data="{ items: $queryString({ foo: 'bar' }) }">
+            <button @click="items.bob = 'lob'">Inc</button>
+            <span x-text="JSON.stringify(items)"></span>
+        </div>
+    `],
+    ({ get, url, go }, reload) => {
+        get('span').should(haveText('{"foo":"bar"}'))
+        url().should('not.include', '?items')
+        get('button').click()
+        get('span').should(haveText('{"foo":"bar","bob":"lob"}'))
+        url().should('include', '?items[foo]=bar&items[bob]=lob')
+        reload()
+        url().should('include', '?items[foo]=bar&items[bob]=lob')
+        get('span').should(haveText('{"foo":"bar","bob":"lob"}'))
+    },
+)
+
+test('encodes values according to RFC 1738 (plus signs for spaces)',
+    [html`
+        <div x-data="{ foo: $queryString('hey&there').alwaysShow(), bar: $queryString('hey there').alwaysShow() }">
+            <span x-text="JSON.stringify(foo)+JSON.stringify(bar)"></span>
+        </div>
+    `],
+    ({ get, url, go }, reload) => {
+        url().should('include', '?foo=hey%26there&bar=hey+there')
+        get('span').should(haveText('"hey&there""hey there"'))
+        reload()
+        url().should('include', '?foo=hey%26there&bar=hey+there')
+        get('span').should(haveText('"hey&there""hey there"'))
     },
 )

From 65407a67aeb0ae1e8d705b5c9e1b97617e86474c Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Wed, 8 Feb 2023 11:33:38 -0500
Subject: [PATCH 03/13] wip

---
 index.html                               | 71 ++++++++++++++++++++++--
 packages/alpinejs/src/directives/x-on.js |  2 +-
 packages/alpinejs/src/lifecycle.js       |  1 +
 3 files changed, 68 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 33474e4fb..1858ee3f1 100644
--- a/index.html
+++ b/index.html
@@ -8,12 +8,73 @@
     <script src="./packages/history/dist/cdn.js"></script>
     <script src="./packages/alpinejs/dist/cdn.js" defer></script>
     <!-- <script src="//cdn.tailwindcss.com"></script> -->
-    <script src="//cdn.tailwindcss.com"></script>
+    <!-- <script src="//cdn.tailwindcss.com"></script> -->
+
+
+
+
+    <button wire:click.prefetch"...">
+        Do something
+    </button>
+
+
+
+
+
+
+
+
+
+
+<div x-data="{ count: $url(1) }">
+    <button @click="count++">+</button>
+    <button @click="count--">-</button>
+
+    <h1 x-text="count"></h1>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
 
-    <div x-data="{ count: $queryString(1) }">
-        <input type="text" x-model="count">
-        <span x-text="count"></span>
-    </div>
 
     <div x-data="{ users: [{ name: 'lebowski' }] }">
         <template x-for="(user, idx) in users">
diff --git a/packages/alpinejs/src/directives/x-on.js b/packages/alpinejs/src/directives/x-on.js
index cd997a339..210e2f17b 100644
--- a/packages/alpinejs/src/directives/x-on.js
+++ b/packages/alpinejs/src/directives/x-on.js
@@ -7,7 +7,7 @@ mapAttributes(startingWith('@', into(prefix('on:'))))
 
 directive('on', skipDuringClone((el, { value, modifiers, expression }, { cleanup }) => {
     let evaluate = expression ? evaluateLater(el, expression) : () => {}
-   
+
     // Forward event listeners on portals.
     if (el.tagName.toLowerCase() === 'template') {
         if (! el._x_forwardEvents) el._x_forwardEvents = []
diff --git a/packages/alpinejs/src/lifecycle.js b/packages/alpinejs/src/lifecycle.js
index 7a6f93551..d336e651c 100644
--- a/packages/alpinejs/src/lifecycle.js
+++ b/packages/alpinejs/src/lifecycle.js
@@ -3,6 +3,7 @@ import { deferHandlingDirectives, directives } from "./directives"
 import { dispatch } from './utils/dispatch'
 import { walk } from "./utils/walk"
 import { warn } from './utils/warn'
+import Alpine from "./alpine"
 
 export function start() {
     if (! document.body) warn('Unable to initialize. Trying to load Alpine before `<body>` is available. Did you forget to add `defer` in Alpine\'s `<script>` tag?')

From 61f64595fafca38c30d806369be8b35a4a39bb9b Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Wed, 10 May 2023 10:07:18 -0400
Subject: [PATCH 04/13] wip

---
 index.html                      | 29 +++++++++++++++++++++++++++++
 packages/alpinejs/src/alpine.js |  3 ++-
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 1858ee3f1..9200e10b8 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,35 @@
     <!-- <script src="//cdn.tailwindcss.com"></script> -->
     <!-- <script src="//cdn.tailwindcss.com"></script> -->
 
+    <div x-data="{
+        my_array: [{x:'x'},{x:'y'}],
+        click() {
+            this.my_array = [{x:'a'},{x:'b'}];
+        }
+    }">
+
+        <!-- Loop with plain div -->
+        <template x-for="item in my_array">
+            <div x-text="item.x"></div>
+        </template>
+
+        <!-- Loop with div nested inside component -->
+        <template x-for="item in my_array">
+            <div x-data="some_component" >
+                <div x-text="item.x"></div>
+            </div>
+        </template>
+
+        <button @click="click">Click me</button>
+
+    </div>
+        <script>
+            document.addEventListener('alpine:init', () => {
+                Alpine.data('some_component', () => ({}));
+            });
+
+        </script>
+
 
 
 
diff --git a/packages/alpinejs/src/alpine.js b/packages/alpinejs/src/alpine.js
index 6dafef087..d442c2f19 100644
--- a/packages/alpinejs/src/alpine.js
+++ b/packages/alpinejs/src/alpine.js
@@ -1,7 +1,7 @@
 import { setReactivityEngine, disableEffectScheduling, reactive, effect, release, raw } from './reactivity'
 import { mapAttributes, directive, setPrefix as prefix, prefix as prefixed } from './directives'
 import { start, addRootSelector, addInitSelector, closestRoot, findClosest, initTree, destroyTree, interceptInit } from './lifecycle'
-import { mutateDom, deferMutations, flushAndStopDeferringMutations, startObservingMutations, stopObservingMutations } from './mutation'
+import { onAttributeRemoved, mutateDom, deferMutations, flushAndStopDeferringMutations, startObservingMutations, stopObservingMutations } from './mutation'
 import { mergeProxies, closestDataStack, addScopeToNode, scope as $data } from './scope'
 import { setEvaluator, evaluate, evaluateLater, dontAutoEvaluateFunctions } from './evaluator'
 import { transition } from './directives/x-transition'
@@ -32,6 +32,7 @@ let Alpine = {
     startObservingMutations,
     stopObservingMutations,
     setReactivityEngine,
+    onAttributeRemoved,
     closestDataStack,
     skipDuringClone,
     onlyDuringClone,

From 96b477a769e770c0395a2780a78e73f0a826f22e Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Mon, 26 Jun 2023 14:47:02 -0400
Subject: [PATCH 05/13] Tweak x-navigate

---
 packages/alpinejs/src/alpine.js |  2 +
 packages/navigate/src/index.js  | 68 ++++++++++++++++-----------------
 packages/navigate/src/links.js  | 51 +++++--------------------
 3 files changed, 44 insertions(+), 77 deletions(-)

diff --git a/packages/alpinejs/src/alpine.js b/packages/alpinejs/src/alpine.js
index ad42969d9..d442c2f19 100644
--- a/packages/alpinejs/src/alpine.js
+++ b/packages/alpinejs/src/alpine.js
@@ -11,6 +11,7 @@ import { getBinding as bound } from './utils/bind'
 import { debounce } from './utils/debounce'
 import { throttle } from './utils/throttle'
 import { setStyles } from './utils/styles'
+import { entangle } from './entangle'
 import { nextTick } from './nextTick'
 import { walk } from './utils/walk'
 import { plugin } from './plugin'
@@ -52,6 +53,7 @@ let Alpine = {
     setStyles, // INTERNAL
     mutateDom,
     directive,
+    entangle,
     throttle,
     debounce,
     evaluate,
diff --git a/packages/navigate/src/index.js b/packages/navigate/src/index.js
index cc120ad0a..235a18e9a 100644
--- a/packages/navigate/src/index.js
+++ b/packages/navigate/src/index.js
@@ -1,69 +1,67 @@
-import { transition } from "alpinejs/src/directives/x-transition"
-import { finishAndHideProgressBar, showAndStartProgressBar } from "./bar"
-import { fetchHtml } from "./fetch"
 import { updateCurrentPageHtmlInHistoryStateForLaterBackButtonClicks, updateUrlAndStoreLatestHtmlForFutureBackButtons, whenTheBackOrForwardButtonIsClicked } from "./history"
-import { extractDestinationFromLink, hijackNewLinksOnThePage, whenALinkIsClicked, whenALinkIsHovered } from "./links"
-import { swapCurrentPageWithNewHtml } from "./page"
-import { putPersistantElementsBack, storePersistantElementsForLater } from "./persist"
 import { getPretchedHtmlOr, prefetchHtml, storeThePrefetchedHtmlForWhenALinkIsClicked } from "./prefetch"
+import { extractDestinationFromLink, whenThisLinkIsClicked, whenThisLinkIsHovered } from "./links"
 import { restoreScrollPosition, storeScrollInformationInHtmlBeforeNavigatingAway } from "./scroll"
+import { putPersistantElementsBack, storePersistantElementsForLater } from "./persist"
+import { finishAndHideProgressBar, showAndStartProgressBar } from "./bar"
+import { transition } from "alpinejs/src/directives/x-transition"
+import { swapCurrentPageWithNewHtml } from "./page"
+import { fetchHtml } from "./fetch"
 
-let enablePrefetch = true
 let enablePersist = true
 let showProgressBar = true
 let restoreScroll = true
 let autofocus = false
 
 export default function (Alpine) {
-    updateCurrentPageHtmlInHistoryStateForLaterBackButtonClicks()
+    Alpine.directive('navigate', (el, { value, expression, modifiers }, { evaluateLater, cleanup }) => {
+        let shouldPrefetch = modifiers.includes('prefetch')
 
-    enablePrefetch && whenALinkIsHovered((el) => {
-        let forDestination = extractDestinationFromLink(el)
+        shouldPrefetch && whenThisLinkIsHovered(el, () => {
+            let forDestination = extractDestinationFromLink(el)
 
-        prefetchHtml(forDestination, html => {
-            storeThePrefetchedHtmlForWhenALinkIsClicked(html, forDestination)
+            prefetchHtml(forDestination, html => {
+                storeThePrefetchedHtmlForWhenALinkIsClicked(html, forDestination)
+            })
         })
-    })
 
-    whenALinkIsClicked((el) => {
-        showProgressBar && showAndStartProgressBar()
+        whenThisLinkIsClicked(el, () => {
+            showProgressBar && showAndStartProgressBar()
 
-        let fromDestination = extractDestinationFromLink(el)
+            let fromDestination = extractDestinationFromLink(el)
 
-        fetchHtmlOrUsePrefetchedHtml(fromDestination, html => {
-            restoreScroll && storeScrollInformationInHtmlBeforeNavigatingAway()
+            fetchHtmlOrUsePrefetchedHtml(fromDestination, html => {
+                restoreScroll && storeScrollInformationInHtmlBeforeNavigatingAway()
 
-            showProgressBar && finishAndHideProgressBar()
+                showProgressBar && finishAndHideProgressBar()
 
-            updateCurrentPageHtmlInHistoryStateForLaterBackButtonClicks()
+                updateCurrentPageHtmlInHistoryStateForLaterBackButtonClicks()
 
-            preventAlpineFromPickingUpDomChanges(Alpine, andAfterAllThis => {
-                enablePersist && storePersistantElementsForLater()
+                preventAlpineFromPickingUpDomChanges(Alpine, andAfterAllThis => {
+                    enablePersist && storePersistantElementsForLater()
 
-                swapCurrentPageWithNewHtml(html, () => {
-                    enablePersist && putPersistantElementsBack()
+                    swapCurrentPageWithNewHtml(html, () => {
+                        enablePersist && putPersistantElementsBack()
 
-                    // Added setTimeout here to detect a currently hovered prefetch link...
-                    // (hack for laracon)
-                    setTimeout(() => hijackNewLinksOnThePage())
+                        restoreScroll && restoreScrollPosition()
 
-                    restoreScroll && restoreScrollPosition()
+                        fireEventForOtherLibariesToHookInto()
 
-                    fireEventForOtherLibariesToHookInto()
+                        updateUrlAndStoreLatestHtmlForFutureBackButtons(html, fromDestination)
 
-                    updateUrlAndStoreLatestHtmlForFutureBackButtons(html, fromDestination)
+                        andAfterAllThis(() => {
+                            autofocus && autofocusElementsWithTheAutofocusAttribute()
 
-                    andAfterAllThis(() => {
-                        autofocus && autofocusElementsWithTheAutofocusAttribute()
-
-                        nowInitializeAlpineOnTheNewPage(Alpine)
+                            nowInitializeAlpineOnTheNewPage(Alpine)
+                        })
                     })
                 })
-
             })
         })
     })
 
+    updateCurrentPageHtmlInHistoryStateForLaterBackButtonClicks()
+
     whenTheBackOrForwardButtonIsClicked((html) => {
         // @todo: see if there's a way to update the current HTML BEFORE
         // the back button is hit, and not AFTER:
diff --git a/packages/navigate/src/links.js b/packages/navigate/src/links.js
index 1273a2443..1db4afdb6 100644
--- a/packages/navigate/src/links.js
+++ b/packages/navigate/src/links.js
@@ -1,51 +1,18 @@
 
-let handleLinkClick = () => {}
-let handleLinkHover = () => {}
+export function whenThisLinkIsClicked(el, callback) {
+    el.addEventListener('click', e => {
+        e.preventDefault()
 
-export function whenALinkIsClicked(callback) {
-    handleLinkClick = callback
-
-    initializeLinksForClicking()
+        callback(el)
+    })
 }
 
-export function whenALinkIsHovered(callback) {
-    handleLinkHover = callback
-
-    initializeLinksForHovering()
+export function whenThisLinkIsHovered(el, callback) {
+    el.addEventListener('mouseenter', e => {
+        callback(e)
+    })
 }
 
 export function extractDestinationFromLink(linkEl) {
     return new URL(linkEl.getAttribute('href'), document.baseURI)
 }
-
-export function hijackNewLinksOnThePage() {
-    initializeLinksForClicking()
-    initializeLinksForHovering()
-}
-
-function initializeLinksForClicking() {
-    getLinks().forEach(el => {
-        el.addEventListener('click', e => {
-            e.preventDefault()
-
-            handleLinkClick(el)
-        })
-    })
-}
-
-function initializeLinksForHovering() {
-    getLinks()
-        .filter(i => i.hasAttribute('wire:navigate.prefetch'))
-        .forEach(el => {
-            el.addEventListener('mouseenter', e => {
-                handleLinkHover(el)
-            })
-        })
-}
-
-function getLinks() {
-    return Array.from(document.links)
-        .filter(i => i.hasAttribute('wire:navigate')
-        || i.hasAttribute('wire:navigate.prefetch'))
-}
-

From 80d9d151a575c6049f936adab5c8df0d212e5c4e Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Tue, 27 Jun 2023 21:17:19 -0400
Subject: [PATCH 06/13] wip

---
 packages/navigate/src/history.js | 24 ++++++++++++++++--------
 packages/navigate/src/index.js   |  3 ---
 packages/navigate/src/page.js    |  3 ++-
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/navigate/src/history.js b/packages/navigate/src/history.js
index cd230682a..f294c06e9 100644
--- a/packages/navigate/src/history.js
+++ b/packages/navigate/src/history.js
@@ -9,7 +9,13 @@ export function updateCurrentPageHtmlInHistoryStateForLaterBackButtonClicks() {
 
 export function whenTheBackOrForwardButtonIsClicked(callback) {
     window.addEventListener('popstate', e => {
-        let { html } = fromSessionStorage(e)
+        let state = e.state || {}
+
+        let alpine = state.alpine || {}
+
+        if (! alpine._html) return
+
+        let html = fromSessionStorage(alpine._html)
 
         callback(html)
     })
@@ -30,18 +36,20 @@ export function replaceUrl(url, html) {
 function updateUrl(method, url, html) {
     let key = (new Date).getTime()
 
-    tryToStoreInSession(key, JSON.stringify({ html: html }))
+    tryToStoreInSession(key, html)
 
-    let state = Object.assign(history.state || {}, { alpine: key })
+    let state = history.state || {}
+
+    if (! state.alpine) state.alpine = {}
+
+    state.alpine._html = key
 
     // 640k character limit:
     history[method](state, document.title, url)
 }
 
-export function fromSessionStorage(event) {
-    if (! event.state.alpine) return {}
-
-    let state = JSON.parse(sessionStorage.getItem('alpine:'+event.state.alpine))
+export function fromSessionStorage(timestamp) {
+    let state = JSON.parse(sessionStorage.getItem('alpine:'+timestamp))
 
     return state
 }
@@ -52,7 +60,7 @@ function tryToStoreInSession(timestamp, value) {
     // (oldest first), until there's enough space to store
     // the new one.
     try {
-        sessionStorage.setItem('alpine:'+timestamp, value)
+        sessionStorage.setItem('alpine:'+timestamp, JSON.stringify(value))
     } catch (error) {
         // 22 is Chrome, 1-14 is other browsers.
         if (! [22, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14].includes(error.code)) return
diff --git a/packages/navigate/src/index.js b/packages/navigate/src/index.js
index 235a18e9a..a537e921d 100644
--- a/packages/navigate/src/index.js
+++ b/packages/navigate/src/index.js
@@ -60,7 +60,6 @@ export default function (Alpine) {
         })
     })
 
-    updateCurrentPageHtmlInHistoryStateForLaterBackButtonClicks()
 
     whenTheBackOrForwardButtonIsClicked((html) => {
         // @todo: see if there's a way to update the current HTML BEFORE
@@ -74,8 +73,6 @@ export default function (Alpine) {
             swapCurrentPageWithNewHtml(html, andThen => {
                 enablePersist && putPersistantElementsBack()
 
-                hijackNewLinksOnThePage()
-
                 restoreScroll && restoreScrollPosition()
 
                 fireEventForOtherLibariesToHookInto()
diff --git a/packages/navigate/src/page.js b/packages/navigate/src/page.js
index 8c68156ee..1ef4acd9e 100644
--- a/packages/navigate/src/page.js
+++ b/packages/navigate/src/page.js
@@ -6,6 +6,7 @@ export function swapCurrentPageWithNewHtml(html, andThen) {
     let newHead = document.adoptNode(newDocument.head)
 
     mergeNewHead(newHead)
+
     prepNewScriptTagsToRun(newBody)
 
     transitionOut(document.body)
@@ -42,7 +43,7 @@ function transitionIn(body) {
 
 function prepNewScriptTagsToRun(newBody) {
     newBody.querySelectorAll('script').forEach(i => {
-        if (i.hasAttribute('x-navigate:ignore')) return
+        if (i.hasAttribute('data-navigate-once')) return
 
         i.replaceWith(cloneScriptTag(i))
     })

From 532c10f1d1d15ef5e1e02166d3f33a799bad41d6 Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Thu, 29 Jun 2023 13:03:44 -0400
Subject: [PATCH 07/13] wip

---
 packages/navigate/src/index.js | 70 +++++++++++++++++++++-------------
 packages/navigate/src/links.js | 40 +++++++++++++++++--
 packages/navigate/src/page.js  | 16 +++++++-
 3 files changed, 95 insertions(+), 31 deletions(-)

diff --git a/packages/navigate/src/index.js b/packages/navigate/src/index.js
index a537e921d..249e1c0ff 100644
--- a/packages/navigate/src/index.js
+++ b/packages/navigate/src/index.js
@@ -1,6 +1,6 @@
 import { updateCurrentPageHtmlInHistoryStateForLaterBackButtonClicks, updateUrlAndStoreLatestHtmlForFutureBackButtons, whenTheBackOrForwardButtonIsClicked } from "./history"
 import { getPretchedHtmlOr, prefetchHtml, storeThePrefetchedHtmlForWhenALinkIsClicked } from "./prefetch"
-import { extractDestinationFromLink, whenThisLinkIsClicked, whenThisLinkIsHovered } from "./links"
+import { createUrlObjectFromString, extractDestinationFromLink, whenThisLinkIsHoveredFor, whenThisLinkIsPressed } from "./links"
 import { restoreScrollPosition, storeScrollInformationInHtmlBeforeNavigatingAway } from "./scroll"
 import { putPersistantElementsBack, storePersistantElementsForLater } from "./persist"
 import { finishAndHideProgressBar, showAndStartProgressBar } from "./bar"
@@ -14,52 +14,70 @@ let restoreScroll = true
 let autofocus = false
 
 export default function (Alpine) {
+    Alpine.navigate = (url) => {
+        navigateTo(
+            createUrlObjectFromString(url)
+        )
+    }
+
     Alpine.directive('navigate', (el, { value, expression, modifiers }, { evaluateLater, cleanup }) => {
-        let shouldPrefetch = modifiers.includes('prefetch')
+        // "persisted" elements will be picked up by .querySelector, not this callback...
+        if (value === 'persist') return
+
+        let shouldPrefetch = modifiers.includes('prefetch') && modifiers.includes('hover')
 
-        shouldPrefetch && whenThisLinkIsHovered(el, () => {
-            let forDestination = extractDestinationFromLink(el)
+        shouldPrefetch && whenThisLinkIsHoveredFor(el, 60, () => {
+            let destination = extractDestinationFromLink(el)
 
-            prefetchHtml(forDestination, html => {
-                storeThePrefetchedHtmlForWhenALinkIsClicked(html, forDestination)
+            prefetchHtml(destination, html => {
+                storeThePrefetchedHtmlForWhenALinkIsClicked(html, destination)
             })
         })
 
-        whenThisLinkIsClicked(el, () => {
-            showProgressBar && showAndStartProgressBar()
+        whenThisLinkIsPressed(el, (whenItIsReleased) => {
+            let destination = extractDestinationFromLink(el)
+
+            prefetchHtml(destination, html => {
+                storeThePrefetchedHtmlForWhenALinkIsClicked(html, destination)
+            })
+
+            whenItIsReleased(() => {
+                navigateTo(destination)
+            })
+        })
+    })
 
-            let fromDestination = extractDestinationFromLink(el)
+    function navigateTo(destination) {
+        showProgressBar && showAndStartProgressBar()
 
-            fetchHtmlOrUsePrefetchedHtml(fromDestination, html => {
-                restoreScroll && storeScrollInformationInHtmlBeforeNavigatingAway()
+        fetchHtmlOrUsePrefetchedHtml(destination, html => {
+            restoreScroll && storeScrollInformationInHtmlBeforeNavigatingAway()
 
-                showProgressBar && finishAndHideProgressBar()
+            showProgressBar && finishAndHideProgressBar()
 
-                updateCurrentPageHtmlInHistoryStateForLaterBackButtonClicks()
+            updateCurrentPageHtmlInHistoryStateForLaterBackButtonClicks()
 
-                preventAlpineFromPickingUpDomChanges(Alpine, andAfterAllThis => {
-                    enablePersist && storePersistantElementsForLater()
+            preventAlpineFromPickingUpDomChanges(Alpine, andAfterAllThis => {
+                enablePersist && storePersistantElementsForLater()
 
-                    swapCurrentPageWithNewHtml(html, () => {
-                        enablePersist && putPersistantElementsBack()
+                swapCurrentPageWithNewHtml(html, () => {
+                    enablePersist && putPersistantElementsBack()
 
-                        restoreScroll && restoreScrollPosition()
+                    restoreScroll && restoreScrollPosition()
 
-                        fireEventForOtherLibariesToHookInto()
+                    fireEventForOtherLibariesToHookInto()
 
-                        updateUrlAndStoreLatestHtmlForFutureBackButtons(html, fromDestination)
+                    updateUrlAndStoreLatestHtmlForFutureBackButtons(html, destination)
 
-                        andAfterAllThis(() => {
-                            autofocus && autofocusElementsWithTheAutofocusAttribute()
+                    andAfterAllThis(() => {
+                        autofocus && autofocusElementsWithTheAutofocusAttribute()
 
-                            nowInitializeAlpineOnTheNewPage(Alpine)
-                        })
+                        nowInitializeAlpineOnTheNewPage(Alpine)
                     })
                 })
             })
         })
-    })
-
+    }
 
     whenTheBackOrForwardButtonIsClicked((html) => {
         // @todo: see if there's a way to update the current HTML BEFORE
diff --git a/packages/navigate/src/links.js b/packages/navigate/src/links.js
index 1db4afdb6..ee642a0c1 100644
--- a/packages/navigate/src/links.js
+++ b/packages/navigate/src/links.js
@@ -7,12 +7,46 @@ export function whenThisLinkIsClicked(el, callback) {
     })
 }
 
-export function whenThisLinkIsHovered(el, callback) {
+export function whenThisLinkIsPressed(el, callback) {
+    el.addEventListener('click', e => e.preventDefault())
+
+    el.addEventListener('mousedown', e => {
+        e.preventDefault()
+
+        callback((whenReleased) => {
+            let handler = e => {
+                e.preventDefault()
+
+                whenReleased()
+
+                el.removeEventListener('mouseup', handler)
+            }
+
+            el.addEventListener('mouseup', handler)
+        })
+    })
+}
+
+export function whenThisLinkIsHoveredFor(el, ms = 60, callback) {
     el.addEventListener('mouseenter', e => {
-        callback(e)
+        let timeout = setTimeout(() => {
+            callback(e)
+        }, ms)
+
+        let handler = () => {
+            clearTimeout(timeout)
+
+            el.removeEventListener('mouseleave', handler)
+        }
+
+        el.addEventListener('mouseleave', handler)
     })
 }
 
 export function extractDestinationFromLink(linkEl) {
-    return new URL(linkEl.getAttribute('href'), document.baseURI)
+    return createUrlObjectFromString(linkEl.getAttribute('href'))
+}
+
+export function createUrlObjectFromString(urlString) {
+    return new URL(urlString, document.baseURI)
 }
diff --git a/packages/navigate/src/page.js b/packages/navigate/src/page.js
index 1ef4acd9e..c313d1c6b 100644
--- a/packages/navigate/src/page.js
+++ b/packages/navigate/src/page.js
@@ -7,6 +7,8 @@ export function swapCurrentPageWithNewHtml(html, andThen) {
 
     mergeNewHead(newHead)
 
+    // mergeNewHead(newHead)
+
     prepNewScriptTagsToRun(newBody)
 
     transitionOut(document.body)
@@ -58,6 +60,12 @@ function mergeNewHead(newHead) {
     for (child of Array.from(newHead.children)) {
         if (isAsset(child)) {
             if (! headChildrenHtmlLookup.includes(child.outerHTML)) {
+                if (isTracked(child)) {
+                    setTimeout(() => window.location.reload())
+
+                    return
+                }
+
                 if (isScript(child)) {
                     document.head.appendChild(cloneScriptTag(child))
                 } else {
@@ -95,13 +103,17 @@ function cloneScriptTag(el) {
     return script
 }
 
-function isAsset (el) {
+function isTracked(el) {
+    return el.hasAttribute('data-navigate-track')
+}
+
+function isAsset(el) {
     return (el.tagName.toLowerCase() === 'link' && el.getAttribute('rel').toLowerCase() === 'stylesheet')
         || el.tagName.toLowerCase() === 'style'
         || el.tagName.toLowerCase() === 'script'
 }
 
-function isScript (el)   {
+function isScript(el)   {
     return el.tagName.toLowerCase() === 'script'
 }
 

From 5c12083f79aaaa2a1323149025e880b49f6e3c7e Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Sat, 1 Jul 2023 13:27:21 -0400
Subject: [PATCH 08/13] wip

---
 packages/alpinejs/src/alpine.js  |  3 ++-
 packages/navigate/src/index.js   | 10 +++++-----
 packages/navigate/src/links.js   | 32 ++++++++++++++++++++++++++++++++
 packages/navigate/src/persist.js |  8 ++++----
 4 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/packages/alpinejs/src/alpine.js b/packages/alpinejs/src/alpine.js
index d442c2f19..9c7781f4a 100644
--- a/packages/alpinejs/src/alpine.js
+++ b/packages/alpinejs/src/alpine.js
@@ -1,7 +1,7 @@
 import { setReactivityEngine, disableEffectScheduling, reactive, effect, release, raw } from './reactivity'
 import { mapAttributes, directive, setPrefix as prefix, prefix as prefixed } from './directives'
 import { start, addRootSelector, addInitSelector, closestRoot, findClosest, initTree, destroyTree, interceptInit } from './lifecycle'
-import { onAttributeRemoved, mutateDom, deferMutations, flushAndStopDeferringMutations, startObservingMutations, stopObservingMutations } from './mutation'
+import { onElRemoved, onAttributeRemoved, mutateDom, deferMutations, flushAndStopDeferringMutations, startObservingMutations, stopObservingMutations } from './mutation'
 import { mergeProxies, closestDataStack, addScopeToNode, scope as $data } from './scope'
 import { setEvaluator, evaluate, evaluateLater, dontAutoEvaluateFunctions } from './evaluator'
 import { transition } from './directives/x-transition'
@@ -46,6 +46,7 @@ let Alpine = {
     setEvaluator,
     mergeProxies,
     findClosest,
+    onElRemoved,
     closestRoot,
     destroyTree,
     interceptor, // INTERNAL: not public API and is subject to change without major release.
diff --git a/packages/navigate/src/index.js b/packages/navigate/src/index.js
index 249e1c0ff..0e9faad6f 100644
--- a/packages/navigate/src/index.js
+++ b/packages/navigate/src/index.js
@@ -7,6 +7,7 @@ import { finishAndHideProgressBar, showAndStartProgressBar } from "./bar"
 import { transition } from "alpinejs/src/directives/x-transition"
 import { swapCurrentPageWithNewHtml } from "./page"
 import { fetchHtml } from "./fetch"
+import { prefix } from "alpinejs/src/directives"
 
 let enablePersist = true
 let showProgressBar = true
@@ -20,13 +21,12 @@ export default function (Alpine) {
         )
     }
 
-    Alpine.directive('navigate', (el, { value, expression, modifiers }, { evaluateLater, cleanup }) => {
-        // "persisted" elements will be picked up by .querySelector, not this callback...
-        if (value === 'persist') return
+    Alpine.addInitSelector(() => `[${prefix('navigate')}]`)
 
-        let shouldPrefetch = modifiers.includes('prefetch') && modifiers.includes('hover')
+    Alpine.directive('navigate', (el, { value, expression, modifiers }, { evaluateLater, cleanup }) => {
+        let shouldPrefetchOnHover = modifiers.includes('hover')
 
-        shouldPrefetch && whenThisLinkIsHoveredFor(el, 60, () => {
+        shouldPrefetchOnHover && whenThisLinkIsHoveredFor(el, 60, () => {
             let destination = extractDestinationFromLink(el)
 
             prefetchHtml(destination, html => {
diff --git a/packages/navigate/src/links.js b/packages/navigate/src/links.js
index ee642a0c1..542ec8a7e 100644
--- a/packages/navigate/src/links.js
+++ b/packages/navigate/src/links.js
@@ -50,3 +50,35 @@ export function extractDestinationFromLink(linkEl) {
 export function createUrlObjectFromString(urlString) {
     return new URL(urlString, document.baseURI)
 }
+
+let handleLinkClick = () => {}
+let handleLinkHover = () => {}
+
+export function whenALinkIsClicked(callback) {
+    handleLinkClick = callback
+
+    initializeLinksForClicking()
+}
+
+export function whenALinkIsHovered(callback) {
+    handleLinkHover = callback
+
+    initializeLinksForHovering()
+}
+
+export function extractDestinationFromLink(linkEl) {
+    return new URL(linkEl.getAttribute('href'), document.baseURI)
+}
+
+export function hijackNewLinksOnThePage() {
+    initializeLinksForClicking()
+    initializeLinksForHovering()
+}
+
+function initializeLinksForClicking() {
+    getLinks().forEach(el => {
+        el.addEventListener('click', e => {
+            e.preventDefault()
+
+            handleLinkClick(el)
+        }
diff --git a/packages/navigate/src/persist.js b/packages/navigate/src/persist.js
index 79bb0d4b3..e56d99fa3 100644
--- a/packages/navigate/src/persist.js
+++ b/packages/navigate/src/persist.js
@@ -5,8 +5,8 @@ let els = {}
 export function storePersistantElementsForLater() {
     els = {}
 
-    document.querySelectorAll('[x-navigate\\:persist]').forEach(i => {
-        els[i.getAttribute('x-navigate:persist')] = i
+    document.querySelectorAll('[x-persist]').forEach(i => {
+        els[i.getAttribute('x-persist')] = i
 
         Alpine.mutateDom(() => {
             i.remove()
@@ -15,8 +15,8 @@ export function storePersistantElementsForLater() {
 }
 
 export function putPersistantElementsBack() {
-    document.querySelectorAll('[x-navigate\\:persist]').forEach(i => {
-        let old = els[i.getAttribute('x-navigate:persist')]
+    document.querySelectorAll('[x-persist]').forEach(i => {
+        let old = els[i.getAttribute('x-persist')]
 
         old._x_wasPersisted = true
 

From 2578870b659a8315b028b6e721d17c4acb6e747e Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Sun, 2 Jul 2023 11:09:33 -0400
Subject: [PATCH 09/13] wip

---
 packages/navigate/src/links.js | 38 +++-------------------------------
 1 file changed, 3 insertions(+), 35 deletions(-)

diff --git a/packages/navigate/src/links.js b/packages/navigate/src/links.js
index 542ec8a7e..6322fcf76 100644
--- a/packages/navigate/src/links.js
+++ b/packages/navigate/src/links.js
@@ -30,16 +30,16 @@ export function whenThisLinkIsPressed(el, callback) {
 export function whenThisLinkIsHoveredFor(el, ms = 60, callback) {
     el.addEventListener('mouseenter', e => {
         let timeout = setTimeout(() => {
-            callback(e)
+
         }, ms)
 
         let handler = () => {
-            clearTimeout(timeout)
-
+            clear
             el.removeEventListener('mouseleave', handler)
         }
 
         el.addEventListener('mouseleave', handler)
+        callback(e)
     })
 }
 
@@ -50,35 +50,3 @@ export function extractDestinationFromLink(linkEl) {
 export function createUrlObjectFromString(urlString) {
     return new URL(urlString, document.baseURI)
 }
-
-let handleLinkClick = () => {}
-let handleLinkHover = () => {}
-
-export function whenALinkIsClicked(callback) {
-    handleLinkClick = callback
-
-    initializeLinksForClicking()
-}
-
-export function whenALinkIsHovered(callback) {
-    handleLinkHover = callback
-
-    initializeLinksForHovering()
-}
-
-export function extractDestinationFromLink(linkEl) {
-    return new URL(linkEl.getAttribute('href'), document.baseURI)
-}
-
-export function hijackNewLinksOnThePage() {
-    initializeLinksForClicking()
-    initializeLinksForHovering()
-}
-
-function initializeLinksForClicking() {
-    getLinks().forEach(el => {
-        el.addEventListener('click', e => {
-            e.preventDefault()
-
-            handleLinkClick(el)
-        }

From 61be5cd25b2b246b29cc7d234537093c5a65dfa5 Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Thu, 6 Jul 2023 18:27:31 -0400
Subject: [PATCH 10/13] wip

---
 packages/navigate/src/page.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/navigate/src/page.js b/packages/navigate/src/page.js
index c313d1c6b..ec41265d1 100644
--- a/packages/navigate/src/page.js
+++ b/packages/navigate/src/page.js
@@ -57,7 +57,7 @@ function mergeNewHead(newHead) {
     // Only add scripts and styles that aren't already loaded on the page.
     let garbageCollector = document.createDocumentFragment()
 
-    for (child of Array.from(newHead.children)) {
+    for (let child of Array.from(newHead.children)) {
         if (isAsset(child)) {
             if (! headChildrenHtmlLookup.includes(child.outerHTML)) {
                 if (isTracked(child)) {
@@ -80,12 +80,12 @@ function mergeNewHead(newHead) {
     // How to free up the garbage collector?
 
     // Remove existing non-asset elements like meta, base, title, template.
-    for (child of Array.from(document.head.children)) {
+    for (let child of Array.from(document.head.children)) {
         if (! isAsset(child)) child.remove()
     }
 
     // Add new non-asset elements left over in the new head element.
-    for (child of Array.from(newHead.children)) {
+    for (let child of Array.from(newHead.children)) {
         document.head.appendChild(child)
     }
 }

From 394edf0057495fe005f3977d1eae7cc697c0ab3b Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Fri, 21 Jul 2023 16:08:46 -0500
Subject: [PATCH 11/13] wip

---
 packages/alpinejs/src/evaluator.js | 4 ++--
 packages/navigate/src/index.js     | 6 ++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/alpinejs/src/evaluator.js b/packages/alpinejs/src/evaluator.js
index 95e0d89e9..e5371ab54 100644
--- a/packages/alpinejs/src/evaluator.js
+++ b/packages/alpinejs/src/evaluator.js
@@ -68,9 +68,9 @@ function generateFunctionFromString(expression, el) {
     // calling function so that we don't throw an error AND a "return" statement can b e used.
     let rightSideSafeExpression = 0
         // Support expressions starting with "if" statements like: "if (...) doSomething()"
-        || /^[\n\s]*if.*\(.*\)/.test(expression)
+        || /^[\n\s]*if.*\(.*\)/.test(expression.trim())
         // Support expressions starting with "let/const" like: "let foo = 'bar'"
-        || /^(let|const)\s/.test(expression)
+        || /^(let|const)\s/.test(expression.trim())
             ? `(async()=>{ ${expression} })()`
             : expression
 
diff --git a/packages/navigate/src/index.js b/packages/navigate/src/index.js
index 0e9faad6f..8f65df72d 100644
--- a/packages/navigate/src/index.js
+++ b/packages/navigate/src/index.js
@@ -104,6 +104,12 @@ export default function (Alpine) {
 
         })
     })
+
+    // Because DOMContentLoaded is fired on first load,
+    // we should fire alpine:navigated as a replacement as well...
+    setTimeout(() => {
+        fireEventForOtherLibariesToHookInto()
+    })
 }
 
 function fetchHtmlOrUsePrefetchedHtml(fromDestination, callback) {

From a67fdb84f0593ff119c8274f69100bc27a73d41e Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Mon, 24 Jul 2023 11:08:32 -0400
Subject: [PATCH 12/13] wip

---
 index.html | 53 -----------------------------------------------------
 1 file changed, 53 deletions(-)

diff --git a/index.html b/index.html
index 63efb13e2..301d02489 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,4 @@
 <html>
-<<<<<<< HEAD
     <!-- <script src="./packages/intersect/dist/cdn.js" defer></script>
     <script src="./packages/morph/dist/cdn.js" defer></script>
     <script src="./packages/persist/dist/cdn.js"></script>
@@ -119,58 +118,6 @@ <h1 x-text="count"></h1>
     </div>
 
     <!-- Play around here... -->
-=======
-<script src="./packages/intersect/dist/cdn.js" defer></script>
-<script src="./packages/morph/dist/cdn.js" defer></script>
-<script src="./packages/history/dist/cdn.js"></script>
-<script src="./packages/persist/dist/cdn.js"></script>
-<script src="./packages/focus/dist/cdn.js"></script>
-<script src="./packages/mask/dist/cdn.js"></script>
-<script src="./packages/ui/dist/cdn.js" defer></script>
-<script src="./packages/alpinejs/dist/cdn.js" defer></script>
-<script src="//cdn.tailwindcss.com"></script>
-
-<div
-    x-data="{
-        query: '',
-        people: [
-            { id: 1, name: 'Wade Cooper' },
-            { id: 2, name: 'Arlene Mccoy' },
-            { id: 3, name: 'Devon Webb' },
-            { id: 4, name: 'Tom Cook' },
-            { id: 5, name: 'Tanya Fox' },
-            { id: 6, name: 'Hellen Schmidt' },
-            { id: 7, name: 'Caroline Schultz' },
-            { id: 8, name: 'Mason Heaney' },
-            { id: 9, name: 'Claudie Smitham' },
-            { id: 10, name: 'Emil Schaefer' },
-        ],
-        activePersons: [],
-        get queryPerson() {
-            if (! this.query) return null
-
-            return {
-                id: 11, name: this.query,
-            }
-        },
-        onSubmit(e) {
-            e.preventDefault()
-            console.log([...new FormData(e.currentTarget).entries()])
-        },
-        removePerson(person) {
-            this.activePersons = this.activePersons.filter((p) => p !== person)
-        }
-    }"
-    class="flex h-full w-screen justify-center space-x-4 bg-gray-50 p-12"
->
-    <div class="w-full max-w-4xl">
-        <div class="space-y-1">
-            <form @submit="onSubmit">
-                <div x-combobox x-model="activePersons" name="people" multiple>
-                    <label x-combobox:label class="block text-sm font-medium leading-5 text-gray-700">
-                        Assigned to
-                    </label>
->>>>>>> main
 
                     <div class="relative">
                         <div>Query: <span x-text="query"></span></div>

From 06a2547849b0723355b2526ce1f9c4b6572c5614 Mon Sep 17 00:00:00 2001
From: Caleb Porzio <calebporzio@gmail.com>
Date: Mon, 24 Jul 2023 11:33:47 -0400
Subject: [PATCH 13/13] Revert ui package.json change

---
 packages/ui/package.json        | 7 +------
 packages/ui/src/combobox.js     | 4 ++--
 packages/ui/src/list-context.js | 5 ++---
 packages/ui/src/listbox.js      | 2 +-
 4 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/packages/ui/package.json b/packages/ui/package.json
index 0d73a701a..1f7afe09e 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -13,10 +13,5 @@
     "main": "dist/module.cjs.js",
     "module": "dist/module.esm.js",
     "unpkg": "dist/cdn.min.js",
-    "devDependencies": {
-        "alpinejs": "file:../alpinejs"
-    },
-    "peerDependencies": {
-        "alpinejs": "^3.10.0"
-    }
+    "devDependencies": {}
 }
diff --git a/packages/ui/src/combobox.js b/packages/ui/src/combobox.js
index 595d851af..b0ac15b72 100644
--- a/packages/ui/src/combobox.js
+++ b/packages/ui/src/combobox.js
@@ -96,7 +96,7 @@ function handleRoot(el, Alpine) {
                     this.__nullable = Alpine.extractProp(el, 'nullable', false)
                     this.__compareBy = Alpine.extractProp(el, 'by')
 
-                    this.__context = generateContext(this.__isMultiple, 'vertical', () => this.__activateSelectedOrFirst())
+                    this.__context = generateContext(Alpine, this.__isMultiple, 'vertical', () => this.__activateSelectedOrFirst())
 
                     let defaultValue = Alpine.extractProp(el, 'default-value', this.__isMultiple ? [] : null)
 
@@ -109,7 +109,7 @@ function handleRoot(el, Alpine) {
                         Alpine.effect(() => {
                             // Everytime the value changes, we need to re-render the hidden inputs,
                             // if a user passed the "name" prop...
-                            this.__inputName && renderHiddenInputs(this.$el, this.__inputName, this.__value)
+                            this.__inputName && renderHiddenInputs(Alpine, this.$el, this.__inputName, this.__value)
                         })
                     })
                 },
diff --git a/packages/ui/src/list-context.js b/packages/ui/src/list-context.js
index 46f0ba464..fd51f8450 100644
--- a/packages/ui/src/list-context.js
+++ b/packages/ui/src/list-context.js
@@ -1,6 +1,5 @@
-import Alpine from "alpinejs";
 
-export function generateContext(multiple, orientation, activateSelectedOrFirst) {
+export function generateContext(Alpine, multiple, orientation, activateSelectedOrFirst) {
     return {
         /**
          * Main state...
@@ -326,7 +325,7 @@ function keyByValue(object, value) {
     return Object.keys(object).find(key => object[key] === value)
 }
 
-export function renderHiddenInputs(el, name, value) {
+export function renderHiddenInputs(Alpine, el, name, value) {
     // Create input elements...
     let newInputs = generateInputs(name, value)
 
diff --git a/packages/ui/src/listbox.js b/packages/ui/src/listbox.js
index 24e20fc52..72f099cd9 100644
--- a/packages/ui/src/listbox.js
+++ b/packages/ui/src/listbox.js
@@ -100,7 +100,7 @@ function handleRoot(el, Alpine) {
                     this.__compareBy = Alpine.extractProp(el, 'by')
                     this.__orientation = Alpine.extractProp(el, 'horizontal', false) ? 'horizontal' : 'vertical'
 
-                    this.__context = generateContext(this.__isMultiple, this.__orientation, () => this.$data.__activateSelectedOrFirst())
+                    this.__context = generateContext(Alpine, this.__isMultiple, this.__orientation, () => this.$data.__activateSelectedOrFirst())
 
                     let defaultValue = Alpine.extractProp(el, 'default-value', this.__isMultiple ? [] : null)
 
