wip

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

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()

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))
     })