@notify

The reactivity in prune is super simple.

If you want to update the DOM after the execution of a method, just decorate it with @notify and the DOM will be updated only once at the end of the method.

demo.py

from prune import Prune, notify

class Counter:
    def __init__(self) -> None:
        self.value = 0

    @notify #update the DOM at the end of the method
    def increment(self):
        self.value += 1

    #doesn't update the DOM but the store is still updated
    def decrement(self):
        self.value -= 1

Prune(counter=Counter())

Note

Here the increment method will update the DOM but not the decrement method (because @notify is missing on decrement).

Even if the DOM is not updated with decrement, the store is still updated.

index.html

<h4 p-text="store.counter.value"></h4>
<button @click="store.counter.increment()">Increment (DOM update)</button>
<button @click="store.counter.decrement()">Decrement (no DOM update)</button>

Try to increment 3 times then decrement 3 times and then increment, you will see the DOM update only on increment but the store is always updated.

Increment (DOM update) Decrement (no DOM update)