sveltejs / sveltejs/kit

Feat: `onLeave` hook for load functions

Open
#12,724 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

needs-decision
Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the problem

I have the need to use WS and SSE subscriptions on different pages across my site.

Currently, my known best way to do it is by initializing the subscription on .svelte files and using either an $effect or onMount to setup the cleanup funcion.

There was some discussion here about whether initializing subscriptions in +layout.ts files would provide any benefit over doing it on .svelte files and I found these:

https://github.com/sveltejs/svelte/discussions/12318#discussioncomment-10774342

Of course, this only applies to adapters that only run the load functions on client side (such as adapter-static, which is the one I use).

Describe the proposed solution

Adding an onLeave hook to load functions that allows passing a callback that is executed when navigating out of the page or layout.

export function load({ onLeave }) {
  const notifications = subscribe("/notifications");
  onLeave (()=>notifications.cancel());
  return {notifications};
}

This would start the subscription when the page is preloaded, make the notifications subscription available to all child layouts and pages, cancel the current subscription and resubscribe via invalidateAll/invalidate, all without having to put data fetching and manipulation logic in .svelte files, which I consider should only hold UI logic, specially when using adapter-static configured for true SPAs, where load functions are free from restrictions arising from data having to cross the server->browser gap.

The proposed function signature could be one of the following

type OnLeave = (from: URL, to: URL)=>Promise<void>;
type OnLeave = (from: URL)=>Promise<void>;
type OnLeave = ()=>Promise<void>;

If multiple +layout.ts/+page.ts files define an onLeave callback, they should be executed serially in reverse order (starting from the innermost +layout.ts/+page.ts) to prevent child layout callbacks from accessing objects that have been already disposed of on parent onLeave callbacks.

Alternatives considered

No response

Importance

would make my life easier

Additional Information

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing load lifecycle and navigation handling for +layout.ts and +page.ts, including adapter-static behavior and invalidate/invalidateAll. Define the hook’s URL signature, callback ordering, disposal timing, and tests for nested layouts; done means the lifecycle is specified and covered without breaking existing load behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
32/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.