[labs/motion] Add meaningful error when not used on LitElement #2197
Conversation
|
| if (firstUpdate) { | ||
| this._host = part.options?.host as LitElement; | ||
| if (this._host == null) { | ||
| throw new Error("animate directive must be used in a LitElement"); |
There was a problem hiding this comment.
The host just has to implement the ReactiveControllerHost interface. So it can be a ReactiveElement or other implementation.
There was a problem hiding this comment.
Thanks for checking @justinfagnani! Yes, that's what I thought at the beginning. I've implemented HookComponents (similar to VirtualComponent in Haunted) using AsyncDirective in lit 2, and tried to implement the ReactiveControllerHost interface. But this was not enough for animate because it depends on methods that are not on the interface but come from ReactiveElement class, like hasUpdated or updateCompleted:
lit/packages/labs/motion/src/animate.ts
Lines 445 to 453 in fba16cc
Actually I wanted to ask about this, because if Reactive Controllers stick to the ReactiveControllerHost interface they could be used more broadly (e.g. you could create a React hook that accepts reactive controllers), but if controllers are going to depend on LitElement at the end this won't be the case (and it makes the ReactiveControllerHost interface somewhat useless).
There was a problem hiding this comment.
Sorry, seems I misread the docs and updateComplete is actually part of ReactiveControllerHost interface, but not hasUpdated so I've sent a PR to replace it: #2239
|
closing in favor of #2239 |
Because directives can be used with standalone templates, users can get confused when
animateis not working (I had to debug the code to find the problem). Not sure if this the best way to do the check but it'd be nice to offer a more meaningful error when the hostLitElementcannot be found. It'd be also desirable to put in the README, I can see a PR to include a mention if that's OK.