Repository navigation
How nested signals resolution should work? #140
Description
The bellow is a simple example of how i would expect (?) nested signals to work.
When clicking "to cart" it should change to "loading".
<html>
<body>
<div id="products"></div>
<script type="module">
import {render, signal, html, effect, computed} from 'https://esm.run/uhtml/signal';
class Cart {
add(product) {
console.log('adding to cart: ', product.name);
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('added to cart: ', product.name);
resolve();
}, 2000);
})
}
}
const cart = new Cart();
class Item {
constructor(sData) {
this.data = sData;
}
renderItem() {
return html`
<li>${this.data.value.name}
<button @click="${e => {
this.data.value.loading_cart = true
cart.add(this.data.value).then(() => {
this.data.value.loading_cart = false
});
}}">${this.data.value.loading ? 'loading' : 'to cart'}
</button>
</li>`;
}
}
class Catalog {
#items = signal([]);
#computed;
#effect;
constructor() {
this.#computed = computed(() => this.#items.value.map(item => (new Item(signal(item))).renderItem()));
this.#effect = effect(() => {
render(document.getElementById('products'), () => html`
<ul>${this.#computed.value}</ul>`)
});
}
addItem(value) {
this.#items.value = [...this.#items.value, value];
}
setItems(items) {
this.#items.value = items;
}
}
const catalog = new Catalog();
setTimeout(() => {
catalog.setItems([
{name: 'Shoes'},
{name: 'T-Shirt'}
])
setTimeout(() => {
catalog.addItem({name: 'Hat'})
catalog.addItem({name: 'Boots'})
}, 1500)
}, 500)
</script>
</body>
</html>What would be a working example for the above?
Activity
WebReflection commentedon Oct 29, 2024
I think you need to re-assign
valueto trigger a signal, otherwise you are just updating its internal state without communicating any change happened at all?Signals need to notify their value, what's inside their value is never observed ... would that work?
WebReflection commentedon Oct 29, 2024
P.S. if that doesn't work due meomized value, try:
assuming that
data.valueis just, indeed, data and nothing else ... pass a new thingy otherwise with new values.m-michalis commentedon Oct 29, 2024
it seems that it switches button text to "loading", but it doesnt trigger back.
Updated the
@clickto simulate waiting time.(also there was a typo on the example. fixed bellow)
WebReflection commentedon Oct 29, 2024
what if you remove
if(this.#data.value.loading_cart !== state)?there are various versions of signals in uhtml so if you are anyhow stuck try other variants with preact signals, as example, and let me know if that solves ... if it does, it's my own signal implementation (a different repo) that is doing something weird, if it doesn't, it's your signals based logic that is doing something weird ... I am exploring a rewrite of this library that is currently focused on other topics so my time is limited for this issue but I'd love to understand where, how, this doesn't work, as long as the underlying logic is sound, thanks for your comprehension