fix(react/runtime): remove listener before destroy

.changeset/bright-rings-read.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/react": patch
+---
+
+Fix crash caused by not removing event listeners during destroy.

packages/react/runtime/__test__/lifecycle/destroy.test.jsx

@@ -0,0 +1,45 @@
+import { render } from 'preact';
+import { beforeAll, describe, expect, test, vi } from 'vitest';
+
+describe('Destroy', () => {
+  const addEventListener = vi.fn();
+  const removeEventListener = vi.fn();
+
+  beforeAll(() => {
+    lynx.getCoreContext = vi.fn(() => {
+      return {
+        addEventListener,
+        removeEventListener,
+      };
+    });
+  });
+
+  test('should remove event listener when throw in cleanup', async function() {
+    vi.resetModules();
+    await import('../../src/lynx');
+
+    expect(addEventListener).toHaveBeenCalled();
+    expect(removeEventListener).toHaveBeenCalledTimes(0);
+
+    const { useEffect } = await import('../../src/index');
+    const { __root } = await import('../../src/root');
+
+    const callback = vi.fn().mockImplementation(() => {
+      throw '???';
+    });
+
+    function Comp() {
+      useEffect(() => callback, []);
+      return null;
+    }
+
+    render(<Comp />, __root);
+    await Promise.resolve().then(() => {});
+
+    expect(() => lynxCoreInject.tt.callDestroyLifetimeFun()).toThrow('???');
+
+    await Promise.resolve().then(() => {});
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(removeEventListener).toHaveBeenCalledTimes(addEventListener.mock.calls.length);
+  });
+});

packages/react/runtime/__test__/utils/runtimeProxy.test.js

@@ -17,13 +17,15 @@ describe('runtimeProxy', () => {
     globalEnvManager.switchToBackground();
     lynx.getCoreContext().dispatchEvent({ type: 'event1', data: 'test' });
     expect(event).toBeCalledWith({ type: 'event1', data: 'test' });
+    lynx.getJSContext().removeEventListener('event1', event);
   });
 
   it('should not trigger event when context mismatch', () => {
     const event = vi.fn();
     lynx.getJSContext().addEventListener('event1', event);
     lynx.getJSContext().dispatchEvent({ type: 'event1', data: 'test' });
     expect(event).not.toBeCalled();
+    lynx.getJSContext().removeEventListener('event1', event);
   });
 
   it('should throw when dispatch event to the same context', () => {

packages/react/runtime/__test__/utils/setup.js

@@ -17,8 +17,12 @@ function inject() {
 inject();
 
 afterEach((context) => {
-  if (context.task.name.includes('preact/debug')) {
+  const skippedTasks = [
     // Skip preact/debug tests since it would throw errors and abort the rendering process
+    'preact/debug',
+    'should remove event listener when throw in cleanup',
+  ];
+  if (skippedTasks.some(task => context.task.name.includes(task))) {
     return;
   }
 

packages/react/runtime/src/lynx/tt.ts

@@ -30,9 +30,9 @@ function injectTt(): void {
   tt.publishEvent = delayedPublishEvent;
   tt.publicComponentEvent = delayedPublicComponentEvent;
   tt.callDestroyLifetimeFun = () => {
+    removeCtxNotFoundEventListener();
     destroyWorklet();
     destroyBackground();
-    removeCtxNotFoundEventListener();
   };
   tt.updateGlobalProps = updateGlobalProps;
   tt.updateCardData = updateCardData;