Change implementation: permanent option

Author: smnandre

src/React/CHANGELOG.md

@@ -2,9 +2,8 @@
 
 ## 2.21.0
 
--   Add Turbo `data-turbo-permanent` support. Unmounting the React component now uses  
-    a delay and can be prevented if the Stimulus controller is `deconnected` and
-    immediately `connected` again.
+-   Add `permanent` option to the `react_component` Twig function, to prevent the 
+    _unmounting_ when the component is deconnected and immediately re-connected. 
 
 ## 2.13.2
 

src/React/assets/dist/render_controller.d.ts

@@ -3,14 +3,17 @@ import { Controller } from '@hotwired/stimulus';
 export default class extends Controller {
     readonly componentValue?: string;
     readonly propsValue?: object;
+    readonly permanentValue: boolean;
     static values: {
         component: StringConstructor;
         props: ObjectConstructor;
+        permanent: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     };
-    private unmountTimeoutId;
     connect(): void;
     disconnect(): void;
     _renderReactElement(reactElement: ReactElement): void;
-    _unmountReactElement(): void;
     private dispatchEvent;
 }

src/React/assets/dist/render_controller.js

@@ -40,7 +40,6 @@ var clientExports = requireClient();
 
 class default_1 extends Controller {
     connect() {
-        clearTimeout(this.unmountTimeoutId);
         const props = this.propsValue ? this.propsValue : null;
         this.dispatchEvent('connect', { component: this.componentValue, props: props });
         if (!this.componentValue) {
@@ -55,8 +54,14 @@ class default_1 extends Controller {
         });
     }
     disconnect() {
-        clearTimeout(this.unmountTimeoutId);
-        this.unmountTimeoutId = setTimeout(this._unmountReactElement.bind(this), 50);
+        if (this.permanentValue) {
+            return;
+        }
+        this.element.root.unmount();
+        this.dispatchEvent('unmount', {
+            component: this.componentValue,
+            props: this.propsValue ? this.propsValue : null,
+        });
     }
     _renderReactElement(reactElement) {
         const element = this.element;
@@ -65,20 +70,14 @@ class default_1 extends Controller {
         }
         element.root.render(reactElement);
     }
-    _unmountReactElement() {
-        this.element.root.unmount();
-        this.dispatchEvent('unmount', {
-            component: this.componentValue,
-            props: this.propsValue ? this.propsValue : null,
-        });
-    }
     dispatchEvent(name, payload) {
         this.dispatch(name, { detail: payload, prefix: 'react' });
     }
 }
 default_1.values = {
     component: String,
     props: Object,
+    permanent: { type: Boolean, default: false },
 };
 
 export { default_1 as default };

src/React/assets/src/render_controller.ts

@@ -14,20 +14,17 @@ import { Controller } from '@hotwired/stimulus';
 export default class extends Controller {
     declare readonly componentValue?: string;
     declare readonly propsValue?: object;
+    declare readonly permanentValue: boolean;
 
     static values = {
         component: String,
         props: Object,
+        permanent: { type: Boolean, default: false },
     };
-    private unmountTimeoutId: any;
 
     connect() {
-        clearTimeout(this.unmountTimeoutId);
-
         const props = this.propsValue ? this.propsValue : null;
-
         this.dispatchEvent('connect', { component: this.componentValue, props: props });
-
         if (!this.componentValue) {
             throw new Error('No component specified.');
         }
@@ -43,8 +40,17 @@ export default class extends Controller {
     }
 
     disconnect() {
-        clearTimeout(this.unmountTimeoutId);
-        this.unmountTimeoutId = setTimeout(this._unmountReactElement.bind(this), 50);
+        if (this.permanentValue) {
+            // Prevent unmounting the component if the controller is permanent
+            // (no render is allowed after unmounting)
+            return;
+        }
+
+        (this.element as any).root.unmount();
+        this.dispatchEvent('unmount', {
+            component: this.componentValue,
+            props: this.propsValue ? this.propsValue : null,
+        });
     }
 
     _renderReactElement(reactElement: ReactElement) {
@@ -58,14 +64,6 @@ export default class extends Controller {
         element.root.render(reactElement);
     }
 
-    _unmountReactElement() {
-        (this.element as any).root.unmount();
-        this.dispatchEvent('unmount', {
-            component: this.componentValue,
-            props: this.propsValue ? this.propsValue : null,
-        });
-    }
-
     private dispatchEvent(name: string, payload: any) {
         this.dispatch(name, { detail: payload, prefix: 'react' });
     }

src/React/src/Twig/ReactComponentExtension.php

@@ -45,15 +45,24 @@ public function getFunctions(): array
         ];
     }
 
-    public function renderReactComponent(string $componentName, array $props = []): string
+    /**
+     * @param array<string, mixed>    $props
+     * @param array{permanent?: bool} $options
+     */
+    public function renderReactComponent(string $componentName, array $props = [], array $options = []): string
     {
-        $params = ['component' => $componentName];
+        $values = ['component' => $componentName];
         if ($props) {
-            $params['props'] = $props;
+            $values['props'] = $props;
+        }
+        if ($options) {
+            if (\is_bool($permanent = $options['permanent'] ?? null)) {
+                $values['permanent'] = $permanent;
+            }
         }
 
         $stimulusAttributes = $this->stimulusHelper->createStimulusAttributes();
-        $stimulusAttributes->addController('@symfony/ux-react/react', $params);
+        $stimulusAttributes->addController('@symfony/ux-react/react', $values);
 
         return (string) $stimulusAttributes;
     }

src/React/tests/Twig/ReactComponentExtensionTest.php

@@ -9,7 +9,7 @@
  * file that was distributed with this source code.
  */
 
-namespace Symfony\UX\React\Tests;
+namespace Symfony\UX\React\Tests\Twig;
 
 use PHPUnit\Framework\TestCase;
 use Symfony\UX\React\Tests\Kernel\TwigAppKernel;
@@ -41,6 +41,39 @@ public function testRenderComponent()
         );
     }
 
+    /**
+     * @dataProvider provideOptions
+     */
+    public function testRenderComponentWithOptions(array $options, string|false $expected)
+    {
+        $kernel = new TwigAppKernel('test', true);
+        $kernel->boot();
+
+        /** @var ReactComponentExtension $extension */
+        $extension = $kernel->getContainer()->get('test.twig.extension.react');
+
+        $rendered = $extension->renderReactComponent(
+            'SubDir/MyComponent',
+            ['fullName' => 'Titouan Galopin'],
+            $options,
+        );
+
+        $this->assertStringContainsString('data-controller="symfony--ux-react--react" data-symfony--ux-react--react-component-value="SubDir/MyComponent" data-symfony--ux-react--react-props-value="{"fullName":"Titouan Galopin"}"', $rendered);
+        if (false === $expected) {
+            $this->assertStringNotContainsString('data-symfony--ux-react--react-permanent-value', $rendered);
+        } else {
+            $this->assertStringContainsString($expected, $rendered);
+        }
+    }
+
+    public static function provideOptions(): iterable
+    {
+        yield 'permanent' => [['permanent' => true], 'data-symfony--ux-react--react-permanent-value="true"'];
+        yield 'not permanent' => [['permanent' => false], 'data-symfony--ux-react--react-permanent-value="false"'];
+        yield 'permanent not bool' => [['permanent' => 12345], false];
+        yield 'no permanent' => [[], false];
+    }
+
     public function testRenderComponentWithoutProps()
     {
         $kernel = new TwigAppKernel('test', true);