41 lines
1.4 KiB
Markdown
41 lines
1.4 KiB
Markdown
# Data Model: SvelteKit Integration
|
|
|
|
## Entities
|
|
|
|
### Route
|
|
Represents a navigable URL in the application.
|
|
|
|
| Field | Type | Description |
|
|
|-------|------|-------------|
|
|
| `path` | String | The URL path (e.g., `/`, `/settings`) |
|
|
| `component` | Svelte Component | The page component to render |
|
|
| `data_requirements` | List<API Endpoint> | Backend data needed for this route |
|
|
| `layout` | Layout | The layout wrapping this route |
|
|
|
|
**Validation Rules**:
|
|
- `path` must be unique.
|
|
- `path` must follow SvelteKit file-based routing conventions.
|
|
|
|
### Layout
|
|
Represents a shared UI structure.
|
|
|
|
| Field | Type | Description |
|
|
|-------|------|-------------|
|
|
| `name` | String | Identifier for the layout (e.g., `default`) |
|
|
| `components` | List<Svelte Component> | Shared components (Header, Footer, Sidebar) |
|
|
| `slot` | Placeholder | Where the route content is injected |
|
|
|
|
## State Transitions
|
|
|
|
### Navigation
|
|
1. **Trigger**: User clicks link or `goto(path)` is called.
|
|
2. **Action**: SvelteKit router intercepts the request.
|
|
3. **Data Fetching**: `load` function in `+page.ts` or `+layout.ts` is executed.
|
|
4. **Rendering**: The new page component is rendered within the layout.
|
|
5. **URL Update**: Browser history is updated.
|
|
|
|
### Error Handling
|
|
1. **Trigger**: Navigation to non-existent path or API failure.
|
|
2. **Action**: SvelteKit renders `+error.svelte`.
|
|
3. **Display**: User-friendly error message with recovery options.
|