Svelte 5 SvelteKit 2 .cursorrules prompt file
About .cursorrules prompt file
What you can build
- Svelte 5 Learning Platform: A comprehensive online platform offering interactive tutorials and exercises specifically focused on the new features and changes in Svelte 5, including runes, reactive state management, and snippets.
- Svelte 5 Migration Tool: An automated tool that scans Svelte 4 projects and suggests or automatically applies necessary changes to upgrade them to Svelte 5, focusing on migrating reactive declarations, event handlers, and snippets.
- Svelte Runed Dashboard: A web app template that leverages Svelte 5's runes and snippets to create highly dynamic and reactive dashboards, showcasing best practices with the new features.
- SvelteKit Error Handling Helper: A plugin for SvelteKit 2 that simplifies error handling by providing visual cues and code snippets for using the new error handling functions and distinguishing between different error types.
- Svelte 5 Code Snippet Library: A library of pre-made, reusable code snippets leveraging Svelte 5's
$derived
,$effect
, and snippets for common use cases, available as a plugin for code editors. - Svelte 5 Course Generator: An online service to generate courses that teach Svelte 5 and SvelteKit 2, dynamically creating quizzes and projects that leverage new features like reactive bindings and error handling.
- Svelte 5 Performance Analyzer: A tool that analyzes Svelte projects and suggests optimizations specific to Svelte 5, such as using
$state.raw
for large arrays and objects to improve performance. - Interactive Svelte 5 Cookbook: A recipe-style documentation site providing step-by-step guides on using Svelte 5 features in real-world applications, such as building components with deeply reactive state and leveraging
$effect
for animations. - Svelte 5 UI Component Library: A library of UI components built with Svelte 5, demonstrating how to use runes and snippets for advanced layouts and interactions.
- Svelte 5 Responsive Layouts: A framework or set of templates to create responsive web apps using Svelte 5, focusing on the utilization of runes for state management and reactive layouts.
- SvelteKit 2 Migration Assistant: A guided assistant tool that helps developers migrate their SvelteKit 1 projects to SvelteKit 2, offering insights on managing cookie paths and adapting redirect and error handling changes.
- Svelte 5 Plugin for VSCode: A Visual Studio Code plugin that provides autocomplete, syntax highlighting, and documentation for Svelte 5's new features such as runes and event handlers as properties.
- Svelte 5 UI Testing Suite: A set of testing tools specifically designed for apps using Svelte 5, incorporating testing for reactivity and runtime behavior of components using new primitives and
$effect
groups. - Svelte 5 Community Forum: An online community platform where developers can discuss the new features of Svelte 5, share best practices, and offer solutions for common migration and implementation challenges.
- Svelte 5 Template Builder: A visual tool for creating and exporting Svelte 5 components and templates, utilizing its snippet and state management features to simplify the building of complex and interactive UI parts.
Benefits
- Advanced Runes Primitives: Svelte 5's introduction of runes enhances state and effect management, replacing several non-runes features for improved control and reactivity.
- Event Handler Simplification: Svelte 5 treats event handlers as properties, removing the need for the
on:
directive and integrating callback props for components. - Enhanced SvelteKit 2 Integration: Updates include direct error handling, path requirements in cookies, and changes in promise handling, enhancing portability and ensuring synchronous operations.
Synopsis
Developers upgrading projects from Svelte 4 to Svelte 5 and SvelteKit 1 to SvelteKit 2 will benefit by creating reactive UIs with advanced state management and handling updated error and redirect logic.
Overview of .cursorrules prompt
The .cursorrules file outlines the changes and new features in Svelte 5 and SvelteKit 2, focusing on reactivity and component handling. It introduces advanced primitives called runes for controlling reactivity and provides explicit control over state and effects through new concepts like `$state`, `$derived`, and `$effect`. These primitives replace some of the previous reactive methods and bring improvements in performance and maintainability. Additionally, the file addresses new ways to handle component props, snippets, and event handlers, demonstrating a shift from traditional methods to a more integrated property-based approach. For SvelteKit 2, handling redirects, errors, cookies, and promises has been simplified or altered, with a focus on improving code management and deployment flexibility. The document provides ample code examples to illustrate these updates, ensuring developers can transition smoothly to the new versions.