a7af39e900
- When/else inside slots: anchor parentNode is null during initial effect Fixed with named effect function + requestAnimationFrame retry - Match parser now terminates on ] } else tokens (works inside containers) - Updated Progress/Badge components - Added examples/showcase.ds: 5-section demo exercising all features
73 lines
2.3 KiB
Text
73 lines
2.3 KiB
Text
-- DreamStack Showcase
|
|
-- Demonstrates: imports, slots, when/else, each, match, reactive state
|
|
|
|
import { Card } from "../registry/components/card"
|
|
import { Badge } from "../registry/components/badge"
|
|
|
|
let count = 0
|
|
let loggedIn = false
|
|
let mood = "happy"
|
|
let items = ["Alpha", "Beta", "Gamma", "Delta"]
|
|
|
|
view main = column [
|
|
-- Header
|
|
text "🚀 DreamStack Showcase" { variant: "title" }
|
|
text "Everything working together" { variant: "subtitle" }
|
|
|
|
-- 1. Slot Composition: Card with interactive children
|
|
Card { title: "Interactive Counter", subtitle: "slot composition + reactivity" } [
|
|
text "Count: {count}" { variant: "title" }
|
|
row [
|
|
button "-1" { click: count -= 1, variant: "secondary" }
|
|
button "+1" { click: count += 1, variant: "primary" }
|
|
button "Reset" { click: count = 0, variant: "ghost" }
|
|
]
|
|
]
|
|
|
|
-- 2. When/Else: Conditional rendering
|
|
Card { title: "Auth Status", subtitle: "when/else branching" } [
|
|
button "Toggle Login" { click: loggedIn = !loggedIn, variant: "primary" }
|
|
when loggedIn ->
|
|
row [
|
|
Badge { label: "ONLINE", variant: "success" }
|
|
text "Welcome back, admin!"
|
|
]
|
|
else ->
|
|
row [
|
|
Badge { label: "OFFLINE", variant: "error" }
|
|
text "Please log in to continue"
|
|
]
|
|
]
|
|
|
|
-- 3. Match: Pattern matching on state
|
|
Card { title: "Mood Selector", subtitle: "match expressions" } [
|
|
row [
|
|
button "😊 Happy" { click: mood = "happy", variant: "primary" }
|
|
button "😢 Sad" { click: mood = "sad", variant: "secondary" }
|
|
button "😡 Angry" { click: mood = "angry", variant: "ghost" }
|
|
]
|
|
match mood
|
|
"happy" -> text "You're feeling great! 🌟" { variant: "success" }
|
|
"sad" -> text "Hang in there... 💙" { variant: "info" }
|
|
"angry" -> text "Take a deep breath 🔥" { variant: "warning" }
|
|
_ -> text "How are you?" { variant: "subtitle" }
|
|
]
|
|
|
|
-- 4. Each: List rendering
|
|
Card { title: "Team Members", subtitle: "each loop iteration" } [
|
|
each item in items ->
|
|
row [
|
|
text "→"
|
|
text item
|
|
]
|
|
]
|
|
|
|
-- 5. Nested Features: when/else inside Card slot inside each
|
|
Card { title: "Feature Matrix", subtitle: "nested composition" } [
|
|
text "Count is {count}"
|
|
when count > 5 ->
|
|
Badge { label: "HIGH", variant: "warning" }
|
|
else ->
|
|
Badge { label: "LOW", variant: "info" }
|
|
]
|
|
]
|