Abort navigation: `throw Abort()` + maybe new hook

[ego-lay-atman-bay]

Description

The browser has a built in way to allow developers to show an "unsaved changes" dialog when the user tries to close the page, press the forward or backward button, or click on a link.

Getting it to show up when you close the page is easy and works flawlessly

import { ref } from 'vue'
import { useEventListener } from '@vueuse/core'

const isDirty = ref<boolean>(true)
useEventListener('beforeunload', (e) => {
    if (isDirty.value) {
        e.preventDefault()
    }
})

However, when using client side navigation, this dialog fails to show up whenever you use the navigation buttons or click on a link. Those only trigger when vike doesn't take control over navigation, specifically anytime the user navigates to a different website, either through browser navigation or clicking on an external link.

Here's a small demo showcasing the issue: https://github.com/ego-lay-atman-bay/vike-testing/tree/save-as

I am personally wanting to use this to keep users from accidentally closing my game (cause it's so easy to click off it and lose all your progress), but it's also just a generally useful feature for anything that has to do with user data. I think it would be very helpful if there's a way to at least tell vike to not take control over navigation temporarily in order to allow this popup to trigger.

[brillout]

How about a new prop pageContext.abort that, when set to true, aborts the navigation?

You could use it in any hook, such as +onBeforeRoute.client.js or +onBeforeRender.client.js:

// pages/+onBeforeRoute.client.js (or some other hook)
// Environment: client

const isDirty = ref<boolean>(true)
export function onBeforeRoute(pageContext) {
  if (isDirty.value) {
    pageContext.abort = true
  }
}

Contribution welcome in case you're up for it — AFAICT it might be relatively easy to implement (the client-side rendering already as an internal abort mechanism).

[brillout]

Actually, throw Abort() would be even better:

// pages/+onBeforeRoute.client.js (or some other hook)
// Environment: client

import { Abort } from 'vike/abort'

const isDirty = ref<boolean>(true)
export function onBeforeRoute(pageContext) {
  if (isDirty.value) {
    throw Abort()
  }
}

See also:

• throw render()
• throw redirect()

Same: contribution welcome (even easier to implement than pageContext.abort).

[ego-lay-atman-bay]

Yeah, throw Abort() would work better.

[ego-lay-atman-bay]

Alright, I got something working here, it may be a bit scuffed (and I didn't bother fixing typing errors), but it at least worked. I also ran into an issue where the +onPageTransitionStart() was still being called when the user selects "cancel", resulting in a blank page.

P.S. I updated my example repo to use this new throw Abort() from my fork.

[brillout]

Looks good, PR welcome, ideally with docs and a simple test at /test/abort/.