Domain Logic Separation with Class-based Runes

Snippet

Domain Logic Separation with Class-based Runes

In Svelte 5, classes can encapsulate reactive state using runes. This allows you to pull business logic out of components and into testable domain models. Unlike functional state, classes provide a clear structure for complex data and methods that automatically trigger UI updates when properties change.

snippet.js
javascript
class UserProfile {
  name = $state('');
  status = $state('offline');
  lastSeen = $derived(new Date().toLocaleTimeString());
 
  constructor(initialName) {
    this.name = initialName;
  }
 
  goOnline() {
    this.status = 'online';
  }
}
 
const user = new UserProfile('Markus');

svelte

Breakdown

name = $state('');

Defines a reactive property within the class instance.

lastSeen = $derived(...);

Creates a computed property that updates automatically based on dependencies.

this.status = 'online';

Mutating the class property triggers reactivity in all observing components.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Domain Logic Separation with Class-based Runes

Related