Detecting changes in lit sub-properties - lit

Question

I've made a simplified reduction of the issue I'm having with lit. Some of the state of my component is held in an object. I'd like to be able to detect and react to a change in a sub-property with some fine control. Here's the example:
import { html, LitElement } from "lit";
import { customElement, state } from "lit/decorators.js";
#customElement("my-app")
export class App extends LitElement {
#state({
hasChanged(newVal: any, oldVal: any) {
console.log(`[hasChanged] new fruit is: ${newVal?.fruit}`);
console.log(`[hasChanged] old fruit is: ${oldVal?.fruit}`);
return true;
}})
data = {
fruit: "apples",
weather: "rain",
};
constructor() {
super();
setTimeout(() => {
this.data.fruit = "bananas";
this.data = { ...this.data };
}, 3000);
setTimeout(() => {
this.data.weather = "snow";
this.data = { ...this.data };
}, 6000);
}
render() {
return html`
Weather: ${this.data.weather} Fruit: ${this.data.fruit}
`;
}
shouldUpdate(changedProperties: any) {
// I only want to update if the weather is changing, not the fruit
console.log(
`new weather is: ${changedProperties.get("data")?.weather}`
);
console.log(`current weather is: ${this.data.weather}`);
console.log(`new fruit is: ${changedProperties.get("data")?.fruit}`);
console.log(`current fruit is: ${this.data.fruit}`);
console.log("");
if (changedProperties.get("data")?.weather !== this.data.weather) {
return true;
} else {
return false;
}
}
}
When shouldUpdate fires, the component's evaluation of the sub-property values has already updated. So I can't compare changedProperties.get("data")?.weather with this.data.weather to see if it has changed.
[Update] at michaPau's suggestion I looked into the hasChanged method - unfortunately this also gives back the same values for oldVal and newVal when a change is triggered.
Does anyone know a new approach or fix? It works as expected if I split that state object into two separate state variables, but objects and properties works so much better in keeping code readable. Passing more than 4 or 5 properties into a component starts getting messy, in my opinion.

Answer 1

I don't know exactly, what you are doing wrong, but your code seems to work actually, but yes as others mentioned, you should use the spread operator together with the assignment operation:
<script type="module">
import {
LitElement,
html,
css
} from "https://unpkg.com/lit-element/lit-element.js?module";
class MyContainer extends LitElement {
static get styles() {
return css`
.wrapper {
min-height: 100px;
min-width: 50%;
margin: 5em;
margin-top: 0;
padding: 10px;
background-color: lightblue;
}
`;
}
render() {
return html`
<div class="wrapper">
<slot></slot>
</div>
`;
}
}
class MyItem extends LitElement {
static properties = {
data: {
state: true,
hasChanged: (newVal, oldVal) => {
console.log(`[hasChanged] new fruit is: ${newVal?.fruit}`);
console.log(`[hasChanged] old fruit is: ${oldVal?.fruit}`);
return true;
}
}
};
constructor() {
super();
this.data = {
fruit: "apples",
weather: "rain"
};
setTimeout(() => {
this.data = { ...this.data, fruit: 'bananas' };
}, 3000);
setTimeout(() => {
this.data = { ...this.data, weather: "snow" };
}, 6000);
}
render() {
return html`
<div style="background-color: ${this.getBackgroundColor()}">
Weather: ${this.data.weather} Fruit: ${this.data.fruit}
</div>
`;
}
getBackgroundColor() {
if(this.data.weather === 'snow') return 'white';
else if(this.data.fruit === 'bananas') return 'yellow';
return 'blue';
}
shouldUpdate(changedProperties) {
// I only want to update if the weather is changing, not the fruit
console.log(`new weather is: ${changedProperties.get("data")?.weather}`);
console.log(`current weather is: ${this.data.weather}`);
console.log(`new fruit is: ${changedProperties.get("data")?.fruit}`);
console.log(`current fruit is: ${this.data.fruit}`);
console.log("");
if (changedProperties.get("data")?.weather !== this.data.weather) {
return true;
} else {
return false;
}
}
}
customElements.define("my-container", MyContainer);
customElements.define("my-item", MyItem);
</script>
<my-container>
<my-item></my-item>
</my-container>
If you want to see also the change to yellow change your code in the shouldUpdate function to return true if changedProperties.get("data") is not undefined.