The strange case of the wandering this

[ThetaSinner]

I ran into an issue with a scaffolded hApp using Vue. The front-end after scaffolding doesn't actually have signals working so it's not super obvious that there's a problem. But when you try to use them you get an error logged to the console

Uncaught TypeError: Cannot read property 'has' of undefined

Following this error lead me to Emittery and an existing issue about this sindresorhus/emittery#86. I'm 100% sure this should be fixed in Emittery but in the meantime you actually can't use signals in a Vue app without a hard-to-guess workaround that @mattyg has added to that issue.

The problem is with this not being bound to the Emittery class properly. The Emittery class then uses itself (this) as a key into a hash map. When a client class from this library that extends Emittery is put inside a proxy that all falls apart. It's worth noting that while you could keep this class outside a proxy, scaffolded hApps use provide/inject which is a sensible choice and automatically uses proxies so we're already pretty committed on that front.

We can fix this in our constructors by doing this.on = this.on.bind(this);. I've tested this in the constructor for AppAgentWebsocket.

I'd like to keep this issue open to track the upstream issue until it gets fixed, but for now we can fix this in the Holochain client and remove a really nasty gotcha for Vue users.