86 lines
2.1 KiB
Plaintext
86 lines
2.1 KiB
Plaintext
---
|
|
description: Svelte best practices and patterns for modern web applications
|
|
globs: **/*.svelte, src/**/*.ts, src/**/*.js
|
|
---
|
|
|
|
# Svelte Best Practices
|
|
|
|
## Component Structure
|
|
- Keep components small and focused
|
|
- Use proper TypeScript integration
|
|
- Implement proper props typing
|
|
- Use proper event dispatching
|
|
- Keep markup clean and readable
|
|
- Use proper slot implementation
|
|
|
|
## Reactivity
|
|
- Use proper reactive declarations
|
|
- Implement proper stores
|
|
- Use proper reactive statements
|
|
- Handle derived values properly
|
|
- Use proper lifecycle functions
|
|
- Implement proper bindings
|
|
|
|
## State Management
|
|
- Use proper Svelte stores
|
|
- Keep stores modular
|
|
- Use proper derived stores
|
|
- Implement proper actions
|
|
- Handle async state properly
|
|
- Use proper store subscriptions
|
|
|
|
## Performance
|
|
- Use proper component lazy loading
|
|
- Implement proper transitions
|
|
- Use proper animations
|
|
- Avoid unnecessary reactivity
|
|
- Use proper event forwarding
|
|
- Implement proper key blocks
|
|
|
|
## Routing
|
|
- Use SvelteKit for routing
|
|
- Implement proper layouts
|
|
- Use proper route parameters
|
|
- Handle loading states properly
|
|
- Implement proper error pages
|
|
- Use proper navigation methods
|
|
|
|
## Forms
|
|
- Use proper form bindings
|
|
- Implement proper validation
|
|
- Handle form submission properly
|
|
- Show proper loading states
|
|
- Use proper error handling
|
|
- Implement proper form reset
|
|
|
|
## TypeScript Integration
|
|
- Use proper component types
|
|
- Implement proper prop types
|
|
- Use proper event types
|
|
- Handle proper type inference
|
|
- Use proper store types
|
|
- Implement proper action types
|
|
|
|
## Testing
|
|
- Write proper unit tests
|
|
- Implement proper component tests
|
|
- Use proper testing libraries
|
|
- Test stores properly
|
|
- Implement proper mocking
|
|
- Test async operations
|
|
|
|
## Best Practices
|
|
- Follow Svelte style guide
|
|
- Use proper naming conventions
|
|
- Keep components organized
|
|
- Implement proper error handling
|
|
- Use proper event handling
|
|
- Document complex logic
|
|
|
|
## Build and Tooling
|
|
- Use Vite for development
|
|
- Configure proper build setup
|
|
- Use proper environment variables
|
|
- Implement proper code splitting
|
|
- Use proper asset handling
|
|
- Configure proper optimization |