DrSensor / DrSensor/nusa

Reactive decorator

Open
#16 4 comments 0 reactions 0 assignees View on GitHub
data binding decorator enhancement priority: low
Dominant language
JavaScript
Stars
4
Forks
0
PR merge metrics
No merged PRs in 30d

Description

```ts
import { reactive, autorun, unreact } from "https://esm.run/wiles/decorator"
import { clear, halt, listen } from "https://esm.run/wiles/std"
export default class Global {
static total = 0
@reactive accessor count: number

/** imply @derive with count as dependency */
get half() { return this.count / 2 }

increment() { this.count++ }

/** automatically run when instantiated (implicit) */
@autorun.now #halfSum() { Global.total += this.half }

/** need to be called to register the effect (explicit) */
@autorun enableLog() { console.log(this.count) }

constructor({
log = true,
} = {}) {
if (log) this.enableLog()
}

disableLog() { clear(this.enableLog) }

toggleLog() {
if (this.enableLog == clear) {
console.warn("log permanently disabled")
return
}
if (this.enableLog == halt) listen(this.enableLog)
else if (this.enableLog == listen) halt(this.enableLog)
}
}
```
> **Note** no need for `@derive` decorator (maybe 🤔)

Behaviour:
1. When method for event handler is called, the autorun happen after event handler is finished. This give a chance to conditionally disable autorun when assigning the reactive accessor. (i.e `if (this.count++ < 5) unreact(this, "count")`)
2. Else the autorun will just run immediately when assigning the reactive accessor.

> 📚 **References**
> - [Type of Reactivity and their](https://dev.to/modderme123/super-charging-fine-grained-reactive-performance-47ph) [Performances](https://github.com/modderme123/reactively/tree/main/packages/bench)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.