Use stimulus connect/disconnect instead

Author: 1ed

src/LiveComponent/assets/dist/live_controller.js

@@ -1238,21 +1238,13 @@ class default_1 extends Controller {
         this.isRerenderRequested = false;
         this.requestDebounceTimeout = null;
         this.pollingIntervals = [];
-        this.isWindowUnloaded = false;
+        this.isConnected = false;
         this.originalDataJSON = '{}';
         this.mutationObserver = null;
         this.childComponentControllers = [];
         this.pendingActionTriggerModelElement = null;
-        this.markAsWindowUnloaded = () => {
-            this.isWindowUnloaded = true;
-        };
-        this.markAsWindowNotUnloaded = () => {
-            this.isWindowUnloaded = false;
-        };
     }
     initialize() {
-        this.markAsWindowUnloaded = this.markAsWindowUnloaded.bind(this);
-        this.markAsWindowNotUnloaded = this.markAsWindowNotUnloaded.bind(this);
         this.handleUpdateModelEvent = this.handleUpdateModelEvent.bind(this);
         this.handleInputEvent = this.handleInputEvent.bind(this);
         this.handleChangeEvent = this.handleChangeEvent.bind(this);
@@ -1265,13 +1257,12 @@ class default_1 extends Controller {
         this.synchronizeValueOfModelFields();
     }
     connect() {
+        this.isConnected = true;
         this._onLoadingFinish();
         if (!(this.element instanceof HTMLElement)) {
             throw new Error('Invalid Element Type');
         }
         this._initiatePolling();
-        window.addEventListener('pagehide', this.markAsWindowUnloaded);
-        window.addEventListener('pageshow', this.markAsWindowNotUnloaded);
         this._startAttributesMutationObserver();
         this.element.addEventListener('live:update-model', this.handleUpdateModelEvent);
         this.element.addEventListener('input', this.handleInputEvent);
@@ -1282,8 +1273,6 @@ class default_1 extends Controller {
     disconnect() {
         this._stopAllPolling();
         __classPrivateFieldGet(this, _instances, "m", _clearRequestDebounceTimeout).call(this);
-        window.removeEventListener('pagehide', this.markAsWindowUnloaded);
-        window.removeEventListener('pageshow', this.markAsWindowNotUnloaded);
         this.element.removeEventListener('live:update-model', this.handleUpdateModelEvent);
         this.element.removeEventListener('input', this.handleInputEvent);
         this.element.removeEventListener('change', this.handleChangeEvent);
@@ -1293,6 +1282,7 @@ class default_1 extends Controller {
         if (this.mutationObserver) {
             this.mutationObserver.disconnect();
         }
+        this.isConnected = false;
     }
     update(event) {
         if (event.type === 'input' || event.type === 'change') {
@@ -1950,7 +1940,7 @@ _instances = new WeakSet(), _startPendingRequest = function _startPendingRequest
         __classPrivateFieldGet(this, _instances, "m", _startPendingRequest).call(this);
     });
 }, _processRerender = function _processRerender(html, response) {
-    if (this.isWindowUnloaded) {
+    if (!this.isConnected) {
         return;
     }
     if (response.headers.get('Location')) {

src/LiveComponent/assets/src/live_controller.ts

@@ -70,7 +70,7 @@ export default class extends Controller implements LiveController {
 
     pollingIntervals: NodeJS.Timer[] = [];
 
-    isWindowUnloaded = false;
+    isConnected = false;
 
     originalDataJSON = '{}';
 
@@ -86,8 +86,6 @@ export default class extends Controller implements LiveController {
     pendingActionTriggerModelElement: HTMLElement|null = null;
 
     initialize() {
-        this.markAsWindowUnloaded = this.markAsWindowUnloaded.bind(this);
-        this.markAsWindowNotUnloaded = this.markAsWindowNotUnloaded.bind(this);
         this.handleUpdateModelEvent = this.handleUpdateModelEvent.bind(this);
         this.handleInputEvent = this.handleInputEvent.bind(this);
         this.handleChangeEvent = this.handleChangeEvent.bind(this);
@@ -101,6 +99,7 @@ export default class extends Controller implements LiveController {
     }
 
     connect() {
+        this.isConnected = true;
         // hide "loading" elements to begin with
         // This is done with CSS, but only for the most basic cases
         this._onLoadingFinish();
@@ -112,8 +111,6 @@ export default class extends Controller implements LiveController {
 
         this._initiatePolling();
 
-        window.addEventListener('pagehide', this.markAsWindowUnloaded);
-        window.addEventListener('pageshow', this.markAsWindowNotUnloaded);
         this._startAttributesMutationObserver();
         this.element.addEventListener('live:update-model', this.handleUpdateModelEvent);
         this.element.addEventListener('input', this.handleInputEvent);
@@ -127,8 +124,6 @@ export default class extends Controller implements LiveController {
         this._stopAllPolling();
         this.#clearRequestDebounceTimeout();
 
-        window.removeEventListener('pagehide', this.markAsWindowUnloaded);
-        window.removeEventListener('pageshow', this.markAsWindowNotUnloaded);
         this.element.removeEventListener('live:update-model', this.handleUpdateModelEvent);
         this.element.removeEventListener('input', this.handleInputEvent);
         this.element.removeEventListener('change', this.handleChangeEvent);
@@ -140,6 +135,8 @@ export default class extends Controller implements LiveController {
         if (this.mutationObserver) {
             this.mutationObserver.disconnect();
         }
+
+        this.isConnected = false;
     }
 
     /**
@@ -496,7 +493,7 @@ export default class extends Controller implements LiveController {
      */
     #processRerender(html: string, response: Response) {
         // check if the page is navigating away
-        if (this.isWindowUnloaded) {
+        if (!this.isConnected) {
             return;
         }
 
@@ -798,14 +795,6 @@ export default class extends Controller implements LiveController {
         this._exposeOriginalData();
     }
 
-    markAsWindowUnloaded = () => {
-        this.isWindowUnloaded = true;
-    };
-
-    markAsWindowNotUnloaded = () => {
-        this.isWindowUnloaded = false;
-    };
-
     handleConnectedControllerEvent(event: any) {
         if (event.target === this.element) {
             return;

src/LiveComponent/assets/test/controller/render.test.ts

@@ -231,8 +231,8 @@ describe('LiveController rendering Tests', () => {
             .init();
 
         test.controller.$render();
-        // imitate navigating away
-        fireEvent(window, createEvent('pagehide', window));
+        // trigger disconnect
+        test.element.removeAttribute('data-controller')
 
         // wait for the fetch to finish
         await fetchMock.flush();
@@ -255,15 +255,16 @@ describe('LiveController rendering Tests', () => {
             .init();
 
         test.controller.$render();
-        // imitate navigating away
-        fireEvent(window, createEvent('pagehide', window));
+
+        // trigger controller disconnect
+        test.element.removeAttribute('data-controller')
         // wait for the fetch to finish
         await fetchMock.flush();
 
         expect(test.element).toHaveTextContent('aloha!')
 
-        // navigate back
-        fireEvent(window, createEvent('pageshow', window));
+        // trigger connect
+        test.element.setAttribute('data-controller', 'live')
         test.controller.$render();
         // wait for the fetch to finish
         await fetchMock.flush();