Allow ability to have nested components

[edmondchuc]

Inside templates/meld/todo.html, can I use {% meld 'counter' %} tag to have a nested component?

Example:

<!-- templates/meld/todo.html -->
<div>
    <form meld:submit.prevent="add" class="form-inline">
        <div class="form-group">
            <label for="todo-input" class="form-label">Add a new todo</label>
            <input meld:model.defer="todo_input" id="todo-input" type="text" autofocus>
            <button type="submit" class="btn btn-primary inline">Add</button>
        </div>
        
    </form>

    {% meld 'counter' %}

    <h2>Your todos</h2>
    {% for todo in todos %}
        <li class="mb-1 flashes">
            <div class="card">
                <div class="card-body">
                    <button meld:click="delete('{{ todo.id }}')" class="btn btn-danger mx-3">Remove</button>
                    {{ todo.todo }}
                </div>
            </div>
        </li>
    {% endfor %}
</div>

Currently when I try this, I get a KeyError:

venv\Lib\site-packages\flask_meld\component.py", line 257, in _set_values
    element.attrs["value"] = context_variables[element.attrs[model_attr]]
KeyError: 'state'

[mikeabrahamsen]

I haven't implemented nesting meld tags but it is a feature I would love to support. I'll look into this.

[mikeabrahamsen]

Let's take a look at an example of how nesting may work:
https://laravel-livewire.com/docs/2.x/nesting-components

[MohamedAliArafa]

Any update on this feature ?