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:
parent
f63ff52e2a
commit
51c9c60bfe
1 changed files with 81 additions and 0 deletions
81
examples/router-demo.ds
Normal file
81
examples/router-demo.ds
Normal 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"
|
||||
]
|
||||
]
|
||||
Loading…
Add table
Reference in a new issue