Code Structure

SSE encourages you to separate code into TypeScript classes that can be easily managed and organized.

These include;

• Site-level classes, which contain site-wide functionality

• Page-level classes, which contain page-specific functionality

• Component-level classes, which contain code specific to a reusable component

The IModule Interface

All of these classes implement SSE's IModule interface, for simplicity.

It includes two entry points for every site, page, and component that is loaded.

setup() entry point

setup() code runs synchronously, inline, at the end of the </head>.

It's used for special setup tasks;

• That must be performed early in the page load.

• Which do not require the DOM to be loaded.

exec() entry point

exec() code is deferred until the DOM is fully loaded.

It's used for most typical page work you'd do, such as;

• Element manipulations

• Fetch and data loading

Let's look at how the this is presented in the classes.

Site Class

Exists at /src/site.ts

Here's a basic implementation, which does nothing.

import { IModule, Page } from "@sygnal/sse";

export class Site implements IModule { 

  constructor() {
  }

  setup() {
  }
  
  exec() {
    console.log("Site loaded.")
  }

}

Page & Component Classes

A page or a component class has exactly the same structure, and executes in the same way.

By convention, all Page classes are stored in /src/pagefolder, and all Component classes in /src/component.

To create one, you'd just;

• Duplicate an existing Page or Component TypeScript file

• Give it a unique class name. By convention, Pages end in Page, and Components and in Component.

• Once created, add it to the Page Router.

Here's an example Home page class;

import { IModule, Page } from "@sygnal/sse";

export class HomePage implements IModule { 

  constructor() {
  }

  setup() {
  }
  
  exec() {
    console.log("Home page loaded.")
  }

}

Usage Notes

Generally speaking, all code wold go in the exec() method.

• Site code will execute on all pages, and will execute first.

• Page code will execute on pages that you've mapped in the Page Router, and will execute second.

Components are still under specification.