LitLabs.motion.animate() throws an error

[leolorenzoluis]

The prototype that I have was working when Lit root is using non Elmish (basically similar to switching the two here) https://github.com/fable-compiler/Fable.Lit/blob/main/sample/App.fs#L47

Now when I load a LitComponent with Elmish I get the following error on the console:

animate.ts:195 Uncaught TypeError: Cannot read properties of undefined (reading 'addController')
    at Animate.update (animate.ts:195:18)
    at Animate._$resolve (directive.ts:134:17)
    at resolveDirective (lit-html.ts:1120:24)
    at ElementPart._$setValue (lit-html.ts:2077:5)
    at TemplateInstance._update (lit-html.ts:1224:16)
    at ChildPart._commitTemplateResult (lit-html.ts:1566:16)
    at ChildPart._$setValue (lit-html.ts:1418:12)
    at classExpr.setValue (async-directive.ts:366:19)
    at classExpr.requestUpdate (Hook.fs:338:9)
    at HookContext.setState (Hook.fs:148:17)

I had the following TemplateResult

    html $"""
    <div class="{className} {transition.className}" {LitLabs.motion.animate()}>
        <div>
            <p>{item.Id} {item.FriendlyName} {item.URL}</p>
            <sl-button @click={Ev (fun _ -> transition.triggerLeave())}>Delete monitor</sl-button>
            <sl-button @click={Ev (fun _ -> EditMonitor item |> dispatch)}>Edit monitor</sl-button>
        </div>
    </div>
    """

Removing the {LitLabs.motion.animate()} removes the error and it still animates, but not sure if I might have hide done something I'm not aware of.

[alfonsogarciacaro]

Unfortunately this is a problem because the animate directive requires LitElement although anything implementing the ReactiveController interface should be enough. I sent them a PR to fix this some time ago but didn't get a reply: https://github.com/lit/lit/pull/2239

But... it doesn't really matter because at the end I couldn't implement the updateComplete method in HookComponent properly (it relies on a complicated schedule I couldn't understand well). So if you want to use animate you'll need to have a LitElement somewhere up in the component hierarchy. It's enough to have a single LitElement as the root without a shadow (in case you want to use global CSS) as it's done in Lit.TodoMVC.

About the effects of animate and the transition. You can say the transition affects only that component but animate affects siblings too. In the case of Lit.TodoMVC the transition creates the zoom in/out effect, while animate moves the items smoothly to adjust a list after adding/removing elements.