@esportsplus/template 0.28.1 → 0.29.1

package/test/slots.ts

@@ -0,0 +1,259 @@
+// Slot Templates - Single and multiple slot bindings
+// Tests text slots, attribute slots, and mixed combinations
+
+
+import { html } from '../src';
+
+
+// =============================================================================
+// SINGLE TEXT SLOTS
+// =============================================================================
+
+// Basic text slot
+export const textSimple = (text: string) => html`<div>${text}</div>`;
+
+// Text in span
+export const textInSpan = (text: string) => html`<span>${text}</span>`;
+
+// Text in paragraph
+export const textInParagraph = (text: string) => html`<p>${text}</p>`;
+
+// Text in heading
+export const textInHeading = (text: string) => html`<h1>${text}</h1>`;
+
+// Text in button
+export const textInButton = (text: string) => html`<button>${text}</button>`;
+
+// Text in nested element
+export const textNested = (text: string) =>
+    html`<div><span><strong>${text}</strong></span></div>`;
+
+
+// =============================================================================
+// SINGLE ATTRIBUTE SLOTS
+// =============================================================================
+
+// Class attribute
+export const attrClass = (cls: string) => html`<div class="${cls}"></div>`;
+
+// ID attribute
+export const attrId = (id: string) => html`<div id="${id}"></div>`;
+
+// Style attribute
+export const attrStyle = (style: string) => html`<div style="${style}"></div>`;
+
+// Data attribute
+export const attrData = (value: string) => html`<div data-value="${value}"></div>`;
+
+// Custom data attribute
+export const attrDataCustom = (id: string) => html`<div data-item-id="${id}"></div>`;
+
+// Href attribute
+export const attrHref = (url: string) => html`<a href="${url}">Link</a>`;
+
+// Src attribute
+export const attrSrc = (src: string) => html`<img src="${src}" alt="image">`;
+
+// Value attribute
+export const attrValue = (val: string) => html`<input type="text" value="${val}">`;
+
+// Placeholder attribute
+export const attrPlaceholder = (text: string) =>
+    html`<input type="text" placeholder="${text}">`;
+
+
+// =============================================================================
+// MIXED STATIC AND DYNAMIC ATTRIBUTES
+// =============================================================================
+
+// Class with static prefix
+export const attrClassWithStatic = (dynamic: string) =>
+    html`<div class="base-class ${dynamic}"></div>`;
+
+// Style with static prefix
+export const attrStyleWithStatic = (dynamic: string) =>
+    html`<div style="display: flex; ${dynamic}"></div>`;
+
+// Multiple statics, one dynamic
+export const attrMixedStatics = (cls: string) =>
+    html`<div id="fixed-id" class="${cls}" data-static="value"></div>`;
+
+
+// =============================================================================
+// MULTIPLE TEXT SLOTS
+// =============================================================================
+
+// Two text slots
+export const textTwo = (a: string, b: string) =>
+    html`<div><span>${a}</span><span>${b}</span></div>`;
+
+// Three text slots
+export const textThree = (a: string, b: string, c: string) =>
+    html`<div><span>${a}</span><span>${b}</span><span>${c}</span></div>`;
+
+// Five text slots
+export const textFive = (a: string, b: string, c: string, d: string, e: string) =>
+    html`<div>
+        <span>${a}</span>
+        <span>${b}</span>
+        <span>${c}</span>
+        <span>${d}</span>
+        <span>${e}</span>
+    </div>`;
+
+// Adjacent text slots (no element separators)
+export const textAdjacent = (a: string, b: string, c: string) =>
+    html`<div>${a}${b}${c}</div>`;
+
+
+// =============================================================================
+// MULTIPLE ATTRIBUTE SLOTS - SAME ELEMENT
+// =============================================================================
+
+// Two attributes
+export const attrTwo = (id: string, cls: string) =>
+    html`<div id="${id}" class="${cls}"></div>`;
+
+// Three attributes
+export const attrThree = (id: string, cls: string, style: string) =>
+    html`<div id="${id}" class="${cls}" style="${style}"></div>`;
+
+// All common attributes
+export const attrFull = (
+    id: string,
+    cls: string,
+    style: string,
+    dataId: string,
+    title: string
+) => html`<div
+    id="${id}"
+    class="${cls}"
+    style="${style}"
+    data-id="${dataId}"
+    title="${title}"
+></div>`;
+
+
+// =============================================================================
+// MULTIPLE ATTRIBUTE SLOTS - DIFFERENT ELEMENTS
+// =============================================================================
+
+// Attributes on sibling elements
+export const attrSiblings = (cls1: string, cls2: string) =>
+    html`<div><span class="${cls1}">First</span><span class="${cls2}">Second</span></div>`;
+
+// Attributes on nested elements
+export const attrNested = (outerCls: string, innerCls: string) =>
+    html`<div class="${outerCls}"><span class="${innerCls}">Content</span></div>`;
+
+
+// =============================================================================
+// MIXED TEXT AND ATTRIBUTE SLOTS
+// =============================================================================
+
+// Attribute and text on same element
+export const mixedSame = (cls: string, text: string) =>
+    html`<div class="${cls}">${text}</div>`;
+
+// Multiple mixed on same element
+export const mixedSameFull = (id: string, cls: string, style: string, text: string) =>
+    html`<div id="${id}" class="${cls}" style="${style}">${text}</div>`;
+
+// Mixed across elements
+export const mixedAcross = (cls: string, text: string) =>
+    html`<article class="${cls}"><p>${text}</p></article>`;
+
+// Complex mixed pattern
+export const mixedComplex = (
+    wrapperCls: string,
+    headerText: string,
+    bodyCls: string,
+    bodyText: string,
+    footerText: string
+) => html`
+    <article class="${wrapperCls}">
+        <header>${headerText}</header>
+        <main class="${bodyCls}">${bodyText}</main>
+        <footer>${footerText}</footer>
+    </article>
+`;
+
+
+// =============================================================================
+// FORM INPUT SLOTS
+// =============================================================================
+
+// Text input
+export const inputText = (name: string, value: string, placeholder: string) =>
+    html`<input type="text" name="${name}" value="${value}" placeholder="${placeholder}">`;
+
+// Email input
+export const inputEmail = (value: string) =>
+    html`<input type="email" value="${value}" placeholder="email@example.com">`;
+
+// Checkbox input
+export const inputCheckbox = (name: string, value: string, label: string) =>
+    html`<label><input type="checkbox" name="${name}" value="${value}"> ${label}</label>`;
+
+// Full form
+export const formComplete = (
+    name: string,
+    email: string,
+    message: string,
+    submitText: string
+) => html`
+    <form>
+        <input type="text" name="name" value="${name}" placeholder="Name">
+        <input type="email" name="email" value="${email}" placeholder="Email">
+        <textarea name="message">${message}</textarea>
+        <button type="submit">${submitText}</button>
+    </form>
+`;
+
+
+// =============================================================================
+// DEEP PATH SLOTS (path ancestor caching test)
+// =============================================================================
+
+// Slot at depth 4
+export const deepPath4 = (text: string) =>
+    html`<div><div><div><div>${text}</div></div></div></div>`;
+
+// Slot at depth 6
+export const deepPath6 = (text: string) =>
+    html`<div><div><div><div><div><div>${text}</div></div></div></div></div></div>`;
+
+// Multiple slots at same depth (should share ancestors)
+export const deepPathShared = (a: string, b: string) =>
+    html`<div><div><div><span>${a}</span><span>${b}</span></div></div></div>`;
+
+// Slots at different depths
+export const deepPathMixed = (shallow: string, deep: string) =>
+    html`<div>
+        <span>${shallow}</span>
+        <div><div><div><span>${deep}</span></div></div></div>
+    </div>`;
+
+
+// =============================================================================
+// WIDE SIBLING SLOTS (nextSibling traversal test)
+// =============================================================================
+
+// 10 sibling text slots
+export const wideSiblings10 = (v: string[]) =>
+    html`<div>
+        <span>${v[0]}</span><span>${v[1]}</span><span>${v[2]}</span>
+        <span>${v[3]}</span><span>${v[4]}</span><span>${v[5]}</span>
+        <span>${v[6]}</span><span>${v[7]}</span><span>${v[8]}</span>
+        <span>${v[9]}</span>
+    </div>`;
+
+// Alternating slots and static content
+export const wideAlternating = (a: string, b: string, c: string) =>
+    html`<div>
+        <span>${a}</span>
+        <span>static</span>
+        <span>${b}</span>
+        <span>static</span>
+        <span>${c}</span>
+    </div>`;

package/test/spread.ts

@@ -0,0 +1,290 @@
+// Spread Templates - Object spread attribute unpacking
+// Tests compile-time unpacking of spread attributes
+
+
+import { html } from '../src';
+
+
+// =============================================================================
+// SIMPLE SPREAD - OBJECT LITERAL (compile-time unpacking)
+// =============================================================================
+
+// Single property spread
+export const spreadSingle = () =>
+    html`<div ${{ class: 'spread-class' }}></div>`;
+
+// Two property spread
+export const spreadTwo = () =>
+    html`<div ${{ id: 'my-id', class: 'my-class' }}></div>`;
+
+// Multiple property spread
+export const spreadMultiple = () =>
+    html`<div ${{
+        id: 'element-id',
+        class: 'element-class',
+        'data-id': '123',
+        title: 'Element title'
+    }}></div>`;
+
+
+// =============================================================================
+// SPREAD WITH CLASS AND STYLE
+// =============================================================================
+
+// Spread with class
+export const spreadClass = () =>
+    html`<div ${{ class: 'btn btn-primary' }}></div>`;
+
+// Spread with style
+export const spreadStyle = () =>
+    html`<div ${{ style: 'color: red; font-size: 16px;' }}></div>`;
+
+// Spread with both class and style
+export const spreadClassStyle = () =>
+    html`<div ${{
+        class: 'container mx-auto',
+        style: 'padding: 20px; margin: 10px;'
+    }}></div>`;
+
+
+// =============================================================================
+// SPREAD WITH EVENTS (compile-time key detection)
+// =============================================================================
+
+// Spread with click event
+export const spreadClickEvent = (onClick: () => void) =>
+    html`<button ${{ onclick: onClick }}>Click</button>`;
+
+// Spread with multiple events
+export const spreadMultipleEvents = (
+    onClick: () => void,
+    onMouseEnter: () => void
+) => html`<div ${{
+    onclick: onClick,
+    onmouseenter: onMouseEnter
+}}>Interactive</div>`;
+
+// Spread with lifecycle event
+export const spreadLifecycleEvent = (onConnect: () => void) =>
+    html`<div ${{ onconnect: onConnect }}>Lifecycle</div>`;
+
+
+// =============================================================================
+// SPREAD WITH DATA ATTRIBUTES
+// =============================================================================
+
+// Single data attribute
+export const spreadDataSingle = () =>
+    html`<div ${{ 'data-id': '123' }}></div>`;
+
+// Multiple data attributes
+export const spreadDataMultiple = () =>
+    html`<div ${{
+        'data-id': '123',
+        'data-type': 'user',
+        'data-action': 'view'
+    }}></div>`;
+
+
+// =============================================================================
+// SPREAD - VARIABLE REFERENCE (TypeChecker unpacking)
+// =============================================================================
+
+// Typed object variable
+type ButtonAttrs = {
+    class: string;
+    type: string;
+    disabled?: boolean;
+};
+
+export const spreadTypedVar = (attrs: ButtonAttrs) =>
+    html`<button ${attrs}>Button</button>`;
+
+// Record type variable
+export const spreadRecordVar = (attrs: Record<string, string>) =>
+    html`<div ${attrs}></div>`;
+
+// Partial type variable
+type CardAttrs = {
+    id?: string;
+    class?: string;
+    'data-card-id'?: string;
+};
+
+export const spreadPartialVar = (attrs: CardAttrs) =>
+    html`<div ${attrs}></div>`;
+
+
+// =============================================================================
+// SPREAD WITH STATIC ATTRIBUTES
+// =============================================================================
+
+// Static before spread
+export const spreadAfterStatic = (attrs: Record<string, unknown>) =>
+    html`<div class="base" ${attrs}></div>`;
+
+// Static after spread
+export const spreadBeforeStatic = (attrs: Record<string, unknown>) =>
+    html`<div ${attrs} class="override"></div>`;
+
+// Spread between statics
+export const spreadBetweenStatics = (attrs: Record<string, unknown>) =>
+    html`<div id="fixed" ${attrs} class="also-fixed"></div>`;
+
+
+// =============================================================================
+// SPREAD IN NESTED TEMPLATES
+// =============================================================================
+
+// Spread in list items
+export const spreadInList = (items: Record<string, unknown>[]) =>
+    html`<ul>${items.map(attrs => html`<li ${attrs}>Item</li>`)}</ul>`;
+
+// Spread with content
+export const spreadInListWithContent = (items: { attrs: Record<string, unknown>; text: string }[]) =>
+    html`<ul>${items.map(item => html`<li ${item.attrs}>${item.text}</li>`)}</ul>`;
+
+// Typed spread in list
+type ListItemAttrs = {
+    class: string;
+    'data-id': number;
+};
+
+export const spreadTypedInList = (items: { attrs: ListItemAttrs; text: string }[]) =>
+    html`<ul>${items.map(item => html`<li ${item.attrs}>${item.text}</li>`)}</ul>`;
+
+
+// =============================================================================
+// COMPLEX SPREAD PATTERNS
+// =============================================================================
+
+// Spread with computed values in object literal
+export const spreadComputed = (isActive: boolean, id: number) =>
+    html`<div ${{
+        class: isActive ? 'active' : 'inactive',
+        'data-id': id.toString()
+    }}></div>`;
+
+// Multiple spreads on same element (edge case)
+export const spreadDouble = (
+    baseAttrs: Record<string, unknown>,
+    extraAttrs: Record<string, unknown>
+) => html`<div ${baseAttrs} ${extraAttrs}></div>`;
+
+
+// =============================================================================
+// SPREAD WITH INLINE HANDLERS
+// =============================================================================
+
+// Spread with inline arrow function
+export const spreadInlineHandler = (state: { count: number }) =>
+    html`<button ${{
+        class: 'btn',
+        onclick: () => state.count++
+    }}>Increment</button>`;
+
+// Spread with method reference
+export const spreadMethodRef = (controller: {
+    handleClick: () => void;
+    handleHover: () => void;
+}) => html`<div ${{
+    onclick: controller.handleClick,
+    onmouseenter: controller.handleHover
+}}>Controller element</div>`;
+
+
+// =============================================================================
+// SPREAD - FALLBACK (runtime spread when can't unpack)
+// =============================================================================
+
+// Dynamic spread (can't unpack at compile time)
+export const spreadDynamic = (getDynamicAttrs: () => Record<string, unknown>) =>
+    html`<div ${getDynamicAttrs()}></div>`;
+
+// Conditional spread
+export const spreadConditional = (useAttrs: boolean, attrs: Record<string, unknown>) =>
+    html`<div ${useAttrs ? attrs : {}}></div>`;
+
+
+// =============================================================================
+// REAL-WORLD SPREAD PATTERNS
+// =============================================================================
+
+// Input component with spread
+type InputProps = {
+    type: string;
+    name: string;
+    value: string;
+    placeholder?: string;
+    class?: string;
+};
+
+export const inputComponent = (props: InputProps) =>
+    html`<input ${props}>`;
+
+// Button component with spread
+type ButtonProps = {
+    class: string;
+    type: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    onclick?: () => void;
+};
+
+export const buttonComponent = (props: ButtonProps, label: string) =>
+    html`<button ${props}>${label}</button>`;
+
+// Link component with spread
+type LinkProps = {
+    href: string;
+    class?: string;
+    target?: string;
+    rel?: string;
+};
+
+export const linkComponent = (props: LinkProps, children: string) =>
+    html`<a ${props}>${children}</a>`;
+
+// Card component with spread
+type CardProps = {
+    class?: string;
+    'data-card-id'?: string;
+    onclick?: () => void;
+};
+
+export const cardComponent = (
+    props: CardProps,
+    content: { title: string; body: string }
+) => html`
+    <div ${props}>
+        <h3>${content.title}</h3>
+        <p>${content.body}</p>
+    </div>
+`;
+
+
+// =============================================================================
+// SPREAD STRESS TESTS
+// =============================================================================
+
+// Many properties
+export const spreadManyProps = () =>
+    html`<div ${{
+        id: 'stress-id',
+        class: 'stress-class-1 stress-class-2 stress-class-3',
+        style: 'color: red; background: blue; padding: 10px;',
+        'data-a': '1',
+        'data-b': '2',
+        'data-c': '3',
+        'data-d': '4',
+        'data-e': '5',
+        title: 'Stress test element',
+        tabindex: '0'
+    }}></div>`;
+
+// Spread in deep nesting
+export const spreadDeepNesting = (attrs: Record<string, unknown>) =>
+    html`<div><div><div><div ${attrs}>Deep</div></div></div></div>`;
+
+// Many spreads in list
+export const spreadManyInList = (items: Record<string, unknown>[]) =>
+    html`<div>${items.slice(0, 20).map(attrs => html`<span ${attrs}>Item</span>`)}</div>`;

package/test/static.ts

@@ -0,0 +1,118 @@
+// Static Templates - No dynamic slots
+// Tests template parsing and factory hoisting for pure HTML
+
+
+import { html } from '../src';
+
+
+// Simple static element
+export const staticSimple = () => html`<div>Hello World</div>`;
+
+// Static with classes
+export const staticClasses = () => html`<div class="container mx-auto p-4">Static content</div>`;
+
+// Static with multiple attributes
+export const staticMultiAttr = () =>
+    html`<div id="main" class="wrapper" data-testid="static-test">Content</div>`;
+
+// Static nested structure
+export const staticNested = () => html`
+    <div class="wrapper">
+        <header class="header">Title</header>
+        <main class="content">Body</main>
+        <footer class="footer">Footer</footer>
+    </div>
+`;
+
+// Static list
+export const staticList = () => html`
+    <ul class="list">
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+    </ul>
+`;
+
+// Static table
+export const staticTable = () => html`
+    <table class="table">
+        <thead><tr><th>ID</th><th>Name</th></tr></thead>
+        <tbody>
+            <tr><td>1</td><td>Alice</td></tr>
+            <tr><td>2</td><td>Bob</td></tr>
+        </tbody>
+    </table>
+`;
+
+// Static form
+export const staticForm = () => html`
+    <form action="/submit" method="POST">
+        <label for="name">Name:</label>
+        <input type="text" id="name" name="name" required>
+        <button type="submit">Submit</button>
+    </form>
+`;
+
+// Static with void elements
+export const staticVoid = () => html`
+    <div>
+        <img src="/image.png" alt="Test">
+        <br>
+        <hr>
+        <input type="hidden" name="token" value="abc123">
+    </div>
+`;
+
+// Static deeply nested (8 levels)
+export const staticDeepNest = () => html`
+    <div class="l1">
+        <div class="l2">
+            <div class="l3">
+                <div class="l4">
+                    <div class="l5">
+                        <div class="l6">
+                            <div class="l7">
+                                <div class="l8">Deep content</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+`;
+
+// Static wide structure (many siblings)
+export const staticWide = () => html`
+    <div class="container">
+        <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span>
+        <span>6</span><span>7</span><span>8</span><span>9</span><span>10</span>
+    </div>
+`;
+
+// Static SVG
+export const staticSvg = () => html`
+    <svg width="100" height="100" viewBox="0 0 100 100">
+        <circle cx="50" cy="50" r="40" fill="blue"/>
+        <rect x="10" y="10" width="20" height="20" fill="red"/>
+    </svg>
+`;
+
+// Static with comments preserved in output
+export const staticComments = () => {
+    let value = 'sadasd';
+
+    return html`
+        <div>
+            <!-- Header section -->
+            <header>${value}</header>
+            <!-- Main content -->
+            <main>Content</main>
+        </div>
+    `;
+};
+
+// Identical templates - tests deduplication
+export const staticDupe1 = () => html`<div class="dupe">Duplicate content</div>`;
+export const staticDupe2 = () => html`<div class="dupe">Duplicate content</div>`;
+export const staticDupe3 = () => html`<div class="dupe">Duplicate content</div>`;