SvelteKit 4 (JavaScript) to SvelteKit 5 (TypeScript) Migration Task Mission You are tasked with completely refactoring a SvelteKit 4 JavaScript application to SvelteKit 5 with TypeScript. This is a critical migration that requires precision, architectural excellence, and zero errors. Core Requirements
- Complete Workspace Analysis
Read EVERY file in the workspace thoroughly Analyze the entire project structure before making any changes Understand the current architecture, routing, data flow, and component relationships Document all dependencies, utilities, stores, and shared logic Identify all API routes, server-side logic, and data loading patterns
- MCP Integration for SvelteKit 5
Connect to the SvelteKit 5 MCP server to access:
Latest SvelteKit 5 documentation TypeScript best practices for Svelte 5 Migration patterns and breaking changes Runes system ($state, $derived, $effect, $props) New snippet syntax and event handling
Use MCP queries to verify every technical decision against official SvelteKit 5 standards
- Migration Strategy - Module by Module For each module/file:
Analyze: Understand the current SvelteKit 4 JavaScript implementation Design: Plan the TypeScript + SvelteKit 5 equivalent with proper types Transform: Convert to SvelteKit 5 syntax using:
Runes ($state, $derived, $effect) instead of stores where appropriate TypeScript interfaces and types for all data structures Proper type annotations for props, events, and functions
Verify: Ensure the module integrates correctly with the rest of the system
- TypeScript Implementation
Create comprehensive type definitions for:
All component props using $props() rune API response schemas Store types and state management Form data and validation schemas Server-side function parameters and returns
Use strict TypeScript configuration Leverage type inference where it improves readability Create shared type definition files in /src/lib/types/
- Architecture & Code Quality Folder Structure: src/ ├── lib/ │ ├── components/ # Reusable UI components │ │ ├── ui/ # Base UI elements (Button, Input, etc.) │ │ ├── forms/ # Form components │ │ ├── layout/ # Layout components (Header, Footer, etc.) │ │ └── features/ # Feature-specific components │ ├── types/ # TypeScript type definitions │ ├── utils/ # Utility functions │ ├── stores/ # Svelte stores (if needed) │ ├── server/ # Server-only utilities │ └── config/ # Configuration files ├── routes/ # SvelteKit 5 routes └── app.html # Root HTML template Code Standards:
Maximum Readability: Clear variable names, logical component organization Well-Documented: JSDoc comments for complex functions and components Single Responsibility: Each component/function does ONE thing well DRY Principle: No code duplication - extract shared logic Composition: Small, composable components over large monoliths Type Safety: 100% type coverage - no any types without explicit reason
- UI Preservation with TypeScript
Maintain Visual Design: Keep the exact same UI/UX appearance Style Migration: Convert CSS to TypeScript-based styling where beneficial:
Use Tailwind CSS utility classes (if currently used) Or use CSS Modules with TypeScript support Or use styled-components/emotion with TypeScript Keep existing CSS if it's well-structured, but add type safety for dynamic styles
Copy Design Concepts: Focus on functionality and user experience parity Responsive Behavior: Ensure all responsive designs work identically
- Performance Optimization
Use SvelteKit 5's improved reactivity system Implement proper lazy loading with $lazy where appropriate Optimize bundle sizes by:
Code splitting at route level Dynamic imports for heavy components Tree-shaking unused code
Use $effect efficiently (avoid unnecessary re-runs) Implement proper caching strategies for API calls Use server-side rendering where beneficial
- Testing & Verification Before considering any module complete:
Verify TypeScript compilation with zero errors Test all user interactions and data flows Ensure routing works correctly Validate form submissions and API integrations Check console for any warnings or errors Verify the UI matches the original exactly
SvelteKit 5 Specific Migrations Key Breaking Changes to Address:
Runes System: Convert reactive statements to runes
typescript // Old (SvelteKit 4) let count = 0; $: doubled = count * 2;
// New (SvelteKit 5) let count = $state(0); let doubled = $derived(count * 2);
Props Definition:
typescript // Old export let name: string; export let age: number;
// New type Props = { name: string; age: number; }; let { name, age }: Props = $props();
Event Handlers: Use onclick instead of on:click
typescript // Old
// New
Snippets: Replace slots with snippets where appropriate Form Actions: Update to new use:enhance API and form action patterns
Execution Checklist
Analyze complete workspace structure Connect to SvelteKit 5 MCP for documentation access Create TypeScript configuration (tsconfig.json) Set up new folder structure for components Create shared type definitions Migrate routes one by one Convert all components to TypeScript + Runes Update all API endpoints with proper typing Migrate stores and state management Update form handling and validation Test each module thoroughly Perform final integration testing Verify performance benchmarks
Success Criteria
✅ Zero TypeScript errors ✅ 100% functional parity with SvelteKit 4 version ✅ Identical UI/UX experience ✅ Improved performance metrics ✅ Clean, readable, well-architected code ✅ Comprehensive type coverage ✅ Organized component structure ✅ No runtime errors or warnings ✅ All features working smoothly and fast
Important Notes
Do NOT rush: Take time to understand each module before converting Ask questions: If any part of the original code is unclear, analyze it thoroughly Document decisions: Leave comments explaining non-obvious architectural choices Maintain consistency: Follow the same patterns throughout the codebase Zero tolerance for errors: Every line must be correct and type-safe
Begin by reading the entire workspace and creating a migration plan. Then proceed module by module, ensuring each piece is perfect before moving to the next.
