@esportsplus/template 0.16.15 → 0.17.2

package/src/compiler/plugins/vite.ts

@@ -1,10 +1,79 @@
+import { NAMESPACE, PACKAGE_NAME } from '../constants';
 import { plugin } from '@esportsplus/typescript/compiler';
-import { PACKAGE_NAME } from '../constants';
+
 import reactivity from '@esportsplus/reactivity/compiler';
 import template from '..';
 
 
-export default plugin.vite({
-    name: PACKAGE_NAME,
-    plugins: [reactivity, template]
-});
+type VitePlugin = {
+    configResolved: (config: any) => void;
+    enforce: 'pre';
+    handleHotUpdate?: (ctx: { file: string; modules: any[] }) => void;
+    name: string;
+    transform: (code: string, id: string) => { code: string; map: null } | null;
+    watchChange: (id: string) => void;
+};
+
+
+const TEMPLATE_SEARCH = NAMESPACE + '.template(';
+
+const TEMPLATE_CALL_REGEX = new RegExp(
+    '(const\\s+(\\w+)\\s*=\\s*' + NAMESPACE + '\\.template\\()(`)',
+    'g'
+);
+
+
+let base = plugin.vite({
+        name: PACKAGE_NAME,
+        plugins: [reactivity, template]
+    });
+
+
+function injectHMR(code: string, id: string): string {
+    let hmrId = id.replace(/\\/g, '/'),
+        hotReplace = NAMESPACE + '.createHotTemplate("' + hmrId + '", "',
+        injected = code.replace(TEMPLATE_CALL_REGEX, function(_match: string, prefix: string, varName: string, backtick: string) {
+            return prefix.replace(TEMPLATE_SEARCH, hotReplace + varName + '", ') + backtick;
+        });
+
+    if (injected === code) {
+        return code;
+    }
+
+    injected += '\nif (import.meta.hot) { import.meta.hot.accept(() => { ' + NAMESPACE + '.accept("' + hmrId + '"); }); }';
+
+    return injected;
+}
+
+
+export default ({ root }: { root?: string } = {}) => {
+    let isDev = false,
+        vitePlugin = base({ root });
+
+    return {
+        ...vitePlugin,
+        configResolved(config: any) {
+            vitePlugin.configResolved(config);
+            isDev = config?.command === 'serve' || config?.mode === 'development';
+        },
+        handleHotUpdate(_ctx: { file: string; modules: any[] }) {
+            // Let Vite handle the default HMR flow
+        },
+        transform(code: string, id: string) {
+            let result = vitePlugin.transform(code, id);
+
+            if (!result || !isDev) {
+                return result;
+            }
+
+            let injected = injectHMR(result.code, id);
+
+            if (injected === result.code) {
+                return result;
+            }
+
+            return { code: injected, map: null };
+        }
+    } satisfies VitePlugin;
+};
+

package/src/hmr.ts

@@ -0,0 +1,70 @@
+let clone = <T extends DocumentFragment | Node>(node: T, deep: boolean = true) => node.cloneNode(deep) as T,
+    modules = new Map<string, Map<string, HotTemplate>>(),
+    tmpl = typeof document !== 'undefined' ? document.createElement('template') : null;
+
+
+type HotTemplate = {
+    cached: DocumentFragment | undefined;
+    factory: () => DocumentFragment;
+    html: string;
+};
+
+
+function invalidate(moduleId: string): void {
+    let templates = modules.get(moduleId);
+
+    if (!templates) {
+        return;
+    }
+
+    for (let [, entry] of templates) {
+        entry.cached = undefined;
+    }
+}
+
+function register(moduleId: string, templateId: string, html: string): () => DocumentFragment {
+    let entry: HotTemplate = {
+        cached: undefined,
+        factory: () => {
+            if (!entry.cached) {
+                let element = tmpl!.cloneNode() as HTMLTemplateElement;
+
+                element.innerHTML = entry.html;
+                entry.cached = element.content;
+            }
+
+            return clone(entry.cached!, true) as DocumentFragment;
+        },
+        html
+    };
+
+    (modules.get(moduleId) ?? (modules.set(moduleId, new Map()), modules.get(moduleId)!)).set(templateId, entry);
+
+    return entry.factory;
+}
+
+
+const accept = (moduleId: string): void => {
+    invalidate(moduleId);
+};
+
+const createHotTemplate = (moduleId: string, templateId: string, html: string): () => DocumentFragment => {
+    let existing = modules.get(moduleId)?.get(templateId);
+
+    if (existing) {
+        existing.cached = undefined;
+        existing.html = html;
+
+        return existing.factory;
+    }
+
+    return register(moduleId, templateId, html);
+};
+
+// Test-only: reset state
+const hmrReset = (): void => {
+    modules.clear();
+};
+
+
+export { accept, createHotTemplate, hmrReset, modules };

package/src/index.ts

@@ -10,6 +10,7 @@ if (typeof Node !== 'undefined') {
 
 export * from './attributes';
 export * from './event';
+export * from './hmr';
 export * from './utilities';
 
 export { default as html } from './html';

package/src/slot/array.ts

@@ -264,7 +264,8 @@ class ArraySlot<T> {
             return;
         }
 
-        let ref: Node | null = end;
+        let ref: Node | null = end,
+            useMoveBefore = 'moveBefore' in parent;
 
         for (let i = n - 1; i >= 0; i--) {
             let group = sorted[i];
@@ -279,7 +280,13 @@ class ArraySlot<T> {
             while (node) {
                 let prev: Node | null = node === group.head ? null : node.previousSibling;
 
-                parent.insertBefore(node, ref);
+                if (useMoveBefore) {
+                    (parent as any).moveBefore(node, ref);
+                }
+                else {
+                    parent.insertBefore(node, ref);
+                }
+
                 ref = node;
                 node = prev;
             }
@@ -304,6 +311,27 @@ class ArraySlot<T> {
             return;
         }
 
+        let parent = this.marker.parentNode;
+
+        if (parent && 'moveBefore' in parent) {
+            let ref: Node | null = nodes[0].tail.nextSibling;
+
+            for (let i = n - 1; i >= 0; i--) {
+                let group = nodes[i],
+                    node: Node | null = group.tail;
+
+                while (node) {
+                    let prev: Node | null = node === group.head ? null : node.previousSibling;
+
+                    (parent as any).moveBefore(node, ref);
+                    ref = node;
+                    node = prev;
+                }
+            }
+
+            return;
+        }
+
         for (let i = 0; i < n; i++) {
             let group = nodes[i],
                 next: Node | null,

package/src/slot/effect.ts

@@ -1,4 +1,5 @@
 import { effect } from '@esportsplus/reactivity';
+import { isAsyncFunction } from '@esportsplus/utilities';
 import { Element, Renderable, SlotGroup } from '../types';
 import { raf, text } from '../utilities'
 import { remove } from './cleanup';
@@ -20,37 +21,50 @@ function read(value: unknown): unknown {
 
 class EffectSlot {
     anchor: Element;
-    disposer: VoidFunction;
+    disposer: VoidFunction | null;
     group: SlotGroup | null = null;
     scheduled = false;
     textnode: Node | null = null;
 
 
-    constructor(anchor: Element, fn: (dispose?: VoidFunction) => Renderable<any>) {
-        let dispose = fn.length ? () => this.dispose() : undefined,
-            value: unknown;
-
+    constructor(anchor: Element, fn: ((...args: any[]) => any)) {
         this.anchor = anchor;
-        this.disposer = effect(() => {
-            value = read( fn(dispose) );
+        this.disposer = null;
 
-            if (!this.disposer) {
-                this.update(value);
-            }
-            else if (!this.scheduled) {
-                this.scheduled = true;
+        if (isAsyncFunction(fn)) {
+            (fn as (fallback: (content: Renderable<any>) => void) => Promise<Renderable<any>>)(
+                (content) => this.update(content)
+            ).then((value) => this.update(value), () => {});
+        }
+        else {
+            let dispose = fn.length ? () => this.dispose() : undefined,
+                value: unknown;
+
+            this.disposer = effect(() => {
+                value = read( fn(dispose) );
 
-                raf(() => {
-                    this.scheduled = false;
+                if (!this.disposer) {
                     this.update(value);
-                });
-            }
-        });
+                }
+                else if (!this.scheduled) {
+                    this.scheduled = true;
+
+                    raf(() => {
+                        this.scheduled = false;
+                        this.update(value);
+                    });
+                }
+            });
+        }
     }
 
 
     dispose() {
-        let { anchor, group, textnode } = this;
+        let { anchor, disposer, group, textnode } = this;
+
+        if (!disposer) {
+            return;
+        }
 
         if (textnode) {
             group = { head: anchor, tail: textnode as Element };
@@ -59,7 +73,7 @@ class EffectSlot {
             group.head = anchor;
         }
 
-        this.disposer();
+        disposer();
 
         if (group) {
             remove(group);
@@ -69,6 +83,8 @@ class EffectSlot {
     update(value: unknown): void {
         let { anchor, group, textnode } = this;
 
+        value = read(value);
+
         if (group) {
             remove(group);
             this.group = null;
@@ -92,7 +108,17 @@ class EffectSlot {
         }
         else {
             let fragment = render(anchor, value),
+                head: Node | null,
+                tail: Node | null;
+
+            if (fragment.nodeType === 11) {
                 head = fragment.firstChild;
+                tail = fragment.lastChild;
+            }
+            else {
+                head = fragment;
+                tail = fragment;
+            }
 
             if (textnode?.isConnected) {
                 remove({ head: textnode as Element, tail: textnode as Element });
@@ -101,7 +127,7 @@ class EffectSlot {
             if (head) {
                 this.group = {
                     head: head as Element,
-                    tail: fragment.lastChild as Element
+                    tail: tail as Element
                 };
 
                 anchor.after(fragment);

package/tests/attributes.ts

@@ -1,13 +1,22 @@
-import { describe, expect, it, beforeEach } from 'vitest';
+import { describe, expect, it, beforeEach, afterEach } from 'vitest';
+import { signal, read, write } from '@esportsplus/reactivity';
 import { setList, setProperty, setProperties } from '../src/attributes';
 import type { Element } from '../src/types';
 
 
 describe('attributes', () => {
-    let element: HTMLElement & Record<symbol, unknown>;
+    let container: HTMLElement,
+        element: HTMLElement & Record<symbol, unknown>;
 
     beforeEach(() => {
+        container = document.createElement('div');
         element = document.createElement('div') as HTMLElement & Record<symbol, unknown>;
+        container.appendChild(element);
+        document.body.appendChild(container);
+    });
+
+    afterEach(() => {
+        document.body.removeChild(container);
     });
 
     describe('setProperty', () => {
@@ -309,4 +318,135 @@ describe('attributes', () => {
             expect(element.getAttribute('style')).toContain('color');
         });
     });
+
+    describe('reactive updates (schedule/task path)', () => {
+        it('removes stale dynamic class values on reactive update', async () => {
+            let s = signal('foo bar');
+
+            setList(element as unknown as Element, 'class', () => read(s));
+
+            expect(element.className).toContain('foo');
+            expect(element.className).toContain('bar');
+
+            write(s, 'foo baz');
+
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            expect(element.className).toContain('foo');
+            expect(element.className).toContain('baz');
+            expect(element.className).not.toContain('bar');
+        });
+
+        it('removes stale dynamic style values on reactive update', async () => {
+            let s = signal('color: red; font-size: 14px');
+
+            setList(element as unknown as Element, 'style', () => read(s));
+
+            expect(element.getAttribute('style')).toContain('color: red');
+            expect(element.getAttribute('style')).toContain('font-size: 14px');
+
+            write(s, 'color: blue');
+
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            expect(element.getAttribute('style')).toContain('color: blue');
+            expect(element.getAttribute('style')).not.toContain('font-size: 14px');
+        });
+
+        it('schedules property update via RAF on reactive change', async () => {
+            let s = signal('first');
+
+            setProperty(element as unknown as Element, 'id', () => read(s));
+
+            expect(element.id).toBe('first');
+
+            write(s, 'second');
+
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            expect(element.id).toBe('second');
+        });
+
+        it('batches multiple property updates in single RAF', async () => {
+            let s1 = signal('a'),
+                s2 = signal('x');
+
+            setProperty(element as unknown as Element, 'id', () => read(s1));
+            setProperty(element as unknown as Element, 'data-value', () => read(s2));
+
+            expect(element.id).toBe('a');
+            expect(element.getAttribute('data-value')).toBe('x');
+
+            write(s1, 'b');
+            write(s2, 'y');
+
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            expect(element.id).toBe('b');
+            expect(element.getAttribute('data-value')).toBe('y');
+        });
+
+        it('clears class via reactive update to empty', async () => {
+            let s = signal('foo bar');
+
+            setList(element as unknown as Element, 'class', () => read(s));
+
+            expect(element.className).toContain('foo');
+
+            write(s, '');
+
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            expect(element.className).not.toContain('foo');
+            expect(element.className).not.toContain('bar');
+        });
+    });
+
+    describe('setProperties event handler routing', () => {
+        it('routes onclick handler function to runtime/delegate', () => {
+            let clicked = false;
+
+            setProperties(element as unknown as Element, {
+                onclick: () => { clicked = true; }
+            });
+
+            element.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+
+            expect(clicked).toBe(true);
+        });
+
+        it('routes onmousedown handler function to runtime/delegate', () => {
+            let fired = false;
+
+            setProperties(element as unknown as Element, {
+                onmousedown: () => { fired = true; }
+            });
+
+            element.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+
+            expect(fired).toBe(true);
+        });
+
+        it('routes onfocus handler function to runtime/on (direct attach)', () => {
+            let focused = false;
+
+            setProperties(element as unknown as Element, {
+                onfocus: () => { focused = true; }
+            });
+
+            element.dispatchEvent(new FocusEvent('focus'));
+
+            expect(focused).toBe(true);
+        });
+
+        it('routes non-event function property via reactive', () => {
+            let s = signal('hello');
+
+            setProperties(element as unknown as Element, {
+                'data-val': () => read(s)
+            });
+
+            expect(element.getAttribute('data-val')).toBe('hello');
+        });
+    });
 });

package/tests/compiler/codegen.ts

@@ -270,6 +270,84 @@ describe('compiler/codegen', () => {
         });
     });
 
+    describe('generateCode - spread attribute slots (object literal expansion)', () => {
+        it('expands plain object literal into individual bindings', () => {
+            let { result } = codegen(`let x = html\`<div \${{ id: 'test', class: 'foo' }}>text</div>\`;`);
+            let code = result.replacements[0].generate(ts.createSourceFile('', '', ts.ScriptTarget.Latest));
+
+            expect(code).toContain(`${NAMESPACE}.setProperty(`);
+            expect(code).toContain("'id'");
+            expect(code).toContain(`${NAMESPACE}.setList(`);
+            expect(code).toContain("'class'");
+        });
+
+        it('falls back to setProperties for object with spread assignment', () => {
+            let { result } = codegen(`let x = html\`<div \${{ ...base, id: 'test' }}>text</div>\`;`);
+            let code = result.replacements[0].generate(ts.createSourceFile('', '', ts.ScriptTarget.Latest));
+
+            expect(code).toContain(`${NAMESPACE}.setProperties(`);
+        });
+
+        it('expands shorthand property assignment', () => {
+            let { result } = codegen(`let x = html\`<div \${{ className }}>text</div>\`;`);
+            let code = result.replacements[0].generate(ts.createSourceFile('', '', ts.ScriptTarget.Latest));
+
+            expect(code).toContain(`${NAMESPACE}.setProperty(`);
+            expect(code).toContain("'className'");
+            expect(code).toContain('className');
+        });
+
+        it('falls back to setProperties for non-object expression', () => {
+            let { result } = codegen(`let x = html\`<div \${props}>text</div>\`;`);
+            let code = result.replacements[0].generate(ts.createSourceFile('', '', ts.ScriptTarget.Latest));
+
+            expect(code).toContain(`${NAMESPACE}.setProperties(`);
+        });
+
+        it('expands object with string literal property name', () => {
+            let { result } = codegen(`let x = html\`<div \${{ 'data-value': val }}>text</div>\`;`);
+            let code = result.replacements[0].generate(ts.createSourceFile('', '', ts.ScriptTarget.Latest));
+
+            expect(code).toContain(`${NAMESPACE}.setProperty(`);
+            expect(code).toContain("'data-value'");
+        });
+
+        it('expands object with style property into setList', () => {
+            let { result } = codegen(`let x = html\`<div \${{ style: sty }}>text</div>\`;`);
+            let code = result.replacements[0].generate(ts.createSourceFile('', '', ts.ScriptTarget.Latest));
+
+            expect(code).toContain(`${NAMESPACE}.setList(`);
+            expect(code).toContain("'style'");
+        });
+
+        it('expands object with event handler into delegate', () => {
+            let { result } = codegen(`let x = html\`<div \${{ onclick: handler }}>text</div>\`;`);
+            let code = result.replacements[0].generate(ts.createSourceFile('', '', ts.ScriptTarget.Latest));
+
+            expect(code).toContain(`${NAMESPACE}.delegate(`);
+            expect(code).toContain("'click'");
+        });
+
+        it('falls back to setProperties for computed property name', () => {
+            let { result } = codegen(`let x = html\`<div \${{ [key]: val }}>text</div>\`;`);
+            let code = result.replacements[0].generate(ts.createSourceFile('', '', ts.ScriptTarget.Latest));
+
+            expect(code).toContain(`${NAMESPACE}.setProperties(`);
+        });
+
+        it('method declaration in object literal throws on print (EmitHint.Expression limitation)', () => {
+            // MethodDeclaration is not an Expression node, so printer.printNode
+            // with EmitHint.Expression throws a debug assertion error during codegen
+            expect(() => {
+                codegen(`let x = html\`<div \${{ onclick() { return true; } }}>text</div>\`;`);
+            }).toThrow();
+        });
+    });
+
+    // codegen.ts:170-171 (path.length === 0) and :176-177 (nodes.has(key)) are defensive
+    // guards unreachable via normal parser output. Parser always produces paths with at
+    // least ["firstChild"] and packs all attributes per element into a single slot entry.
+
     describe('generateCode - arrow function body optimization', () => {
         it('generates template ID directly for parameterless arrow with static body', () => {
             let { result } = codegen(`let fn = () => html\`<div>static</div>\`;`);