No changedProperties passed to willUpdate

[tommillard]

I'm working with the new version of lit, and have built in a lit-store so that I have access to state changes in one of my components. The component is updating itself whenever the data in the store changes, but I'm not getting any details of the nature of the changes sent to the willUpdate() method.

Is this expected, or am I not configuring it right?

I have found a workaround, whereby I make the component's parent the observeLitElement, and then pass the required value down to the child as a standard reactive property.

[kaifaty]

Yeah, it's the problem I don't find out to solve. Stored variables are not props of LitElement component. It works like that: When storage variable iis change it's trigger requestUpdade() of each LitElement component uses it. So you can't use willUpdate.

[tommillard]

Sure, I see. One thing I've been able to do is to keep a record of the old state of the store in each lit-element, so that I can do a manual comparison and deduce what has changed.

import { routeState } from "../../stores/routeStore";
import { accountState, accountStore } from "../../stores/accountStore";

@customElement("main-header")
export class mainHeader extends observeLitElement(LitElement) {
    oldContext: any;
    oldBalance: any;

    render() {
        return html` <header>
            <b>${routeState.context.view}</b>
            <b>${accountState.balance}</b>
        </header>`;
    }
    willUpdate(changedProperties: any) {
        // It's possible to write logic here to manually compare the values and work out what has changed.
        this.oldContext = routeState.context;
        this.oldBalance = accountState.balance;
    }
}

[tommillard]

Seems like the ideal solution would be a Reactive Controller that can have multiple hosts.

[kaifaty]

Are you try to optimise re-render in willUpdate? In most cases you don't need think about it. Lit-html will not re-render part of component if variable not change.

[tommillard]

It's more that I'd like to wrestle some control back, when needed, from the reactive update cycle. It's usually for animation purposes.

I recently made an interface without lit. When a new component was added, removed or geometrically modified in the interface, it would send an animation request to a central controller. This controller would calculate the animation of all those UI modifications in aggregate and run whichever transforms, scrolls etc. were needed in one go. I'm not sure how I'd do that in lit, without being able to intercept updates before they happen and manually intervene in the update cycle.

[kaifaty]

All transforms calculated in store will accept browser after render. Can you give complete example of you component? I'm really intresting your case. (maybe link on repo)

[tommillard]

I'm afraid not, it's work I've done for my employer that I'm unable to share publicly, unfortunately.

I'll keep you posted with how the work I'm doing now progresses, and if any useful techniques emerge.