feature #562 [Live] Allow to edit component route (simondaigre, kbond)

This PR was merged into the 2.x branch.

Discussion
----------

[Live] Allow to edit component route

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | yes
| Tickets       | Fix #514
| License       | MIT

Added a new `route` parameter to `AsLiveComponent`, which allows to choose another route for Ajax calls.

Commits
-------

bbd57ff add tests
0707b30 fix formatting
6534689 fix BatchActionController
aa49e1d [Live] Allow to edit component route
748220e [Live] Allow to edit component route
e075298 [Live] Allow to edit component route
9836c18 [Live] Allow to edit component route
0ceae7e [Live] Allow to edit component route
f55cec2 [Live] Allow to edit component route

Author: weaverryan

src/LiveComponent/CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## 2.7.0
+
+-   Added a new `route` parameter to `AsLiveComponent`, which allows to choose
+    another route for Ajax calls.
+
 ## 2.6.0
 
 -   [BC BREAK]: The path to `live_component.xml` changed _and_ the import now

src/LiveComponent/config/routes.php

@@ -3,9 +3,9 @@
 use Symfony\Component\Routing\Loader\Configurator\RoutingConfigurator;
 
 return function (RoutingConfigurator $routes) {
-    $routes->add('ux_live_component', '/{component}/{action}')
+    $routes->add('ux_live_component', '/{_live_component}/{_live_action}')
         ->defaults([
-            'action' => 'get',
+            '_live_action' => 'get',
         ])
     ;
 };

src/LiveComponent/doc/index.rst

@@ -2114,6 +2114,39 @@ To handle this, add the ``data-live-ignore`` attribute to the element:
     ``data-live-id`` attribute. During a re-render, if this value changes, all
     of the children of the element will be re-rendered, even those with ``data-live-ignore``.
 
+Define another route for your Component
+---------------------------------------
+
+The default route for live components is ``/components/{_live_component}/{_live_action}``
+If you have multiples firewalls in your app, you may want to specify another route for your component.
+It may be useful if you want to get the current logged in user in your component.
+
+To use another route, you need to declare it :
+
+.. code-block:: yaml
+
+    # config/routes/attributes.yaml
+    live_component_admin:
+        path: /admin/_components/{_live_component}/{_live_action}
+        defaults:
+            _live_action: 'get'
+
+then specify this new route to your component :
+
+.. code-block:: diff
+
+    // src/Components/RandomNumberComponent.php
+
+    use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+    use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+    - #[AsLiveComponent('random_number')]
+    + #[AsLiveComponent('random_number', route: 'live_component_admin')]
+      class RandomNumberComponent
+      {
+          use DefaultActionTrait;
+      }
+
 Backward Compatibility promise
 ------------------------------
 

src/LiveComponent/src/Attribute/AsLiveComponent.php

@@ -28,6 +28,7 @@ public function __construct(
         bool $exposePublicProps = true,
         string $attributesVar = 'attributes',
         public bool $csrf = true,
+        public string $route = 'ux_live_component'
     ) {
         parent::__construct($name, $template, $exposePublicProps, $attributesVar);
     }
@@ -41,6 +42,7 @@ public function serviceConfig(): array
             'default_action' => $this->defaultAction,
             'live' => true,
             'csrf' => $this->csrf,
+            'route' => $this->route,
         ]);
     }
 

src/LiveComponent/src/Controller/BatchActionController.php

@@ -37,7 +37,7 @@ public function __invoke(Request $request, MountedComponent $_mounted_component,
                 '_controller' => [$serviceId, $name],
                 '_component_action_args' => $action['args'] ?? [],
                 '_mounted_component' => $_mounted_component,
-                '_route' => 'ux_live_component',
+                '_live_component' => $serviceId,
             ]);
 
             $response = $this->kernel->handle($subRequest, HttpKernelInterface::SUB_REQUEST, false);

src/LiveComponent/src/EventListener/AddLiveAttributesSubscriber.php

@@ -92,7 +92,7 @@ public static function getSubscribedServices(): array
     private function getLiveAttributes(MountedComponent $mounted, ComponentMetadata $metadata): ComponentAttributes
     {
         $name = $mounted->getName();
-        $url = $this->container->get(UrlGeneratorInterface::class)->generate('ux_live_component', ['component' => $name]);
+        $url = $this->container->get(UrlGeneratorInterface::class)->generate($metadata->get('route'), ['_live_component' => $name]);
         /** @var DehydratedComponent $dehydratedComponent */
         $dehydratedComponent = $this->container->get(LiveComponentHydrator::class)->dehydrate($mounted);
         /** @var TwigAttributeHelper $helper */

src/LiveComponent/src/EventListener/LiveComponentSubscriber.php

@@ -76,8 +76,8 @@ public function onKernelRequest(RequestEvent $event): void
         }
 
         // the default "action" is get, which does nothing
-        $action = $request->attributes->get('action', 'get');
-        $componentName = (string) $request->attributes->get('component');
+        $action = $request->attributes->get('_live_action', 'get');
+        $componentName = (string) $request->attributes->get('_live_component');
 
         $request->attributes->set('_component_name', $componentName);
 
@@ -313,7 +313,7 @@ private function createResponse(MountedComponent $mounted): Response
 
     private function isLiveComponentRequest(Request $request): bool
     {
-        return 'ux_live_component' === $request->attributes->get('_route');
+        return $request->attributes->has('_live_component');
     }
 
     private function hydrateComponent(object $component, string $componentName, Request $request): MountedComponent

src/LiveComponent/src/Twig/LiveComponentRuntime.php

@@ -35,8 +35,10 @@ public function getComponentUrl(string $name, array $props = []): string
     {
         $mounted = $this->factory->create($name, $props);
         $dehydratedComponent = $this->hydrator->dehydrate($mounted);
-        $params = ['component' => $name] + $dehydratedComponent->all();
+        $params = ['_live_component' => $name] + $dehydratedComponent->all();
 
-        return $this->urlGenerator->generate('ux_live_component', $params);
+        $metadata = $this->factory->metadataFor($mounted->getName());
+
+        return $this->urlGenerator->generate($metadata->get('route'), $params);
     }
 }

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

@@ -0,0 +1,26 @@
+<?php
+
+namespace Symfony\UX\LiveComponent\Tests\Fixtures\Component;
+
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveAction;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+/**
+ * @author Kevin Bond <[email protected]>
+ */
+#[AsLiveComponent('alternate_route', route: 'alternate_live_route')]
+final class AlternateRoute
+{
+    use DefaultActionTrait;
+
+    #[LiveProp]
+    public int $count = 0;
+
+    #[LiveAction]
+    public function increase(): void
+    {
+        ++$this->count;
+    }
+}

src/LiveComponent/tests/Fixtures/Kernel.php

@@ -122,5 +122,6 @@ protected function configureRoutes(RoutingConfigurator $routes): void
 
         $routes->add('template', '/render-template/{template}')->controller('kernel::renderTemplate');
         $routes->add('homepage', '/')->controller('kernel::index');
+        $routes->add('alternate_live_route', '/alt/{_live_component}/{_live_action}')->defaults(['_live_action' => 'get']);
     }
 }

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

@@ -1 +1,2 @@
 {{ component_url('component1', { prop1: null, prop2: date }) }}
+{{ component_url('alternate_route') }}

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

@@ -0,0 +1,3 @@
+<div{{ attributes }}>
+    From alternate route. (count: {{ count }})
+</div>

src/LiveComponent/tests/Functional/Controller/BatchActionControllerTest.php

@@ -74,6 +74,38 @@ public function testCanBatchActions(): void
         ;
     }
 
+    public function testCanBatchActionsWithAlternateRoute(): void
+    {
+        $dehydrated = $this->dehydrateComponent($this->mountComponent('alternate_route'))->all();
+
+        $this->browser()
+            ->throwExceptions()
+            ->get('/alt/alternate_route', ['json' => ['data' => $dehydrated]])
+            ->assertSuccessful()
+            ->assertSee('count: 0')
+            ->use(function (Crawler $crawler, KernelBrowser $browser) {
+                $rootElement = $crawler->filter('div')->first();
+                $liveData = json_decode($rootElement->attr('data-live-data-value'), true);
+                $liveProps = json_decode($rootElement->attr('data-live-props-value'), true);
+
+                $browser->post('/alt/alternate_route/_batch', [
+                    'json' => [
+                        'data' => $liveData + $liveProps,
+                        'actions' => [
+                            ['name' => 'increase'],
+                            ['name' => 'increase'],
+                            ['name' => 'increase'],
+                        ],
+                    ],
+                    'headers' => ['X-CSRF-TOKEN' => $rootElement->attr('data-live-csrf-value')],
+                ]);
+            })
+            ->assertOn('/alt/alternate_route/_batch')
+            ->assertSuccessful()
+            ->assertSee('count: 3')
+        ;
+    }
+
     public function testCsrfTokenIsChecked(): void
     {
         $dehydrated = $this->dehydrateComponent($this->mountComponent('with_actions'))->all();

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

@@ -55,6 +55,19 @@ public function testCanRenderComponentAsHtml(): void
         ;
     }
 
+    public function testCanRenderComponentAsHtmlWithAlternateRoute(): void
+    {
+        $dehydrated = $this->dehydrateComponent($this->mountComponent('alternate_route'))->all();
+
+        $this->browser()
+            ->throwExceptions()
+            ->get('/alt/alternate_route?data='.urlencode(json_encode($dehydrated)))
+            ->assertSuccessful()
+            ->assertOn('/alt/alternate_route', parts: ['path'])
+            ->assertContains('From alternate route. (count: 0)')
+        ;
+    }
+
     public function testCanExecuteComponentAction(): void
     {
         $dehydrated = $this->dehydrateComponent($this->mountComponent('component2'))->all();
@@ -80,6 +93,30 @@ public function testCanExecuteComponentAction(): void
         ;
     }
 
+    public function testCanExecuteComponentActionWithAlternateRoute(): void
+    {
+        $dehydrated = $this->dehydrateComponent($this->mountComponent('alternate_route'))->all();
+        $token = null;
+
+        $this->browser()
+            ->throwExceptions()
+            ->get('/alt/alternate_route?data='.urlencode(json_encode($dehydrated)))
+            ->assertSuccessful()
+            ->assertContains('count: 0')
+            ->use(function (Crawler $crawler) use (&$token) {
+                // get a valid token to use for actions
+                $token = $crawler->filter('div')->first()->attr('data-live-csrf-value');
+            })
+            ->post('/alt/alternate_route/increase', [
+                'headers' => ['X-CSRF-TOKEN' => $token],
+                'body' => json_encode(['data' => $dehydrated]),
+            ])
+            ->assertSuccessful()
+            ->assertOn('/alt/alternate_route/increase')
+            ->assertContains('count: 1')
+        ;
+    }
+
     public function testCannotExecuteComponentActionForGetRequest(): void
     {
         $this->browser()

src/LiveComponent/tests/Integration/Twig/LiveComponentExtensionTest.php

@@ -26,5 +26,6 @@ public function testGetComponentUrl(): void
 
         $this->assertStringContainsString('/_components/component1?prop2=2022-10-06T00:00:00', $rendered);
         $this->assertStringContainsString('_checksum=', $rendered);
+        $this->assertStringContainsString('/alt/alternate_route?', $rendered);
     }
 }