How do you subclass a backdraft component and include watchables?

Question

class Beer extends Component {
    [...component code goes here]
}

class AnchorSteam extends Beer.withWatchables('foamy') {
    [...component code goes here]
}

Will this work? Can I add watchables on the subclassed component?

---

Secondary question:

If instead I did this...

class Beer extends Component.withWatchables('foamy') {
    [...component code goes here]
}

class AnchorSteam extends Beer {
    [...component code goes here]
}

... would AnchorSteam respond to the 'foamy' watchable, e.g. if I have a bdReflect: foamy in AnchorSteam, will it respond to changes in the watchable?

Answer 1

Yes, this feature is available by writing

class AnchorSteam extends withWatchables(Beer, 'foamy') {
    [...component code goes here]
}

withWatchables is a function exported by the watchUtils module:

https://github.com/altoviso/backdraft/blob/master/src/watchUtils.js#L762

A common use case is adding a watchable to a component...

class Beer extends withWatchables(Component, 'temperature') {
    [...component code goes here]
}

Indeed, this is so common, there the library provides some "expression sugar" (that is, it's not really shorter, but seems to read better):

class Beer extends Component.withWatchables('temperature') {
    [...component code goes here]
}

Regarding the second question: yes, AnchorSteam has the watchable foamy. There is nothing special going on here. Beer has a standard javascript getter/setter for foamy as part of its interface; AnchorSteam is a subclass of Beer and therefore will also have the getter/setter for foamy (assuming AnchorSteam has not overridden that getter/setter in the superclass).

The second question also asked if bdReflect would work in AnchorSteam. Again, the answer is yes.