feat: Migrate to SvelteKit with file-based routing and Svelte 5 runes #14
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Migrate from Page.js router to SvelteKit file-based routing - Implement modern Svelte 5 runes (, , ) - Update all components to use modern event syntax (onclick vs on:click) - Replace manual routing with SvelteKit's built-in navigation - Modernize fetch patterns with enhanced useFetch composable - Configure static site generation for GitHub Pages deployment - Update TypeScript configuration for SvelteKit - Remove deprecated patterns and optimize component structure - Maintain all existing functionality while improving architecture Breaking Changes: - Removed Page.js dependency - Updated routing structure to SvelteKit conventions - Modernized component patterns to Svelte 5 standards Benefits: - Better performance with automatic code splitting - Improved developer experience with SvelteKit tooling - Future-proof architecture with latest Svelte patterns - Enhanced TypeScript integration - Cleaner, more maintainable codebase
- Add browser environment checks before accessing localStorage - Prevent localStorage access during server-side rendering - Ensure theme store functions gracefully handle SSR - Fix ReferenceError: localStorage is not defined during build This resolves the SSR compatibility issue that was causing build failures when SvelteKit attempts to render components on the server.
- Add browser environment checks to keyboard shortcuts initialization - Prevent Mousetrap binding during server-side rendering - Add init() method to safely initialize shortcuts in browser - Update layout to call keyboard shortcuts init on mount - Ensure graceful degradation when Mousetrap is not available This resolves the SSR errors and allows the application to render properly on the server while maintaining keyboard functionality in the browser.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🚀 SvelteKit Migration
This PR migrates the PassDB frontend from a Svelte 5 SPA using Page.js router to a modern SvelteKit application with file-based routing and enhanced Svelte 5 runes patterns.
📋 Changes Made
✅ SvelteKit Setup
@sveltejs/kitand@sveltejs/adapter-staticpagerouter dependency✅ File-Based Routing Migration
src/app.htmltemplatesrc/routes/+layout.sveltefor shared layoutsrc/routes/+page.svelte(Home)src/routes/email/[email]/+page.sveltesrc/routes/domain/[domain]/+page.sveltesrc/routes/password/[password]/+page.sveltesrc/routes/username/[name]/+page.svelte✅ Svelte 5 Runes Modernization
$state(),$derived(), and$effect()on:event syntax with modernonclick/onkeydownuseFetchcomposable with reactive patterns✅ Navigation Updates
navigate()with SvelteKitgoto()$page.route.id✅ TypeScript & Build Improvements
🗑️ Files Removed
src/router.ts- Replaced by SvelteKit routingsrc/main.ts- Replaced by SvelteKit entrysrc/App.svelte- Replaced by layout systemindex.html- Replaced byapp.html✨ Benefits
🧪 Verification
🔄 Breaking Changes
📚 Documentation
See
MIGRATION_SUMMARY.mdfor detailed migration notes and technical details.Ready for review and merge! 🎉
Pull Request opened by Augment Code with guidance from the PR author