feature #1532 [LiveComponent] New placeholder macro to generate defer/lazy skeleton (smnandre)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

[LiveComponent] New placeholder macro to generate defer/lazy skeleton

| Q             | A
| ------------- | ---
| Bug fix?      |no
| New feature?  | yes
| License       | MIT

When you use defer/lazy component, you can customize the "loading" content in the calling template. But for components that you reuse on multiple pages, it can lead to code duplication.

Moreover, you cannot adapt the size / content depending on the props.

So... introducing the "`placeholder`" macro.

If you define such macro in your lazy component template, it will be called to generate this temporary content.

```twig
{# templates/components/FooBar.html.twig #}

<div {{ attributes }}>

    {# ... #}

    {# your live component code #}

    {# ... #}

</div>

{% macro placeholder(props) %}
    {# This code will only be visible in the "loading" content #}
    <span class="loading-row"></span>
{% endmacro %}
```

Bonus, you'll get the props of your component as parameters.

So let's say you have a live component which load N comments behind an article.

When you set this prop to your live component, it will be passed to the placeholder macro, allowing you to fill the good amount of space / loading blocs in the HTML

```twig
<twig:Comments n="5" />
```

```twig
{# templates/components/Comments.html.twig #}
<div {{ attributes }}
...
</div>

{% macro placeholder(props) %}
    {% for i in 1..props.n %}
        <span class="loading-block"></span>
     {% endfor %}
{% endmacro %}
```

What do you think ?

Commits
-------

2130326 [LiveComponent] New placeholder macro to generate defer/lazy skeleton

Author: weaverryan

src/LiveComponent/src/EventListener/DeferLiveComponentSubscriber.php

@@ -52,6 +52,7 @@ public function onPreRender(PreRenderEvent $event): void
             return;
         }
 
+        $componentTemplate = $event->getMetadata()->getTemplate();
         $event->setTemplate('@LiveComponent/deferred.html.twig');
 
         $variables = $event->getVariables();
@@ -66,6 +67,8 @@ public function onPreRender(PreRenderEvent $event): void
             $variables['loadingTag'] = $mountedComponent->getExtraMetadata('loading-tag');
         }
 
+        $variables['componentTemplate'] = $componentTemplate;
+
         $event->setVariables($variables);
     }
 

src/LiveComponent/src/Test/TestLiveComponent.php

@@ -43,7 +43,7 @@ public function __construct(
         private UrlGeneratorInterface $router,
     ) {
         $this->client->catchExceptions(false);
-        $this->data['attributes']['data-live-id'] ??= 'in-a-real-scenario-it-would-already-have-one---provide-one-yourself-if-needed';
+        $this->data['attributes']['id'] ??= 'in-a-real-scenario-it-would-already-have-one---provide-one-yourself-if-needed';
     }
 
     public function render(): RenderedComponent

src/LiveComponent/templates/deferred.html.twig

@@ -2,6 +2,11 @@
     {% block loadingContent %}
         {% if loadingTemplate != null %}
             {{ include(loadingTemplate) }}
+        {% else %}
+            {% from componentTemplate import placeholder %}
+            {% if placeholder is defined %}
+                {{ placeholder(__props|default) }}
+            {% endif %}
         {% endif %}
     {% endblock %}
 </{{ loadingTag }}>

src/LiveComponent/tests/Fixtures/Component/DeferredComponentWithPlaceholder.php

@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Symfony\UX\LiveComponent\Tests\Fixtures\Component;
+
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+#[AsLiveComponent('deferred_component_with_placeholder', method: 'get')]
+final class DeferredComponentWithPlaceholder
+{
+    use DefaultActionTrait;
+
+    #[LiveProp]
+    public int $rows = 6;
+}

src/LiveComponent/tests/Fixtures/templates/components/deferred_component_with_placeholder.html.twig

@@ -0,0 +1,9 @@
+<div {{ attributes }}>
+    {# for row in this.rows ... #}
+</div>
+
+{% macro placeholder(props) %}
+    {%- for i in 1..props.rows -%}
+        <span class="loading-row"></span>
+    {%- endfor -%}
+{% endmacro %}

src/LiveComponent/tests/Fixtures/templates/render_component_with_placeholder.html.twig

@@ -0,0 +1 @@
+<twig:deferred_component_with_placeholder rows="2" />

src/LiveComponent/tests/Fixtures/templates/render_deferred_component_with_placeholder.html.twig

@@ -0,0 +1 @@
+<twig:deferred_component_with_placeholder rows="2" defer />

src/LiveComponent/tests/Functional/EventListener/DeferLiveComponentSubscriberTest.php

@@ -77,6 +77,27 @@ public function testItIncludesGivenTemplateWhileLoadingDeferredComponent(): void
         $this->assertStringContainsString('Long awaited data', $div->html());
     }
 
+    public function testItIncludesComponentTemplateBlockAsPlaceholder(): void
+    {
+        $div = $this->browser()
+            ->visit('/render-template/render_deferred_component_with_placeholder')
+            ->assertSuccessful()
+            ->crawler()
+            ->filter('div');
+
+        $this->assertSame('<span class="loading-row"></span><span class="loading-row"></span>', trim($div->html()));
+    }
+
+    public function testItDoesNotIncludesPlaceholderWhenRendered(): void
+    {
+        $div = $this->browser()
+            ->visit('/render-template/render_component_with_placeholder')
+            ->assertSuccessful()
+            ->crawler();
+
+        $this->assertStringNotContainsString('<span class="loading-row">', $div->html());
+    }
+
     public function testItAllowsToSetCustomLoadingHtmlTag(): void
     {
         $crawler = $this->browser()

src/LiveComponent/tests/Functional/EventListener/InterceptChildComponentRenderSubscriberTest.php

@@ -128,7 +128,7 @@ public function testItUsesKeysToRenderChildrenLiveIds(): void
             ->assertSuccessful()
             ->assertHtml()
             ->assertElementCount('ul li', 3)
-            // check for the live-id we expect based on the key
+            // check for the id we expect based on the key
             ->assertContains('id="live-521026374-the-key0"')
             ->assertNotContains('key="the-key0"')
             ->visit($urlWithChangedFingerprints)