@esportsplus/template 0.38.2 → 0.40.0

package/src/compiler/index.ts

@@ -1,94 +1,69 @@
-import type { ImportIntent, Plugin, ReplacementIntent, TransformContext } from '@esportsplus/typescript/compiler';
 import { ts } from '@esportsplus/typescript';
-import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, COMPILER_NAMESPACE, PACKAGE } from '~/constants';
-import { generateCode } from './codegen';
+import { ast } from '@esportsplus/typescript/compiler';
+import type { ImportIntent, ReplacementIntent, TransformContext } from '@esportsplus/typescript/compiler';
+import { ENTRYPOINT, ENTRYPOINT_REACTIVITY, NAMESPACE, PACKAGE } from './constants';
+import { generateCode, printer } from './codegen';
 import { findHtmlTemplates, findReactiveCalls } from './ts-parser';
 
 
-function isInRange(ranges: { end: number; start: number }[], start: number, end: number): boolean {
-    for (let i = 0, n = ranges.length; i < n; i++) {
-        let range = ranges[i];
-
-        if (start >= range.start && end <= range.end) {
-            return true;
-        }
-    }
-
-    return false;
-}
-
-
-let printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
-
-
-const plugin: Plugin = {
+export default {
     patterns: [
-        `${COMPILER_ENTRYPOINT}\``,
-        `${COMPILER_ENTRYPOINT}.${COMPILER_ENTRYPOINT_REACTIVITY}`
+        `${ENTRYPOINT}\``,
+        `${ENTRYPOINT}.${ENTRYPOINT_REACTIVITY}`
     ],
-
     transform: (ctx: TransformContext) => {
-        let importsIntent: ImportIntent[] = [],
-            prepend: string[] = [],
-            replacements: ReplacementIntent[] = [],
-            removeImports: string[] = [];
-
-        // Find templates first to build exclusion ranges
-        let templates = findHtmlTemplates(ctx.sourceFile, ctx.checker);
-
-        // Build ranges for all template nodes - reactive calls inside these are handled by template codegen
-        let templateRanges: { end: number; start: number }[] = [];
+        let intents = {
+                imports: [] as ImportIntent[],
+                prepend: [] as string[],
+                replacements: [] as ReplacementIntent[]
+            },
+            ranges: { end: number; start: number }[] = [],
+            remove: string[] = [],
+            templates = findHtmlTemplates(ctx.sourceFile, ctx.checker);
 
         for (let i = 0, n = templates.length; i < n; i++) {
-            templateRanges.push({
+            ranges.push({
                 end: templates[i].end,
                 start: templates[i].start
             });
         }
 
-        // Transform standalone html.reactive() calls (exclude those inside templates)
-        let reactiveCalls = findReactiveCalls(ctx.sourceFile, ctx.checker);
+        let calls = findReactiveCalls(ctx.sourceFile, ctx.checker);
 
-        for (let i = 0, n = reactiveCalls.length; i < n; i++) {
-            let call = reactiveCalls[i];
+        for (let i = 0, n = calls.length; i < n; i++) {
+            let call = calls[i];
 
-            // Skip reactive calls that are inside template expressions - handled by template codegen
-            if (isInRange(templateRanges, call.start, call.end)) {
+            if (ast.inRange(ranges, call.start, call.end)) {
                 continue;
             }
 
-            replacements.push({
-                generate: (sourceFile) => `new ${COMPILER_NAMESPACE}.ArraySlot(${printer.printNode(ts.EmitHint.Expression, call.arrayArg, sourceFile)}, ${printer.printNode(ts.EmitHint.Expression, call.callbackArg, sourceFile)})`,
+            intents.replacements.push({
+                generate: (sourceFile) => `new ${NAMESPACE}.ArraySlot(
+                    ${printer.printNode(ts.EmitHint.Expression, call.arrayArg, sourceFile)},
+                    ${printer.printNode(ts.EmitHint.Expression, call.callbackArg, sourceFile)}
+                )`,
                 node: call.node
             });
         }
 
-        // Transform html`` templates
         if (templates.length > 0) {
             let result = generateCode(templates, ctx.sourceFile, ctx.checker);
 
-            prepend.push(...result.prepend);
-            replacements.push(...result.replacements);
-            removeImports.push(COMPILER_ENTRYPOINT);
+            intents.prepend.push(...result.prepend);
+            intents.replacements.push(...result.replacements);
+            remove.push(ENTRYPOINT);
         }
 
-        if (replacements.length === 0 && prepend.length === 0) {
+        if (intents.replacements.length === 0 && intents.prepend.length === 0) {
             return {};
         }
 
-        importsIntent.push({
-            namespace: COMPILER_NAMESPACE,
+        intents.imports.push({
+            namespace: NAMESPACE,
             package: PACKAGE,
-            remove: removeImports
+            remove: remove
         });
 
-        return {
-            imports: importsIntent,
-            prepend,
-            replacements
-        };
+        return intents;
     }
 };
-
-
-export default plugin;

package/src/compiler/parser.ts

@@ -1,4 +1,5 @@
-import { COMPILER_TYPES, PACKAGE, SLOT_HTML } from '~/constants';
+import { SLOT_HTML } from '../constants';
+import { PACKAGE, TYPES } from './constants';
 
 
 type NodePath = ('firstChild' | 'firstElementChild' | 'nextElementSibling' | 'nextSibling')[];
@@ -90,8 +91,8 @@ const parse = (literals: string[]) => {
         parsed = html.split(SLOT_MARKER),
         slot = 0,
         slots: (
-            { path: NodePath; type: COMPILER_TYPES.Node } |
-            { attributes: typeof attributes[string]; path: NodePath; type: COMPILER_TYPES.Attribute }
+            { path: NodePath; type: TYPES.Node } |
+            { attributes: typeof attributes[string]; path: NodePath; type: TYPES.Attribute }
         )[] = [];
 
     {
@@ -154,7 +155,7 @@ const parse = (literals: string[]) => {
                             }
                         }
                         else {
-                            names.push(COMPILER_TYPES.Attributes);
+                            names.push(TYPES.Attributes);
                         }
                     }
                 }
@@ -184,7 +185,7 @@ const parse = (literals: string[]) => {
                         throw new Error(`${PACKAGE}: attribute metadata could not be found for '${attr}'`);
                     }
 
-                    slots.push({ attributes: attrs, path, type: COMPILER_TYPES.Attribute });
+                    slots.push({ attributes: attrs, path, type: TYPES.Attribute });
 
                     for (let i = 0, n = attrs.names.length; i < n; i++) {
                         buffer += parsed[slot++];
@@ -201,7 +202,7 @@ const parse = (literals: string[]) => {
                 buffer += parsed[slot++] + SLOT_HTML;
                 slots.push({
                     path: methods(parent.children, parent.path, 'firstChild', 'nextSibling'),
-                    type: COMPILER_TYPES.Node
+                    type: TYPES.Node
                 });
             }
 

package/src/compiler/plugins/tsc.ts

@@ -1,4 +1,6 @@
-import plugin from '..';
+import { plugin } from '@esportsplus/typescript/compiler';
+import reactivity from '@esportsplus/reactivity/compiler';
+import template from '..';
 
 
-export default plugin;
+export default plugin.tsc([reactivity, template]) as ReturnType<typeof plugin.tsc>;

package/src/compiler/plugins/vite.ts

@@ -1,9 +1,10 @@
 import { plugin } from '@esportsplus/typescript/compiler';
-import { PACKAGE } from '~/constants';
-import templatePlugin from '..';
+import { PACKAGE } from '../constants';
+import reactivity from '@esportsplus/reactivity/compiler';
+import template from '..';
 
 
 export default plugin.vite({
     name: PACKAGE,
-    plugins: [templatePlugin]
+    plugins: [reactivity, template]
 });

package/src/compiler/{analyzer.ts → ts-analyzer.ts}

@@ -1,5 +1,5 @@
-import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, COMPILER_TYPES } from '~/constants';
 import { ts } from '@esportsplus/typescript';
+import { ENTRYPOINT, ENTRYPOINT_REACTIVITY, TYPES } from './constants';
 
 
 // Union types that mix functions with non-functions (e.g., Renderable)
@@ -19,13 +19,13 @@ function isTypeFunction(type: ts.Type, checker: ts.TypeChecker): boolean {
 }
 
 
-const analyze = (expr: ts.Expression, checker?: ts.TypeChecker): COMPILER_TYPES => {
+const analyze = (expr: ts.Expression, checker?: ts.TypeChecker): TYPES => {
     while (ts.isParenthesizedExpression(expr)) {
         expr = expr.expression;
     }
 
     if (ts.isArrowFunction(expr) || ts.isFunctionExpression(expr)) {
-        return COMPILER_TYPES.Effect;
+        return TYPES.Effect;
     }
 
     // Only html.reactive() calls become ArraySlot - handled by generateReactiveInlining
@@ -33,14 +33,14 @@ const analyze = (expr: ts.Expression, checker?: ts.TypeChecker): COMPILER_TYPES
         ts.isCallExpression(expr) &&
         ts.isPropertyAccessExpression(expr.expression) &&
         ts.isIdentifier(expr.expression.expression) &&
-        expr.expression.expression.text === COMPILER_ENTRYPOINT &&
-        expr.expression.name.text === COMPILER_ENTRYPOINT_REACTIVITY
+        expr.expression.expression.text === ENTRYPOINT &&
+        expr.expression.name.text === ENTRYPOINT_REACTIVITY
     ) {
-        return COMPILER_TYPES.ArraySlot;
+        return TYPES.ArraySlot;
     }
 
-    if (ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === COMPILER_ENTRYPOINT) {
-        return COMPILER_TYPES.DocumentFragment;
+    if (ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === ENTRYPOINT) {
+        return TYPES.DocumentFragment;
     }
 
     if (
@@ -52,11 +52,11 @@ const analyze = (expr: ts.Expression, checker?: ts.TypeChecker): COMPILER_TYPES
         expr.kind === ts.SyntaxKind.NullKeyword ||
         expr.kind === ts.SyntaxKind.UndefinedKeyword
     ) {
-        return COMPILER_TYPES.Static;
+        return TYPES.Static;
     }
 
     if (ts.isTemplateExpression(expr)) {
-        return COMPILER_TYPES.Primitive;
+        return TYPES.Primitive;
     }
 
     if (ts.isConditionalExpression(expr)) {
@@ -67,26 +67,23 @@ const analyze = (expr: ts.Expression, checker?: ts.TypeChecker): COMPILER_TYPES
             return whenTrue;
         }
 
-        if (whenTrue === COMPILER_TYPES.Effect || whenFalse === COMPILER_TYPES.Effect) {
-            return COMPILER_TYPES.Effect;
+        if (whenTrue === TYPES.Effect || whenFalse === TYPES.Effect) {
+            return TYPES.Effect;
         }
 
-        return COMPILER_TYPES.Unknown;
+        return TYPES.Unknown;
     }
 
     if (checker && (ts.isIdentifier(expr) || ts.isPropertyAccessExpression(expr) || ts.isCallExpression(expr))) {
         try {
-            let type = checker.getTypeAtLocation(expr);
-
-            if (isTypeFunction(type, checker)) {
-                return COMPILER_TYPES.Effect;
+            if (isTypeFunction(checker.getTypeAtLocation(expr), checker)) {
+                return TYPES.Effect;
             }
         }
-        catch {
-        }
+        catch {}
     }
 
-    return COMPILER_TYPES.Unknown;
+    return TYPES.Unknown;
 };
 
 export { analyze };

package/src/compiler/ts-parser.ts

@@ -1,5 +1,6 @@
 import { ts } from '@esportsplus/typescript';
-import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, PACKAGE } from '~/constants';
+import { imports } from '@esportsplus/typescript/compiler';
+import { ENTRYPOINT, ENTRYPOINT_REACTIVITY, PACKAGE } from './constants';
 
 
 type ReactiveCallInfo = {
@@ -20,55 +21,15 @@ type TemplateInfo = {
 };
 
 
-function isHtmlFromPackage(node: ts.Identifier, checker: ts.TypeChecker | undefined): boolean {
-    // Fast path: check identifier name first
-    if (node.text !== COMPILER_ENTRYPOINT) {
-        return false;
-    }
-
-    // Without checker, fall back to string-based check
-    if (!checker) {
-        return true;
-    }
-
-    let symbol = checker.getSymbolAtLocation(node);
-
-    if (!symbol) {
-        return true;
-    }
-
-    // Follow aliases (re-exports) to find original symbol
-    if (symbol.flags & ts.SymbolFlags.Alias) {
-        symbol = checker.getAliasedSymbol(symbol);
-    }
-
-    let declarations = symbol.getDeclarations();
-
-    if (!declarations || declarations.length === 0) {
-        return true;
-    }
-
-    // Check if any declaration is from our package
-    for (let i = 0, n = declarations.length; i < n; i++) {
-        let filename = declarations[i].getSourceFile().fileName;
-
-        // Check for package in node_modules path or direct package reference
-        if (filename.includes(PACKAGE) || filename.includes('@esportsplus/template')) {
-            return true;
-        }
-    }
-
-    return false;
-}
-
 function visitReactiveCalls(node: ts.Node, calls: ReactiveCallInfo[], checker: ts.TypeChecker | undefined): void {
     if (
         ts.isCallExpression(node) &&
         ts.isPropertyAccessExpression(node.expression) &&
         ts.isIdentifier(node.expression.expression) &&
-        node.expression.name.text === COMPILER_ENTRYPOINT_REACTIVITY &&
+        node.expression.name.text === ENTRYPOINT_REACTIVITY &&
         node.arguments.length === 2 &&
-        isHtmlFromPackage(node.expression.expression, checker)
+        node.expression.expression.text === ENTRYPOINT &&
+        (!checker || imports.includes(checker, node.expression.expression, PACKAGE, ENTRYPOINT))
     ) {
         calls.push({
             arrayArg: node.arguments[0],
@@ -87,24 +48,13 @@ function visitTemplates(node: ts.Node, depth: number, templates: TemplateInfo[],
             ? depth + 1
             : depth;
 
-    if (ts.isTaggedTemplateExpression(node) && ts.isIdentifier(node.tag) && isHtmlFromPackage(node.tag, checker)) {
-        let expressions: ts.Expression[] = [],
-            literals: string[] = [],
-            template = node.template;
-
-        if (ts.isNoSubstitutionTemplateLiteral(template)) {
-            literals.push(template.text);
-        }
-        else if (ts.isTemplateExpression(template)) {
-            literals.push(template.head.text);
-
-            for (let i = 0, n = template.templateSpans.length; i < n; i++) {
-                let span = template.templateSpans[i];
-
-                expressions.push(span.expression);
-                literals.push(span.literal.text);
-            }
-        }
+    if (
+        ts.isTaggedTemplateExpression(node) &&
+        ts.isIdentifier(node.tag) &&
+        node.tag.text === ENTRYPOINT &&
+        (!checker || imports.includes(checker, node.tag, PACKAGE, ENTRYPOINT))
+    ) {
+        let { expressions, literals } = extractTemplateParts(node.template);
 
         templates.push({
             depth,
@@ -120,15 +70,33 @@ function visitTemplates(node: ts.Node, depth: number, templates: TemplateInfo[],
 }
 
 
+const extractTemplateParts = (template: ts.TemplateLiteral): { expressions: ts.Expression[]; literals: string[] } => {
+    let expressions: ts.Expression[] = [],
+        literals: string[] = [];
+
+    if (ts.isNoSubstitutionTemplateLiteral(template)) {
+        literals.push(template.text);
+    }
+    else if (ts.isTemplateExpression(template)) {
+        literals.push(template.head.text);
+
+        for (let i = 0, n = template.templateSpans.length; i < n; i++) {
+            let span = template.templateSpans[i];
+
+            expressions.push(span.expression);
+            literals.push(span.literal.text);
+        }
+    }
+
+    return { expressions, literals };
+};
+
 const findHtmlTemplates = (sourceFile: ts.SourceFile, checker?: ts.TypeChecker): TemplateInfo[] => {
     let templates: TemplateInfo[] = [];
 
     visitTemplates(sourceFile, 0, templates, checker);
 
-    // Sort by depth descending (deepest first), then by position for stable ordering
-    templates.sort((a, b) => a.depth !== b.depth ? b.depth - a.depth : a.start - b.start);
-
-    return templates;
+    return templates.sort((a, b) => a.depth !== b.depth ? b.depth - a.depth : a.start - b.start);
 };
 
 const findReactiveCalls = (sourceFile: ts.SourceFile, checker?: ts.TypeChecker): ReactiveCallInfo[] => {
@@ -140,5 +108,5 @@ const findReactiveCalls = (sourceFile: ts.SourceFile, checker?: ts.TypeChecker):
 };
 
 
-export { findHtmlTemplates, findReactiveCalls };
+export { extractTemplateParts, findHtmlTemplates, findReactiveCalls };
 export type { ReactiveCallInfo, TemplateInfo };

package/src/constants.ts

@@ -1,28 +1,7 @@
-import { uid } from '@esportsplus/typescript/compiler';
-
-
 const ARRAY_SLOT = Symbol('template.array.slot');
 
 const CLEANUP = Symbol('template.cleanup');
 
-const COMPILER_ENTRYPOINT = 'html';
-
-const COMPILER_ENTRYPOINT_REACTIVITY = 'reactive';
-
-const COMPILER_NAMESPACE = uid('template');
-
-const enum COMPILER_TYPES {
-    ArraySlot = 'array-slot',
-    Attributes = 'attributes',
-    Attribute = 'attribute',
-    DocumentFragment = 'document-fragment',
-    Effect = 'effect',
-    Node = 'node',
-    Primitive = 'primitive',
-    Static = 'static',
-    Unknown = 'unknown'
-};
-
 const DIRECT_ATTACH_EVENTS = new Set<string>([
     'onblur',
     'onerror',
@@ -37,8 +16,6 @@ const LIFECYCLE_EVENTS = new Set<string>([
     'onconnect', 'ondisconnect', 'onrender', 'onresize', 'ontick'
 ]);
 
-const PACKAGE = '@esportsplus/template';
-
 const SLOT_HTML = '<!--$-->';
 
 const STATE_HYDRATING = 0;
@@ -53,9 +30,7 @@ const STORE = Symbol('template.store');
 export {
     ARRAY_SLOT,
     CLEANUP,
-    COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, COMPILER_NAMESPACE, COMPILER_TYPES,
     DIRECT_ATTACH_EVENTS,
     LIFECYCLE_EVENTS,
-    PACKAGE,
     SLOT_HTML, STATE_HYDRATING, STATE_NONE, STATE_WAITING, STORE,
 };

package/test/counter.ts

@@ -0,0 +1,113 @@
+import { effect, reactive } from '@esportsplus/reactivity'
+import { html, type Attributes } from '@esportsplus/template';
+import { omit } from '@esportsplus/utilities';
+
+
+const OMIT = ['currency', 'decimals', 'delay', 'max', 'state', 'suffix', 'value'];
+
+
+let formatters: Record<string, Intl.NumberFormat> = {};
+
+
+export default (attributes: Attributes & {
+    currency?: 'IGNORE' | 'EUR' | 'GBP' | 'USD';
+    decimals?: number;
+    delay?: number;
+    max?: number;
+    state?: { value: number },
+    suffix?: string;
+    value: number;
+}) => {
+    let { currency, decimals, delay, max, suffix, value } = attributes,
+        api = attributes.state || reactive({ value: -1 }),
+        formatter = currency === 'IGNORE'
+            ? undefined
+            : formatters[currency || 'USD'] ??= new Intl.NumberFormat('en-US', {
+                style: 'currency',
+                currency: currency || 'USD'
+            }),
+        rendering = true,
+        state = reactive({
+            length: 0,
+            test: () => 'sds',
+            render: [] as string[]
+        }),
+        render = reactive([] as string[]);
+
+    decimals ??= 2;
+
+    effect(() => {
+        if (api.value !== -1) {
+            value = api.value;
+        }
+
+        let padding = (max || value).toFixed(decimals).length - value.toFixed(decimals).length,
+            values = value.toString().padStart( value.toString().length + padding, '1') as any;
+
+        if (formatter) {
+            values = formatter.format(values);
+        }
+        else {
+            values = Number(values).toLocaleString([], {
+                minimumFractionDigits: 0,
+                maximumFractionDigits: decimals
+            });
+        }
+
+        values = values.split('');
+
+        if (suffix) {
+            values.push(' ', ...suffix.split(''));
+        }
+
+        state.length = values.length;
+
+        for (let i = 0, n = values.length; i < n; i++) {
+            let value = values[i];
+
+            if (!isNaN(parseInt(value, 10)) && (rendering === true || padding > 0)) {
+                padding--;
+                value = '0';
+            }
+
+            render[i] = value;
+        }
+
+        if (rendering === true) {
+            rendering = false;
+            setTimeout(() => api.value = value, delay || 1000);
+        }
+    });
+
+    return html`
+        <div class='counter' ${omit(attributes, OMIT)}>
+            ${() => {
+                let n = state.length;
+
+                if (n === 0) {
+                    return '';
+                }
+
+                return html.reactive(render, function (value) {
+                    if (isNaN(parseInt(value, 10))) {
+                        return html`
+                            <span class='counter-character counter-character--symbol'>
+                                ${value}
+                            </span>
+                        `;
+                    }
+
+                    return html`
+                        <div class=' counter-character'>
+                            <div class='counter-character-track' style='${`--value: ${value}`}'>
+                                <span>9</span>
+                                ${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((value) => html`<span>${value}</span>`)}
+                                <span>0</span>
+                            </div>
+                        </div>
+                    `;
+                });
+            }}
+        </div>
+    `;
+};

package/test/effects.ts

@@ -2,7 +2,7 @@
 // Tests EffectSlot detection for arrow functions and reactive patterns
 
 
-import { html } from '../src';
+import { html } from '@esportsplus/template';
 
 
 // =============================================================================

package/test/events.ts

@@ -2,7 +2,7 @@
 // Tests delegate, direct, and lifecycle event detection
 
 
-import { html } from '../src';
+import { html } from '@esportsplus/template';
 
 
 // =============================================================================

package/test/imported-values.ts

@@ -2,7 +2,7 @@
 // Tests that imported values are preserved correctly during compilation
 
 
-import { html } from '../src';
+import { html } from '@esportsplus/template';
 import {
     ACTIVE_CLASS,
     APP_NAME,

package/test/integration/tsconfig.json

@@ -7,7 +7,6 @@
         "declarationDir": null,
         "noUnusedLocals": false,
         "plugins": [
-            { "transform": "@esportsplus/reactivity/compiler/tsc" },
             { "transform": "../../build/compiler/plugins/tsc.js" }
         ]
     },

package/test/nested.ts

@@ -2,7 +2,7 @@
 // Tests nested html`` calls, array mapping, and conditional templates
 
 
-import { html } from '../src';
+import { html } from '@esportsplus/template';
 
 
 // =============================================================================
@@ -273,6 +273,25 @@ export const stressList50 = (items: string[]) =>
 export const stressList100 = (items: string[]) =>
     html`<ul>${items.slice(0, 100).map(item => html`<li>${item}</li>`)}</ul>`;
 
+// Block body arrow function with nested template
+export const blockBodyNested = (items: { name: string; active: boolean }[]) =>
+    html`<ul>${items.map((item) => {
+        let cls = item.active ? 'active' : 'inactive';
+        return html`<li class="${cls}">${item.name}</li>`;
+    })}</ul>`;
+
+// Block body with conditional
+export const blockBodyConditional = (data: { show: boolean; items: string[] }) =>
+    html`<div>${() => {
+        if (!data.show) {
+            return '';
+        }
+        return html`<ul>${data.items.map((item) => {
+            let processed = item.toUpperCase();
+            return html`<li>${processed}</li>`;
+        })}</ul>`;
+    }}</div>`;
+
 // Complex nested structure
 export const stressComplex = (data: {
     header: { title: string; subtitle: string };

package/test/slots.ts

@@ -2,7 +2,7 @@
 // Tests text slots, attribute slots, and mixed combinations
 
 
-import { html } from '../src';
+import { html } from '@esportsplus/template';
 
 
 // =============================================================================