milomg / reactively

MIT License
441 stars 23 forks source link

Why doesn't this react? #6

Closed mrjjwright closed 1 year ago

mrjjwright commented 1 year ago

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 1 year ago

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 1 year ago

thanks!!