milomg/reactively

Why doesn't this react?

mrjjwright opened this issue ยท 2 comments

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()

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.

thanks!!