SvelteKit
DMA с корнем композиции в routes/ и Svelte 5 runes.
Пример SvelteKit + Svelte 5: breadth по features, promoted cart service, связка событий в app-providers.svelte.
Исходники: examples/sveltekit-routes.
Корень композиции = routes/
DMA трактует src/routes/ как app/:
src/routes/
├── +layout.svelte # import app.css, монтирование AppProviders
├── +page.svelte # тонкий shell — только связка
└── app-providers.svelte # theme tokens + event subscriptions+page.svelte монтирует features/*/public/* и стадия-0 profile.svelte, promo.svelte.
Event связка
Checkout эмитит событие; app подписывается и вызывает service:
<!-- routes/app-providers.svelte -->
<script>
import { onCheckoutCompleted } from "@/features/checkout/public/checkout.events";
import { clearCart } from "@/services/cart/public/cart";
onCheckoutCompleted(() => clearCart());
</script>Нет checkout → cart как ребро между фичами — app импортирует оба модуля вниз. См. Склейка модулей.
Mini-shop flow
- Catalog —
catalog.store.ts+addCartItemиз cart service - Checkout — cart service +
checkout.store.ts(payment status) - AppProviders —
checkoutCompleted→clearCart() - Profile / Promo — стадия-0, shared
Card
Svelte 5 runes
| Файл | Runes |
|---|---|
profile.svelte | $state |
app-providers.svelte | $props, $effect |
button.svelte | $props |
Stores в *.store.ts — обычные Svelte stores, auto-subscription через $store.
Куда класть код
| Вопрос | Место |
|---|---|
| Route shell, layout? | src/routes/ |
| UI flow? | features/<name>/public/* |
| State одного feature? | features/<name>/<name>.store.ts |
| 2+ modules? | services/<name>/public/* |
| Portable helper/UI? | shared/lib/, shared/ui/ |
| Subscribers / ports? | routes/app-providers.svelte |
Внутренности импортируются relative из public/ файла того же feature.
Стили
| Вид | Где |
|---|---|
| Global reset | src/app.css → +layout.svelte |
| Design tokens | app-providers.svelte (--color-* на .app-theme) |
| Route shell | scoped <style> в +page.svelte |
| Feature page | scoped в public/*.svelte |
| Shared UI | scoped в shared/ui/*.svelte |
| Feature sheet | checkout/checkout.css → import из public/ |
Токены в provider shell — features и shared/ui читают var(--…) без импорта друг друга.
Тесты
Размещённый рядом *.test.ts (Vitest):
catalog.store.test.ts— store +svelte/storeservices/cart/public/cart.test.ts— service APIshared/lib/format-currency.test.ts— pure helper
dma check сканирует и *.test.ts — импорты в тестах подчиняются тем же правилам. В примере тесты разместите рядом и импортируют relative внутри модуля или через public/.
Команды
bun run dev
bun run build
bun run dma-check # dma check .
bun run lint # oxlint + @derived-modular/oxlint-plugin
bun run test