@esportsplus/template 0.16.13 → 0.16.15

package/tests/event/ontick.ts

@@ -0,0 +1,273 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { Element } from '../../src/types';
+
+
+let callbacks: VoidFunction[] = [];
+
+vi.mock('../../src/utilities', async (importOriginal) => {
+    let original = await importOriginal<typeof import('../../src/utilities')>();
+
+    return {
+        ...original,
+        raf: (cb: VoidFunction) => { callbacks.push(cb); }
+    };
+});
+
+
+// Must import after mock setup
+let { add, remove } = await import('../../src/event/ontick');
+let { default: ontick } = await import('../../src/event/ontick');
+
+
+describe('event/ontick', () => {
+    beforeEach(() => {
+        callbacks = [];
+    });
+
+    afterEach(() => {
+        callbacks = [];
+    });
+
+    function advanceFrame() {
+        let current = callbacks.slice();
+
+        callbacks = [];
+
+        for (let i = 0, n = current.length; i < n; i++) {
+            current[i]();
+        }
+    }
+
+    describe('add', () => {
+        it('schedules task to run in RAF', () => {
+            let called = false,
+                task = () => { called = true; };
+
+            add(task);
+            advanceFrame();
+
+            expect(called).toBe(true);
+
+            remove(task);
+            advanceFrame();
+        });
+
+        it('task runs on each frame while added', () => {
+            let count = 0,
+                task = () => { count++; };
+
+            add(task);
+
+            advanceFrame();
+            advanceFrame();
+            advanceFrame();
+
+            expect(count).toBe(3);
+
+            remove(task);
+            advanceFrame();
+        });
+    });
+
+    describe('remove', () => {
+        it('stops task execution', () => {
+            let count = 0,
+                task = () => { count++; };
+
+            add(task);
+            advanceFrame();
+
+            expect(count).toBe(1);
+
+            remove(task);
+            advanceFrame();
+
+            expect(count).toBe(1);
+
+            advanceFrame();
+        });
+
+        it('RAF loop stops when no tasks remain', () => {
+            let task = () => {};
+
+            add(task);
+            advanceFrame();
+            remove(task);
+            advanceFrame();
+
+            // After tick sees no tasks, it should not schedule another raf
+            expect(callbacks.length).toBe(0);
+        });
+    });
+
+    describe('multiple tasks', () => {
+        it('all execute per frame', () => {
+            let a = 0,
+                b = 0,
+                taskA = () => { a++; },
+                taskB = () => { b++; };
+
+            add(taskA);
+            add(taskB);
+            advanceFrame();
+
+            expect(a).toBe(1);
+            expect(b).toBe(1);
+
+            remove(taskA);
+            remove(taskB);
+            advanceFrame();
+        });
+    });
+
+    describe('add then remove same task', () => {
+        it('no execution after immediate remove', () => {
+            let called = false,
+                task = () => { called = true; };
+
+            add(task);
+            remove(task);
+            advanceFrame();
+
+            expect(called).toBe(false);
+        });
+    });
+
+    describe('ontick', () => {
+        let container: HTMLElement;
+
+        beforeEach(() => {
+            container = document.createElement('div');
+            document.body.appendChild(container);
+        });
+
+        afterEach(() => {
+            document.body.removeChild(container);
+        });
+
+        it('calls listener when element is connected', () => {
+            let element = document.createElement('div') as unknown as Element,
+                called = false,
+                storedDispose: VoidFunction | null = null;
+
+            container.appendChild(element as unknown as Node);
+
+            ontick(element, (dispose) => { called = true; storedDispose = dispose; });
+            advanceFrame();
+
+            expect(called).toBe(true);
+
+            storedDispose!();
+            advanceFrame();
+        });
+
+        it('listener receives dispose function and element', () => {
+            let element = document.createElement('div') as unknown as Element,
+                receivedDispose: VoidFunction | null = null,
+                receivedElement: unknown = null;
+
+            container.appendChild(element as unknown as Node);
+
+            ontick(element, (dispose, el) => {
+                receivedDispose = dispose;
+                receivedElement = el;
+            });
+            advanceFrame();
+
+            expect(typeof receivedDispose).toBe('function');
+            expect(receivedElement).toBe(element);
+
+            receivedDispose!();
+            advanceFrame();
+        });
+
+        it('auto-removes when element disconnects', () => {
+            let callCount = 0,
+                element = document.createElement('div') as unknown as Element;
+
+            container.appendChild(element as unknown as Node);
+
+            ontick(element, () => { callCount++; });
+            advanceFrame();
+
+            expect(callCount).toBe(1);
+
+            container.removeChild(element as unknown as Node);
+            advanceFrame();
+
+            let afterDisconnect = callCount;
+
+            advanceFrame();
+
+            expect(callCount).toBe(afterDisconnect);
+        });
+
+        it('retries up to 60 times for connection', () => {
+            let called = false,
+                element = document.createElement('div') as unknown as Element,
+                storedDispose: VoidFunction | null = null;
+
+            // Not connected to DOM
+            ontick(element, (dispose) => { called = true; storedDispose = dispose; });
+
+            // Advance 59 frames without connecting — should not call or remove
+            for (let i = 0; i < 59; i++) {
+                advanceFrame();
+            }
+
+            expect(called).toBe(false);
+
+            // Connect before 60th retry
+            container.appendChild(element as unknown as Node);
+            advanceFrame();
+
+            expect(called).toBe(true);
+
+            storedDispose!();
+            advanceFrame();
+        });
+
+        it('removes after 60 retries if never connected', () => {
+            let callCount = 0,
+                element = document.createElement('div') as unknown as Element;
+
+            // Not connected to DOM
+            ontick(element, () => { callCount++; });
+
+            // Advance 61 frames — retry=60, counts down each frame, at 0 it removes
+            for (let i = 0; i < 62; i++) {
+                advanceFrame();
+            }
+
+            expect(callCount).toBe(0);
+
+            // Verify task was removed — no further calls even if we keep ticking
+            advanceFrame();
+            advanceFrame();
+
+            expect(callCount).toBe(0);
+        });
+
+        it('dispose function stops execution', () => {
+            let callCount = 0,
+                element = document.createElement('div') as unknown as Element,
+                storedDispose: VoidFunction | null = null;
+
+            container.appendChild(element as unknown as Node);
+
+            ontick(element, (dispose) => {
+                callCount++;
+                storedDispose = dispose;
+            });
+
+            advanceFrame();
+
+            expect(callCount).toBe(1);
+
+            storedDispose!();
+            advanceFrame();
+
+            expect(callCount).toBe(1);
+        });
+    });
+});

package/{test/slot/array.test.ts → tests/slot/array.ts}

@@ -472,4 +472,278 @@ describe('slot/ArraySlot', () => {
             expect(spans[3].textContent).toBe('e');
         });
     });
+
+    describe('rapid successive operations', () => {
+        it('batches push+push+pop in same frame', async () => {
+            let arr = reactive(['a'] as string[]),
+                slot = new ArraySlot(arr, (s) => {
+                    let frag = document.createDocumentFragment(),
+                        span = document.createElement('span');
+
+                    span.textContent = s;
+                    frag.appendChild(span);
+
+                    return frag as unknown as DocumentFragment;
+                });
+
+            container.appendChild(slot.fragment);
+
+            arr.push('b');
+            arr.push('c');
+            arr.pop();
+
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            let spans = container.querySelectorAll('span');
+
+            expect(spans.length).toBe(2);
+            expect(spans[0].textContent).toBe('a');
+            expect(spans[1].textContent).toBe('b');
+        });
+
+        it('batches unshift+pop+push in same frame', async () => {
+            let arr = reactive(['b'] as string[]),
+                slot = new ArraySlot(arr, (s) => {
+                    let frag = document.createDocumentFragment(),
+                        span = document.createElement('span');
+
+                    span.textContent = s;
+                    frag.appendChild(span);
+
+                    return frag as unknown as DocumentFragment;
+                });
+
+            container.appendChild(slot.fragment);
+
+            arr.unshift('a');
+            arr.pop();
+            arr.push('c');
+
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            let spans = container.querySelectorAll('span');
+
+            expect(spans.length).toBe(2);
+            expect(spans[0].textContent).toBe('a');
+            expect(spans[1].textContent).toBe('c');
+        });
+    });
+
+    describe('empty array edge cases', () => {
+        it('pop on empty array does not throw', async () => {
+            let arr = reactive([] as string[]),
+                slot = new ArraySlot(arr, (s) => {
+                    let frag = document.createDocumentFragment(),
+                        span = document.createElement('span');
+
+                    span.textContent = s;
+                    frag.appendChild(span);
+
+                    return frag as unknown as DocumentFragment;
+                });
+
+            container.appendChild(slot.fragment);
+
+            arr.pop();
+
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            let spans = container.querySelectorAll('span');
+
+            expect(spans.length).toBe(0);
+        });
+
+        it('shift on empty array does not throw', async () => {
+            let arr = reactive([] as string[]),
+                slot = new ArraySlot(arr, (s) => {
+                    let frag = document.createDocumentFragment(),
+                        span = document.createElement('span');
+
+                    span.textContent = s;
+                    frag.appendChild(span);
+
+                    return frag as unknown as DocumentFragment;
+                });
+
+            container.appendChild(slot.fragment);
+
+            arr.shift();
+
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            let spans = container.querySelectorAll('span');
+
+            expect(spans.length).toBe(0);
+        });
+
+        it('splice beyond bounds does not throw', async () => {
+            let arr = reactive(['a'] as string[]),
+                slot = new ArraySlot(arr, (s) => {
+                    let frag = document.createDocumentFragment(),
+                        span = document.createElement('span');
+
+                    span.textContent = s;
+                    frag.appendChild(span);
+
+                    return frag as unknown as DocumentFragment;
+                });
+
+            container.appendChild(slot.fragment);
+
+            arr.splice(10, 5);
+
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            let spans = container.querySelectorAll('span');
+
+            expect(spans.length).toBe(1);
+            expect(spans[0].textContent).toBe('a');
+        });
+    });
+
+    describe('large array operations', () => {
+        it('pushes 50+ items and renders all correctly', async () => {
+            let arr = reactive([] as number[]),
+                slot = new ArraySlot(arr, (n) => {
+                    let frag = document.createDocumentFragment(),
+                        span = document.createElement('span');
+
+                    span.textContent = String(n);
+                    frag.appendChild(span);
+
+                    return frag as unknown as DocumentFragment;
+                });
+
+            container.appendChild(slot.fragment);
+
+            let items: number[] = [];
+
+            for (let i = 0; i < 60; i++) {
+                items.push(i);
+            }
+
+            arr.push(...items);
+
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            let spans = container.querySelectorAll('span');
+
+            expect(spans.length).toBe(60);
+            expect(spans[0].textContent).toBe('0');
+            expect(spans[59].textContent).toBe('59');
+        });
+    });
+
+    describe('set operation', () => {
+        it('replaces a single item by index via splice', async () => {
+            let arr = reactive(['a', 'b', 'c'] as string[]),
+                slot = new ArraySlot(arr, (s) => {
+                    let frag = document.createDocumentFragment(),
+                        span = document.createElement('span');
+
+                    span.textContent = s;
+                    frag.appendChild(span);
+
+                    return frag as unknown as DocumentFragment;
+                });
+
+            container.appendChild(slot.fragment);
+
+            arr.splice(1, 1, 'x');
+
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            let spans = container.querySelectorAll('span');
+
+            expect(spans.length).toBe(3);
+            expect(spans[0].textContent).toBe('a');
+            expect(spans[1].textContent).toBe('x');
+            expect(spans[2].textContent).toBe('c');
+        });
+
+        it('replaces first item by index via splice', async () => {
+            let arr = reactive(['a', 'b'] as string[]),
+                slot = new ArraySlot(arr, (s) => {
+                    let frag = document.createDocumentFragment(),
+                        span = document.createElement('span');
+
+                    span.textContent = s;
+                    frag.appendChild(span);
+
+                    return frag as unknown as DocumentFragment;
+                });
+
+            container.appendChild(slot.fragment);
+
+            arr.splice(0, 1, 'z');
+
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            let spans = container.querySelectorAll('span');
+
+            expect(spans.length).toBe(2);
+            expect(spans[0].textContent).toBe('z');
+            expect(spans[1].textContent).toBe('b');
+        });
+    });
+
+    describe('disconnect cleanup', () => {
+        it('cleans up nodes when cleared', async () => {
+            let cleanupCount = 0,
+                arr = reactive(['a', 'b', 'c'] as string[]),
+                slot = new ArraySlot(arr, (s) => {
+                    let frag = document.createDocumentFragment(),
+                        span = document.createElement('span');
+
+                    span.textContent = s;
+                    frag.appendChild(span);
+
+                    return frag as unknown as DocumentFragment;
+                });
+
+            container.appendChild(slot.fragment);
+
+            let spans = container.querySelectorAll('span');
+
+            expect(spans.length).toBe(3);
+
+            // Clear removes all items and their DOM nodes
+            arr.splice(0, arr.length);
+
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            spans = container.querySelectorAll('span');
+
+            expect(spans.length).toBe(0);
+        });
+
+        it('removes nodes from DOM on pop', async () => {
+            let arr = reactive(['a', 'b'] as string[]),
+                slot = new ArraySlot(arr, (s) => {
+                    let frag = document.createDocumentFragment(),
+                        span = document.createElement('span');
+
+                    span.textContent = s;
+                    span.setAttribute('data-value', s);
+                    frag.appendChild(span);
+
+                    return frag as unknown as DocumentFragment;
+                });
+
+            container.appendChild(slot.fragment);
+
+            let removed = container.querySelector('span[data-value="b"]');
+
+            expect(removed).not.toBeNull();
+
+            arr.pop();
+
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            removed = container.querySelector('span[data-value="b"]');
+
+            expect(removed).toBeNull();
+            expect(container.querySelectorAll('span').length).toBe(1);
+        });
+    });
 });

package/vitest.bench.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vitest/config';
+import path from 'path';
+
+
+export default defineConfig({
+    resolve: {
+        alias: {
+            '~': path.resolve(__dirname, 'src')
+        }
+    },
+    test: {
+        benchmark: {
+            include: ['bench/**/*.ts']
+        },
+        environment: 'jsdom',
+        globals: true
+    }
+});

package/vitest.config.ts

@@ -16,6 +16,6 @@ export default defineConfig({
         },
         environment: 'jsdom',
         globals: true,
-        include: ['test/**/*.test.ts']
+        include: ['tests/**/*.ts']
     }
 });