refactor: update Svelte and TypeScript rules for improved application behavior

- Set Svelte rules to always apply for consistent usage.
- Adjust TypeScript rules to exclude .tsx files and ensure clarity in type safety guidelines.
- Cleaned up formatting and examples for better readability and understanding.
This commit is contained in:
2025-11-12 10:24:45 -03:00
parent 9bb13b486e
commit 1c56d71d43
2 changed files with 29 additions and 20 deletions

View File

@@ -1,6 +1,5 @@
--- ---
description: Ajuda para escrever e editar aquivos svelte alwaysApply: true
alwaysApply: false
--- ---
You are able to use the Svelte MCP server, where you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively: You are able to use the Svelte MCP server, where you have access to comprehensive Svelte 5 and SvelteKit documentation. Here's how to use the available tools effectively:

View File

@@ -1,6 +1,7 @@
--- ---
description: Guidelines for TypeScript usage, including type safety rules and Convex query typing description: Guidelines for TypeScript usage, including type safety rules and Convex query typing
globs: **/*.ts,**/*.tsx,**/*.svelte globs: **/*.ts,**/*.svelte
alwaysApply: false
--- ---
# TypeScript Guidelines # TypeScript Guidelines
@@ -8,6 +9,7 @@ globs: **/*.ts,**/*.tsx,**/*.svelte
## Type Safety Rules ## Type Safety Rules
### Avoid `any` Type ### Avoid `any` Type
- **NEVER** use the `any` type in production code - **NEVER** use the `any` type in production code
- The only exception is in test files (files matching `*.test.ts`, `*.test.tsx`, `*.spec.ts`, `*.spec.tsx`) - The only exception is in test files (files matching `*.test.ts`, `*.test.tsx`, `*.spec.ts`, `*.spec.tsx`)
- Instead of `any`, use: - Instead of `any`, use:
@@ -20,6 +22,7 @@ globs: **/*.ts,**/*.tsx,**/*.svelte
### Examples ### Examples
**❌ Bad:** **❌ Bad:**
```typescript ```typescript
function processData(data: any) { function processData(data: any) {
return data.value; return data.value;
@@ -27,6 +30,7 @@ function processData(data: any) {
``` ```
**✅ Good:** **✅ Good:**
```typescript ```typescript
function processData(data: { value: string }) { function processData(data: { value: string }) {
return data.value; return data.value;
@@ -47,6 +51,7 @@ function processData(data: unknown) {
``` ```
**✅ Exception (tests only):** **✅ Exception (tests only):**
```typescript ```typescript
// test.ts or *.spec.ts // test.ts or *.spec.ts
it('should handle any input', () => { it('should handle any input', () => {
@@ -58,6 +63,7 @@ it('should handle any input', () => {
## Convex Query Typing ## Convex Query Typing
### Frontend Query Usage ### Frontend Query Usage
- **DO NOT** create manual type definitions for Convex query results in the frontend - **DO NOT** create manual type definitions for Convex query results in the frontend
- Convex queries already return properly typed results based on their `returns` validator - Convex queries already return properly typed results based on their `returns` validator
- The TypeScript types are automatically inferred from the query's return validator - The TypeScript types are automatically inferred from the query's return validator
@@ -66,10 +72,11 @@ it('should handle any input', () => {
### Examples ### Examples
**❌ Bad:** **❌ Bad:**
```typescript ```typescript
// Don't manually type the result // Don't manually type the result
type UserListResult = Array<{ type UserListResult = Array<{
_id: Id<"users">; _id: Id<'users'>;
name: string; name: string;
}>; }>;
@@ -77,6 +84,7 @@ const users: UserListResult = useQuery(api.users.list);
``` ```
**✅ Good:** **✅ Good:**
```typescript ```typescript
// Let TypeScript infer the type from the query // Let TypeScript infer the type from the query
const users = useQuery(api.users.list); const users = useQuery(api.users.list);
@@ -84,7 +92,7 @@ const users = useQuery(api.users.list);
// You can still use it with type inference // You can still use it with type inference
if (users !== undefined) { if (users !== undefined) {
users.forEach(user => { users.forEach((user) => {
// TypeScript knows user._id is Id<"users"> and user.name is string // TypeScript knows user._id is Id<"users"> and user.name is string
console.log(user.name); console.log(user.name);
}); });
@@ -92,16 +100,18 @@ if (users !== undefined) {
``` ```
**✅ Good (with explicit type if needed for clarity):** **✅ Good (with explicit type if needed for clarity):**
```typescript ```typescript
// Only if you need to export or explicitly annotate for documentation // Only if you need to export or explicitly annotate for documentation
import type { FunctionReturnType } from "convex/server"; import type { FunctionReturnType } from 'convex/server';
import type { api } from "./convex/_generated/api"; import type { api } from './convex/_generated/api';
type UserListResult = FunctionReturnType<typeof api.users.list>; type UserListResult = FunctionReturnType<typeof api.users.list>;
const users = useQuery(api.users.list); const users = useQuery(api.users.list);
``` ```
### Best Practices ### Best Practices
- Trust Convex's type inference - it's based on your schema and validators - Trust Convex's type inference - it's based on your schema and validators
- If you need type annotations, use `FunctionReturnType` from Convex's type utilities - If you need type annotations, use `FunctionReturnType` from Convex's type utilities
- Only create manual types if you're doing complex transformations that need intermediate types - Only create manual types if you're doing complex transformations that need intermediate types