[TwigComponent] Documentation with comonent tag (attributes, passed data)

[tacman]

Something is amiss with the tag documentation (or code?))

{# templates/some_page.html.twig #}

{% component table with {headers: ['key', 'value'], data: [[1, 2], [3, 4]]} %}
    {% block th_class %}{{ parent() }} text-bold{% endblock %}

    {% block td_class %}{{ parent() }} text-italic{% endblock %}

    {% block footer %}
        <div class="data-table-footer">
            My footer
        </div>
    {% endblock %}
{% endcomponent %}

Not surprising, this throw an error, since the first argument is the attributes:

An exception has been thrown during the rendering of a template ("Unable to use "headers" (array) as an attribute. Attributes must be scalar or null. If you meant to mount this value on

I guessing it has the documentation, but not sure what it's supposed to be.

[kbond]

Does your TableComponent have $headers/$data properties (I should show this in the docs).

[tacman]

I got it to work by adding a mount() method.

But the docs are confusing, because it looks like $attributes happens automatically, unless you have a mount method, then I'm not sure if attributes come into play at all.

Also, the component in the example is 'table', the template is 'data_table.html.twig', and obviously it can be set in the component definition itself (TableComponent.php), but since that's not in the example, it adds the the confusion.

https://symfony.com/bundles/ux-twig-component/current/index.html

So add the PHP component to the documentation would help, with the mount and the custom template. But assuming the data passed into the component are attributes doesn't feel right.

{{ component('my_component', { class: 'foo', style: 'color:red' }) }}

{# renders as: #}
<div class="foo" style="color:red">
  My Component!
</div>

but

{% component table with {headers: ['key', 'value'], data: [[1, 2], [3, 4]]} %}

could be...

{% component table with {_attributes: {class: 'table table-condensed'}, headers: ['key', 'value'], data: [[1, 2], [3, 4]]} %}

fails without mount, and attributes? I see there's an option to name the attributes variable.

Ideally, the documentation would include the php and twig files so that a simple cut-and-paste works. I did that with the alert component, and now with mount it works with the table component, so perhaps just adding the PHP along with how to pass / render attributes when using the 'component' tag would help.

[kbond]

I'll update the docs to clarify as you describe.

FYI, the mount() method isn't strictly required. A public property (or property accessible via symfony/property-access) would work as well. Properties that cannot be set via this or mount are converted to attributes.

[carsonbot]

Thank you for this issue. There has not been a lot of activity here for a while. Has this been resolved?

[carsonbot]

Hello? This issue is about to be closed if nobody replies.

[tacman]

@kbond should I close this? I can review the docs if you'd like, but I haven't thought about this specific issue in a while, since mount() worked.

[smnandre]

Let's close it yep :)