Client session

For now we only have a multi-page application (MPA). Each time we navigate between pages, a full reload is done in the client. A new DOM is built with the new HTML and the JavaScript context of the previous page is lost. You can't keep any data in JavaScript memory between the previous and the next page.

This can be problematic if some client-side JS relies on a state. If the client navigates away and back, the state is lost and re-initialized.

Client session fixes that, by making a MPA work like a Single Page Application (SPA).

Using a session

In a script module (session.script.ts for example) add the following code:

import { Session } from '';

export function main() {
    const session = new Session();

And import this module in your page descriptor (with the script loader configured).

Once the start method is called, the session will hijack every navigation on the page (link click, popstate) and prevent the default behavior of the browser.

Instead, the session will fetch the target page in the background, and patch the current DOM with a diff from the DOM of the new page. That way the JavaScript context is preserved, while at the same time getting the new page.