Migrate Preact Internals to SvelteKit: Comprehensive Checklist

Migrating a Preact application’s internal architecture to SvelteKit requires careful planning to preserve functionality while leveraging SvelteKit’s built-in SSR, file-based routing, and optimized build pipeline. This guide provides a step-by-step checklist to streamline the migration process.

Prerequisites

• Node.js v18+ installed locally
• Existing Preact application with documented internal architecture
• Familiarity with SvelteKit’s core concepts (file-based routing, load functions, stores)
• SvelteKit CLI: npm create svelte@latest

Phase 1: Audit Existing Preact Internals

Start by cataloging all Preact-specific internals to avoid missing critical functionality during migration:

• List all custom components, their props, lifecycle methods, and event handlers
• Document state management approach (Preact Signals, Context API, Redux, etc.)
• Map existing routing structure (Preact Router, custom routing logic, dynamic routes)
• Review build configuration (Vite, Webpack, custom Babel presets, environment variables)
• Audit third-party dependencies for Preact-specific packages (e.g., preact-render-to-string, preact-context)
• Note data fetching patterns (useEffect, custom hooks, API utility functions)

Phase 2: Initialize SvelteKit Project

Set up a fresh SvelteKit project to house the migrated internals:

1. Run npm create svelte@latest your-app-name and select required options (TypeScript, ESLint, Prettier as needed)
2. Install dependencies: npm install
3. Configure base SvelteKit settings in svelte.config.js (adapter for deployment target, prerender rules)
4. Set up environment variable handling to mirror your Preact app’s existing setup

Phase 3: Core Migration Checklist

1. Component Conversion

• Rewrite Preact JSX components to Svelte syntax: replace className with class, self-closing tags with proper Svelte syntax
• Migrate Preact lifecycle methods: useEffect → Svelte onMount, onDestroy; useMemo → Svelte derived stores
• Convert Preact props: destructure props in Svelte component script blocks, handle default props with fallback values
• Replace Preact event handlers: onClick → Svelte on:click (or Svelte 5+ onclick syntax)

2. State Management Migration

• Migrate Preact Signals to Svelte writable/readable stores, or use Svelte 5 runes if available
• Replace Preact Context API with Svelte’s context API (getContext/setContext) for cross-component state
• If using Redux or other external state libraries, audit compatibility with Svelte, or switch to Svelte-native state tools

3. Routing Migration

• Map Preact Router routes to SvelteKit’s file-based routing: create src/routes directories matching your existing route structure
• Convert dynamic routes: Preact /user/:id → SvelteKit src/routes/user/[id]
• Migrate route guards, redirects, and nested layouts to SvelteKit’s +layout.svelte and +page.svelte files
• Replace programmatic navigation (Preact Router’s useHistory) with SvelteKit’s goto function from @sveltejs/kit

4. Build & Configuration Migration

• Migrate Vite/Webpack config to SvelteKit’s Vite-based config: add Preact-era plugins to vite.config.ts if needed
• Move static assets to SvelteKit’s static directory, update import paths
• Replicate environment variable handling: use SvelteKit’s $env/static/public or $env/dynamic/private modules
• Transfer custom Babel presets or PostCSS config to the SvelteKit project

5. Data Fetching & API Routes

• Replace Preact data fetching (useEffect + fetch) with SvelteKit’s load functions in +page.js or +layout.js
• Migrate API endpoints to SvelteKit’s +server.js files for SSR-compatible API routes
• Handle error states using SvelteKit’s error and redirect utilities from @sveltejs/kit

6. Dependencies & Testing

• Remove all Preact-specific dependencies (preact, preact-router, etc.) and replace with Svelte equivalents
• Audit shared utility libraries for compatibility; update import paths as needed
• Migrate tests: replace Preact Testing Library with Svelte Testing Library, update test cases for Svelte component syntax

Phase 4: Validation & Optimization

• Run local dev server: npm run dev and test all migrated routes, components, and state flows
• Run build: npm run build to check for compilation errors
• Test SSR and prerender behavior for critical pages
• Optimize bundle size: use SvelteKit’s built-in code splitting, remove unused dependencies
• Run end-to-end tests to validate full user flows

Common Pitfalls to Avoid

• Confusing JSX syntax with Svelte template syntax (e.g., { } for dynamic values vs Svelte’s {#if}, {#each} blocks)
• Forgetting Svelte’s reactivity rules: use $: reactive statements (or runes) for derived values
• Mismanaging SvelteKit’s load function lifecycle: avoid side effects in load functions
• Overlooking environment variable scoping: public vs private variables in SvelteKit

Conclusion

Migrating Preact internals to SvelteKit unlocks better performance, built-in SSR, and a more streamlined developer experience. Follow this checklist to minimize downtime and ensure all existing functionality is preserved. Start with small, non-critical components before migrating core app logic to reduce risk.