Reactive decorator
- 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.