Why doesn't this react?
mrjjwright opened this issue ยท 2 comments
mrjjwright commented
Output: ๐ 1
instead of ๐ 4
, does this have something to do with mixing the 2 styles?
import { Reactive } from "@reactively/core"
import { reactive } from "@reactively/decorate"
class Read {
@reactive value = 0
}
const a = new Read()
const log = new Reactive(() => {
console.log(`๐ ${a.value}`)
})
a.value = 1
log.get()
a.value = 4
log.get()
mighdoll commented
Classes with reactively decorated classes need to extend HasReactive
(in the current current reactively. In the older version we used a decoration on the class as well as the one on the property). That's why it isn't working for you.
Here's a test I just added to the repo based on your example to demonstrate:
test("mix decorate with core", () => {
class Read extends HasReactive {
@reactively value = 0
}
const a = new Read()
const log = new Reactive(() => a.value);
a.value = 1
expect(log.get()).toEqual(1);
a.value = 4
expect(log.get()).toEqual(4);
});
It would be nice if we could generate a warning if the extends clause is missing. That probably deserves it's own issue.
mrjjwright commented
thanks!!