add router resolver service, closes #11

Author: Syndesi

CHANGELOG.md

@@ -5,6 +5,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Unreleased
+### Added
+- Add router resolver service, closes #11.
 
 ## 0.0.9 - 2026-01-25
 ### Added

core/package.json

@@ -145,6 +145,7 @@
     "last 1 years and not dead"
   ],
   "dependencies": {
+    "lit": "^3.3.2",
     "lru-cache": "^11.1.0",
     "luxon": "^3.4.4",
     "tslib": "^2.8.1",

core/pnpm-lock.yaml

@@ -0,0 +1,12 @@
+import { LitElement, TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { html } from 'lit/static-html.js';
+
+@customElement('ember-nexus-app-core-page-error-404')
+class PageError404 extends LitElement {
+  render(): TemplateResult {
+    return html`<div>Error 404: Route could not be resolved.</div>`;
+  }
+}
+
+export { PageError404 };

core/src/Component/Page/PageError404.ts

@@ -0,0 +1 @@
+export * from './PageError404.js';

core/src/Component/Page/index.ts

@@ -0,0 +1,118 @@
+import { LitElement, TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { html, unsafeStatic } from 'lit/static-html.js';
+
+import { GetServiceResolverEvent } from '../BrowserEvent/index.js';
+import { RouteResolver } from '../Service/index.js';
+import { RouteConfiguration } from '../Type/Definition/RouteConfiguration.js';
+
+@customElement('ember-nexus-app-core-router')
+class Router extends LitElement {
+  protected _routeConfiguration: RouteConfiguration | null = null;
+
+  protected _routeResolver: RouteResolver | null = null;
+
+  handleNewRoute(route: string): void {
+    // eslint-disable-next-line no-console
+    console.log(`handle new route: ${route}`);
+    this._routeResolver
+      ?.findRouteConfiguration(route)
+      .then((routeConfiguration) => {
+        if (routeConfiguration === null) {
+          // eslint-disable-next-line no-console
+          console.log(`unable to resolve route: ${route}`);
+          return;
+        }
+        this._routeConfiguration = routeConfiguration;
+        return;
+      })
+      .catch((e) => {
+        // eslint-disable-next-line no-console
+        console.log('error during resolving route');
+        // eslint-disable-next-line no-console
+        console.log(e);
+      });
+  }
+
+  handlePopStateEvent(): void {
+    // eslint-disable-next-line no-console
+    console.log('(popstate) Location changed to: ', window.location.pathname);
+    this.handleNewRoute(window.location.pathname);
+  }
+
+  handleLinkClickEvent(event: PointerEvent): void {
+    const target = event.target;
+    if (target === null) {
+      return;
+    }
+    if (!(target instanceof HTMLElement)) {
+      return;
+    }
+
+    const newRawUrl = target.attributes.getNamedItem('href')?.value;
+    if (newRawUrl === null || newRawUrl === undefined) {
+      return;
+    }
+
+    const currentUrl = window.location.origin;
+
+    // Create a new URL object to resolve the relative path to an absolute URL
+    const newAbsoluteUrl = new URL(newRawUrl as string, currentUrl);
+
+    if (newAbsoluteUrl.host !== window.location.host) {
+      // clicked link to different domain, ignoring it
+      return;
+    }
+
+    // eslint-disable-next-line no-console
+    console.log(`new absolute url: ${newAbsoluteUrl}`);
+    history.pushState({}, '', newAbsoluteUrl);
+    event.preventDefault();
+
+    this.handleNewRoute(newAbsoluteUrl.pathname);
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    window.addEventListener('popstate', this.handlePopStateEvent.bind(this));
+    document.addEventListener('click', this.handleLinkClickEvent.bind(this));
+
+    const getServiceResolverEvent = new GetServiceResolverEvent();
+    this.dispatchEvent(getServiceResolverEvent);
+    const serviceResolver = getServiceResolverEvent.getServiceResolver();
+    if (serviceResolver !== null) {
+      const routeResolver = serviceResolver.getService<RouteResolver>(RouteResolver.identifier);
+      if (routeResolver !== null) {
+        // eslint-disable-next-line no-console
+        console.log('router init complete');
+        this._routeResolver = routeResolver;
+        this.handleNewRoute(window.location.pathname);
+      }
+    }
+  }
+
+  disconnectedCallback(): void {
+    window.removeEventListener('popstate', this.handlePopStateEvent);
+    document.removeEventListener('click', this.handleLinkClickEvent);
+    super.disconnectedCallback();
+  }
+
+  protected getRouteWebComponentTag(): string | null {
+    if (this._routeConfiguration === null) {
+      return null;
+    }
+    if (typeof this._routeConfiguration.webComponent === 'string') {
+      return typeof this._routeConfiguration.webComponent;
+    }
+    // todo: support function based routes
+    return null;
+  }
+
+  render(): TemplateResult {
+    const routeWebComponentTag = this.getRouteWebComponentTag() ?? 'ember-nexus-app-core-page-error-404';
+    const routeWebComponent = unsafeStatic(routeWebComponentTag);
+    return html`<${routeWebComponent}></${routeWebComponent}>`;
+  }
+}
+
+export { Router };

core/src/Component/Router.ts

@@ -0,0 +1,2 @@
+export * as Page from './Page/index.js';
+export * from './Router.js';

core/src/Component/index.ts

@@ -36,6 +36,7 @@ import {
   ElementParser,
   EventDispatcher,
   FetchHelper,
+  RouteResolver,
   ServiceResolver,
   TokenParser,
 } from './Service/index.js';
@@ -51,6 +52,8 @@ function init(rootNode: HTMLElement): ServiceResolver {
 
   serviceResolver.setService(ServiceIdentifier.icon, new Registry());
 
+  serviceResolver.setService(ServiceIdentifier.routeResolver, new RouteResolver());
+
   const logger = new Logger({
     name: 'app-core',
     type: 'pretty',

core/src/Init.ts

@@ -0,0 +1,109 @@
+import { RouteConfiguration, RouteIdentifier } from '../Type/Definition/index.js';
+import { RouteNode } from '../Type/Definition/RouteNode.js';
+import { ServiceIdentifier } from '../Type/Enum/index.js';
+
+class RouteResolver {
+  static identifier: ServiceIdentifier = ServiceIdentifier.routeResolver;
+  //todo: add some way to replace and/or disable specific routes
+  private readonly routes: Map<RouteIdentifier, RouteConfiguration> = new Map();
+  private rootNode: RouteNode = new RouteNode();
+
+  hasRouteConfiguration(routeIdentifier: RouteIdentifier): boolean {
+    return this.routes.has(String(routeIdentifier));
+  }
+
+  getRouteConfiguration(routeIdentifier: RouteIdentifier): null | RouteConfiguration {
+    const routeEntry = this.routes.get(String(routeIdentifier));
+    if (routeEntry === undefined) {
+      return null;
+    }
+    return routeEntry;
+  }
+
+  getRouteConfigurationOrFail(routeIdentifier: RouteIdentifier): RouteConfiguration {
+    const routeEntry = this.routes.get(String(routeIdentifier));
+    if (routeEntry === undefined) {
+      throw new Error(`Requested route with identifier ${String(routeIdentifier)} could not be resolved.`);
+    }
+    return routeEntry;
+  }
+
+  private getSegmentsFromRoute(input: string): string[] {
+    return input
+      .replace(/^\/+|\/+$/g, '')
+      .split('/')
+      .filter(Boolean);
+  }
+
+  addRouteConfiguration(routeConfiguration: RouteConfiguration): RouteResolver {
+    this.routes.set(String(routeConfiguration.routeIdentifier), routeConfiguration);
+
+    const segments = this.getSegmentsFromRoute(routeConfiguration.route);
+    let node = this.rootNode;
+    for (let i = 0; i < segments.length; i++) {
+      node = node.getChildRouteNode(segments[i]);
+    }
+    node.addRouteHandler(routeConfiguration.routeIdentifier);
+
+    return this;
+  }
+
+  findRouteConfigurationsByNodeAndSegments(node: RouteNode, segments: string[]): RouteIdentifier[] {
+    if (segments.length === 0) {
+      return node.getRouteHandlers();
+    }
+    const routeIdentifiers: RouteIdentifier[] = [];
+    if (node.hasChildRouteNode(segments[0])) {
+      routeIdentifiers.push(
+        ...this.findRouteConfigurationsByNodeAndSegments(node.getChildRouteNode(segments[0]), segments.slice(1)),
+      );
+    }
+    if (node.hasChildRouteNode('*')) {
+      routeIdentifiers.push(
+        ...this.findRouteConfigurationsByNodeAndSegments(node.getChildRouteNode('*'), segments.slice(1)),
+      );
+    }
+
+    return routeIdentifiers;
+  }
+
+  async findRouteConfiguration(route: string): Promise<RouteConfiguration | null> {
+    const segments = this.getSegmentsFromRoute(route);
+    let routeIdentifiers = this.findRouteConfigurationsByNodeAndSegments(this.rootNode, segments);
+    routeIdentifiers = [...new Set(routeIdentifiers)];
+
+    const routeConfigurations: RouteConfiguration[] = routeIdentifiers
+      .map((id) => this.getRouteConfiguration(id))
+      .filter((config): config is RouteConfiguration => config !== null)
+      .sort((a, b) => b.priority - a.priority);
+
+    for (const config of routeConfigurations) {
+      if (await config.guard(route, [], null)) {
+        return config;
+      }
+    }
+
+    return null;
+  }
+
+  deleteRouteConfiguration(routeIdentifier: RouteIdentifier): RouteResolver {
+    // todo: add warning that deleting and re-defining identical route identifiers can lead to issues
+    this.routes.delete(String(routeIdentifier));
+    return this;
+  }
+
+  getRouteIdentifiers(): RouteIdentifier[] {
+    return [...this.routes.keys()];
+  }
+
+  getRoutesConfigurations(): RouteConfiguration[] {
+    return [...this.routes.values()];
+  }
+
+  clearRoutes(): RouteResolver {
+    this.routes.clear();
+    return this;
+  }
+}
+
+export { RouteResolver };

core/src/Service/RouteResolver.ts

@@ -5,5 +5,6 @@ export * from './ElementParser.js';
 export * from './EventDispatcher.js';
 export * from './FetchHelper.js';
 export * from './Logger.js';
+export * from './RouteResolver.js';
 export * from './ServiceResolver.js';
 export * from './TokenParser.js';