@esportsplus/template 0.16.15 → 0.17.1

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/compiler/vite-hmr.ts

@@ -0,0 +1,126 @@
+import { describe, expect, it } from 'vitest';
+import { NAMESPACE } from '../../src/compiler/constants';
+
+
+// Reconstruct the same regex and injection logic from vite.ts for testing
+let TEMPLATE_SEARCH = NAMESPACE + '.template(',
+    TEMPLATE_CALL_REGEX = new RegExp(
+        '(const\\s+(\\w+)\\s*=\\s*' + NAMESPACE + '\\.template\\()(`)',
+        'g'
+    );
+
+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;
+}
+
+
+describe('compiler/vite-hmr', () => {
+    describe('injectHMR', () => {
+        it('returns unchanged code when no template calls found', () => {
+            let code = 'let x = 1;',
+                result = injectHMR(code, '/src/app.ts');
+
+            expect(result).toBe(code);
+        });
+
+        it('replaces template() with createHotTemplate() for single template', () => {
+            let code = 'const ' + NAMESPACE + '_t0 = ' + NAMESPACE + '.template(`<div>hello</div>`);',
+                result = injectHMR(code, '/src/app.ts');
+
+            expect(result).toContain(NAMESPACE + '.createHotTemplate("/src/app.ts", "' + NAMESPACE + '_t0", `<div>hello</div>`)');
+            expect(result).not.toContain(NAMESPACE + '.template(');
+        });
+
+        it('replaces multiple template calls in same module', () => {
+            let code = 'const tpl1 = ' + NAMESPACE + '.template(`<div>a</div>`);\n'
+                      + 'const tpl2 = ' + NAMESPACE + '.template(`<span>b</span>`);',
+                result = injectHMR(code, '/src/page.ts');
+
+            expect(result).toContain('createHotTemplate("/src/page.ts", "tpl1", `<div>a</div>`)');
+            expect(result).toContain('createHotTemplate("/src/page.ts", "tpl2", `<span>b</span>`)');
+        });
+
+        it('appends import.meta.hot.accept block', () => {
+            let code = 'const tpl = ' + NAMESPACE + '.template(`<div></div>`);',
+                result = injectHMR(code, '/src/app.ts');
+
+            expect(result).toContain('if (import.meta.hot)');
+            expect(result).toContain('import.meta.hot.accept');
+            expect(result).toContain(NAMESPACE + '.accept("/src/app.ts")');
+        });
+
+        it('normalizes backslashes in module id', () => {
+            let code = 'const tpl = ' + NAMESPACE + '.template(`<div></div>`);',
+                result = injectHMR(code, 'C:\\Users\\dev\\src\\app.ts');
+
+            expect(result).toContain('C:/Users/dev/src/app.ts');
+            expect(result).not.toContain('\\');
+        });
+
+        it('does not append HMR code when no templates matched', () => {
+            let code = 'let x = someFunction();',
+                result = injectHMR(code, '/src/app.ts');
+
+            expect(result).not.toContain('import.meta.hot');
+        });
+
+        it('preserves surrounding code', () => {
+            let code = 'import something from "pkg";\n'
+                      + 'const tpl = ' + NAMESPACE + '.template(`<div></div>`);\n'
+                      + 'let x = tpl();',
+                result = injectHMR(code, '/src/app.ts');
+
+            expect(result).toContain('import something from "pkg";');
+            expect(result).toContain('let x = tpl();');
+        });
+
+        it('handles template with complex html', () => {
+            let code = 'const tpl = ' + NAMESPACE + '.template(`<div class="wrapper"><span><!--$--></span></div>`);',
+                result = injectHMR(code, '/src/app.ts');
+
+            expect(result).toContain('createHotTemplate');
+            expect(result).toContain('<div class="wrapper"><span><!--$--></span></div>');
+        });
+    });
+
+    describe('plugin behavior', () => {
+        it('exported factory returns an object with expected HMR hooks', async () => {
+            // Dynamic import to avoid compiler transformation issues
+            let mod = await import('../../src/compiler/plugins/vite');
+            let factory = mod.default;
+            let plugin = factory();
+
+            expect(typeof plugin.configResolved).toBe('function');
+            expect(typeof plugin.transform).toBe('function');
+            expect(typeof plugin.handleHotUpdate).toBe('function');
+            expect(plugin.enforce).toBe('pre');
+        });
+
+        it('configResolved sets dev mode from config.command', async () => {
+            let mod = await import('../../src/compiler/plugins/vite');
+            let plugin = mod.default();
+
+            // Should not throw
+            plugin.configResolved({ command: 'serve', root: '/test' });
+        });
+
+        it('configResolved sets dev mode from config.mode', async () => {
+            let mod = await import('../../src/compiler/plugins/vite');
+            let plugin = mod.default();
+
+            plugin.configResolved({ mode: 'development', root: '/test' });
+        });
+    });
+});

package/tests/hmr.ts

@@ -0,0 +1,146 @@
+import { describe, expect, it, beforeEach } from 'vitest';
+import { accept, createHotTemplate, hmrReset, modules } from '../src/hmr';
+
+
+describe('hmr', () => {
+    beforeEach(() => {
+        hmrReset();
+    });
+
+    describe('createHotTemplate', () => {
+        it('registers a new template and returns a factory', () => {
+            let factory = createHotTemplate('mod1', 'tpl1', '<div>hello</div>');
+
+            expect(typeof factory).toBe('function');
+            expect(modules.has('mod1')).toBe(true);
+            expect(modules.get('mod1')!.has('tpl1')).toBe(true);
+        });
+
+        it('factory returns a DocumentFragment clone', () => {
+            let factory = createHotTemplate('mod1', 'tpl1', '<div>hello</div>');
+            let frag = factory();
+
+            expect(frag).toBeInstanceOf(DocumentFragment);
+            expect(frag.firstChild).toBeInstanceOf(HTMLDivElement);
+            expect((frag.firstChild as HTMLElement).textContent).toBe('hello');
+        });
+
+        it('factory caches the parsed fragment and returns clones', () => {
+            let factory = createHotTemplate('mod1', 'tpl1', '<span>test</span>');
+            let frag1 = factory(),
+                frag2 = factory();
+
+            expect(frag1).not.toBe(frag2);
+            expect((frag1.firstChild as HTMLElement).tagName).toBe('SPAN');
+            expect((frag2.firstChild as HTMLElement).tagName).toBe('SPAN');
+        });
+
+        it('returns existing factory when called with same moduleId and templateId', () => {
+            let factory1 = createHotTemplate('mod1', 'tpl1', '<div>v1</div>'),
+                factory2 = createHotTemplate('mod1', 'tpl1', '<div>v2</div>');
+
+            expect(factory1).toBe(factory2);
+        });
+
+        it('updates html when re-registered with same ids', () => {
+            createHotTemplate('mod1', 'tpl1', '<div>v1</div>');
+            createHotTemplate('mod1', 'tpl1', '<div>v2</div>');
+
+            let factory = createHotTemplate('mod1', 'tpl1', '<div>v2</div>');
+            let frag = factory();
+
+            expect((frag.firstChild as HTMLElement).textContent).toBe('v2');
+        });
+
+        it('invalidates cache when html changes', () => {
+            let factory = createHotTemplate('mod1', 'tpl1', '<div>old</div>');
+
+            factory(); // populate cache
+
+            createHotTemplate('mod1', 'tpl1', '<div>new</div>');
+
+            let frag = factory();
+
+            expect((frag.firstChild as HTMLElement).textContent).toBe('new');
+        });
+
+        it('registers multiple templates per module', () => {
+            createHotTemplate('mod1', 'tpl1', '<div>a</div>');
+            createHotTemplate('mod1', 'tpl2', '<span>b</span>');
+
+            expect(modules.get('mod1')!.size).toBe(2);
+        });
+
+        it('registers templates across different modules', () => {
+            createHotTemplate('mod1', 'tpl1', '<div>a</div>');
+            createHotTemplate('mod2', 'tpl1', '<div>b</div>');
+
+            expect(modules.size).toBe(2);
+        });
+    });
+
+    describe('accept', () => {
+        it('invalidates all cached templates for a module', () => {
+            let factory1 = createHotTemplate('mod1', 'tpl1', '<div>a</div>'),
+                factory2 = createHotTemplate('mod1', 'tpl2', '<span>b</span>');
+
+            factory1(); // populate cache
+            factory2(); // populate cache
+
+            let entry1 = modules.get('mod1')!.get('tpl1')!,
+                entry2 = modules.get('mod1')!.get('tpl2')!;
+
+            expect(entry1.cached).toBeDefined();
+            expect(entry2.cached).toBeDefined();
+
+            accept('mod1');
+
+            expect(entry1.cached).toBeUndefined();
+            expect(entry2.cached).toBeUndefined();
+        });
+
+        it('does not affect templates from other modules', () => {
+            let factory1 = createHotTemplate('mod1', 'tpl1', '<div>a</div>'),
+                factory2 = createHotTemplate('mod2', 'tpl1', '<div>b</div>');
+
+            factory1();
+            factory2();
+
+            let entry2 = modules.get('mod2')!.get('tpl1')!;
+
+            accept('mod1');
+
+            expect(entry2.cached).toBeDefined();
+        });
+
+        it('is a no-op for unknown module ids', () => {
+            expect(() => accept('nonexistent')).not.toThrow();
+        });
+
+        it('after accept, factory produces new fragments from same html', () => {
+            let factory = createHotTemplate('mod1', 'tpl1', '<div>content</div>');
+
+            let frag1 = factory();
+
+            accept('mod1');
+
+            let frag2 = factory();
+
+            expect(frag1).not.toBe(frag2);
+            expect((frag2.firstChild as HTMLElement).textContent).toBe('content');
+        });
+    });
+
+    describe('hmrReset', () => {
+        it('clears all registered modules', () => {
+            createHotTemplate('mod1', 'tpl1', '<div>a</div>');
+            createHotTemplate('mod2', 'tpl1', '<div>b</div>');
+
+            expect(modules.size).toBe(2);
+
+            hmrReset();
+
+            expect(modules.size).toBe(0);
+        });
+    });
+});

package/tests/slot/array.ts

@@ -687,6 +687,207 @@ describe('slot/ArraySlot', () => {
         });
     });
 
+    describe('moveBefore API', () => {
+        it('sort uses moveBefore when available on parent', async () => {
+            let arr = reactive(['c', 'a', 'b'] as string[]),
+                moveBeforeCalls: [Node, Node | null][] = [],
+                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);
+
+            // Polyfill moveBefore on the parent
+            (container as any).moveBefore = function (node: Node, ref: Node | null) {
+                moveBeforeCalls.push([node, ref]);
+                container.insertBefore(node, ref);
+            };
+
+            arr.sort();
+
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            let spans = container.querySelectorAll('span');
+
+            expect(spans[0].textContent).toBe('a');
+            expect(spans[1].textContent).toBe('b');
+            expect(spans[2].textContent).toBe('c');
+            expect(moveBeforeCalls.length).toBeGreaterThan(0);
+
+            delete (container as any).moveBefore;
+        });
+
+        it('sort falls back to insertBefore without moveBefore', async () => {
+            let arr = reactive(['c', '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);
+
+            // Ensure no moveBefore
+            expect('moveBefore' in container).toBe(false);
+
+            arr.sort();
+
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            let spans = container.querySelectorAll('span');
+
+            expect(spans[0].textContent).toBe('a');
+            expect(spans[1].textContent).toBe('b');
+            expect(spans[2].textContent).toBe('c');
+        });
+
+        it('reverse uses moveBefore when available via sync', async () => {
+            let arr = reactive(['a', 'b', 'c'] as string[]),
+                moveBeforeCalls: [Node, Node | null][] = [],
+                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);
+
+            (container as any).moveBefore = function (node: Node, ref: Node | null) {
+                moveBeforeCalls.push([node, ref]);
+                container.insertBefore(node, ref);
+            };
+
+            arr.reverse();
+
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            let spans = container.querySelectorAll('span');
+
+            expect(spans[0].textContent).toBe('c');
+            expect(spans[1].textContent).toBe('b');
+            expect(spans[2].textContent).toBe('a');
+            expect(moveBeforeCalls.length).toBeGreaterThan(0);
+
+            delete (container as any).moveBefore;
+        });
+
+        it('reverse falls back to fragment approach without moveBefore', 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);
+
+            expect('moveBefore' in container).toBe(false);
+
+            arr.reverse();
+
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            let spans = container.querySelectorAll('span');
+
+            expect(spans[0].textContent).toBe('c');
+            expect(spans[1].textContent).toBe('b');
+            expect(spans[2].textContent).toBe('a');
+        });
+
+        it('moveBefore receives correct arguments during sort', async () => {
+            let arr = reactive(['b', 'a'] as string[]),
+                moveBeforeCalls: [string, string | null][] = [],
+                slot = new ArraySlot(arr, (s) => {
+                    let frag = document.createDocumentFragment(),
+                        span = document.createElement('span');
+
+                    span.textContent = s;
+                    span.setAttribute('data-id', s);
+                    frag.appendChild(span);
+
+                    return frag as unknown as DocumentFragment;
+                });
+
+            container.appendChild(slot.fragment);
+
+            (container as any).moveBefore = function (node: Node, ref: Node | null) {
+                let nodeId = (node as HTMLElement).getAttribute?.('data-id') || '?',
+                    refId = ref ? ((ref as HTMLElement).getAttribute?.('data-id') || '?') : null;
+
+                moveBeforeCalls.push([nodeId, refId]);
+                container.insertBefore(node, ref);
+            };
+
+            arr.sort();
+
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            let spans = container.querySelectorAll('span');
+
+            expect(spans[0].textContent).toBe('a');
+            expect(spans[1].textContent).toBe('b');
+
+            // 'a' should be moved before 'b'
+            expect(moveBeforeCalls.some(([n]) => n === 'a')).toBe(true);
+
+            delete (container as any).moveBefore;
+        });
+
+        it('sort with moveBefore preserves node order for already-sorted LIS', async () => {
+            let arr = reactive(['a', 'b', 'c'] as string[]),
+                moveBeforeCalls: [Node, Node | null][] = [],
+                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);
+
+            (container as any).moveBefore = function (node: Node, ref: Node | null) {
+                moveBeforeCalls.push([node, ref]);
+                container.insertBefore(node, ref);
+            };
+
+            arr.sort();
+
+            await new Promise(resolve => requestAnimationFrame(resolve));
+
+            let spans = container.querySelectorAll('span');
+
+            expect(spans[0].textContent).toBe('a');
+            expect(spans[1].textContent).toBe('b');
+            expect(spans[2].textContent).toBe('c');
+
+            // Already sorted — LIS covers all nodes, no moves needed
+            expect(moveBeforeCalls.length).toBe(0);
+
+            delete (container as any).moveBefore;
+        });
+    });
+
     describe('disconnect cleanup', () => {
         it('cleans up nodes when cleared', async () => {
             let cleanupCount = 0,