bug #1093 [TwigComponent][LiveComponent] Fix DataModelPropsSubscriber…

… for embedded components (sneakyvv)

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

Discussion
----------

[TwigComponent][LiveComponent] Fix DataModelPropsSubscriber for embedded components

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

### Reproduce

```
{# components/A.html.twig #}

<B>
  {# content doesn't matter, as long as it's an embedded component #}
</B>
```
```
{# components/B.html.twig #}

<C data-model="X"/>
```
(given a component B with a prop X)

With this setup the `DataModelPropsSubscriber::preMount()`  would result in an error "_Can't get a way to read the property "X" in class "A"_".

An even simpler setup

```
{# anyTemplate.html.twig #}

<A>
{# A is already embedded #}
</A>
```
Will result in "_You can only pass "data-model" when rendering a component when you're rendering inside of a parent component._"
Whether the data-model attribute is deep inside template B or already in template A doesn't matter. The thing is that during rendering of A, which is now embedded, there's no component on the stack.

### Problem

Self-closing component are rendered via `ComponentRenderer::createAndRender()`.
Embedded components are rendered via `ComponentRenderer::embeddedContext()` + `Template::display()`.

Both push the component being rendered on the `ComponentStack`, and pop it again at the end of the `ComponentRender` functions. During the rendering of C, B is already been popped from the stack, and therefore the `DataModelPropsSubscriber` doesn't have a way to find the parent component context. And it incorrectly uses component A, which is still on the component stack (while it should be linked to B).

### Solution
The rendering of an embedded component is only really done after the `Template::display()` execution. Therefore the component can only be removed when BOTH are done.

Commits
-------

6933040 [TwigComponent][LiveComponent] Fix DataModelPropsSubscriber for embedded components

src/LiveComponent/src/EventListener/DataModelPropsSubscriber.php

@@ -13,9 +13,11 @@
 
 use Symfony\Component\EventDispatcher\EventSubscriberInterface;
 use Symfony\Component\PropertyAccess\PropertyAccessorInterface;
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
 use Symfony\UX\LiveComponent\Util\ModelBindingParser;
 use Symfony\UX\TwigComponent\ComponentStack;
 use Symfony\UX\TwigComponent\Event\PreMountEvent;
+use Symfony\UX\TwigComponent\MountedComponent;
 
 /**
  * Parses the "data-model" key, which triggers extra props to be passed in.
@@ -54,8 +56,9 @@ public function onPreMount(PreMountEvent $event): void
         unset($data['dataModel']);
         $data['data-model'] = $dataModel;
 
-        // the parent is still listed as the "current" component at this point
-        $parentMountedComponent = $this->componentStack->getCurrentComponent();
+        // find the first parent of the component about to be rendered that is a Live Component
+        // only those can have properties controlled via the data-model attribute
+        $parentMountedComponent = $this->getCurrentLiveComponent($this->componentStack);
         if (null === $parentMountedComponent) {
             throw new \LogicException('You can only pass "data-model" when rendering a component when you\'re rendering inside of a parent component.');
         }
@@ -76,4 +79,20 @@ public static function getSubscribedEvents(): array
             PreMountEvent::class => 'onPreMount',
         ];
     }
+
+    private function getCurrentLiveComponent(ComponentStack $componentStack): ?MountedComponent
+    {
+        foreach ($componentStack as $mountedComponent) {
+            if ($this->isLiveComponent($mountedComponent->getComponent()::class)) {
+                return $mountedComponent;
+            }
+        }
+
+        return null;
+    }
+
+    private function isLiveComponent(string $classname): bool
+    {
+        return [] !== (new \ReflectionClass($classname))->getAttributes(AsLiveComponent::class);
+    }
 }

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

@@ -0,0 +1,22 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\LiveComponent\Tests\Fixtures\Component;
+
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+/**
+ * @author Bart Vanderstukken <[email protected]>
+ */
+#[AsTwigComponent('input_component')]
+final class InputComponent
+{
+}

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

@@ -0,0 +1,24 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\LiveComponent\Tests\Fixtures\Component;
+
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+/**
+ * @author Bart Vanderstukken <[email protected]>
+ */
+#[AsLiveComponent('parent_component_data_model')]
+final class ParentComponentDataModel
+{
+    use DefaultActionTrait;
+}

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

@@ -0,0 +1,27 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\UX\LiveComponent\Tests\Fixtures\Component;
+
+use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
+use Symfony\UX\LiveComponent\Attribute\LiveProp;
+use Symfony\UX\LiveComponent\DefaultActionTrait;
+
+/**
+ * @author Bart Vanderstukken <[email protected]>
+ */
+#[AsLiveComponent('parent_component_data_model_2')]
+final class ParentComponentDataModel2
+{
+    use DefaultActionTrait;
+
+    #[LiveProp(writable: true)] public string $content;
+}

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

@@ -0,0 +1 @@
+<input{{ attributes }} />

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

@@ -0,0 +1,2 @@
+{% component parent_component_data_model_2 with { content: 'default content on mount' } %}
+{% endcomponent %}

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

@@ -0,0 +1,2 @@
+{{ component('textarea_component', { dataModel: 'content' }) }}
+{% component input_component with { dataModel: 'content' } %}{% endcomponent %}

src/LiveComponent/tests/Integration/EventListener/DataModelPropsSubscriberTest.php

@@ -13,18 +13,16 @@
 
 use Symfony\Bundle\FrameworkBundle\Test\KernelTestCase;
 use Symfony\Component\HttpFoundation\Request;
+use Symfony\UX\LiveComponent\Tests\LiveComponentTestHelper;
 use Symfony\UX\TwigComponent\ComponentRenderer;
 
 final class DataModelPropsSubscriberTest extends KernelTestCase
 {
+    use LiveComponentTestHelper;
+
     public function testDataModelPropsAreSharedToChild(): void
     {
-        // work around so that a session is available so CSRF doesn't fail
-        $session = self::getContainer()->get('session.factory')->createSession();
-        $request = Request::create('/');
-        $request->setSession($session);
-        $requestStack = self::getContainer()->get('request_stack');
-        $requestStack->push($request);
+        $this->fakeSession();
 
         /** @var ComponentRenderer $renderer */
         $renderer = self::getContainer()->get('ux.twig_component.component_renderer');
@@ -42,4 +40,33 @@ public function testDataModelPropsAreSharedToChild(): void
         $this->assertStringContainsString('<textarea data-model="content:value">Hello data-model!</textarea>', $html);
         $this->assertStringContainsString('<textarea data-model="content2:value">Value for second child</textarea>', $html);
     }
+
+    public function testDataModelPropsAreAvailableInEmbeddedComponents(): void
+    {
+        $this->fakeSession();
+
+        $templateName = 'components/parent_component_data_model.html.twig';
+        $obscuredName = '684c45bf85d3461dbe587407892e59d8';
+        $this->addTemplateMap($obscuredName, $templateName);
+
+        /** @var ComponentRenderer $renderer */
+        $renderer = self::getContainer()->get('ux.twig_component.component_renderer');
+
+        $html = $renderer->createAndRender('parent_component_data_model', [
+            'attributes' => ['data-live-id' => 'dummy-live-id'],
+        ]);
+
+        $this->assertStringContainsString('<textarea data-model="content">default content on mount</textarea>', $html);
+        $this->assertStringContainsString('<input data-model="content" value="default content on mount" />', $html);
+    }
+
+    private function fakeSession(): void
+    {
+        // work around so that a session is available so CSRF doesn't fail
+        $session = self::getContainer()->get('session.factory')->createSession();
+        $request = Request::create('/');
+        $request->setSession($session);
+        $requestStack = self::getContainer()->get('request_stack');
+        $requestStack->push($request);
+    }
 }

src/TwigComponent/src/ComponentRenderer.php

@@ -93,17 +93,18 @@ public function embeddedContext(string $name, array $props, array $context, stri
 
         $this->componentStack->push($mounted);
 
-        try {
-            $embeddedContext = $this->preRender($mounted, $context)->getVariables();
-
-            if (!isset($embeddedContext['outerBlocks'])) {
-                $embeddedContext['outerBlocks'] = new BlockStack();
-            }
+        $embeddedContext = $this->preRender($mounted, $context)->getVariables();
 
-            return $embeddedContext;
-        } finally {
-            $this->componentStack->pop();
+        if (!isset($embeddedContext['outerBlocks'])) {
+            $embeddedContext['outerBlocks'] = new BlockStack();
         }
+
+        return $embeddedContext;
+    }
+
+    public function finishEmbeddedComponentRender(): void
+    {
+        $this->componentStack->pop();
     }
 
     private function preRender(MountedComponent $mounted, array $context = []): PreRenderEvent

src/TwigComponent/src/ComponentStack.php

@@ -16,7 +16,7 @@
  *
  * @internal
  */
-class ComponentStack
+class ComponentStack implements \IteratorAggregate
 {
     /**
      * @var MountedComponent[]
@@ -60,4 +60,12 @@ public function hasParentComponent(): bool
     {
         return (bool) $this->getParentComponent();
     }
+
+    /**
+     * @return MountedComponent[]|\ArrayIterator
+     */
+    public function getIterator(): \Traversable
+    {
+        return new \ArrayIterator(array_reverse($this->components));
+    }
 }

src/TwigComponent/src/Twig/ComponentExtension.php

@@ -80,6 +80,15 @@ public function embeddedContext(string $name, array $props, array $context, stri
         }
     }
 
+    public function finishEmbeddedComponentRender(): void
+    {
+        try {
+            $this->container->get(ComponentRenderer::class)->finishEmbeddedComponentRender();
+        } catch (\Throwable $e) {
+            $this->throwRuntimeError($name, $e);
+        }
+    }
+
     private function throwRuntimeError(string $name, \Throwable $e): void
     {
         if (!($e instanceof \Exception)) {

src/TwigComponent/src/Twig/ComponentNode.php

@@ -85,6 +85,12 @@ public function compile(Compiler $compiler): void
         $compiler->raw('->display($embeddedContext, $embeddedBlocks);');
         $compiler->raw("\n");
 
+        $compiler->write('$this->extensions[')
+            ->string(ComponentExtension::class)
+            ->raw(']->finishEmbeddedComponentRender()')
+            ->raw(";\n")
+        ;
+
         $compiler
             ->outdent()
             ->write('}')