examples/basic-app/app/pages/navigation.wrn puts all nine navigation
components in a single console shell instead of showing each alone: Navbar
with a nested dropdown, MegaMenu beside it, Breadcrumb, Sidebar as a rail that
becomes a Drawer, Tabs backed by a query parameter, a Stepper wizard,
Pagination, Scrollspy following the article, and Nav in the footer.
Three framework limits shaped the layout and are written into the page rather
than hidden:
- object props are held in state and bound, because a brace at the start of
an attribute is read as an interpolation
- a shared function on a page is compiled standalone and cannot see page
state by name, so state is passed as arguments
- component props and slot content render once and do not track page state,
so anything that has to react lives in page scope; Tabs reports the
selection and the page owns what is shown
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
30 lines
557 B
JSON
30 lines
557 B
JSON
{
|
|
"version": "0.0.1",
|
|
"configurations": [
|
|
{
|
|
"name": "basic-app",
|
|
"runtimeExecutable": "bun",
|
|
"runtimeArgs": [
|
|
"run",
|
|
"packages/cli/src/index.ts",
|
|
"dev",
|
|
"examples/basic-app",
|
|
"--port=3410"
|
|
],
|
|
"port": 3410
|
|
},
|
|
{
|
|
"name": "component-showcase",
|
|
"runtimeExecutable": "bun",
|
|
"runtimeArgs": [
|
|
"run",
|
|
"packages/cli/src/index.ts",
|
|
"dev",
|
|
"examples/component-showcase",
|
|
"--port=3400"
|
|
],
|
|
"port": 3400
|
|
}
|
|
]
|
|
}
|