|
| 1 | +# data-solid-dashboard |
| 2 | + |
| 3 | +Mini dashboard sample demonstrating [@adobe/data-solid](../data-solid) with |
| 4 | +multiple components sharing a single ECS database. |
| 5 | + |
| 6 | +## Run |
| 7 | + |
| 8 | +```bash |
| 9 | +pnpm install |
| 10 | +pnpm dev # starts Vite on http://localhost:3004 |
| 11 | +``` |
| 12 | + |
| 13 | +## What it demonstrates |
| 14 | + |
| 15 | +- **Shared database** — one `DatabaseProvider` at the app root, consumed by |
| 16 | + every component via `useDatabase`. |
| 17 | +- **Fine-grained reactivity** — each component observes only the slices it |
| 18 | + needs (`count`, `log`, `userName`). Updating one resource does not re-render |
| 19 | + components that don't depend on it. |
| 20 | +- **Cross-component actions** — the control panel fires transactions |
| 21 | + (`increment`, `setUserName`, …) that are reflected in the counter display, |
| 22 | + activity log, and status bar. |
| 23 | +- **Presentation separation** — each component is split into a data-wiring |
| 24 | + file (`counter-display.tsx`) and a pure render function |
| 25 | + (`counter-display.presentation.tsx`). The presentation receives accessors |
| 26 | + and action callbacks, keeping rendering free of database concerns. |
| 27 | + |
| 28 | +## Structure |
| 29 | + |
| 30 | +``` |
| 31 | +src/ |
| 32 | + state/ |
| 33 | + dashboard-plugin.ts ECS plugin — resources and transactions |
| 34 | + components/ |
| 35 | + control-panel.tsx data wiring — observes count, exposes transactions |
| 36 | + control-panel.presentation.tsx |
| 37 | + counter-display.tsx data wiring — observes count |
| 38 | + counter-display.presentation.tsx |
| 39 | + activity-log.tsx data wiring — observes log |
| 40 | + activity-log.presentation.tsx |
| 41 | + status-bar.tsx data wiring — observes userName, count, log |
| 42 | + status-bar.presentation.tsx |
| 43 | + app.tsx root component — sets up DatabaseProvider |
| 44 | + main.tsx entry point |
| 45 | +``` |
| 46 | + |
| 47 | +## Pattern summary |
| 48 | + |
| 49 | +```tsx |
| 50 | +// data wiring: setup reactive graph, delegate to presentation |
| 51 | +function CounterDisplay() { |
| 52 | + const db = useDatabase(dashboardPlugin); |
| 53 | + const count = fromObserve(db.observe.resources.count, 0); |
| 54 | + return presentation.render({ count }); |
| 55 | +} |
| 56 | + |
| 57 | +// presentation: pure render, accepts accessors and callbacks |
| 58 | +function render(args: { count: () => number }) { |
| 59 | + return <span>{args.count()}</span>; |
| 60 | +} |
| 61 | +``` |
0 commit comments