en un clic
sveltekit-patterns
// SvelteKit patterns for devhub-crm. Use for remote functions (query, form, command), routing, and server-side logic.
// SvelteKit patterns for devhub-crm. Use for remote functions (query, form, command), routing, and server-side logic.
Database migration patterns for SQLite. Use when creating migrations, modifying schema, or running database changes.
Remote functions reactive UI patterns. Use for smooth in-place updates, preventing page jumps, and managing loading states with .current property.
Better-auth integration for authentication. Use when implementing login, registration, protected routes, or email verification.
Vitest browser mode component testing. Use for testing Svelte 5 components with real browsers, locators, accessibility patterns, and reactive state.
SQLite operations using better-sqlite3 with prepared statements. Use when implementing CRUD operations, timestamps, and user-scoped queries with row-level security.
Svelte 5 error handling. Use for error boundaries, async await expressions, loading states, and form errors.
| name | sveltekit-patterns |
| description | SvelteKit patterns for devhub-crm. Use for remote functions (query, form, command), routing, and server-side logic. |
// Query: Read data
export const get_contacts = query(() =>
db.prepare('SELECT * FROM contacts').all(),
);
// Form: Validated mutation with redirect
export const create = form(
v.object({ name: v.string() }),
async ({ name }) => {
db.prepare('INSERT INTO contacts ...').run(id, name);
redirect(303, '/contacts');
},
);
// Command: Mutation with refresh
export const delete_contact = command(v.string(), async (id) => {
db.prepare('DELETE FROM contacts WHERE id = ?').run(id);
await get_contacts().refresh();
return { success: true };
});
query (read), form (mutations + redirects), command
(mutations only)user_id in WHERE clausesquery.batch() for N+1 prevention.refresh() in form/command handlers.current: Store queries in variables, check
.current === undefined for initial loadrefresh_key++ or {#key} blocks{ success: true }