feat: multi-page routing demo with 4 routes

- Home/Counter/Todos/About with hash navigation
- State persists across route changes
- Uses existing router infrastructure (no compiler changes)
- navigate keyword, matchRoute, _route signal
This commit is contained in:
enzotar 2026-02-26 17:04:49 -08:00
parent f63ff52e2a
commit 51c9c60bfe

81
examples/router-demo.ds Normal file
View file

@ -0,0 +1,81 @@
-- DreamStack Multi-Page App
-- Client-side routing with hash navigation
import { Card } from "../registry/components/card"
import { Badge } from "../registry/components/badge"
let count = 0
let todos = ["Buy groceries", "Walk the dog"]
let newTodo = ""
-- Navigation bar (shared across all routes)
view nav = row [
text "🧭 MyApp" { variant: "title" }
button "🏠 Home" { click: navigate "/", variant: "primary" }
button "🔢 Counter" { click: navigate "/counter", variant: "secondary" }
button "📝 Todos" { click: navigate "/todos", variant: "secondary" }
button " About" { click: navigate "/about", variant: "ghost" }
]
-- Route: Home
route "/" -> column [
text "🏠 Welcome Home" { variant: "title" }
text "Navigate using the buttons above" { variant: "subtitle" }
row [
Card { title: "Counter", subtitle: "reactive state" } [
text "Count: {count}" { variant: "title" }
Badge { label: "LIVE", variant: "success" }
]
Card { title: "Todos", subtitle: "dynamic lists" } [
Badge { label: "ACTIVE", variant: "info" }
]
]
]
-- Route: Counter
route "/counter" -> column [
text "🔢 Counter Page" { variant: "title" }
text "State persists across route changes" { variant: "subtitle" }
Card { title: "Interactive Counter", subtitle: "reactive signals" } [
text "Count: {count}" { variant: "title" }
row [
button "+1" { click: count += 1, variant: "primary" }
button "-1" { click: count -= 1, variant: "secondary" }
button "Reset" { click: count = 0, variant: "ghost" }
]
when count > 10 -> Badge { label: "HIGH SCORE!", variant: "warning" }
]
]
-- Route: Todos
route "/todos" -> column [
text "📝 Todo List" { variant: "title" }
text "Add and remove tasks" { variant: "subtitle" }
Card { title: "My Tasks", subtitle: "dynamic arrays" } [
row [
input { bind: newTodo, placeholder: "New task..." }
button "Add" { click: todos.push(newTodo), variant: "primary" }
]
each todo in todos ->
row [
text "→ {todo}"
button "×" { click: todos.remove(_idx), variant: "ghost" }
]
button "Clear All" { click: todos = [], variant: "ghost" }
]
]
-- Route: About
route "/about" -> column [
text " About DreamStack" { variant: "title" }
text "The reactive UI language" { variant: "subtitle" }
Card { title: "Features", subtitle: "all built-in" } [
text "• Reactive signals with fine-grained updates"
text "• Component composition with slots"
text "• Client-side routing (you're using it now!)"
text "• Dynamic lists with push/remove"
text "• Pattern matching expressions"
text "• When/else branching"
text "• Two-way data binding"
]
]