Allow to use react_component without props

Author: tgalopin

src/React/Resources/assets/src/render_controller.ts

@@ -15,36 +15,45 @@ import { Controller } from '@hotwired/stimulus';
 
 export default class extends Controller {
     readonly componentValue: string;
-    readonly propsValue: object;
+    readonly propsValue?: object;
 
     static values = {
         component: String,
         props: Object,
     };
 
     connect() {
-        this._dispatchEvent('react:connect', { component: this.componentValue, props: this.propsValue });
+        const props = this.propsValue ? this.propsValue : null;
+
+        this._dispatchEvent('react:connect', { component: this.componentValue, props: props });
 
         const component = window.resolveReactComponent(this.componentValue);
-        this._renderReactElement(React.createElement(component, this.propsValue, null));
+        this._renderReactElement(React.createElement(component, props, null));
 
         this._dispatchEvent('react:mount', {
             componentName: this.componentValue,
             component: component,
-            props: this.propsValue,
+            props: props,
         });
     }
 
     disconnect() {
         (this.element as any).root.unmount();
-        this._dispatchEvent('react:unmount', { component: this.componentValue, props: this.propsValue });
+        this._dispatchEvent('react:unmount', {
+            component: this.componentValue,
+            props: this.propsValue ? this.propsValue : null,
+        });
     }
 
     _renderReactElement(reactElement: ReactElement) {
-        const root = createRoot(this.element);
-        root.render(reactElement);
+        const element: any = (this.element as any);
+
+        // If a root has already been created for this element, reuse it
+        if (!element.root) {
+            element.root = createRoot(this.element);
+        }
 
-        (this.element as any).root = root;
+        element.root.render(reactElement);
     }
 
     _dispatchEvent(name: string, payload: any) {

src/React/Resources/assets/test/render_controller.test.tsx

@@ -34,38 +34,51 @@ const startStimulus = () => {
     application.register('react', ReactController);
 };
 
-function ReactComponent(props: { fullName: string }) {
-    return <div>Hello {props.fullName}</div>;
+function ReactComponent(props: { fullName?: string }) {
+    return <div>Hello {props.fullName ? props.fullName : 'without props'}</div>;
 }
 
 (window as any).resolveReactComponent = () => {
     return ReactComponent;
 };
 
 describe('ReactController', () => {
-    let container: any;
-
-    beforeEach(() => {
-        container = mountDOM(`
+    it('connect with props', async () => {
+        const container = mountDOM(`
           <div data-testid="component"
               data-controller="check react"
               data-react-component-value="ReactComponent"
               data-react-props-value="{&quot;fullName&quot;: &quot;Titouan Galopin&quot;}" />
         `);
-    });
 
-    afterEach(() => {
+        const component = getByTestId(container, 'component');
+        expect(component).not.toHaveClass('connected');
+        expect(component).not.toHaveClass('mounted');
+
+        startStimulus();
+        await waitFor(() => expect(component).toHaveClass('connected'));
+        await waitFor(() => expect(component).toHaveClass('mounted'));
+        await waitFor(() => expect(component.innerHTML).toEqual('<div>Hello Titouan Galopin</div>'));
+
         clearDOM();
     });
 
-    it('connect', async () => {
+    it('connect without props', async () => {
+        const container = mountDOM(`
+          <div data-testid="component" id="container-2"
+              data-controller="check react"
+              data-react-component-value="ReactComponent" />
+        `);
+
         const component = getByTestId(container, 'component');
         expect(component).not.toHaveClass('connected');
         expect(component).not.toHaveClass('mounted');
 
         startStimulus();
         await waitFor(() => expect(component).toHaveClass('connected'));
         await waitFor(() => expect(component).toHaveClass('mounted'));
-        await waitFor(() => expect(component.innerHTML).toEqual('<div>Hello Titouan Galopin</div>'));
+        await waitFor(() => expect(component.innerHTML).toEqual('<div>Hello without props</div>'));
+
+        clearDOM();
     });
 });

src/React/Tests/Twig/ReactComponentExtensionTest.php

@@ -41,4 +41,20 @@ public function testRenderComponent()
             $rendered
         );
     }
+
+    public function testRenderComponentWithoutProps()
+    {
+        $kernel = new TwigAppKernel('test', true);
+        $kernel->boot();
+
+        /** @var ReactComponentExtension $extension */
+        $extension = $kernel->getContainer()->get('test.twig.extension.react');
+
+        $rendered = $extension->renderReactComponent($kernel->getContainer()->get('test.twig'), 'SubDir/MyComponent');
+
+        $this->assertSame(
+            'data-controller="symfony--ux-react--react" data-symfony--ux-react--react-component-value="SubDir/MyComponent"',
+            $rendered
+        );
+    }
 }

src/React/Twig/ReactComponentExtension.php

@@ -40,9 +40,11 @@ public function getFunctions(): array
 
     public function renderReactComponent(Environment $env, string $componentName, array $props = []): string
     {
-        return $this->stimulusExtension->renderStimulusController($env, '@symfony/ux-react/react', [
-            'component' => $componentName,
-            'props' => $props,
-        ]);
+        $params = ['component' => $componentName];
+        if ($props) {
+            $params['props'] = $props;
+        }
+
+        return $this->stimulusExtension->renderStimulusController($env, '@symfony/ux-react/react', $params);
     }
 }