@esportsplus/template 0.37.0 → 0.38.1

package/src/compiler/index.ts

@@ -1,139 +1,97 @@
-import type { PluginContext } from '@esportsplus/typescript/compiler';
+import type { ImportIntent, Plugin, ReplacementIntent, TransformContext } from '@esportsplus/typescript/compiler';
 import { ts } from '@esportsplus/typescript';
-import { code as c, imports, uid } from '@esportsplus/typescript/compiler';
-import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, PACKAGE } from '~/constants';
-import { generateCode, generateReactiveInlining } from './codegen';
-import { findHtmlTemplates, findReactiveCalls, type ReactiveCallInfo, type TemplateInfo } from './ts-parser';
+import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, COMPILER_NAMESPACE, PACKAGE } from '~/constants';
+import { generateCode } from './codegen';
+import { findHtmlTemplates, findReactiveCalls } from './ts-parser';
 
 
-type AnalyzedFile = {
-    reactiveCalls: ReactiveCallInfo[];
-    templates: TemplateInfo[];
-};
-
-type TransformResult = {
-    changed: boolean;
-    code: string;
-    sourceFile: ts.SourceFile;
-};
-
+const PATTERNS = [
+    `${COMPILER_ENTRYPOINT}\``,
+    `${COMPILER_ENTRYPOINT}.${COMPILER_ENTRYPOINT_REACTIVITY}`
+];
 
-const CONTEXT_KEY = 'template:analyzed';
 
-const PATTERNS = [`${COMPILER_ENTRYPOINT}\``, `${COMPILER_ENTRYPOINT}.${COMPILER_ENTRYPOINT_REACTIVITY}`];
-
-const REGEX_BACKSLASH = /\\/g;
-
-const REGEX_FORWARD_SLASH = /\//g;
+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;
+        }
+    }
 
-function getAnalyzedFile(context: PluginContext | undefined, filename: string): AnalyzedFile | undefined {
-    return (context?.get(CONTEXT_KEY) as Map<string, AnalyzedFile> | undefined)?.get(filename);
+    return false;
 }
 
 
-const analyze = (sourceFile: ts.SourceFile, program: ts.Program, context: PluginContext): void => {
-    let code = sourceFile.getFullText();
-
-    if (!c.contains(code, { patterns: PATTERNS })) {
-        return;
-    }
+let printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
 
-    let checker = program.getTypeChecker(),
-        filename = sourceFile.fileName,
-        files = context.get(CONTEXT_KEY) as Map<string, AnalyzedFile> | undefined,
-        programSourceFile = program.getSourceFile(filename)
-            || program.getSourceFile(filename.replace(REGEX_BACKSLASH, '/'))
-            || program.getSourceFile(filename.replace(REGEX_FORWARD_SLASH, '\\'));
 
-    if (programSourceFile) {
-        sourceFile = programSourceFile;
-    }
+const plugin: Plugin = {
+    patterns: PATTERNS,
 
-    if (!files) {
-        files = new Map();
-        context.set(CONTEXT_KEY, files);
-    }
+    transform: (ctx: TransformContext) => {
+        let importsIntent: ImportIntent[] = [],
+            prepend: string[] = [],
+            replacements: ReplacementIntent[] = [],
+            removeImports: string[] = [];
 
-    files.set(filename, {
-        reactiveCalls: findReactiveCalls(sourceFile, checker),
-        templates: findHtmlTemplates(sourceFile, checker)
-    });
-};
+        // Find templates first to build exclusion ranges
+        let templates = findHtmlTemplates(ctx.sourceFile, ctx.checker);
 
-const transform = (sourceFile: ts.SourceFile, program: ts.Program, context?: PluginContext): TransformResult => {
-    let code = sourceFile.getFullText(),
-        filename = sourceFile.fileName;
+        // Build ranges for all template nodes - reactive calls inside these are handled by template codegen
+        let templateRanges: { end: number; start: number }[] = [];
 
-    // Try to get pre-analyzed data from context
-    let analyzed = getAnalyzedFile(context, filename);
-
-    // Fall back to inline analysis (for Vite or when context unavailable)
-    if (!analyzed) {
-        if (!c.contains(code, { patterns: PATTERNS })) {
-            return { changed: false, code, sourceFile };
+        for (let i = 0, n = templates.length; i < n; i++) {
+            templateRanges.push({
+                end: templates[i].end,
+                start: templates[i].start
+            });
         }
 
-        let checker = program.getTypeChecker(),
-            programSourceFile = program.getSourceFile(filename)
-                || program.getSourceFile(filename.replace(REGEX_BACKSLASH, '/'))
-                || program.getSourceFile(filename.replace(REGEX_FORWARD_SLASH, '\\'));
+        // Transform standalone html.reactive() calls (exclude those inside templates)
+        let reactiveCalls = findReactiveCalls(ctx.sourceFile, ctx.checker);
 
-        if (programSourceFile) {
-            sourceFile = programSourceFile;
-        }
+        for (let i = 0, n = reactiveCalls.length; i < n; i++) {
+            let call = reactiveCalls[i];
 
-        analyzed = {
-            reactiveCalls: findReactiveCalls(sourceFile, checker),
-            templates: findHtmlTemplates(sourceFile, checker)
-        };
-    }
+            // Skip reactive calls that are inside template expressions - handled by template codegen
+            if (isInRange(templateRanges, call.start, call.end)) {
+                continue;
+            }
 
-    let changed = false,
-        codegenChanged = false,
-        existingAliases = new Map<string, string>(),
-        result = code;
-
-    if (analyzed.reactiveCalls.length > 0) {
-        changed = true;
-        existingAliases.set('ArraySlot', uid('ArraySlot'));
-        result = generateReactiveInlining(analyzed.reactiveCalls, result, sourceFile, existingAliases.get('ArraySlot')!);
-        sourceFile = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
-
-        // Re-analyze templates after reactive inlining modifies the code
-        analyzed = {
-            reactiveCalls: [],
-            templates: findHtmlTemplates(sourceFile, program.getTypeChecker())
-        };
-    }
+            replacements.push({
+                generate: (sourceFile) => `new ${COMPILER_NAMESPACE}.ArraySlot(${printer.printNode(ts.EmitHint.Expression, call.arrayArg, sourceFile)}, ${printer.printNode(ts.EmitHint.Expression, call.callbackArg, sourceFile)})`,
+                node: call.node
+            });
+        }
 
-    if (analyzed.templates.length > 0) {
-        let codegenResult = generateCode(analyzed.templates, result, sourceFile, program.getTypeChecker(), existingAliases);
+        // Transform html`` templates
+        if (templates.length > 0) {
+            let result = generateCode(templates, ctx.sourceFile, ctx.checker);
 
-        if (codegenResult.changed) {
-            changed = true;
-            codegenChanged = true;
-            result = codegenResult.code;
+            prepend.push(...result.prepend);
+            replacements.push(...result.replacements);
+            removeImports.push(COMPILER_ENTRYPOINT);
         }
-    }
-
-    // Add aliased ArraySlot import if reactive calls were processed but codegen didn't run
-    if (existingAliases.size > 0 && !codegenChanged) {
-        let aliasedImports: string[] = [];
 
-        for (let [name, alias] of existingAliases) {
-            aliasedImports.push(`${name} as ${alias}`);
+        if (replacements.length === 0 && prepend.length === 0) {
+            return {};
         }
 
-        result = imports.modify(result, sourceFile, PACKAGE, { add: aliasedImports });
-    }
+        importsIntent.push({
+            namespace: COMPILER_NAMESPACE,
+            package: PACKAGE,
+            remove: removeImports
+        });
 
-    if (changed) {
-        sourceFile = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
+        return {
+            imports: importsIntent,
+            prepend,
+            replacements
+        };
     }
-
-    return { changed, code: result, sourceFile };
 };
 
 
-export { analyze, transform };
+export default plugin;

package/src/compiler/plugins/tsc.ts

@@ -1,5 +1,4 @@
-import { plugin } from '@esportsplus/typescript/compiler';
-import { analyze, transform } from '..';
+import plugin from '..';
 
 
-export default plugin.tsc({ analyze, transform }) as ReturnType<typeof plugin.tsc>;
+export default plugin;

package/src/compiler/plugins/vite.ts

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

package/src/constants.ts

@@ -1,3 +1,6 @@
+import { uid } from '@esportsplus/typescript/compiler';
+
+
 const ARRAY_SLOT = Symbol('template.array.slot');
 
 const CLEANUP = Symbol('template.cleanup');
@@ -6,6 +9,8 @@ const COMPILER_ENTRYPOINT = 'html';
 
 const COMPILER_ENTRYPOINT_REACTIVITY = 'reactive';
 
+const COMPILER_NAMESPACE = uid('template');
+
 const enum COMPILER_TYPES {
     ArraySlot = 'array-slot',
     Attributes = 'attributes',
@@ -48,7 +53,7 @@ const STORE = Symbol('template.store');
 export {
     ARRAY_SLOT,
     CLEANUP,
-    COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, COMPILER_TYPES,
+    COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, COMPILER_NAMESPACE, COMPILER_TYPES,
     DIRECT_ATTACH_EVENTS,
     LIFECYCLE_EVENTS,
     PACKAGE,

package/test/integration/combined.ts

@@ -0,0 +1,90 @@
+/**
+ * Integration test: Combined reactivity + template plugins
+ *
+ * This file tests that both plugins work together correctly:
+ * 1. reactive() from @esportsplus/reactivity - creates reactive objects/arrays
+ * 2. html`` from @esportsplus/template - compiles templates
+ * 3. html.reactive() from @esportsplus/template - renders reactive arrays
+ */
+
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+
+
+// Test 1: Basic reactive object with template
+const state = reactive({
+    count: 0,
+    name: 'World'
+});
+
+export const basicTemplate = () => html`
+    <div class="counter">
+        <span>Hello ${() => state.name}!</span>
+        <span>Count: ${() => state.count}</span>
+    </div>
+`;
+
+
+// Test 2: Reactive array with html.reactive()
+const items = reactive([
+    { id: 1, text: 'First' },
+    { id: 2, text: 'Second' },
+    { id: 3, text: 'Third' }
+]);
+
+export const reactiveList = () => html`
+    <ul class="list">
+        ${html.reactive(items, (item) => html`
+            <li data-id="${item.id}">${item.text}</li>
+        `)}
+    </ul>
+`;
+
+
+// Test 3: Combined - reactive object + reactive array in same template
+type Todo = { id: number; done: boolean; text: string };
+
+const todos = reactive<Todo[]>([
+    { id: 1, done: false, text: 'Learn TypeScript' },
+    { id: 2, done: true, text: 'Build compiler' }
+]);
+
+const app = reactive({
+    title: 'Todo App'
+});
+
+export const combinedTemplate = () => html`
+    <div class="app">
+        <h1>${() => app.title}</h1>
+        <ul>
+            ${html.reactive(todos, (todo) => html`
+                <li class="${() => todo.done ? 'done' : ''}">
+                    <input type="checkbox" checked="${() => todo.done}" />
+                    <span>${todo.text}</span>
+                </li>
+            `)}
+        </ul>
+    </div>
+`;
+
+
+// Test 4: Static template (no reactive expressions)
+export const staticTemplate = () => html`
+    <footer>
+        <p>Static content - no transformations needed</p>
+    </footer>
+`;
+
+
+// Test 5: Nested templates with effects
+export const nestedTemplate = () => html`
+    <div class="wrapper">
+        ${html`<header>Header</header>`}
+        <main>
+            ${() => state.count > 5
+                ? html`<span>High count!</span>`
+                : html`<span>Low count</span>`
+            }
+        </main>
+    </div>
+`;

package/test/integration/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "extends": "@esportsplus/typescript/tsconfig.package.json",
+    "compilerOptions": {
+        "rootDir": ".",
+        "outDir": "./build",
+        "declaration": false,
+        "declarationDir": null,
+        "noUnusedLocals": false,
+        "plugins": [
+            { "transform": "@esportsplus/reactivity/compiler/tsc" },
+            { "transform": "../../build/compiler/plugins/tsc.js" }
+        ]
+    },
+    "include": [
+        "./**/*.ts"
+    ]
+}