svelte-reactive-classes v1.3.0
svelte-reactive-classes
svelte-reactive-classes
is a convenient and lightweight library that allows you to create reactive class instances
with encapsulation in your Svelte applications. The library provides an easy way to convert your classes into Svelte
stores on the fly, while removing the update
and set
functions to improve encapsulation. It also supports the CQS (
Command Query Separation) pattern through the @command
decorator.
Motivation
As a backend developer with a solid background in Object-Oriented Programming (OOP) and software architecture, I found the way state management is handled in many frontend frameworks to be quite annoying. In OOP, it is essential that only a class should change its state, without exposing its internal data outside. This principle ensures better encapsulation and maintainability.
Svelte provides a reactive store system that can be utilized to improve the state management in frontend applications. This inspired me to develop a solution that leverages Svelte's store values while maintaining the OOP principle of encapsulation.
The implementation presented here allows you to mark specific methods as commands that trigger reactivity. This approach aligns well with the Command Query Separation (CQS) principle, where commands are responsible for causing side effects, such as state changes, and should not return any data.
By combining the power of Svelte's reactive store system with the principles of OOP and CQS, this solution provides an elegant and maintainable approach to state management in frontend applications.
Installation
You can install svelte-reactive-classes
using npm:
npm install svelte-reactive-classes
Usage
1. Create your class with methods decorated with @command
Create a TypeScript class and decorate the methods that will trigger reactivity with the @command
decorator. These
methods are considered "commands" in the CQS pattern.
// Counter.ts
import {command} from "svelte-reactive-classes";
export class Counter {
count = 0;
@command
increment() {
this.count++;
}
@command
decrement() {
this.count--;
}
}
2. Use the reactiveInstanceOf
function in your Svelte component
In your Svelte component, import your class and the reactiveInstanceOf
function. Use the function to create a
reactive instance of your class.
<!-- App.svelte -->
<script lang="ts">
import { Counter } from "./Counter";
import { reactiveInstanceOf } from "svelte-reactive-classes";
const count = reactiveInstanceOf(Counter);
</script>
3. Interact with the reactive class instance in your Svelte markup
You can now use the reactive class instance in your Svelte component's markup. Access properties with the $
syntax,
and call methods directly.
<!-- App.svelte -->
<main>
<h1>{$count.count}</h1>
<button on:click={() => count.increment()}>Increase</button>
<button on:click={() => count.decrement()}>Decrease</button>
</main>
API
@command
A decorator to mark methods as "commands" in the CQS pattern. These methods will trigger reactivity when called.
reactiveInstanceOf(ClassConstructor)
Creates a reactive instance of the given class constructor. The instance will have reactive properties and can be used
in Svelte components with the $
syntax.
ClassConstructor
: The class constructor function.- Returns: A reactive instance of the class.
Keywords
- Svelte
- Reactive store
- Object-Oriented Programming (OOP)
- Encapsulation
- Command Query Separation (CQS)
- State management
- Frontend architecture
License
MIT License
Contributing
Contributions are welcome! If you have any questions, suggestions, or issues, please feel free to open a GitHub issue or submit a pull request.