@esportsplus/template 0.16.14 → 0.16.15

package/tests/compiler/ts-parser.ts

@@ -0,0 +1,160 @@
+import { describe, expect, it } from 'vitest';
+import { ts } from '@esportsplus/typescript';
+import { extractTemplateParts, findHtmlTemplates, findReactiveCalls } from '../../src/compiler/ts-parser';
+
+
+function createSourceFile(code: string): ts.SourceFile {
+    return ts.createSourceFile('test.ts', code, ts.ScriptTarget.Latest, true);
+}
+
+
+describe('compiler/ts-parser', () => {
+    describe('extractTemplateParts', () => {
+        it('NoSubstitutionTemplateLiteral → single literal, empty expressions', () => {
+            let sourceFile = createSourceFile('let x = `hello world`;');
+            let statement = sourceFile.statements[0] as ts.VariableStatement,
+                declaration = statement.declarationList.declarations[0],
+                template = declaration.initializer! as ts.NoSubstitutionTemplateLiteral;
+            let result = extractTemplateParts(template);
+
+            expect(result.literals).toEqual(['hello world']);
+            expect(result.expressions).toEqual([]);
+        });
+
+        it('TemplateExpression → correct literals + expressions', () => {
+            let sourceFile = createSourceFile('let x = `a${1}b${2}c`;');
+            let statement = sourceFile.statements[0] as ts.VariableStatement,
+                declaration = statement.declarationList.declarations[0],
+                template = declaration.initializer! as ts.TemplateExpression;
+            let result = extractTemplateParts(template);
+
+            expect(result.literals).toEqual(['a', 'b', 'c']);
+            expect(result.expressions.length).toBe(2);
+        });
+    });
+
+    describe('findHtmlTemplates', () => {
+        it('single html`` call → returns 1 TemplateInfo with correct literals/expressions', () => {
+            let source = `import { html } from '@esportsplus/template';\nlet x = html\`<div>\${value}</div>\`;`;
+            let sourceFile = createSourceFile(source);
+            let templates = findHtmlTemplates(sourceFile);
+
+            expect(templates.length).toBe(1);
+            expect(templates[0].literals).toEqual(['<div>', '</div>']);
+            expect(templates[0].expressions.length).toBe(1);
+            expect(templates[0].depth).toBe(0);
+        });
+
+        it('template with no expressions → single literal, no expressions', () => {
+            let source = `import { html } from '@esportsplus/template';\nlet x = html\`<div>hello</div>\`;`;
+            let sourceFile = createSourceFile(source);
+            let templates = findHtmlTemplates(sourceFile);
+
+            expect(templates.length).toBe(1);
+            expect(templates[0].literals).toEqual(['<div>hello</div>']);
+            expect(templates[0].expressions).toEqual([]);
+        });
+
+        it('no html import → returns empty array', () => {
+            let source = `let x = html\`<div>hello</div>\`;`;
+            let sourceFile = createSourceFile(source);
+            let templates = findHtmlTemplates(sourceFile);
+
+            // Without type checker, tag name match alone is sufficient
+            expect(templates.length).toBe(1);
+        });
+
+        it('no html tagged templates at all → returns empty array', () => {
+            let source = `let x = 'hello';`;
+            let sourceFile = createSourceFile(source);
+            let templates = findHtmlTemplates(sourceFile);
+
+            expect(templates.length).toBe(0);
+        });
+
+        it('multiple html`` calls in same file → all found', () => {
+            let source = [
+                `import { html } from '@esportsplus/template';`,
+                `let a = html\`<div>one</div>\`;`,
+                `let b = html\`<span>two</span>\`;`,
+                `let c = html\`<p>\${x}</p>\`;`
+            ].join('\n');
+            let sourceFile = createSourceFile(source);
+            let templates = findHtmlTemplates(sourceFile);
+
+            expect(templates.length).toBe(3);
+        });
+
+        it('html`` inside function body → found correctly', () => {
+            let source = [
+                `import { html } from '@esportsplus/template';`,
+                `function render() {`,
+                `    return html\`<div>\${value}</div>\`;`,
+                `}`
+            ].join('\n');
+            let sourceFile = createSourceFile(source);
+            let templates = findHtmlTemplates(sourceFile);
+
+            expect(templates.length).toBe(1);
+            expect(templates[0].depth).toBe(1);
+            expect(templates[0].expressions.length).toBe(1);
+        });
+
+        it('nested html`` → returns both with correct depths', () => {
+            let source = [
+                `import { html } from '@esportsplus/template';`,
+                `let outer = html\`<div>\${() => html\`<span>inner</span>\`}</div>\`;`
+            ].join('\n');
+            let sourceFile = createSourceFile(source);
+            let templates = findHtmlTemplates(sourceFile);
+
+            expect(templates.length).toBe(2);
+            // Sorted deepest first
+            expect(templates[0].depth).toBeGreaterThanOrEqual(templates[1].depth);
+        });
+
+        it('depth ordering: deepest first, then by position ascending', () => {
+            let source = [
+                `import { html } from '@esportsplus/template';`,
+                `let a = html\`<div>\${() => html\`<span>deep1</span>\`}</div>\`;`,
+                `let b = html\`<p>shallow</p>\`;`
+            ].join('\n');
+            let sourceFile = createSourceFile(source);
+            let templates = findHtmlTemplates(sourceFile);
+
+            expect(templates.length).toBe(3);
+            // First template should be deepest (the inner one from arrow fn)
+            expect(templates[0].depth).toBeGreaterThan(templates[1].depth);
+            // Same-depth items sorted by position ascending
+            let sameDepthtemplates = templates.filter(t => t.depth === 0);
+
+            for (let i = 1, n = sameDepthtemplates.length; i < n; i++) {
+                expect(sameDepthtemplates[i].start).toBeGreaterThan(sameDepthtemplates[i - 1].start);
+            }
+        });
+    });
+
+    describe('findReactiveCalls', () => {
+        it('html.reactive() → returns ReactiveCallInfo with array + callback args', () => {
+            let source = [
+                `import { html } from '@esportsplus/template';`,
+                `let x = html.reactive(items, (item) => html\`<li>\${item}</li>\`);`
+            ].join('\n');
+            let sourceFile = createSourceFile(source);
+            let calls = findReactiveCalls(sourceFile);
+
+            expect(calls.length).toBe(1);
+            expect(calls[0].arrayArg).toBeDefined();
+            expect(calls[0].callbackArg).toBeDefined();
+            expect(calls[0].start).toBeLessThan(calls[0].end);
+        });
+
+        it('no reactive calls → empty array', () => {
+            let source = `import { html } from '@esportsplus/template';\nlet x = html\`<div>hello</div>\`;`;
+            let sourceFile = createSourceFile(source);
+            let calls = findReactiveCalls(sourceFile);
+
+            expect(calls.length).toBe(0);
+        });
+    });
+});

package/{test/constants.test.ts → tests/constants.ts}

@@ -77,6 +77,11 @@ describe('constants', () => {
             expect(DIRECT_ATTACH_EVENTS.has('onload')).toBe(true);
         });
 
+        it('contains mouse enter/leave events', () => {
+            expect(DIRECT_ATTACH_EVENTS.has('onmouseenter')).toBe(true);
+            expect(DIRECT_ATTACH_EVENTS.has('onmouseleave')).toBe(true);
+        });
+
         it('contains scroll event', () => {
             expect(DIRECT_ATTACH_EVENTS.has('onscroll')).toBe(true);
         });
@@ -84,7 +89,6 @@ describe('constants', () => {
         it('does not contain delegatable events', () => {
             expect(DIRECT_ATTACH_EVENTS.has('onclick')).toBe(false);
             expect(DIRECT_ATTACH_EVENTS.has('onkeydown')).toBe(false);
-            expect(DIRECT_ATTACH_EVENTS.has('onmouseenter')).toBe(false);
         });
     });
 

package/tests/event/onconnect.ts

@@ -0,0 +1,147 @@
+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); }
+    };
+});
+
+
+let { default: onconnect } = await import('../../src/event/onconnect');
+
+
+describe('event/onconnect', () => {
+    let container: HTMLElement;
+
+    beforeEach(() => {
+        callbacks = [];
+        container = document.createElement('div');
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        // Drain the RAF loop so tasks.running resets between tests
+        for (let i = 0; i < 65; i++) {
+            advanceFrame();
+        }
+
+        callbacks = [];
+        document.body.removeChild(container);
+    });
+
+    function advanceFrame() {
+        let current = callbacks.slice();
+
+        callbacks = [];
+
+        for (let i = 0, n = current.length; i < n; i++) {
+            current[i]();
+        }
+    }
+
+    it('calls listener on first tick when element is already connected', () => {
+        let called = false,
+            element = document.createElement('div') as unknown as Element;
+
+        container.appendChild(element as unknown as Node);
+
+        onconnect(element, () => { called = true; });
+        advanceFrame();
+
+        expect(called).toBe(true);
+    });
+
+    it('calls listener after element connects on tick N', () => {
+        let called = false,
+            element = document.createElement('div') as unknown as Element;
+
+        onconnect(element, () => { called = true; });
+
+        // Advance 10 frames without connecting
+        for (let i = 0; i < 10; i++) {
+            advanceFrame();
+        }
+
+        expect(called).toBe(false);
+
+        // Connect element
+        container.appendChild(element as unknown as Node);
+        advanceFrame();
+
+        expect(called).toBe(true);
+    });
+
+    it('never calls listener if element does not connect within 60 ticks', () => {
+        let called = false,
+            element = document.createElement('div') as unknown as Element;
+
+        onconnect(element, () => { called = true; });
+
+        // Advance 62 frames — retry decrements from 60, at 0 it removes
+        for (let i = 0; i < 62; i++) {
+            advanceFrame();
+        }
+
+        expect(called).toBe(false);
+
+        // Verify polling stopped — connecting now should have no effect
+        container.appendChild(element as unknown as Node);
+        advanceFrame();
+        advanceFrame();
+
+        expect(called).toBe(false);
+    });
+
+    it('passes element as argument to listener', () => {
+        let element = document.createElement('div') as unknown as Element,
+            received: unknown = null;
+
+        container.appendChild(element as unknown as Node);
+
+        onconnect(element, (el) => { received = el; });
+        advanceFrame();
+
+        expect(received).toBe(element);
+    });
+
+    it('calls listener only once', () => {
+        let count = 0,
+            element = document.createElement('div') as unknown as Element;
+
+        container.appendChild(element as unknown as Node);
+
+        onconnect(element, () => { count++; });
+
+        advanceFrame();
+        advanceFrame();
+        advanceFrame();
+
+        expect(count).toBe(1);
+    });
+
+    it('stops polling after listener is called', () => {
+        let element = document.createElement('div') as unknown as Element,
+            listenerCalled = false;
+
+        container.appendChild(element as unknown as Node);
+
+        onconnect(element, () => { listenerCalled = true; });
+        advanceFrame();
+
+        expect(listenerCalled).toBe(true);
+
+        // After listener fires and task is removed, further frames should not re-add
+        advanceFrame();
+        advanceFrame();
+
+        // If no tasks remain, callbacks should be empty after the last frame processes
+        expect(callbacks.length).toBe(0);
+    });
+});

package/tests/event/onresize.ts

@@ -0,0 +1,187 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import type { Element } from '../../src/types';
+
+
+let cleanups: VoidFunction[] = [];
+
+vi.mock('@esportsplus/reactivity', async (importOriginal) => {
+    let original = await importOriginal<typeof import('@esportsplus/reactivity')>();
+
+    return {
+        ...original,
+        onCleanup: (fn: VoidFunction) => { cleanups.push(fn); return fn; }
+    };
+});
+
+
+let { default: onresize } = await import('../../src/event/onresize');
+
+
+function createElement(connected = true): Element {
+    let element = document.createElement('div') as unknown as Element;
+
+    Object.defineProperty(element, 'isConnected', { get: () => connected, configurable: true });
+
+    return element;
+}
+
+function fireResize() {
+    window.dispatchEvent(new Event('resize'));
+}
+
+
+describe('event/onresize', () => {
+    let addSpy: ReturnType<typeof vi.spyOn>;
+    let removeSpy: ReturnType<typeof vi.spyOn>;
+
+    beforeEach(() => {
+        cleanups = [];
+        addSpy = vi.spyOn(window, 'addEventListener');
+        removeSpy = vi.spyOn(window, 'removeEventListener');
+    });
+
+    afterEach(() => {
+        // Run all captured cleanups to reset module state
+        for (let i = 0, n = cleanups.length; i < n; i++) {
+            cleanups[i]();
+        }
+
+        cleanups = [];
+        addSpy.mockRestore();
+        removeSpy.mockRestore();
+    });
+
+    it('single element receives resize callback', () => {
+        let called = false,
+            element = createElement();
+
+        onresize(element, () => { called = true; });
+        fireResize();
+
+        expect(called).toBe(true);
+    });
+
+    it('multiple elements all receive resize callback', () => {
+        let a = 0,
+            b = 0,
+            elementA = createElement(),
+            elementB = createElement();
+
+        onresize(elementA, () => { a++; });
+        onresize(elementB, () => { b++; });
+        fireResize();
+
+        expect(a).toBe(1);
+        expect(b).toBe(1);
+    });
+
+    it('disconnected element is auto-removed during next resize', () => {
+        let connected = true,
+            count = 0,
+            element = document.createElement('div') as unknown as Element;
+
+        Object.defineProperty(element, 'isConnected', {
+            get: () => connected,
+            configurable: true
+        });
+
+        onresize(element, () => { count++; });
+        fireResize();
+
+        expect(count).toBe(1);
+
+        connected = false;
+        fireResize();
+
+        // Should not have incremented — disconnected elements skipped
+        expect(count).toBe(1);
+
+        connected = true;
+        fireResize();
+
+        // Already removed from listeners map, should stay at 1
+        expect(count).toBe(1);
+    });
+
+    it('dedup: only one window resize listener registered', () => {
+        let elementA = createElement(),
+            elementB = createElement();
+
+        onresize(elementA, () => {});
+        onresize(elementB, () => {});
+
+        let resizeCalls = addSpy.mock.calls.filter(
+            (args) => args[0] === 'resize'
+        );
+
+        expect(resizeCalls.length).toBe(1);
+    });
+
+    it('listener receives element as argument', () => {
+        let element = createElement(),
+            received: unknown = null;
+
+        onresize(element, (el) => { received = el; });
+        fireResize();
+
+        expect(received).toBe(element);
+    });
+
+    it('onCleanup removes element from listeners', () => {
+        let count = 0,
+            element = createElement();
+
+        onresize(element, () => { count++; });
+        fireResize();
+
+        expect(count).toBe(1);
+
+        // Simulate reactive cleanup
+        for (let i = 0, n = cleanups.length; i < n; i++) {
+            cleanups[i]();
+        }
+
+        cleanups = [];
+        fireResize();
+
+        expect(count).toBe(1);
+    });
+
+    it('window listener removed when all elements gone', () => {
+        let element = createElement(false);
+
+        onresize(element, () => {});
+        fireResize();
+
+        let removeCalls = removeSpy.mock.calls.filter(
+            (args) => args[0] === 'resize'
+        );
+
+        expect(removeCalls.length).toBe(1);
+    });
+
+    it('re-registers window listener after all removed and new element added', () => {
+        let element = createElement(false);
+
+        onresize(element, () => {});
+        fireResize();
+
+        // Window listener should be removed
+        let removeCalls = removeSpy.mock.calls.filter(
+            (args) => args[0] === 'resize'
+        );
+
+        expect(removeCalls.length).toBe(1);
+
+        // Add new element — should re-register
+        let element2 = createElement();
+
+        onresize(element2, () => {});
+
+        let addCalls = addSpy.mock.calls.filter(
+            (args) => args[0] === 'resize'
+        );
+
+        expect(addCalls.length).toBe(2);
+    });
+});