[LiveComponent] Prevent __component property to be serialized when …

…called `JSON.stringify()`
symfony · Jan 31, 2025 · e04f8f0 · e04f8f0
1 parent ec09cdf
commit e04f8f0
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/src/LiveComponent/CHANGELOG.md b/src/LiveComponent/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## 2.23.0
 
 -   Allow configuring the secret used to compute fingerprints and checksums.
+-   Prevent `__component` property to be serialized when called `JSON.stringify()`
 
 ## 2.22.0
 

diff --git a/src/LiveComponent/assets/dist/live_controller.js b/src/LiveComponent/assets/dist/live_controller.js
@@ -3059,7 +3059,10 @@ class LiveControllerDefault extends Controller {
         const id = this.element.id || null;
         this.component = new Component(this.element, this.nameValue, this.propsValue, this.listenersValue, id, LiveControllerDefault.backendFactory(this), new StimulusElementDriver(this));
         this.proxiedComponent = proxifyComponent(this.component);
-        this.element.__component = this.proxiedComponent;
+        Object.defineProperty(this.element, '__component', {
+            value: this.proxiedComponent,
+            writable: true,
+        });
         if (this.hasDebounceValue) {
             this.component.defaultDebounce = this.debounceValue;
         }

diff --git a/src/LiveComponent/assets/src/live_controller.ts b/src/LiveComponent/assets/src/live_controller.ts
@@ -285,8 +285,10 @@ export default class LiveControllerDefault extends Controller<HTMLElement> imple
         );
         this.proxiedComponent = proxifyComponent(this.component);
 
-        // @ts-ignore Adding the dynamic property
-        this.element.__component = this.proxiedComponent;
+        Object.defineProperty(this.element, '__component', {
+            value: this.proxiedComponent,
+            writable: true,
+        });
 
         if (this.hasDebounceValue) {
             this.component.defaultDebounce = this.debounceValue;