[feat] beforeNavigate and afterNavigate lifecycle functions

[Rich-Harris]

Todo (from discussion below):

• rename to beforeNavigate and afterNavigate
• make beforeNavigate callback synchronous
• pass full navigation object ({from, to}) to beforeNavigate (and afterNavigate?)
• add a cancel function to beforeNavigate instead of returning false
• beforeNavigate should work with external navigation as well as internal navigation
• beforeNavigate should call onbeforeunload on the user's behalf

---

For whatever reason, I can't sync my local version of #2982 with that branch, so I've duplicated it for further review. All credit belongs to @zommerberg!

Fixes #2974, fixes #560, and fixes #552.

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests

• Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

• If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpx changeset and following the prompts. All changesets should be patch until SvelteKit 1.0

[Rich-Harris]

Example of a 'you have unsaved changes' modal that works with internal navigations and beforeunload:

<script>
  import { beforeNavigate, goto } from '$app/navigation';

  let intercepted = null;
  let unsaved = true;

  beforeNavigate(({ to, cancel }) => {
    if (!unsaved) return; // nothing to do
    if (intercepted) return; // we're here because of the `goto`

    cancel();

    // if `to` has a value, we're navigating internally and
    // should display our own modal. otherwise, we're in
    // beforeunload, which means the user will already
    // see a system dialog and doesn't need ours too
    if (to) {
      intercepted = { url: to };
    }
  });
</script>

{#if intercepted}
  <div class="modal-background" on:click={() => (intercepted = null)}>
    <div class="modal" on:click={(e) => e.stopPropagation()}>
      <p>you have unsaved changes!</p>
      <button on:click={() => (intercepted = null)}>stay on page</button>
      <button on:click={() => goto(intercepted.url)}>leave page</button>
    </div>
  </div>
{/if}

[bluwy]

A late review, but I have a question below 😬

[bluwy]

I think we can remove this async

[PatrickG]

Sorry I'm late to the party.

Example of a 'you have unsaved changes' modal that works with internal navigations and beforeunload:

<script>
  import { beforeNavigate, goto } from '$app/navigation';

  let intercepted = null;
  let unsaved = true;

  beforeNavigate(({ to, cancel }) => {
    if (!unsaved) return; // nothing to do
    if (intercepted) return; // we're here because of the `goto`

    cancel();

    // if `to` has a value, we're navigating internally and
    // should display our own modal. otherwise, we're in
    // beforeunload, which means the user will already
    // see a system dialog and doesn't need ours too
    if (to) {
      intercepted = { url: to };
    }
  });
</script>

{#if intercepted}
  <div class="modal-background" on:click={() => (intercepted = null)}>
    <div class="modal" on:click={(e) => e.stopPropagation()}>
      <p>you have unsaved changes!</p>
      <button on:click={() => (intercepted = null)}>stay on page</button>
      <button on:click={() => goto(intercepted.url)}>leave page</button>
    </div>
  </div>
{/if}

The only problem with this is if the user navigated backwards with the browser controls.
The modal will be presented, the user clicks "leave page". If the user then navigates back one more entry, he ends up on the page that presented the modal instead of two pages before that.
That's where async blocking would be helpful.

[benmccann]

Looks like you got it figured out: https://discord.com/channels/457912077277855764/939868205869072444/946323798477656084

[akshg05]

Hello, I followed the above but am and am able to block the navigation but onbeforeunload is not being called and I don't see the native popup.
Is there something missing which need to be done?