167 lines
7.1 KiB
Markdown
167 lines
7.1 KiB
Markdown
# Tasks: Integrate SvelteKit
|
|
|
|
**Input**: Design documents from `/specs/004-integrate-svelte-kit/`
|
|
**Prerequisites**: plan.md (required), spec.md (required for user stories), research.md, data-model.md, contracts/
|
|
|
|
**Tests**: Tests are NOT explicitly requested in the feature specification, so no test-specific tasks are included. Verification will be done via the "Independent Test" criteria for each story.
|
|
|
|
**Organization**: Tasks are grouped by user story to enable independent implementation and testing of each story.
|
|
|
|
## Format: `[ID] [P?] [Story] Description`
|
|
|
|
- **[P]**: Can run in parallel (different files, no dependencies)
|
|
- **[Story]**: Which user story this task belongs to (e.g., US1, US2, US3)
|
|
- Include exact file paths in descriptions
|
|
|
|
## Path Conventions
|
|
|
|
- **Web app**: `backend/src/`, `frontend/src/`
|
|
|
|
---
|
|
|
|
## Phase 1: Setup (Shared Infrastructure)
|
|
|
|
**Purpose**: Project initialization and basic structure
|
|
|
|
- [ ] T001 Initialize SvelteKit in `frontend/` directory (replacing current setup)
|
|
- [ ] T002 Install `@sveltejs/adapter-static` in `frontend/package.json`
|
|
- [ ] T003 [P] Configure `frontend/svelte.config.js` for static adapter and SPA fallback
|
|
|
|
---
|
|
|
|
## Phase 2: Foundational (Blocking Prerequisites)
|
|
|
|
**Purpose**: Core infrastructure that MUST be complete before ANY user story can be implemented
|
|
|
|
**⚠️ CRITICAL**: No user story work can begin until this phase is complete
|
|
|
|
- [ ] T004 Create `frontend/src/routes/+layout.ts` to disable SSR and prerendering (`ssr = false`, `prerender = false`)
|
|
- [ ] T005 Implement catch-all route in `backend/src/app.py` to serve `index.html` for SPA routing
|
|
- [ ] T006 [P] Update `backend/src/app.py` to mount `frontend/build` directory using `StaticFiles`
|
|
- [ ] T007 [P] Update `frontend/src/lib/api.js` to ensure compatibility with SvelteKit environment
|
|
|
|
**Checkpoint**: Foundation ready - user story implementation can now begin in parallel
|
|
|
|
---
|
|
|
|
## Phase 3: User Story 1 - Seamless Navigation (Priority: P1) 🎯 MVP
|
|
|
|
**Goal**: Navigate between Dashboard and Settings using standard URL paths so that users can bookmark pages and use browser navigation.
|
|
|
|
**Independent Test**: Click navigation links and verify the URL changes and the correct content renders without a full page reload. Verify deep linking by refreshing at `/settings`.
|
|
|
|
### Implementation for User Story 1
|
|
|
|
- [ ] T008 [P] [US1] Create Dashboard route in `frontend/src/routes/+page.svelte` (migrating from `App.svelte`/`Dashboard.svelte`)
|
|
- [ ] T009 [P] [US1] Create Settings route in `frontend/src/routes/settings/+page.svelte` (migrating from `Settings.svelte`)
|
|
- [ ] T010 [US1] Implement navigation links between Dashboard and Settings in `frontend/src/routes/+page.svelte` and `frontend/src/routes/settings/+page.svelte`
|
|
|
|
**Checkpoint**: At this point, User Story 1 should be fully functional and testable independently.
|
|
|
|
---
|
|
|
|
## Phase 4: User Story 2 - Improved Data Loading (Priority: P2)
|
|
|
|
**Goal**: Use modern data loading patterns so that data is fetched efficiently before the page renders.
|
|
|
|
**Independent Test**: Observe the page load sequence and verify that data is available to the component immediately upon mount via the `data` prop.
|
|
|
|
### Implementation for User Story 2
|
|
|
|
- [ ] T011 [P] [US2] Implement `load` function for Dashboard in `frontend/src/routes/+page.ts` to fetch plugins from `/api/plugins/`
|
|
- [ ] T012 [P] [US2] Implement `load` function for Settings in `frontend/src/routes/settings/+page.ts` to fetch config and environments from `/api/settings/`
|
|
- [ ] T013 [US2] Update `frontend/src/routes/+page.svelte` to use data from `load` function via `export let data;`
|
|
- [ ] T014 [US2] Update `frontend/src/routes/settings/+page.svelte` to use data from `load` function via `export let data;`
|
|
|
|
**Checkpoint**: At this point, User Stories 1 AND 2 should both work independently.
|
|
|
|
---
|
|
|
|
## Phase 5: User Story 3 - Unified Layout (Priority: P3)
|
|
|
|
**Goal**: Consistent look and feel across all pages with a shared navigation bar and footer.
|
|
|
|
**Independent Test**: Navigate between Dashboard and Settings and verify that the header/footer remain static and do not re-render or flicker.
|
|
|
|
### Implementation for User Story 3
|
|
|
|
- [ ] T015 [US3] Create shared layout in `frontend/src/routes/+layout.svelte` with `<slot />`
|
|
- [ ] T016 [P] [US3] Move navigation bar component to `frontend/src/components/Navbar.svelte` and include in `+layout.svelte`
|
|
- [ ] T017 [P] [US3] Create footer component in `frontend/src/components/Footer.svelte` and include in `+layout.svelte`
|
|
|
|
**Checkpoint**: All user stories should now be independently functional.
|
|
|
|
---
|
|
|
|
## Phase 6: Polish & Cross-Cutting Concerns
|
|
|
|
**Purpose**: Improvements that affect multiple user stories
|
|
|
|
- [ ] T018 [P] Implement custom 404 error page in `frontend/src/routes/+error.svelte`
|
|
- [ ] T019 Add graceful error handling for API failures in `load` functions (T011, T012)
|
|
- [ ] T020 [P] Update `frontend/README.md` with new SvelteKit-based development and build instructions
|
|
- [ ] T021 Run `specs/004-integrate-svelte-kit/quickstart.md` validation
|
|
|
|
---
|
|
|
|
## Dependencies & Execution Order
|
|
|
|
### Phase Dependencies
|
|
|
|
- **Setup (Phase 1)**: No dependencies - can start immediately
|
|
- **Foundational (Phase 2)**: Depends on Setup completion - BLOCKS all user stories
|
|
- **User Stories (Phase 3+)**: All depend on Foundational phase completion
|
|
- User stories can then proceed in parallel (if staffed)
|
|
- Or sequentially in priority order (P1 → P2 → P3)
|
|
- **Polish (Final Phase)**: Depends on all desired user stories being complete
|
|
|
|
### User Story Dependencies
|
|
|
|
- **User Story 1 (P1)**: Can start after Foundational (Phase 2) - No dependencies on other stories
|
|
- **User Story 2 (P2)**: Can start after Foundational (Phase 2) - Depends on US1 routes existing
|
|
- **User Story 3 (P3)**: Can start after Foundational (Phase 2) - Can be implemented independently of US1/US2 content
|
|
|
|
### Within Each User Story
|
|
|
|
- Models/Data fetching before UI implementation
|
|
- Core implementation before integration
|
|
- Story complete before moving to next priority
|
|
|
|
### Parallel Opportunities
|
|
|
|
- T003 (Svelte config) can run in parallel with other setup
|
|
- T006 (Backend mount) and T007 (API client) can run in parallel
|
|
- T008 (Dashboard route) and T009 (Settings route) can run in parallel
|
|
- T011 and T012 (Load functions) can run in parallel
|
|
- T016 and T017 (Navbar/Footer components) can run in parallel
|
|
|
|
---
|
|
|
|
## Parallel Example: User Story 2
|
|
|
|
```bash
|
|
# Launch all load function implementations for User Story 2 together:
|
|
Task: "Implement load function for Dashboard in frontend/src/routes/+page.ts"
|
|
Task: "Implement load function for Settings in frontend/src/routes/settings/+page.ts"
|
|
```
|
|
|
|
---
|
|
|
|
## Implementation Strategy
|
|
|
|
### MVP First (User Story 1 Only)
|
|
|
|
1. Complete Phase 1: Setup
|
|
2. Complete Phase 2: Foundational (CRITICAL - blocks all stories)
|
|
3. Complete Phase 3: User Story 1
|
|
4. **STOP and VALIDATE**: Test User Story 1 independently (Navigation and Deep Linking)
|
|
5. Deploy/demo if ready
|
|
|
|
### Incremental Delivery
|
|
|
|
1. Complete Setup + Foundational → Foundation ready
|
|
2. Add User Story 1 → Test independently → Deploy/Demo (MVP!)
|
|
3. Add User Story 2 → Test independently → Deploy/Demo
|
|
4. Add User Story 3 → Test independently → Deploy/Demo
|
|
5. Each story adds value without breaking previous stories
|