|
| 1 | +# SvelteKit Coding Agent Guide |
| 2 | + |
| 3 | +This guide is for AI coding agents working in the SvelteKit monorepo. |
| 4 | + |
| 5 | +**Important:** Read and follow `CONTRIBUTING.md` as well - it contains essential information about testing, code structure, and contribution guidelines that applies here. |
| 6 | + |
| 7 | +## Quick Reference |
| 8 | + |
| 9 | +### Essential Commands |
| 10 | + |
| 11 | +```bash |
| 12 | +# Initial setup (takes 3-4 minutes, set 10+ min timeout) |
| 13 | +pnpm install --frozen-lockfile |
| 14 | + |
| 15 | +# Build all packages (~1-2 seconds) |
| 16 | +pnpm build |
| 17 | + |
| 18 | +# Format code (~15 seconds) |
| 19 | +pnpm run format |
| 20 | + |
| 21 | +# Lint (takes 2-3 minutes, set 5+ min timeout) |
| 22 | +pnpm run lint |
| 23 | + |
| 24 | +# Type checking (takes 3-4 minutes, set 8+ min timeout) |
| 25 | +pnpm run check |
| 26 | +``` |
| 27 | + |
| 28 | +### Testing Commands |
| 29 | + |
| 30 | +```bash |
| 31 | +# Unit tests only (fastest - ~6 seconds) |
| 32 | +pnpm -F @sveltejs/kit test:unit |
| 33 | + |
| 34 | +# Run a single unit test file |
| 35 | +pnpm -F @sveltejs/kit test:unit:dev path/to/test.spec.js |
| 36 | + |
| 37 | +# Integration tests (10-30 minutes, set 60+ min timeout) |
| 38 | +pnpm test:kit |
| 39 | + |
| 40 | +# A single integration test suite (name of suite found in packages/kit/test/apps/*/package.json) |
| 41 | +pnpm -F {name-of-suite} test |
| 42 | + |
| 43 | +# Run single Playwright test (must use workdir - no pnpm -F shorthand) |
| 44 | +cd packages/kit/test/apps/basics && npx playwright test --grep "test name" |
| 45 | + |
| 46 | +# Other package tests (5-15 minutes, set 30+ min timeout) |
| 47 | +pnpm test:others |
| 48 | +``` |
| 49 | + |
| 50 | +### Pre-submission Checklist |
| 51 | + |
| 52 | +1. `pnpm run format` - Auto-format code |
| 53 | +2. `pnpm run lint` - Check code style (don't cancel early) |
| 54 | +3. `pnpm run check` - Type checking (don't cancel early) |
| 55 | +4. `pnpm -F @sveltejs/kit test:unit` - Run unit tests |
| 56 | +5. For @sveltejs/kit changes: `pnpm -F @sveltejs/kit prepublishOnly` - Generate types |
| 57 | +6. Run `pnpm changeset` to document changes (prefix with `fix`, `feat`, `breaking`, or `chore`) |
| 58 | + |
| 59 | +## Code Style Examples |
| 60 | + |
| 61 | +The coding style guidelines are in `CONTRIBUTING.md`. Here are additional examples: |
| 62 | + |
| 63 | +### Imports |
| 64 | + |
| 65 | +```javascript |
| 66 | +// JSDoc type imports at the top |
| 67 | +/** @import { Handle, RequestEvent } from '@sveltejs/kit' */ |
| 68 | + |
| 69 | +// Named imports (no default exports) |
| 70 | +import { HttpError, SvelteKitError } from '@sveltejs/kit/internal'; |
| 71 | +``` |
| 72 | + |
| 73 | +### Functions |
| 74 | + |
| 75 | +```javascript |
| 76 | +// Exported named functions (no default exports) |
| 77 | +export function coalesce_to_error(err) { |
| 78 | + // Implementation |
| 79 | +} |
| 80 | + |
| 81 | +// JSDoc for all parameters and return types |
| 82 | +/** |
| 83 | + * @param {unknown} error |
| 84 | + * @returns {Error} |
| 85 | + */ |
| 86 | +export function coalesce_to_error(error) { |
| 87 | + // Implementation |
| 88 | +} |
| 89 | + |
| 90 | +// Use arrow functions for callbacks |
| 91 | +const handler = (event) => { |
| 92 | + /* ... */ |
| 93 | +}; |
| 94 | +``` |
| 95 | + |
| 96 | +### Error Handling |
| 97 | + |
| 98 | +```javascript |
| 99 | +// Type checking with instanceof |
| 100 | +if (error instanceof HttpError || error instanceof SvelteKitError) { |
| 101 | + // Handle |
| 102 | +} |
| 103 | + |
| 104 | +// Graceful fallbacks |
| 105 | +const status = error?.status ?? 500; |
| 106 | + |
| 107 | +// Optional chaining and nullish coalescing |
| 108 | +const content_type = request.headers.get('content-type')?.split(';', 1)[0]; |
| 109 | +``` |
| 110 | +
|
| 111 | +### TypeScript/JSDoc |
| 112 | +
|
| 113 | +- Use JSDoc annotations for all function parameters and return types |
| 114 | +- Complex types: `/** @type {Array<{ type: string, subtype: string }>} */` |
| 115 | +- Type casting when needed: `/** @type {Error} */ (err)` |
| 116 | +- Enable strict mode: `checkJs: true`, `strict: true` in tsconfig.json |
| 117 | +
|
| 118 | +### Formatting (via Prettier) |
| 119 | +
|
| 120 | +- **Tabs for indentation** (not spaces) |
| 121 | +- **Single quotes** for strings |
| 122 | +- **No trailing commas** |
| 123 | +- **100 character line width** |
| 124 | +- Files are auto-formatted by `pnpm run format` |
| 125 | +
|
| 126 | +### Comments |
| 127 | +
|
| 128 | +````javascript |
| 129 | +// JSDoc with usage examples for public APIs |
| 130 | +/** |
| 131 | + * Sequence multiple handle functions |
| 132 | + * |
| 133 | + * @example |
| 134 | + * ```js |
| 135 | + * export const handle = sequence(first, second); |
| 136 | + * ``` |
| 137 | + * |
| 138 | + * @param {...Handle} handlers |
| 139 | + * @returns {Handle} |
| 140 | + */ |
| 141 | +
|
| 142 | +// Inline comments for clarifications |
| 143 | +// no match equals invalid header — ignore |
| 144 | +```` |
| 145 | +
|
| 146 | +## Key Packages |
| 147 | +
|
| 148 | +- `@sveltejs/kit` - Main framework (`packages/kit/`) |
| 149 | +- `adapter-*` - Platform adapters (node, cloudflare, netlify, vercel, static, auto) |
| 150 | +- `@sveltejs/package` - Package building utilities |
| 151 | +- `@sveltejs/enhanced-img` - Enhanced image component |
| 152 | +- `@sveltejs/amp` - AMP support |
| 153 | +
|
| 154 | +## Troubleshooting |
| 155 | +
|
| 156 | +- **Browser tests fail**: `pnpm playwright install chromium` |
| 157 | +- **Build failures**: Ensure `pnpm install --frozen-lockfile` completed |
| 158 | +- **Type errors**: Run `pnpm -F @sveltejs/kit prepublishOnly` |
| 159 | +- **Lint issues**: Run `pnpm run format` first |
0 commit comments