SvelteKit

SvelteKit + Svelte 5 example: breadth across features, promoted cart service, event wiring in app-providers.svelte.

Sources: examples/sveltekit-routes.

Composition root = routes/

DMA treats src/routes/ as app/:

src/routes/
├── +layout.svelte       # import app.css, mount AppProviders
├── +page.svelte         # thin shell — wiring only
└── app-providers.svelte # theme tokens + event subscriptions

+page.svelte mounts features/*/public/* and stage-0 profile.svelte, promo.svelte.

Event wiring

Checkout emits an event; app subscribes and calls a service:

<!-- routes/app-providers.svelte -->
<script>
  import { onCheckoutCompleted } from "@/features/checkout/public/checkout.events";
  import { clearCart } from "@/services/cart/public/cart";

  onCheckoutCompleted(() => clearCart());
</script>

No checkout → cart as a feature edge — app imports both modules downward. See Cross-module wiring.

Mini-shop flow

1. Catalog — catalog.store.ts + addCartItem from cart service
2. Checkout — cart service + checkout.store.ts (payment status)
3. AppProviders — checkoutCompleted → clearCart()
4. Profile / Promo — stage-0, shared Card

Svelte 5 runes

Stores in *.store.ts — regular Svelte stores, auto-subscription via $store.

Where to put code

Internals are imported relative from the public/ file of the same feature.

Styles

Tokens in the provider shell — features and shared/ui read var(--…) without importing each other.

Tests

Colocated *.test.ts (Vitest):

• catalog.store.test.ts — store + svelte/store
• services/cart/public/cart.test.ts — service API
• shared/lib/format-currency.test.ts — pure helper

dma check scans *.test.ts too — imports in tests follow the same rules. In the example, tests are colocated and import relative inside the module or via public/.

Commands

bun run dev
bun run build
bun run dma-check   # dma check .
bun run lint        # oxlint + @derived-modular/oxlint-plugin
bun run test

What's next