Allow to use react_component without props

Author: tgalopin

src/Autocomplete/assets/dist/controller.js

@@ -1,25 +1,25 @@
 import { Controller } from '@hotwired/stimulus';
 import TomSelect from 'tom-select';
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __classPrivateFieldGet(receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 }
 
 var _instances, _getCommonConfig, _createAutocomplete, _createAutocompleteWithHtmlContents, _createAutocompleteWithRemoteData, _stripTags, _mergeObjects, _createTomSelect, _dispatchEvent;
@@ -42,6 +42,9 @@ class default_1 extends Controller {
         }
         this.tomSelect = __classPrivateFieldGet(this, _instances, "m", _createAutocomplete).call(this);
     }
+    disconnect() {
+        this.tomSelect.destroy();
+    }
     get selectElement() {
         if (!(this.element instanceof HTMLSelectElement)) {
             return null;

src/React/Resources/assets/dist/render_controller.js

@@ -7,6 +7,7 @@ var createRoot;
 var m = require$$0;
 if (process.env.NODE_ENV === 'production') {
   createRoot = m.createRoot;
+  m.hydrateRoot;
 } else {
   var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
   createRoot = function(c, o) {
@@ -21,23 +22,29 @@ if (process.env.NODE_ENV === 'production') {
 
 class default_1 extends Controller {
     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.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) {
-        const root = createRoot(this.element);
-        root.render(reactElement);
-        this.element.root = root;
+        const element = this.element;
+        if (!element.root) {
+            element.root = createRoot(this.element);
+        }
+        element.root.render(reactElement);
     }
     _dispatchEvent(name, payload) {
         this.element.dispatchEvent(new CustomEvent(name, { detail: payload, bubbles: true }));

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);
     }
 }