Fix component class collect

Author: smnandre

src/TwigComponent/src/DataCollector/TwigComponentDataCollector.php

@@ -18,7 +18,6 @@
 use Symfony\Component\VarDumper\Caster\ClassStub;
 use Symfony\Component\VarDumper\Cloner\Data;
 use Symfony\UX\TwigComponent\Event\PostRenderEvent;
-use Symfony\UX\TwigComponent\Event\PreCreateForRenderEvent;
 use Symfony\UX\TwigComponent\Event\PreRenderEvent;
 use Symfony\UX\TwigComponent\EventListener\TwigComponentLoggerListener;
 use Twig\Environment;
@@ -101,20 +100,16 @@ private function collectDataFromLogger(): void
         $ongoingRenders = [];
 
         foreach ($this->logger->getEvents() as [$event, $profile]) {
-            if ($event instanceof PreCreateForRenderEvent) {
-                $componentName = $event->getName();
-                // $components[$componentName]
-            }
-
             if ($event instanceof PreRenderEvent) {
                 $mountedComponent = $event->getMountedComponent();
 
                 $metadata = $event->getMetadata();
                 $componentName = $metadata->getName();
+                $componentClass = $mountedComponent->getComponent()::class;
 
                 $components[$componentName] ??= [
                     'name' => $componentName,
-                    'class' => $componentClass = $mountedComponent->getComponent()::class,
+                    'class' => $componentClass,
                     'class_stub' => $this->hasStub ? new ClassStub($componentClass) : $componentClass,
                     'template' => $metadata->getTemplate(),
                     'template_path' => $this->resolveTemplatePath($metadata->getTemplate()), // defer ? lazy ?

src/TwigComponent/templates/Collector/twig_component.html.twig

@@ -53,7 +53,6 @@
             margin-bottom: 2rem;
         }
         .twig-component-render {
-            /*box-shadow: 0 0 0 1px var(--table-border-color);*/
             margin-left: calc(var(--render-depth) * .5rem);
             width: calc(100% - calc(var(--render-depth) * .5rem));
         }
@@ -83,15 +82,12 @@
             opacity: .85;
             transition: all 250ms ease-in-out;
         }
-        .twig-component-render tbody th {
-            font-weight: normal;
-        }
-
         .twig-component-render th:first-child,
         .twig-component-render tr:first-child {
             width: 25%;
         }
-        .twig-component-render th {
+        .twig-component-render th,
+        .twig-component-render tbody th {
             font-weight: normal;
         }
         .twig-component-render th:first-child {
@@ -227,7 +223,7 @@
                     <td>{{ component.name }}</td>
                     <td>
                         {% if component.class == 'Symfony\\UX\\TwigComponent\\AnonymousComponent' %}
-                            <pre class="sf-dump"><span class="text-muted">AnonymousComponent</span></pre>
+                            <pre class="sf-dump"><span class="text-muted">[Anonymous]</span></pre>
                         {% else %}
                             {{ profiler_dump(component.class_stub) }}
                         {% endif %}
@@ -252,34 +248,37 @@
 
 {% block table_renders %}
     <div class="twig-component-renders">
+        {% set _memory = null %}
         {% for render in collector.renders %}
             <table class="twig-component-render" style="--render-depth:{{ render.depth }};">
-                <thead class="sf-toggle {{ loop.index == 1 ? 'sf-toggle-on' : 'sf-toggle-off' }}"
-                       data-toggle-selector="#render-{{ loop.index }}--details"
-                       data-toggle-initial="{{ loop.index == 1 ? 'display' }}"
+                <thead
+                    class="sf-toggle {{ loop.index == 1 ? 'sf-toggle-on' : 'sf-toggle-off' }}"
+                   data-toggle-selector="#render-{{ loop.index }}--details"
+                   data-toggle-initial="{{ loop.index == 1 ? 'display' }}"
                 >
                     <tr>
                         <th class="key">{{ render.depth ? source('@TwigComponent/Collector/chevron-down.svg') }}{{ render.name }}</th>
                         <th>
                             {% if render.class == 'Symfony\\UX\\TwigComponent\\AnonymousComponent' %}
-                                <pre class="sf-dump"><span class="text-muted">[Anonymous] {{ render.name }}</span></pre>
+                                <pre class="sf-dump"><span class="text-muted">[Anonymous]</span></pre>
                             {% else %}
                                 {{ render.class }}
                             {% endif %}
                         </th>
                         <th class="cell-right renderTime">
-                            {% if render.render_memory %}
-                                {{ (render.render_memory / 1024 / 1024)|number_format(1) }}
-                                <span class="text-muted text-small">MiB</span>
-                            {% endif %}
+                            {% set _render_memory = render.render_memory|default(0) / 1024 / 1024 %}
+                            <span class="{{ _render_memory == _memory ? 'text-muted' }}">
+                                {{- _render_memory|number_format(1) -}}
+                            </span>
+                            <span class="text-muted text-small">MiB</span>
+                            {% set _memory = _render_memory %}
                         </th>
                         <th class="cell-right renderTime">
                             {{ render.render_time|number_format(2) }}
                             <span class="text-muted text-small">ms</span>
                         </th>
                         <th class="cell-right">
                             <button class="btn btn-link toggle-button" type="button" aria-label="Toggle details">
-                                {{ source('@WebProfiler/Icon/chevron-down.svg', true) }}
                                 {{ source('@TwigComponent/Collector/chevron-down.svg') }}
                             </button>
                         </th>