Overview & Philosophy
ln-router is declared globally with route definitions in <template data-ln-route="..."> elements rendering into <main data-ln-outlet> or auxiliary targets. It intercepts clicks on same-origin <a> tags and listens for popstate, matches the URL against specificity-ranked route patterns, and clones templates into designated outlets with View Transitions support. It unmounts old views by calling .destroy() on child components, leaving data fetching and view filling to route coordinators.
In accordance with project doctrine, the router does **not** fetch data, sanitise templates, or run data-binding logic. Instead, the router mounts the view, and the **page coordinator** listens for navigation events to populate the templates using the static text interpolation helper fillTemplate.
The /profile route below loads its markup from an external file via ln-include (data-ln-include="tpl/router-profile.html"). ln-router itself needs no changes — it still finds the <template data-ln-route> and clones its .content exactly as before, only now that content is populated asynchronously before the first clone.
🏠 Dashboard View
Welcome to the Router Home Page! This is a static route mapped to /.
👤 User Details View (Route: /users/:id)
Displaying user with ID: {{id}}
Query parameters: None
📑 User #{{id}} — Log View (Primary)
The primary outlet shows the log context. The detail-pane auxiliary region renders the actual log entries below.
📑 Logs for User #{{id}}
- User logged in at 10:00 AM
- Updated profile at 10:15 AM
- Viewed settings at 10:30 AM
⚠️ 404 - Page Not Found
The path you navigated to does not exist. Handled by the catch-all wildcard route *.
Sidebar — User {{id}}
Type something — this input survives param-only changes:
Navigate /users/42 → /users/43 to see state survival.
Sidebar — Profile Mode
This is a DIFFERENT sidebar template. The sidebar was swapped (keep-region template-change).
Sidebar — Default
No user selected. Navigate to /users/:id to see the persistent sidebar.
Live Router Playground
1. In-App Navigation Links
- Dashboard (/)
- Profile (/profile)
- User #42 (/users/42)
- User #99 with Query Params (/users/99?tab=settings&theme=dark)
- User #42 Logs - Target: detail-pane (/users/42/logs)
- Test 404 Wildcard Route (/non-existent-page)
Multi-Region Demo
- Multi-region: User #42 (sidebar renders)
- Param change: User #43 (sidebar SURVIVES if keep)
- Profile (sidebar swaps to different template)
2. Programmatic Navigation API
3. Link Interception Safety Guards
- External Link (Google.com - target="_blank")
- Download Attribute link
- Internal Page Hash Link (#test-anchor)
Default Outlet
🏠 SSR Server-Rendered View
This is pre-rendered SSR content. Click a link above to test routing.
Target Region: detail-pane
Logs will render here...