Page Router

The Page Router handles page-specific code execution, and is defined in routes.ts.

Automatic Route Discovery (v2.0+)

New in v2.0: Pages are automatically discovered using the @page decorator. No manual route registration needed!

Using the @page Decorator

Simply decorate your page class with @page to auto-register it:

import { PageBase, page } from "@sygnal/sse-core";

@page('/')
export class HomePage extends PageBase {
  protected onPrepare(): void {
    console.log('Home page preparing...');
  }

  protected async onLoad(): Promise<void> {
    console.log('Home page loaded');
  }
}

Wildcard Routes

Use * for dynamic paths like CMS collections:

import { PageBase, page } from "@sygnal/sse-core";

@page('/blog/*')  // Matches /blog/post-1, /blog/post-2, etc.
export class BlogPage extends PageBase {
  protected async onLoad(): Promise<void> {
    // Access CMS item slug automatically
    console.log('Item slug:', this.pageInfo.itemSlug);
  }
}

Multiple Routes Per Page

Stack multiple @page decorators to handle multiple routes with one class:

import { PageBase, page } from "@sygnal/sse-core";

@page('/about')
@page('/about-us')
@page('/team')
export class AboutPage extends PageBase {
  protected async onLoad(): Promise<void> {
    // Check which route was accessed
    console.log('Current path:', this.pageInfo.path);
  }
}

Route Registration

In routes.ts, import your pages to trigger the decorators, then use getAllPages():

import { RouteDispatcher, getAllPages } from "@sygnal/sse-core";
import { Site } from "./site";

// Import pages to trigger @page decorators
import "./pages/home";
import "./pages/blog";
import "./pages/about";

export const routeDispatcher = (): RouteDispatcher => {
    const dispatcher = new RouteDispatcher(Site);
    dispatcher.routes = getAllPages();  // Auto-populated!
    return dispatcher;
}

Manual Route Registration (Legacy)

You can still manually register routes if needed:

import { RouteDispatcher } from "@sygnal/sse-core";
import { Site } from "./site";
import { HomePage } from "./pages/home";
import { BlogPage } from "./pages/blog";

export const routeDispatcher = (): RouteDispatcher => {
    const dispatcher = new RouteDispatcher(Site);
    dispatcher.routes = {
        '/': HomePage,
        '/blog/*': BlogPage,
    };
    return dispatcher;
}

How this Works

• Site code will be executed first.

• A visit to the home page at / will execute the code in our HomePage class.

• A visit to any blog page, e.g. /blog/2024-in-review or /blog/ai-futures-2025 will match our /blog/* route and execute the code in our BlogPage class.

• A visit to any other page, such as /about will execute nothing, because there is no route defined for it.

• A visit to /blog by itself, which might be a blog directory page, will execute nothing, because it does not match any patterns.

  • If you wanted /blog to also execute your BlogPage code, you could simply add another route for '/blog`: BlogPage .

• Each route can execute only one Page class.

• Each route must be unique, but you can add as many routes as you like.