Pathway Router

A lightweight client-side router that manages navigation, history, caching, and rendering of content within a container element.

This is an asynchronous vanilla JS router, simulating the AJAX process, but with some improvements. Inspired by the PJAX Router.

Options

Configuration options for the Pathway router.

| Option | Type | Default | Description | | --------------------- | ------------------------- | --------------------- | --------------------------------------- | | containerSelector | string | 'body' | CSS selector for the content container. | | defaultLinkSelector | string | 'a' | CSS selector for valid links. | | preloadLinkSelector | string | '[data-preload-link]' | CSS selector for links to preload. | | excludeLinkSelector | string | '[data-exclude-link]' | CSS selector for links to exclude. | | historyStackSize | number | 10 | Maximum number of history entries. | | cacheCapacity | number | 10 | Maximum number of pages cached. | | transitionDuration | number | 0 | Transition duration in milliseconds. | | updateRouterHistory | boolean | true | Whether to update browser history. | | popstateEvent | boolean | true | Enable handling of popstate events. | | clickEvent | boolean | true | Enable link click interception. | | mutationObserver | boolean | true | Enable monitoring DOM mutations. | | scrollRestoration | boolean | false | Restore scroll position on navigation. | | onNavigate | OnNavigateCallback | function () {} | Called before navigation. | | onLoadingChange | OnLoadingChangeCallback | function () {} | Called on loading state changes. | | onBeforeLeave | OnBeforeLeaveCallback | function () {} | Called before leaving a page. | | onBeforeRender | OnBeforeRenderCallback | function () {} | Called before rendering content. | | onAfterRender | OnAfterRenderCallback | function () {} | Called after rendering content. | | onError | OnErrorCallback | function () {} | Called on navigation/rendering error. |

Callbacks

These callbacks allow you to hook into the lifecycle of navigation and rendering.

OnLoadingChangeCallback

Called when loading state changes.

(router: Pathway, state: boolean) => void

• router: The active Pathway instance.
• state: true if loading, false otherwise.

OnNavigateCallback

Called before navigating to a new URL.

(router: Pathway, url: string) => void

OnBeforeLeaveCallback

Called before leaving the current page.

(router: Pathway) => void

OnBeforeRenderCallback

Called before rendering new content.

(router: Pathway) => void

OnAfterRenderCallback

Called after rendering new content.

(router: Pathway) => void

OnErrorCallback

Called when a navigation or rendering error occurs.

(router: Pathway, error: ErrorEvent) => void

Example

const router = new Pathway({
  containerSelector: "#app",
  excludeLinkSelector: "a.external, a[download]",
  cacheCapacity: 20,
  scrollRestoration: true,

  onNavigate: (router, url) => {
    console.log("Navigating to:", url);
  },
  onAfterRender: (router) => {
    console.log("New content rendered!");
  },
  onError: (router, error) => {
    console.error("Routing error:", error);
  }
});