|
| 1 | +# Sveltia CMS |
| 2 | + |
| 3 | +Modern, Git-based headless CMS, drop-in replacement for Netlify/Decap CMS. Svelte 5 (runes) with JavaScript, Vite 8, Vitest 4. ~710 source files, 255 test files, 7,200+ tests. Ships as a browser bundle (IIFE + ES module), loaded via CDN or npm. |
| 4 | + |
| 5 | +## Setup |
| 6 | + |
| 7 | +- **pnpm only** — npm will not work correctly with this project. |
| 8 | +- Node v26 (see `.nvmrc`). |
| 9 | +- Run `pnpm install` first, and again after any `package.json` change. |
| 10 | + |
| 11 | +## Commands |
| 12 | + |
| 13 | +```bash |
| 14 | +pnpm dev # dev server with hot reload |
| 15 | +pnpm build # production build -> package/dist/ |
| 16 | +pnpm build:watch |
| 17 | +pnpm preview |
| 18 | + |
| 19 | +pnpm check # run all checks below — do this before committing |
| 20 | +pnpm check:eslint |
| 21 | +pnpm check:prettier |
| 22 | +pnpm check:stylelint |
| 23 | +pnpm check:svelte |
| 24 | +pnpm check:oxlint |
| 25 | +pnpm check:cspell |
| 26 | +pnpm check:imports # custom script, more accurate than standard unused-import tools |
| 27 | +pnpm check:audit |
| 28 | + |
| 29 | +pnpm test |
| 30 | +pnpm test:coverage |
| 31 | + |
| 32 | +pnpm format # auto-fix Prettier formatting |
| 33 | +``` |
| 34 | + |
| 35 | +## Architecture |
| 36 | + |
| 37 | +``` |
| 38 | +src/lib/ |
| 39 | +├── components/ # Svelte UI (app.svelte is the root component) |
| 40 | +│ ├── assets/ # asset management UI |
| 41 | +│ └── contents/ # content editing UI |
| 42 | +├── services/ # business logic & data |
| 43 | +│ ├── app/ # core app services |
| 44 | +│ ├── assets/ |
| 45 | +│ ├── api/ # api client wrappers |
| 46 | +│ ├── backends/ # GitHub/GitLab/Gitea integrations |
| 47 | +│ ├── config/ # CMS config handling |
| 48 | +│ ├── contents/ # content & collection management |
| 49 | +│ ├── integrations/ # external services |
| 50 | +│ ├── search/ # content search |
| 51 | +│ ├── user/ # auth & preferences |
| 52 | +│ └── utils/ |
| 53 | +├── types/ # JSDoc/TS type definitions |
| 54 | +├── locales/ # i18n |
| 55 | +└── main.js # entry point |
| 56 | +``` |
| 57 | + |
| 58 | +Key config: `vite.config.js`, `svelte.config.js` (runes enabled), `jsconfig.json` (`$lib/*` alias), `eslint.config.js` (flat config, Airbnb + Svelte), `.prettierrc.yaml`, `.stylelintrc.yaml`. |
| 59 | + |
| 60 | +Build output: `package/dist/sveltia-cms.js` (IIFE), `package/dist/sveltia-cms.mjs` (ESM), full npm package in `package/`. |
| 61 | + |
| 62 | +## CI |
| 63 | + |
| 64 | +`.github/workflows/tests.yml` runs on every push: Check, Test, Build in parallel, using `.nvmrc` Node version and pnpm. A PR must pass ESLint, Prettier, all tests, Svelte compiler checks, the production build, and the unused-imports check. |
| 65 | + |
| 66 | +## Conventions |
| 67 | + |
| 68 | +- Style: Airbnb JS guide + project overrides in `eslint.config.js`. Single quotes in JS, double quotes in YAML/CSS. 100-char line length. Trailing commas always. Import order (builtin → external → internal → `$lib`) is enforced by ESLint. |
| 69 | +- Types: JSDoc comments (TypeScript-flavoured), centralized in `src/types/*.js`, imported via `@import`. |
| 70 | +- Svelte 5: runes syntax only — no legacy Svelte patterns. Use the Svelte MCP server / `svelte-file-editor` agent for any `.svelte` or `.svelte.js`/`.svelte.ts` work. |
| 71 | +- Prose: Canadian English in Markdown, American English in code/comments. Curly quotes in prose, straight quotes in source, backticks for inline code. |
| 72 | +- Tests: Vitest, co-located `*.test.js` files. Coverage tracked for `src/lib/{components,services}/**/*.js`; keep it at 100%. Use `sed` to spot uncovered lines in coverage reports. |
| 73 | +- Bundle size: stay under 2 MB. Current build is ~1.96 MB — close to the ceiling, so watch new dependencies carefully. |
| 74 | +- Target: modern browsers (ES2025). |
| 75 | + |
| 76 | +```javascript |
| 77 | +// import order |
| 78 | +import { get } from 'svelte/store'; // external |
| 79 | + |
| 80 | +import { cmsConfig } from '$lib/services/config'; // internal, $lib alias |
| 81 | +import Button from '$lib/components/common/button.svelte'; |
| 82 | + |
| 83 | +/** |
| 84 | + * @import { CmsConfig } from '$lib/types/public'; |
| 85 | + */ |
| 86 | +``` |
0 commit comments