Skip to content

Docs: Document NavigationDelegate and MemoryNavigationDelegate for SSR and Headless Environments #766

Description

@nathanschmid08

Summary & Feature Context

The routing architecture of Avenx-JS (lib/core/runtime/navigation/) abstracts browser location management through the NavigationDelegate interface. While BrowserNavigationDelegate interacts directly with window.location.hash and document.title, MemoryNavigationDelegate (lib/core/runtime/navigation/MemoryNavigationDelegate.js) manages route state strictly in memory.

This enables running AvenxRouter in Node.js, Server-Side Rendering (SSR), and headless unit test environments without relying on window, document, or DOM event listeners. Currently, NavigationDelegate and MemoryNavigationDelegate are undocumented.

Detailed Scope of Work

1. NavigationDelegate Abstract Base Class Contract

Document the interface methods defined in NavigationDelegate.js:

  • getHash(): string — Returns the current hash string (e.g. '#/').
  • setHash(hash: string): void — Updates location to the specified hash string.
  • onHashChange(callback: (hash: string) => void): Function — Registers a hash change listener and returns an unregister function.
  • onLinkClick(callback: (route: string) => void): Function — Registers a [data-ax-link] click listener and returns an unregister function.
  • setTitle(title: string): void — Updates the page title.
  • registerRouter(router: object) / unregisterRouter(router: object): Manages active router instances.
  • getActiveRouters(): Set<object> — Returns active routers.
  • destroy(): void — Cleans up event listeners and internal state.

2. MemoryNavigationDelegate Usage & Configuration

  • Document MemoryNavigationDelegate instantiation: new MemoryNavigationDelegate(initialHash = '#/').
  • Explain how MemoryNavigationDelegate maintains this.currentHash and this.title in memory without DOM side-effects.
  • Document passing custom delegates to AvenxApp.initRouter(routes, { navigationDelegate }):
    import { AvenxApp } from 'avenx-js';
    import { MemoryNavigationDelegate } from 'avenx-js/runtime/navigation';
    
    const delegate = new MemoryNavigationDelegate('#/home');
    const router = AvenxApp.initRouter(routes, { navigationDelegate: delegate });

3. Headless Testing & SSR Examples

  • Provide a Jest / Vitest unit testing example demonstrating route navigation, route guard evaluation, and title updates using MemoryNavigationDelegate.
  • Detail teardown and cleanup using delegate.destroy() and router.destroy().

Target Location in Docs Site

  • New section in docs/src/content/docs/api-reference/router-guard.md and docs/src/content/docs/api-reference/testing.md.

Metadata

Metadata

Labels

documentationImprovements or additions to documentationenhancementNew feature or requestgood first issueGood for newcomers

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions