Skip to content

Commit d93cc29

Browse files
jakubtobiaszweaverryan
jakubtobiasz
authored and
weaverryan
committed
Add deferred live components
1 parent 6e6c903 commit d93cc29

15 files changed

+257
-13
lines changed

‎src/LiveComponent/CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# CHANGELOG
22

3+
## 2.13.0
4+
5+
- Add deferred rendering of Live Components
6+
37
## 2.12.0
48

59
- Add `onUpdated` hook for `LiveProp`

‎src/LiveComponent/doc/index.rst

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2175,6 +2175,32 @@ To validate only on "change", use the ``on(change)`` modifier:
21752175
class="{{ _errors.has('post.content') ? 'is-invalid' : '' }}"
21762176
>
21772177

2178+
Deferring the Loading
2179+
---------------------
2180+
2181+
Certain components might be heavy to load. You can defer the loading of these components
2182+
until after the rest of the page has loaded. To do this, use the ``defer`` attribute:
2183+
2184+
.. code-block:: twig
2185+
2186+
{{ component('SomeHeavyComponent', { defer: true }) }}
2187+
2188+
Doing so will render an empty "placeholder" tag with the live attributes. Once the ``live:connect`` event is triggered,
2189+
the component will be rendered asynchronously.
2190+
2191+
By default the rendered tag is a ``div``. You can change this by specifying the ``loading-tag`` attribute:
2192+
2193+
.. code-block:: twig
2194+
2195+
{{ component('SomeHeavyComponent', { defer: true, loading-tag: 'span' }) }}
2196+
2197+
If you need to signify that the component is loading, use the ``loading-template`` attribute.
2198+
This lets you provide a Twig template that will render inside the "placeholder" tag:
2199+
2200+
.. code-block:: twig
2201+
2202+
{{ component('SomeHeavyComponent', { defer: true, loading-template: 'spinning-wheel.html.twig' }) }}
2203+
21782204
Polling
21792205
-------
21802206

‎src/LiveComponent/src/DependencyInjection/LiveComponentExtension.php

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
use Symfony\UX\LiveComponent\Controller\BatchActionController;
2626
use Symfony\UX\LiveComponent\EventListener\AddLiveAttributesSubscriber;
2727
use Symfony\UX\LiveComponent\EventListener\DataModelPropsSubscriber;
28+
use Symfony\UX\LiveComponent\EventListener\DeferLiveComponentSubscriber;
2829
use Symfony\UX\LiveComponent\EventListener\InterceptChildComponentRenderSubscriber;
2930
use Symfony\UX\LiveComponent\EventListener\LiveComponentSubscriber;
3031
use Symfony\UX\LiveComponent\EventListener\ResetDeterministicIdSubscriber;
@@ -214,6 +215,14 @@ function (ChildDefinition $definition, AsLiveComponent $attribute) {
214215
->addTag('container.service_subscriber', ['key' => LiveControllerAttributesCreator::class, 'id' => 'ux.live_component.live_controller_attributes_creator'])
215216
;
216217

218+
$container->register('ux.live_component.defer_live_component_subscriber', DeferLiveComponentSubscriber::class)
219+
->setArguments([
220+
new Reference('ux.twig_component.component_stack'),
221+
new Reference('ux.live_component.live_controller_attributes_creator'),
222+
])
223+
->addTag('kernel.event_subscriber')
224+
;
225+
217226
$container->register('ux.live_component.deterministic_id_calculator', DeterministicTwigIdCalculator::class);
218227
$container->register('ux.live_component.fingerprint_calculator', FingerprintCalculator::class)
219228
->setArguments(['%kernel.secret%']);

‎src/LiveComponent/src/EventListener/DeferLiveComponentSubscriber.php

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<?php
2+
3+
declare(strict_types=1);
4+
5+
namespace Symfony\UX\LiveComponent\EventListener;
6+
7+
use Symfony\Component\EventDispatcher\EventSubscriberInterface;
8+
use Symfony\UX\TwigComponent\Event\PostMountEvent;
9+
use Symfony\UX\TwigComponent\Event\PreRenderEvent;
10+
11+
final class DeferLiveComponentSubscriber implements EventSubscriberInterface
12+
{
13+
private const DEFAULT_LOADING_TAG = 'div';
14+
15+
private const DEFAULT_LOADING_TEMPLATE = null;
16+
17+
public function onPostMount(PostMountEvent $event): void
18+
{
19+
$data = $event->getData();
20+
if (\array_key_exists('defer', $data)) {
21+
$event->addExtraMetadata('defer', true);
22+
unset($event->getData()['defer']);
23+
}
24+
25+
if (\array_key_exists('loading-template', $data)) {
26+
$event->addExtraMetadata('loading-template', $data['loading-template']);
27+
unset($event->getData()['loading-template']);
28+
}
29+
30+
if (\array_key_exists('loading-tag', $data)) {
31+
$event->addExtraMetadata('loading-tag', $data['loading-tag']);
32+
unset($event->getData()['loading-tag']);
33+
}
34+
35+
$event->setData($data);
36+
}
37+
38+
public function onPreRender(PreRenderEvent $event): void
39+
{
40+
$mountedComponent = $event->getMountedComponent();
41+
42+
if (!$mountedComponent->hasExtraMetadata('defer')) {
43+
return;
44+
}
45+
46+
$event->setTemplate('@LiveComponent/deferred.html.twig');
47+
48+
$variables = $event->getVariables();
49+
$variables['loadingTemplate'] = self::DEFAULT_LOADING_TEMPLATE;
50+
$variables['loadingTag'] = self::DEFAULT_LOADING_TAG;
51+
52+
if ($mountedComponent->hasExtraMetadata('loading-template')) {
53+
$variables['loadingTemplate'] = $mountedComponent->getExtraMetadata('loading-template');
54+
}
55+
56+
if ($mountedComponent->hasExtraMetadata('loading-tag')) {
57+
$variables['loadingTag'] = $mountedComponent->getExtraMetadata('loading-tag');
58+
}
59+
60+
$event->setVariables($variables);
61+
}
62+
63+
public static function getSubscribedEvents(): array
64+
{
65+
return [
66+
PostMountEvent::class => ['onPostMount'],
67+
PreRenderEvent::class => ['onPreRender'],
68+
];
69+
}
70+
}

‎src/LiveComponent/templates/deferred.html.twig

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<{{ loadingTag }} {{ attributes }} data-action="live:connect->live#$render">
2+
{% block loadingContent %}
3+
{% if loadingTemplate != null %}
4+
{{ include(loadingTemplate) }}
5+
{% endif %}
6+
{% endblock %}
7+
</{{ loadingTag }}>

‎src/LiveComponent/tests/Fixtures/Component/DeferredComponent.php

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<?php
2+
3+
declare(strict_types=1);
4+
5+
namespace Symfony\UX\LiveComponent\Tests\Fixtures\Component;
6+
7+
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
8+
use Symfony\UX\LiveComponent\DefaultActionTrait;
9+
10+
#[AsLiveComponent('deferred_component')]
11+
final class DeferredComponent
12+
{
13+
use DefaultActionTrait;
14+
15+
public function getLongAwaitedData(): string
16+
{
17+
return 'Long awaited data';
18+
}
19+
}

‎src/LiveComponent/tests/Fixtures/templates/components/deferred_component.html.twig

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<div {{ attributes }}>{{ computed.longAwaitedData }}</div>

‎src/LiveComponent/tests/Fixtures/templates/dummy/loading.html.twig

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
I'm loading a reaaaally slow live component

‎src/LiveComponent/tests/Fixtures/templates/render_deferred_component.html.twig

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<twig:deferred_component defer />

‎src/LiveComponent/tests/Fixtures/templates/render_deferred_component_with_li_tag.html.twig

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<twig:deferred_component defer loading-tag='li' />

‎src/LiveComponent/tests/Fixtures/templates/render_deferred_component_with_template.html.twig

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<twig:deferred_component defer loading-template='dummy/loading.html.twig' />

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

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<?php
2+
3+
declare(strict_types=1);
4+
5+
namespace Symfony\UX\LiveComponent\Tests\Functional\EventListener;
6+
7+
use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
8+
use Symfony\UX\LiveComponent\Tests\LiveComponentTestHelper;
9+
use Zenstruck\Browser\Test\HasBrowser;
10+
11+
final class DeferLiveComponentSubscriberTest extends KernelTestCase
12+
{
13+
use HasBrowser;
14+
use LiveComponentTestHelper;
15+
16+
public function testItSetsDeferredTemplateIfLiveIdNotPassed(): void
17+
{
18+
$div = $this->browser()
19+
->visit('/render-template/render_deferred_component')
20+
->assertSuccessful()
21+
->crawler()
22+
->filter('div')
23+
;
24+
25+
$this->assertSame('', trim($div->html()));
26+
$this->assertSame('live:connect->live#$render', $div->attr('data-action'));
27+
28+
$component = $this->mountComponent('deferred_component', [
29+
'data-live-id' => $div->attr('data-live-id'),
30+
]);
31+
32+
$dehydrated = $this->dehydrateComponent($component);
33+
34+
$div = $this->browser()
35+
->visit('/_components/deferred_component?props='.urlencode(json_encode($dehydrated->getProps())))
36+
->assertSuccessful()
37+
->crawler()
38+
->filter('div')
39+
;
40+
41+
$this->assertSame('Long awaited data', $div->html());
42+
}
43+
44+
public function testItIncludesGivenTemplateWhileLoadingDeferredComponent(): void
45+
{
46+
$div = $this->browser()
47+
->visit('/render-template/render_deferred_component_with_template')
48+
->assertSuccessful()
49+
->crawler()
50+
->filter('div')
51+
;
52+
53+
$this->assertSame('I\'m loading a reaaaally slow live component', trim($div->html()));
54+
55+
$component = $this->mountComponent('deferred_component', [
56+
'data-live-id' => $div->attr('data-live-id'),
57+
]);
58+
59+
$dehydrated = $this->dehydrateComponent($component);
60+
61+
$div = $this->browser()
62+
->visit('/_components/deferred_component?props='.urlencode(json_encode($dehydrated->getProps())))
63+
->assertSuccessful()
64+
->crawler()
65+
->filter('div')
66+
;
67+
68+
$this->assertStringContainsString('Long awaited data', $div->html());
69+
}
70+
71+
public function testItAllowsToSetCustomLoadingHtmlTag(): void
72+
{
73+
$crawler = $this->browser()
74+
->visit('/render-template/render_deferred_component_with_li_tag')
75+
->assertSuccessful()
76+
->crawler()
77+
;
78+
79+
$this->assertSame(0, $crawler->filter('div')->count());
80+
$this->assertSame(1, $crawler->filter('li')->count());
81+
}
82+
}

‎src/TwigComponent/src/ComponentFactory.php

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,9 @@ public function mountFromObject(object $component, array $data, ComponentMetadat
8888
}
8989
}
9090

91-
$data = $this->postMount($component, $data);
91+
$postMount = $this->postMount($component, $data);
92+
$data = $postMount['data'];
93+
$extraMetadata = $postMount['extraMetadata'];
9294

9395
// create attributes from "attributes" key if exists
9496
$attributesVar = $componentMetadata->getAttributesVar();
@@ -109,7 +111,8 @@ public function mountFromObject(object $component, array $data, ComponentMetadat
109111
$componentMetadata->getName(),
110112
$component,
111113
new ComponentAttributes(array_merge($attributes, $data)),
112-
$originalData
114+
$originalData,
115+
$extraMetadata,
113116
);
114117
}
115118

@@ -188,11 +191,15 @@ private function preMount(object $component, array $data): array
188191
return $data;
189192
}
190193

194+
/**
195+
* @return array{data: array<string, mixed>, extraMetadata: array<string, mixed>}
196+
*/
191197
private function postMount(object $component, array $data): array
192198
{
193199
$event = new PostMountEvent($component, $data);
194200
$this->eventDispatcher->dispatch($event);
195201
$data = $event->getData();
202+
$extraMetadata = $event->getExtraMetadata();
196203

197204
foreach (AsTwigComponent::postMountMethods($component) as $method) {
198205
$newData = $component->{$method->name}($data);
@@ -202,7 +209,10 @@ private function postMount(object $component, array $data): array
202209
}
203210
}
204211

205-
return $data;
212+
return [
213+
'data' => $data,
214+
'extraMetadata' => $extraMetadata,
215+
];
206216
}
207217

208218
private function isAnonymousComponent(string $name): bool

‎src/TwigComponent/src/Event/PostMountEvent.php

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,11 @@
1818
*/
1919
final class PostMountEvent extends Event
2020
{
21-
public function __construct(private object $component, private array $data)
22-
{
21+
public function __construct(
22+
private object $component,
23+
private array $data,
24+
private array $extraMetadata = [],
25+
) {
2326
}
2427

2528
public function getComponent(): object
@@ -36,4 +39,19 @@ public function setData(array $data): void
3639
{
3740
$this->data = $data;
3841
}
42+
43+
public function getExtraMetadata(): array
44+
{
45+
return $this->extraMetadata;
46+
}
47+
48+
public function addExtraMetadata(string $key, mixed $value): void
49+
{
50+
$this->extraMetadata[$key] = $value;
51+
}
52+
53+
public function removeExtraMetadata(string $key): void
54+
{
55+
unset($this->extraMetadata[$key]);
56+
}
3957
}

‎src/TwigComponent/src/MountedComponent.php

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,6 @@
1818
*/
1919
final class MountedComponent
2020
{
21-
/**
22-
* Any extra metadata that might be useful to set.
23-
*
24-
* @var array<string, mixed>
25-
*/
26-
private array $extraMetadata = [];
27-
2821
/**
2922
* @param array|null $inputProps if the component was just originally created,
3023
* (not hydrated from a request), this is the
@@ -34,7 +27,8 @@ public function __construct(
3427
private string $name,
3528
private object $component,
3629
private ComponentAttributes $attributes,
37-
private ?array $inputProps = []
30+
private ?array $inputProps = [],
31+
private array $extraMetadata = [],
3832
) {
3933
}
4034

0 commit comments

Comments
 (0)