[LiveComponents] Debouncing, Lazy Updating or Deferring Re-Render from/to children in nested components

[Jim56450]

Live Components are super great and propose a bunch of cool options.

Considering nested components, what do you think about implementing debounced, lazy or deferred re-rendering from child to parent components (and vice versa) ?

The fact is when a child component has debounced re-render properties, and if theses properties are related to parent properties, then debounced re-rendering is not propagated to the parent component. I don't know if this is done on purpose or if it's a bug.

Anyway, there might be a workaround.

---

Imagine this structure :

parent_component :

<div {{attributes}}>

    <select data-model="on(change)|postId">
        {% for post in this.posts %}
            <option value="{{ post.id }}"
                    {% if post.id==postId %}
                        selected
                    {% endif %}
            >{{ post.title }}</option>
        {% endfor %}
    </select>

    {{ component(child_component, {
        dataModel: 'post.title:title post.content:content'
    }) }}

</div>

child_component :

<div {{ attributes }}>
    <input  data-model="debounce(500)|title"/>
    <input  data-model="debounce(500)|content"/>
</div>

---

In this example, if you update title or content in child component, then child re-render is debounced (as long as you type), BUT, the change is immediately propagated to parent component, which is not what is expected : propagation to the parent should be delayed too.

What would be interesting would be not to (or have the possibility not to) propagate the change to the parent.

Maybe something like this :

From child to parent

{{ component(child_component, {
    dataModel: 'post.title:debounce(500)|title post.content:debounce(500)|content'
}) }}

-> in this case, parent props title and content update will be delayed if child props change.

From parent to child

{{ component(child_component, {
    dataModel: 'debounce(500)|post.title:title debounce(500)|post.content:content'
}) }}

-> in this case, child props title and content update will be delayed if parent props change.

From child to parent and parent to child

{{ component(child_component, {
    dataModel: 'debounce(500)|post.title:debounce(500)|title debounce(500)|post.content:debounce(500)|content'
}) }}

-> in this case, child props title and content update will be delayed if parent props change ; parent props title and content update will be delayed if child props change.

---

What do you think about this ?

[weaverryan]

Hi there!

In this example, if you update title or content in child component, then child re-render is debounced (as long as you type), BUT, the change is immediately propagated to parent component, which is not what is expected : propagation to the parent should be delayed too.

Hmm, indeed. That sounds like a bug 👍

What would be interesting would be not to (or have the possibility not to) propagate the change to the parent.

It MIGHT be :) - the parent-child data binding is already fairly complex-looking when you use it :). Are all of the scenarios something that would be useful to you? Can you tell me a bit more about how they would be useful?

Btw, the syntax that would be most consistent with the current syntax would be:

{{ component(child_component, {
    dataModel: 'debounce(500)|post.title:title'
}) }}

That's because post.title:title is kind of a "unit" string. So, we debounce(500) then post.title:title is the final value for the "dataModel".

Alternatively, the dataModel syntax in general could be change to be something like:

dataModel: 'post.title|to(title)

(the idea being that you are passing the post.title prop from the parent TO the child as a title prop. Or maybe it's post.title|named(title). It's unrelated to this issue, but since you're using this feature, if any of these syntaxes are more clear, let me know. Even I need to look at the docs every time I use dataModel to remember how it works 🙃

[Jim56450]

Hi Ryan !

It MIGHT be :) - the parent-child data binding is already fairly complex-looking when you use it :). Are all of the scenarios something that would be useful to you? Can you tell me a bit more about how they would be useful?

I thought more about this and came to the conclusion that :

• dataModel: 'debounce(500)|post.title:title' can and should be handled upfront by the parent
• dataModel: 'post.title:debounce(500)|title' can and should be handled upfront by the child

This is kind of inconsistent at properties declaration level. Therefore, it may not be needed as long as debounce is processed correctly.

Alternatively, the dataModel syntax in general could be change to be something like:

dataModel: 'post.title|to(title)

Well, the current way doesn't bother too much though your proposal maybe suits better the twig syntax.

[carsonbot]

Hey, thanks for your report! There has not been a lot of activity here for a while. Is this bug still relevant? Have you managed to find a workaround?

[carsonbot]

Friendly ping? Should this still be open? I will close if I don't hear anything.

[carsonbot]

Hey,

I didn't hear anything so I'm going to close it. Feel free to comment if this is still relevant, I can always reopen!

[carsonbot]

Hey, thanks for your report! There has not been a lot of activity here for a while. Is this bug still relevant? Have you managed to find a workaround?