milomg / reactively

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Why doesn't this react?

mrjjwright opened this issue Β· 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!!