@anjunar/scalajs-ui-router

Typed route tables, nested outlets, navigation links, and route failures for Scala JS UI 1.0 TypeScript applications.

Overview

The package is a TypeScript facade over ui.router.Router. Matching, async loading, history handling, localized URLs, and SSR status remain in the Scala.js runtime linked by @anjunar/scalajs-ui-bridge.

Installation

npm install @anjunar/scalajs-ui-core @anjunar/scalajs-ui-router @anjunar/scalajs-ui-bridge @anjunar/scalajs-ui

Quick start

import { div, text } from "@anjunar/scalajs-ui-core";
import { router, routerLink, routerOutlet, view } from "@anjunar/scalajs-ui-router";

const routes = [
  view("/", async () => () => div(() => text("Home"))),
  view("/docs", async () => () => {
    div(() => {
      text("Documentation");
      routerOutlet();
    });
  }, {
    children: [view("page/:id", async (context) => () => div(() => text(context.params["id"] ?? "")))],
  }),
];

router(routes, {}, (outlet) => {
  div(() => {
    routerLink("/", "Home");
    div(() => outlet());
  });
});

view(path, load, options?) loaders return a PageBody, a synchronous body that composes through the core DSL. errorRoute(path, status, load) declares a route with a 4xx or 5xx status.

SSR and hydration

import { hydrate, renderToString } from "@anjunar/scalajs-ui-core";
import "@anjunar/scalajs-ui-bridge";

const server = await renderToString(() => router(routes, {
  url: requestPath,
  onFailure: () => "/404",
  renderErrorsOnServer: true,
}, appShell));

await hydrate(document.getElementById("root")!, () => router(routes, {}, appShell));

Using only @anjunar/scalajs-ui-router (no controls/forms/editor)? Import @anjunar/scalajs-ui-bridge/router instead of the bare package to skip installing the other features -- see that package's README.

The server resolves the first request and returns the matched route status. routerLink remains an ordinary anchor without JavaScript; hydration enhances it with client-side navigation. A shell receives outlet, so it can place the root route inside its own Drawer or Viewport. Existing zero-argument shell callbacks remain supported and receive the routed page as their next sibling. Nested routes render only where a parent calls routerOutlet().

API overview

• view, errorRoute, router
• routerOutlet, routerLink
• RouteContext, RouterConfig, RouteDefinition, RouteFailure
• PageBody, RouteLoad, ViewOptions, LinkOptions

Related modules

• @anjunar/scalajs-ui-core provides the DSL and SSR entry points.
• @anjunar/scalajs-ui-viewport commonly wraps the routed application.