[LiveComponent] Fix live component rendering when loaded from bfcache

Author: 1ed

src/LiveComponent/assets/dist/live_controller.js

@@ -1238,17 +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;
-        };
     }
     initialize() {
-        this.markAsWindowUnloaded = this.markAsWindowUnloaded.bind(this);
         this.handleUpdateModelEvent = this.handleUpdateModelEvent.bind(this);
         this.handleInputEvent = this.handleInputEvent.bind(this);
         this.handleChangeEvent = this.handleChangeEvent.bind(this);
@@ -1261,12 +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('beforeunload', this.markAsWindowUnloaded);
         this._startAttributesMutationObserver();
         this.element.addEventListener('live:update-model', this.handleUpdateModelEvent);
         this.element.addEventListener('input', this.handleInputEvent);
@@ -1277,7 +1273,6 @@ class default_1 extends Controller {
     disconnect() {
         this._stopAllPolling();
         __classPrivateFieldGet(this, _instances, "m", _clearRequestDebounceTimeout).call(this);
-        window.removeEventListener('beforeunload', this.markAsWindowUnloaded);
         this.element.removeEventListener('live:update-model', this.handleUpdateModelEvent);
         this.element.removeEventListener('input', this.handleInputEvent);
         this.element.removeEventListener('change', this.handleChangeEvent);
@@ -1287,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') {
@@ -1944,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,7 +86,6 @@ export default class extends Controller implements LiveController {
     pendingActionTriggerModelElement: HTMLElement|null = null;
 
     initialize() {
-        this.markAsWindowUnloaded = this.markAsWindowUnloaded.bind(this);
         this.handleUpdateModelEvent = this.handleUpdateModelEvent.bind(this);
         this.handleInputEvent = this.handleInputEvent.bind(this);
         this.handleChangeEvent = this.handleChangeEvent.bind(this);
@@ -100,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();
@@ -111,7 +111,6 @@ export default class extends Controller implements LiveController {
 
         this._initiatePolling();
 
-        window.addEventListener('beforeunload', this.markAsWindowUnloaded);
         this._startAttributesMutationObserver();
         this.element.addEventListener('live:update-model', this.handleUpdateModelEvent);
         this.element.addEventListener('input', this.handleInputEvent);
@@ -125,7 +124,6 @@ export default class extends Controller implements LiveController {
         this._stopAllPolling();
         this.#clearRequestDebounceTimeout();
 
-        window.removeEventListener('beforeunload', this.markAsWindowUnloaded);
         this.element.removeEventListener('live:update-model', this.handleUpdateModelEvent);
         this.element.removeEventListener('input', this.handleInputEvent);
         this.element.removeEventListener('change', this.handleChangeEvent);
@@ -137,6 +135,8 @@ export default class extends Controller implements LiveController {
         if (this.mutationObserver) {
             this.mutationObserver.disconnect();
         }
+
+        this.isConnected = false;
     }
 
     /**
@@ -493,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;
         }
 
@@ -795,10 +795,6 @@ export default class extends Controller implements LiveController {
         this._exposeOriginalData();
     }
 
-    markAsWindowUnloaded = () => {
-        this.isWindowUnloaded = true;
-    };
-
     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('beforeunload', window));
+        // trigger disconnect
+        test.element.removeAttribute('data-controller')
 
         // wait for the fetch to finish
         await fetchMock.flush();
@@ -241,6 +241,38 @@ describe('LiveController rendering Tests', () => {
         expect(test.element).not.toHaveTextContent('Hello');
     });
 
+    it('renders if the page is navigating away and back', async () => {
+        const test = await createTest({greeting: 'aloha!'}, (data: any) => `
+            <div ${initComponent(data)}>${data.greeting}</div>
+        `);
+
+        test.expectsAjaxCall('get')
+            .expectSentData(test.initialData)
+            .serverWillChangeData((data) => {
+                data.greeting = 'Hello';
+            })
+            .delayResponse(100)
+            .init();
+
+        test.controller.$render();
+
+        // trigger controller disconnect
+        test.element.removeAttribute('data-controller')
+        // wait for the fetch to finish
+        await fetchMock.flush();
+
+        expect(test.element).toHaveTextContent('aloha!')
+
+        // trigger connect
+        test.element.setAttribute('data-controller', 'live')
+        test.controller.$render();
+        // wait for the fetch to finish
+        await fetchMock.flush();
+
+        // the re-render should have happened
+        expect(test.element).toHaveTextContent('Hello');
+    });
+
     it('waits for the previous request to finish & batches changes', async () => {
         const test = await createTest({ title: 'greetings', contents: '' }, (data: any) => `
             <div ${initComponent(data, { debounce: 1 })}>