feat: Implement generic async destruction handling via Promise Rejection (#8801)

Author: tobiu

src/Neo.mjs

@@ -87,13 +87,20 @@ Neo = globalThis.Neo = Object.assign({
      */
     ntypeMap: {},
     /**
-     * Needed for Neo.create. False for the main thread, true for the App, Data & Vdom worker
+     * Needed for Neo.create. False for the main thread, true for the App, Data & VDom worker
      * @memberOf! module:Neo
      * @protected
      * @type Boolean
      */
     insideWorker: typeof DedicatedWorkerGlobalScope !== 'undefined' || typeof WorkerGlobalScope !== 'undefined',
 
+    /**
+     * A symbol to identify if a promise was rejected because the instance got destroyed.
+     * @memberOf! module:Neo
+     * @type {Symbol}
+     */
+    isDestroyed: Symbol.for('Neo.isDestroyed'),
+
     /**
      * Maps methods from one namespace to another one
      * @example
@@ -1172,4 +1179,12 @@ Neo.config ??= {};
 
 Neo.assignDefaults(Neo.config, DefaultConfig);
 
+if (typeof globalThis.addEventListener === 'function') {
+    globalThis.addEventListener('unhandledrejection', e => {
+        if (e.reason === Neo.isDestroyed) {
+            e.preventDefault()
+        }
+    })
+}
+
 export default Neo;

src/component/MagicMoveText.mjs

@@ -344,6 +344,8 @@ class MagicMoveText extends Component {
 
                 await me.updateChars()
             } catch (e) {
+                if (e === Neo.isDestroyed) return;
+
                 if (!me.isRetrying) {
                     me.isRetrying    = true;
                     me.previousChars = [];
@@ -458,7 +460,6 @@ class MagicMoveText extends Component {
         await me.promiseUpdate();
         if (me.isDestroyed) return;
         await me.timeout(20);
-        if (me.isDestroyed) return;
 
         rects      = await me.getDomRect([me.id, measureWrapper.id, ...measureElement.cn.map(node => node.id)]);
         if (me.isDestroyed) return;
@@ -640,7 +641,6 @@ class MagicMoveText extends Component {
         await me.promiseUpdate();
         if (me.isDestroyed) return;
         await me.timeout(me.transitionTime);
-        if (me.isDestroyed) return;
 
         charsContainer.cn.sort(me.sortCharacters);
 
@@ -660,7 +660,6 @@ class MagicMoveText extends Component {
         await me.promiseUpdate();
         if (me.isDestroyed) return;
         await me.timeout(200);
-        if (me.isDestroyed) return;
 
         me.charsVdom = [...charsContainer.cn];
 

src/core/Base.mjs

@@ -207,10 +207,10 @@ class Base {
     #remotesReadyResolver = null;
     /**
      * Internal cache for all timeout ids when using this.timeout()
-     * @member {Number[]} timeoutIds=[]
+     * @member {Map<Number, Function>} #timeouts=new Map()
      * @private
      */
-    #timeoutIds = []
+    #timeouts = new Map()
 
     /**
      * The main initializer for all Neo.mjs classes, invoked by `Neo.create()`.
@@ -510,10 +510,13 @@ class Base {
     destroy() {
         let me = this;
 
-        me.#timeoutIds.forEach(id => {
-            clearTimeout(id)
+        me.#timeouts.forEach((reject, id) => {
+            clearTimeout(id);
+            reject(Neo.isDestroyed)
         });
 
+        me.#timeouts.clear();
+
         me.#configSubscriptionCleanups.forEach(cleanup => {
             cleanup()
         });
@@ -1086,11 +1089,15 @@ class Base {
      * @returns {Promise<any>}
      */
     timeout(time) {
-        return new Promise(resolve => {
-            let timeoutIds = this.#timeoutIds,
-                timeoutId  = setTimeout(() => {timeoutIds.splice(timeoutIds.indexOf(timeoutId), 1); resolve()}, time);
+        let me = this;
+
+        return new Promise((resolve, reject) => {
+            let id = setTimeout(() => {
+                me.#timeouts.delete(id);
+                resolve()
+            }, time);
 
-            timeoutIds.push(timeoutId)
+            me.#timeouts.set(id, reject)
         })
     }
 

test/playwright/unit/core/BaseTimeout.spec.mjs

@@ -0,0 +1,96 @@
+import {test, expect} from '@playwright/test';
+import Neo            from '../../../../src/Neo.mjs';
+import Base           from '../../../../src/core/Base.mjs';
+
+test.describe('core/Base Timeout Handling', () => {
+    test('timeout() should resolve after the specified delay', async () => {
+        class TestClass extends Base {
+            static config = {
+                className: 'Neo.test.TimeoutTestClass'
+            }
+        }
+        Neo.setupClass(TestClass);
+
+        const instance = Neo.create(TestClass);
+        const start = Date.now();
+        await instance.timeout(100);
+        const end = Date.now();
+
+        expect(end - start).toBeGreaterThanOrEqual(95); // Allow small margin
+    });
+
+    test('timeout() should be rejected with Neo.isDestroyed when instance is destroyed', async () => {
+        class TestClass extends Base {
+            static config = {
+                className: 'Neo.test.TimeoutDestroyTestClass'
+            }
+        }
+        Neo.setupClass(TestClass);
+
+        const instance = Neo.create(TestClass);
+        let error;
+
+        // Start timeout but don't await immediately to allow destruction
+        const timeoutPromise = instance.timeout(500);
+
+        // Destroy instance before timeout completes
+        instance.destroy();
+
+        try {
+            await timeoutPromise;
+        } catch (e) {
+            error = e;
+        }
+
+        expect(error).toBe(Neo.isDestroyed);
+    });
+
+    test('Multiple timeouts should be handled correctly', async () => {
+        class TestClass extends Base {
+            static config = {
+                className: 'Neo.test.MultipleTimeoutTestClass'
+            }
+        }
+        Neo.setupClass(TestClass);
+
+        const instance = Neo.create(TestClass);
+        let error1, error2;
+
+        const p1 = instance.timeout(200);
+        const p2 = instance.timeout(400);
+
+        instance.destroy();
+
+        try {
+            await p1;
+        } catch (e) {
+            error1 = e;
+        }
+
+        try {
+            await p2;
+        } catch (e) {
+            error2 = e;
+        }
+
+        expect(error1).toBe(Neo.isDestroyed);
+        expect(error2).toBe(Neo.isDestroyed);
+    });
+
+    test('Completed timeouts should not prevent destruction or throw errors', async () => {
+        class TestClass extends Base {
+            static config = {
+                className: 'Neo.test.CompletedTimeoutTestClass'
+            }
+        }
+        Neo.setupClass(TestClass);
+
+        const instance = Neo.create(TestClass);
+        
+        await instance.timeout(50); // let it finish
+        
+        // Should not throw
+        instance.destroy();
+        expect(instance.isDestroyed).toBe(true);
+    });
+});