@esportsplus/template 0.38.0 → 0.38.2

package/build/compiler/codegen.d.ts

@@ -2,11 +2,10 @@ import type { ReplacementIntent } from '@esportsplus/typescript/compiler';
 import { ts } from '@esportsplus/typescript';
 import type { TemplateInfo } from './ts-parser.js';
 type CodegenResult = {
-    imports: Map<string, string>;
     prepend: string[];
     replacements: ReplacementIntent[];
     templates: Map<string, string>;
 };
-declare const generateCode: (templates: TemplateInfo[], sourceFile: ts.SourceFile, checker?: ts.TypeChecker, existingAliases?: Map<string, string>) => CodegenResult;
+declare const generateCode: (templates: TemplateInfo[], sourceFile: ts.SourceFile, checker?: ts.TypeChecker) => CodegenResult;
 export { generateCode };
 export type { CodegenResult };

package/build/compiler/codegen.js

@@ -1,19 +1,11 @@
 import { ts } from '@esportsplus/typescript';
 import { ast, uid } from '@esportsplus/typescript/compiler';
-import { COMPILER_ENTRYPOINT, COMPILER_TYPES, DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS } from '../constants.js';
+import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, COMPILER_NAMESPACE, COMPILER_TYPES, DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS } from '../constants.js';
 import { analyze } from './analyzer.js';
 import parser from './parser.js';
 const ARROW_EMPTY_PARAMS = /\(\s*\)\s*=>\s*$/;
 let printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
-function addImport(ctx, name) {
-    let alias = ctx.imports.get(name);
-    if (!alias) {
-        alias = uid(name);
-        ctx.imports.set(name, alias);
-    }
-    return alias;
-}
-function collectNestedTemplateReplacements(ctx, node, exprStart, replacements) {
+function collectNestedReplacements(ctx, node, exprStart, replacements) {
     if (isNestedHtmlTemplate(node)) {
         replacements.push({
             end: node.end - exprStart,
@@ -21,28 +13,35 @@ function collectNestedTemplateReplacements(ctx, node, exprStart, replacements) {
             start: node.getStart(ctx.sourceFile) - exprStart
         });
     }
+    else if (isReactiveCall(node)) {
+        replacements.push({
+            end: node.end - exprStart,
+            newText: rewriteNestedReactiveCall(ctx, node),
+            start: node.getStart(ctx.sourceFile) - exprStart
+        });
+    }
     else {
-        ts.forEachChild(node, child => collectNestedTemplateReplacements(ctx, child, exprStart, replacements));
+        ts.forEachChild(node, child => collectNestedReplacements(ctx, child, exprStart, replacements));
     }
 }
-function generateAttributeBinding(ctx, element, name, expr, staticValue) {
+function generateAttributeBinding(element, name, expr, staticValue) {
     if (name.startsWith('on') && name.length > 2) {
         let event = name.slice(2).toLowerCase(), key = name.toLowerCase();
         if (LIFECYCLE_EVENTS.has(key)) {
-            return `${addImport(ctx, key)}(${element}, ${expr});`;
+            return `${COMPILER_NAMESPACE}.${key}(${element}, ${expr});`;
         }
         if (DIRECT_ATTACH_EVENTS.has(key)) {
-            return `${addImport(ctx, 'on')}(${element}, '${event}', ${expr});`;
+            return `${COMPILER_NAMESPACE}.on(${element}, '${event}', ${expr});`;
         }
-        return `${addImport(ctx, 'delegate')}(${element}, '${event}', ${expr});`;
+        return `${COMPILER_NAMESPACE}.delegate(${element}, '${event}', ${expr});`;
     }
     if (name === 'class') {
-        return `${addImport(ctx, 'setClass')}(${element}, '${staticValue}', ${expr});`;
+        return `${COMPILER_NAMESPACE}.setClass(${element}, '${staticValue}', ${expr});`;
     }
     if (name === 'style') {
-        return `${addImport(ctx, 'setStyle')}(${element}, '${staticValue}', ${expr});`;
+        return `${COMPILER_NAMESPACE}.setStyle(${element}, '${staticValue}', ${expr});`;
     }
-    return `${addImport(ctx, 'setProperty')}(${element}, '${name}', ${expr});`;
+    return `${COMPILER_NAMESPACE}.setProperty(${element}, '${name}', ${expr});`;
 }
 function generateNestedTemplateCode(ctx, node) {
     let expressions = [], exprTexts = [], literals = [], template = node.template;
@@ -62,23 +61,23 @@ function generateNestedTemplateCode(ctx, node) {
 }
 function generateNodeBinding(ctx, anchor, exprText, exprNode) {
     if (!exprNode) {
-        return `${addImport(ctx, 'slot')}(${anchor}, ${exprText});`;
+        return `${COMPILER_NAMESPACE}.slot(${anchor}, ${exprText});`;
     }
     if (isNestedHtmlTemplate(exprNode)) {
-        return `${anchor}.parentNode.insertBefore(${generateNestedTemplateCode(ctx, exprNode)}, ${anchor});`;
+        return `${anchor}.parentNode!.insertBefore(${generateNestedTemplateCode(ctx, exprNode)}, ${anchor});`;
     }
     let slotType = analyze(exprNode, ctx.checker);
     switch (slotType) {
-        case COMPILER_TYPES.Effect:
-            return `new ${addImport(ctx, 'EffectSlot')}(${anchor}, ${exprText});`;
         case COMPILER_TYPES.ArraySlot:
-            return `new ${addImport(ctx, 'ArraySlot')}(${anchor}, ${exprText});`;
+            return `${anchor}.parentNode!.insertBefore(new ${COMPILER_NAMESPACE}.ArraySlot(${exprText}).fragment, ${anchor});`;
+        case COMPILER_TYPES.DocumentFragment:
+            return `${anchor}.parentNode!.insertBefore(${exprText}, ${anchor});`;
+        case COMPILER_TYPES.Effect:
+            return `new ${COMPILER_NAMESPACE}.EffectSlot(${anchor}, ${exprText});`;
         case COMPILER_TYPES.Static:
             return `${anchor}.textContent = ${exprText};`;
-        case COMPILER_TYPES.DocumentFragment:
-            return `${anchor}.parentNode.insertBefore(${exprText}, ${anchor});`;
         default:
-            return `${addImport(ctx, 'slot')}(${anchor}, ${exprText});`;
+            return `${COMPILER_NAMESPACE}.slot(${anchor}, ${exprText});`;
     }
 }
 function generateTemplateCode(ctx, { html, slots }, exprTexts, exprNodes, isArrowBody) {
@@ -106,11 +105,11 @@ function generateTemplateCode(ctx, { html, slots }, exprTexts, exprNodes, isArro
                 break;
             }
         }
-        let alias = addImport(ctx, 'Element'), name = uid('element'), segments = path.slice(start), value = `${ancestor}.${segments.join('!.')}`;
+        let name = uid('element'), segments = path.slice(start), value = `${ancestor}.${segments.join('!.')}`;
         if (ancestor === root && segments[0] === 'firstChild') {
-            value = value.replace(`${ancestor}.firstChild!`, `(${ancestor}.firstChild! as ${alias})`);
+            value = value.replace(`${ancestor}.firstChild!`, `(${ancestor}.firstChild! as ${COMPILER_NAMESPACE}.Element)`);
         }
-        declarations.push(`${name} = ${value} as ${alias}`);
+        declarations.push(`${name} = ${value} as ${COMPILER_NAMESPACE}.Element`);
         nodes.set(key, name);
     }
     code.push(isArrowBody ? '{' : `(() => {`, `let ${declarations.join(',\n')};`);
@@ -123,11 +122,11 @@ function generateTemplateCode(ctx, { html, slots }, exprTexts, exprNodes, isArro
             for (let j = 0, m = names.length; j < m; j++) {
                 let name = names[j];
                 if (name === COMPILER_TYPES.Attributes) {
-                    code.push(`${addImport(ctx, 'setProperties')}(${element}, ${exprTexts[index] || 'undefined'});`);
+                    code.push(`${COMPILER_NAMESPACE}.setProperties(${element}, ${exprTexts[index] || 'undefined'});`);
                     index++;
                 }
                 else {
-                    code.push(generateAttributeBinding(ctx, element, name, exprTexts[index++] || 'undefined', slot.attributes.statics[name] || ''));
+                    code.push(generateAttributeBinding(element, name, exprTexts[index++] || 'undefined', slot.attributes.statics[name] || ''));
                 }
             }
         }
@@ -151,6 +150,13 @@ function getOrCreateTemplateId(ctx, html) {
 function isNestedHtmlTemplate(expr) {
     return ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === COMPILER_ENTRYPOINT;
 }
+function isReactiveCall(expr) {
+    return (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);
+}
 function replaceReverse(text, replacements) {
     let sorted = replacements.slice().sort((a, b) => b.start - a.start);
     for (let i = 0, n = sorted.length; i < n; i++) {
@@ -163,16 +169,64 @@ function rewriteExpression(ctx, expr) {
     if (isNestedHtmlTemplate(expr)) {
         return generateNestedTemplateCode(ctx, expr);
     }
-    if (!ast.hasMatch(expr, n => isNestedHtmlTemplate(n))) {
+    if (isReactiveCall(expr)) {
+        return rewriteReactiveCall(ctx, expr);
+    }
+    if (!ast.hasMatch(expr, n => isNestedHtmlTemplate(n) || isReactiveCall(n))) {
         return ctx.printer.printNode(ts.EmitHint.Expression, expr, ctx.sourceFile);
     }
     let replacements = [];
-    collectNestedTemplateReplacements(ctx, expr, expr.getStart(ctx.sourceFile), replacements);
+    collectNestedReplacements(ctx, expr, expr.getStart(ctx.sourceFile), replacements);
     return replaceReverse(expr.getText(ctx.sourceFile), replacements);
 }
-const generateCode = (templates, sourceFile, checker, existingAliases) => {
+function rewriteReactiveCall(ctx, node) {
+    let arrayArg = node.arguments[0], arrayText = ctx.printer.printNode(ts.EmitHint.Expression, arrayArg, ctx.sourceFile), callbackArg = node.arguments[1], callbackText = rewriteExpression(ctx, callbackArg);
+    return `${arrayText}, ${callbackText}`;
+}
+function rewriteNestedReactiveCall(ctx, node) {
+    let arrayArg = node.arguments[0], arrayText = ctx.printer.printNode(ts.EmitHint.Expression, arrayArg, ctx.sourceFile), callbackArg = node.arguments[1], callbackText = rewriteExpression(ctx, callbackArg);
+    return `new ${COMPILER_NAMESPACE}.ArraySlot(${arrayText}, ${callbackText})`;
+}
+function discoverTemplatesInExpression(ctx, node) {
+    if (isNestedHtmlTemplate(node)) {
+        let template = node, expressions = [], literals = [], tpl = template.template;
+        if (ts.isNoSubstitutionTemplateLiteral(tpl)) {
+            literals.push(tpl.text);
+        }
+        else if (ts.isTemplateExpression(tpl)) {
+            literals.push(tpl.head.text);
+            for (let i = 0, n = tpl.templateSpans.length; i < n; i++) {
+                expressions.push(tpl.templateSpans[i].expression);
+                literals.push(tpl.templateSpans[i].literal.text);
+            }
+        }
+        let parsed = parser.parse(literals);
+        getOrCreateTemplateId(ctx, parsed.html);
+        for (let i = 0, n = expressions.length; i < n; i++) {
+            discoverTemplatesInExpression(ctx, expressions[i]);
+        }
+    }
+    else if (isReactiveCall(node)) {
+        let call = node;
+        if (call.arguments.length >= 2) {
+            discoverTemplatesInExpression(ctx, call.arguments[1]);
+        }
+    }
+    else {
+        ts.forEachChild(node, child => discoverTemplatesInExpression(ctx, child));
+    }
+}
+function discoverAllTemplates(ctx, templates) {
+    for (let i = 0, n = templates.length; i < n; i++) {
+        let parsed = parser.parse(templates[i].literals);
+        getOrCreateTemplateId(ctx, parsed.html);
+        for (let j = 0, m = templates[i].expressions.length; j < m; j++) {
+            discoverTemplatesInExpression(ctx, templates[i].expressions[j]);
+        }
+    }
+}
+const generateCode = (templates, sourceFile, checker) => {
     let result = {
-        imports: existingAliases ?? new Map(),
         prepend: [],
         replacements: [],
         templates: new Map()
@@ -193,18 +247,16 @@ const generateCode = (templates, sourceFile, checker, existingAliases) => {
     }
     let ctx = {
         checker,
-        imports: result.imports,
         printer,
         sourceFile,
         templates: result.templates
-    }, templateAlias = addImport(ctx, 'template');
+    };
     for (let i = 0, n = rootTemplates.length; i < n; i++) {
         let template = rootTemplates[i];
         result.replacements.push({
             generate: (sf) => {
                 let codeBefore = sf.getFullText().slice(0, template.node.getStart(sf)), exprTexts = [], isArrowBody = codeBefore.trimEnd().endsWith('=>'), localCtx = {
                     checker,
-                    imports: ctx.imports,
                     printer,
                     sourceFile: sf,
                     templates: ctx.templates
@@ -223,8 +275,9 @@ const generateCode = (templates, sourceFile, checker, existingAliases) => {
             node: template.node
         });
     }
+    discoverAllTemplates(ctx, templates);
     for (let [html, id] of ctx.templates) {
-        result.prepend.push(`const ${id} = ${templateAlias}(\`${html}\`);`);
+        result.prepend.push(`const ${id} = ${COMPILER_NAMESPACE}.template(\`${html}\`);`);
     }
     return result;
 };

package/build/compiler/index.d.ts

@@ -1,5 +1,3 @@
 import type { Plugin } from '@esportsplus/typescript/compiler';
-import reactiveInliningPlugin from './reactive-inlining.js';
-declare const templatePlugin: Plugin;
-export default templatePlugin;
-export { reactiveInliningPlugin, templatePlugin };
+declare const plugin: Plugin;
+export default plugin;

package/build/compiler/index.js

@@ -1,38 +1,62 @@
-import { COMPILER_ENTRYPOINT, PACKAGE } from '../constants.js';
+import { ts } from '@esportsplus/typescript';
+import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, COMPILER_NAMESPACE, PACKAGE } from '../constants.js';
 import { generateCode } from './codegen.js';
-import reactiveInliningPlugin, { SHARED_KEY } from './reactive-inlining.js';
-import { findHtmlTemplates } from './ts-parser.js';
-const PATTERNS = [`${COMPILER_ENTRYPOINT}\``];
-const templatePlugin = {
-    patterns: PATTERNS,
+import { findHtmlTemplates, findReactiveCalls } from './ts-parser.js';
+function isInRange(ranges, start, end) {
+    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 = {
+    patterns: [
+        `${COMPILER_ENTRYPOINT}\``,
+        `${COMPILER_ENTRYPOINT}.${COMPILER_ENTRYPOINT_REACTIVITY}`
+    ],
     transform: (ctx) => {
+        let importsIntent = [], prepend = [], replacements = [], removeImports = [];
         let templates = findHtmlTemplates(ctx.sourceFile, ctx.checker);
-        if (templates.length === 0) {
-            return {};
+        let templateRanges = [];
+        for (let i = 0, n = templates.length; i < n; i++) {
+            templateRanges.push({
+                end: templates[i].end,
+                start: templates[i].start
+            });
         }
-        let existingAliases = new Map(), existingArraySlotAlias = ctx.shared.get(SHARED_KEY);
-        if (existingArraySlotAlias) {
-            existingAliases.set('ArraySlot', existingArraySlotAlias);
+        let reactiveCalls = findReactiveCalls(ctx.sourceFile, ctx.checker);
+        for (let i = 0, n = reactiveCalls.length; i < n; i++) {
+            let call = reactiveCalls[i];
+            if (isInRange(templateRanges, 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)})`,
+                node: call.node
+            });
         }
-        let result = generateCode(templates, ctx.sourceFile, ctx.checker, existingAliases);
-        if (result.replacements.length === 0) {
-            return {};
+        if (templates.length > 0) {
+            let result = generateCode(templates, ctx.sourceFile, ctx.checker);
+            prepend.push(...result.prepend);
+            replacements.push(...result.replacements);
+            removeImports.push(COMPILER_ENTRYPOINT);
         }
-        let aliasedImports = [];
-        for (let [name, alias] of result.imports) {
-            aliasedImports.push(`${name} as ${alias}`);
+        if (replacements.length === 0 && prepend.length === 0) {
+            return {};
         }
-        let imports = [{
-                add: aliasedImports,
-                package: PACKAGE,
-                remove: [COMPILER_ENTRYPOINT]
-            }];
+        importsIntent.push({
+            namespace: COMPILER_NAMESPACE,
+            package: PACKAGE,
+            remove: removeImports
+        });
         return {
-            imports,
-            prepend: result.prepend,
-            replacements: result.replacements
+            imports: importsIntent,
+            prepend,
+            replacements
         };
     }
 };
-export default templatePlugin;
-export { reactiveInliningPlugin, templatePlugin };
+export default plugin;

package/build/compiler/plugins/tsc.d.ts

@@ -1,3 +1,2 @@
-import { plugin } from '@esportsplus/typescript/compiler';
-declare const _default: ReturnType<typeof plugin.tsc>;
-export default _default;
+import plugin from '../index.js';
+export default plugin;

package/build/compiler/plugins/tsc.js

@@ -1,3 +1,2 @@
-import { plugin } from '@esportsplus/typescript/compiler';
-import { reactiveInliningPlugin, templatePlugin } from '../index.js';
-export default plugin.tsc([reactiveInliningPlugin, templatePlugin]);
+import plugin from '../index.js';
+export default plugin;

package/build/compiler/plugins/vite.js

@@ -1,7 +1,7 @@
 import { plugin } from '@esportsplus/typescript/compiler';
 import { PACKAGE } from '../../constants.js';
-import { reactiveInliningPlugin, templatePlugin } from '../index.js';
+import templatePlugin from '../index.js';
 export default plugin.vite({
     name: PACKAGE,
-    plugins: [reactiveInliningPlugin, templatePlugin]
+    plugins: [templatePlugin]
 });

package/build/constants.d.ts

@@ -2,6 +2,7 @@ declare const ARRAY_SLOT: unique symbol;
 declare const CLEANUP: unique symbol;
 declare const COMPILER_ENTRYPOINT = "html";
 declare const COMPILER_ENTRYPOINT_REACTIVITY = "reactive";
+declare const COMPILER_NAMESPACE: string;
 declare const enum COMPILER_TYPES {
     ArraySlot = "array-slot",
     Attributes = "attributes",
@@ -21,4 +22,4 @@ declare const STATE_HYDRATING = 0;
 declare const STATE_NONE = 1;
 declare const STATE_WAITING = 2;
 declare const STORE: unique symbol;
-export { ARRAY_SLOT, CLEANUP, COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, COMPILER_TYPES, DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS, PACKAGE, SLOT_HTML, STATE_HYDRATING, STATE_NONE, STATE_WAITING, 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/build/constants.js

@@ -1,7 +1,9 @@
+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');
 var COMPILER_TYPES;
 (function (COMPILER_TYPES) {
     COMPILER_TYPES["ArraySlot"] = "array-slot";
@@ -33,4 +35,4 @@ const STATE_HYDRATING = 0;
 const STATE_NONE = 1;
 const STATE_WAITING = 2;
 const STORE = Symbol('template.store');
-export { ARRAY_SLOT, CLEANUP, COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, COMPILER_TYPES, DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS, PACKAGE, SLOT_HTML, STATE_HYDRATING, STATE_NONE, STATE_WAITING, 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/package.json

@@ -2,7 +2,7 @@
   "author": "ICJR",
   "dependencies": {
     "@esportsplus/queue": "^0.2.0",
-    "@esportsplus/reactivity": "^0.28.0",
+    "@esportsplus/reactivity": "^0.28.1",
     "@esportsplus/typescript": "^0.25.0",
     "@esportsplus/utilities": "^0.27.2",
     "serve": "^14.2.5"
@@ -35,7 +35,7 @@
   },
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.38.0",
+  "version": "0.38.2",
   "scripts": {
     "build": "tsc",
     "build:test": "vite build --config test/vite.config.ts",

package/src/compiler/codegen.ts

@@ -1,7 +1,7 @@
 import type { ReplacementIntent } from '@esportsplus/typescript/compiler';
 import { ts } from '@esportsplus/typescript';
 import { ast, uid } from '@esportsplus/typescript/compiler';
-import { COMPILER_ENTRYPOINT, COMPILER_TYPES, DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS } from '~/constants';
+import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, COMPILER_NAMESPACE, COMPILER_TYPES, DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS } from '~/constants';
 import type { TemplateInfo } from './ts-parser';
 import { analyze } from './analyzer';
 import parser from './parser';
@@ -18,14 +18,12 @@ type Attribute = {
 
 type CodegenContext = {
     checker?: ts.TypeChecker;
-    imports: Map<string, string>;
     printer: ts.Printer;
     sourceFile: ts.SourceFile;
     templates: Map<string, string>;
 };
 
 type CodegenResult = {
-    imports: Map<string, string>;
     prepend: string[];
     replacements: ReplacementIntent[];
     templates: Map<string, string>;
@@ -54,18 +52,7 @@ const ARROW_EMPTY_PARAMS = /\(\s*\)\s*=>\s*$/;
 let printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
 
 
-function addImport(ctx: CodegenContext, name: string): string {
-    let alias = ctx.imports.get(name);
-
-    if (!alias) {
-        alias = uid(name);
-        ctx.imports.set(name, alias);
-    }
-
-    return alias;
-}
-
-function collectNestedTemplateReplacements(
+function collectNestedReplacements(
     ctx: CodegenContext,
     node: ts.Node,
     exprStart: number,
@@ -78,36 +65,44 @@ function collectNestedTemplateReplacements(
             start: node.getStart(ctx.sourceFile) - exprStart
         });
     }
+    else if (isReactiveCall(node as ts.Expression)) {
+        // Nested reactive calls need full ArraySlot construction (not just args)
+        replacements.push({
+            end: node.end - exprStart,
+            newText: rewriteNestedReactiveCall(ctx, node as ts.CallExpression),
+            start: node.getStart(ctx.sourceFile) - exprStart
+        });
+    }
     else {
-        ts.forEachChild(node, child => collectNestedTemplateReplacements(ctx, child, exprStart, replacements));
+        ts.forEachChild(node, child => collectNestedReplacements(ctx, child, exprStart, replacements));
     }
 }
 
-function generateAttributeBinding(ctx: CodegenContext, element: string, name: string, expr: string, staticValue: string): string {
+function generateAttributeBinding(element: string, name: string, expr: string, staticValue: string): string {
     if (name.startsWith('on') && name.length > 2) {
         let event = name.slice(2).toLowerCase(),
             key = name.toLowerCase();
 
         if (LIFECYCLE_EVENTS.has(key)) {
-            return `${addImport(ctx, key)}(${element}, ${expr});`;
+            return `${COMPILER_NAMESPACE}.${key}(${element}, ${expr});`;
         }
 
         if (DIRECT_ATTACH_EVENTS.has(key)) {
-            return `${addImport(ctx, 'on')}(${element}, '${event}', ${expr});`;
+            return `${COMPILER_NAMESPACE}.on(${element}, '${event}', ${expr});`;
         }
 
-        return `${addImport(ctx, 'delegate')}(${element}, '${event}', ${expr});`;
+        return `${COMPILER_NAMESPACE}.delegate(${element}, '${event}', ${expr});`;
     }
 
     if (name === 'class') {
-        return `${addImport(ctx, 'setClass')}(${element}, '${staticValue}', ${expr});`;
+        return `${COMPILER_NAMESPACE}.setClass(${element}, '${staticValue}', ${expr});`;
     }
 
     if (name === 'style') {
-        return `${addImport(ctx, 'setStyle')}(${element}, '${staticValue}', ${expr});`;
+        return `${COMPILER_NAMESPACE}.setStyle(${element}, '${staticValue}', ${expr});`;
     }
 
-    return `${addImport(ctx, 'setProperty')}(${element}, '${name}', ${expr});`;
+    return `${COMPILER_NAMESPACE}.setProperty(${element}, '${name}', ${expr});`;
 }
 
 function generateNestedTemplateCode(ctx: CodegenContext, node: ts.TaggedTemplateExpression): string {
@@ -142,30 +137,30 @@ function generateNestedTemplateCode(ctx: CodegenContext, node: ts.TaggedTemplate
 
 function generateNodeBinding(ctx: CodegenContext, anchor: string, exprText: string, exprNode: ts.Expression | undefined): string {
     if (!exprNode) {
-        return `${addImport(ctx, 'slot')}(${anchor}, ${exprText});`;
+        return `${COMPILER_NAMESPACE}.slot(${anchor}, ${exprText});`;
     }
 
     if (isNestedHtmlTemplate(exprNode)) {
-        return `${anchor}.parentNode.insertBefore(${generateNestedTemplateCode(ctx, exprNode)}, ${anchor});`;
+        return `${anchor}.parentNode!.insertBefore(${generateNestedTemplateCode(ctx, exprNode)}, ${anchor});`;
     }
 
     let slotType = analyze(exprNode, ctx.checker);
 
     switch (slotType) {
-        case COMPILER_TYPES.Effect:
-            return `new ${addImport(ctx, 'EffectSlot')}(${anchor}, ${exprText});`;
-
         case COMPILER_TYPES.ArraySlot:
-            return `new ${addImport(ctx, 'ArraySlot')}(${anchor}, ${exprText});`;
+            return `${anchor}.parentNode!.insertBefore(new ${COMPILER_NAMESPACE}.ArraySlot(${exprText}).fragment, ${anchor});`;
+
+        case COMPILER_TYPES.DocumentFragment:
+            return `${anchor}.parentNode!.insertBefore(${exprText}, ${anchor});`;
+
+        case COMPILER_TYPES.Effect:
+            return `new ${COMPILER_NAMESPACE}.EffectSlot(${anchor}, ${exprText});`;
 
         case COMPILER_TYPES.Static:
             return `${anchor}.textContent = ${exprText};`;
 
-        case COMPILER_TYPES.DocumentFragment:
-            return `${anchor}.parentNode.insertBefore(${exprText}, ${anchor});`;
-
         default:
-            return `${addImport(ctx, 'slot')}(${anchor}, ${exprText});`;
+            return `${COMPILER_NAMESPACE}.slot(${anchor}, ${exprText});`;
     }
 }
 
@@ -215,16 +210,15 @@ function generateTemplateCode(
             }
         }
 
-        let alias = addImport(ctx, 'Element'),
-            name = uid('element'),
+        let name = uid('element'),
             segments = path.slice(start),
             value = `${ancestor}.${segments.join('!.')}`;
 
         if (ancestor === root && segments[0] === 'firstChild') {
-            value = value.replace(`${ancestor}.firstChild!`, `(${ancestor}.firstChild! as ${alias})`);
+            value = value.replace(`${ancestor}.firstChild!`, `(${ancestor}.firstChild! as ${COMPILER_NAMESPACE}.Element)`);
         }
 
-        declarations.push(`${name} = ${value} as ${alias}`);
+        declarations.push(`${name} = ${value} as ${COMPILER_NAMESPACE}.Element`);
         nodes.set(key, name);
     }
 
@@ -247,14 +241,13 @@ function generateTemplateCode(
 
                 if (name === COMPILER_TYPES.Attributes) {
                     code.push(
-                        `${addImport(ctx, 'setProperties')}(${element}, ${exprTexts[index] || 'undefined'});`
+                        `${COMPILER_NAMESPACE}.setProperties(${element}, ${exprTexts[index] || 'undefined'});`
                     );
                     index++;
                 }
                 else {
                     code.push(
                         generateAttributeBinding(
-                            ctx,
                             element,
                             name,
                             exprTexts[index++] || 'undefined',
@@ -293,6 +286,16 @@ function isNestedHtmlTemplate(expr: ts.Expression): expr is ts.TaggedTemplateExp
     return ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === COMPILER_ENTRYPOINT;
 }
 
+function isReactiveCall(expr: ts.Expression): expr is ts.CallExpression {
+    return (
+        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
+    );
+}
+
 function replaceReverse(text: string, replacements: Replacement[]): string {
     let sorted = replacements.slice().sort((a, b) => b.start - a.start);
 
@@ -310,21 +313,96 @@ function rewriteExpression(ctx: CodegenContext, expr: ts.Expression): string {
         return generateNestedTemplateCode(ctx, expr);
     }
 
-    if (!ast.hasMatch(expr, n => isNestedHtmlTemplate(n as ts.Expression))) {
+    if (isReactiveCall(expr)) {
+        return rewriteReactiveCall(ctx, expr);
+    }
+
+    if (!ast.hasMatch(expr, n => isNestedHtmlTemplate(n as ts.Expression) || isReactiveCall(n as ts.Expression))) {
         return ctx.printer.printNode(ts.EmitHint.Expression, expr, ctx.sourceFile);
     }
 
     let replacements: Replacement[] = [];
 
-    collectNestedTemplateReplacements(ctx, expr, expr.getStart(ctx.sourceFile), replacements);
+    collectNestedReplacements(ctx, expr, expr.getStart(ctx.sourceFile), replacements);
 
     return replaceReverse(expr.getText(ctx.sourceFile), replacements);
 }
 
+// Returns just args "array, callback" - for direct slot usage where generateNodeBinding wraps it
+function rewriteReactiveCall(ctx: CodegenContext, node: ts.CallExpression): string {
+    let arrayArg = node.arguments[0],
+        arrayText = ctx.printer.printNode(ts.EmitHint.Expression, arrayArg, ctx.sourceFile),
+        callbackArg = node.arguments[1],
+        callbackText = rewriteExpression(ctx, callbackArg as ts.Expression);
+
+    return `${arrayText}, ${callbackText}`;
+}
+
+// Returns full "new ArraySlot(array, callback)" - for nested reactive calls inside expressions
+function rewriteNestedReactiveCall(ctx: CodegenContext, node: ts.CallExpression): string {
+    let arrayArg = node.arguments[0],
+        arrayText = ctx.printer.printNode(ts.EmitHint.Expression, arrayArg, ctx.sourceFile),
+        callbackArg = node.arguments[1],
+        callbackText = rewriteExpression(ctx, callbackArg as ts.Expression);
+
+    return `new ${COMPILER_NAMESPACE}.ArraySlot(${arrayText}, ${callbackText})`;
+}
+
+// Eager discovery - walk all expressions to find templates before prepend generation
+function discoverTemplatesInExpression(ctx: CodegenContext, node: ts.Node): void {
+    if (isNestedHtmlTemplate(node as ts.Expression)) {
+        let template = node as ts.TaggedTemplateExpression,
+            expressions: ts.Expression[] = [],
+            literals: string[] = [],
+            tpl = template.template;
+
+        if (ts.isNoSubstitutionTemplateLiteral(tpl)) {
+            literals.push(tpl.text);
+        }
+        else if (ts.isTemplateExpression(tpl)) {
+            literals.push(tpl.head.text);
+
+            for (let i = 0, n = tpl.templateSpans.length; i < n; i++) {
+                expressions.push(tpl.templateSpans[i].expression);
+                literals.push(tpl.templateSpans[i].literal.text);
+            }
+        }
+
+        let parsed = parser.parse(literals) as ParseResult;
+
+        getOrCreateTemplateId(ctx, parsed.html);
+
+        for (let i = 0, n = expressions.length; i < n; i++) {
+            discoverTemplatesInExpression(ctx, expressions[i]);
+        }
+    }
+    else if (isReactiveCall(node as ts.Expression)) {
+        let call = node as ts.CallExpression;
+
+        if (call.arguments.length >= 2) {
+            discoverTemplatesInExpression(ctx, call.arguments[1]);
+        }
+    }
+    else {
+        ts.forEachChild(node, child => discoverTemplatesInExpression(ctx, child));
+    }
+}
+
+function discoverAllTemplates(ctx: CodegenContext, templates: TemplateInfo[]): void {
+    for (let i = 0, n = templates.length; i < n; i++) {
+        let parsed = parser.parse(templates[i].literals) as ParseResult;
+
+        getOrCreateTemplateId(ctx, parsed.html);
+
+        for (let j = 0, m = templates[i].expressions.length; j < m; j++) {
+            discoverTemplatesInExpression(ctx, templates[i].expressions[j]);
+        }
+    }
+}
+
 
-const generateCode = (templates: TemplateInfo[], sourceFile: ts.SourceFile, checker?: ts.TypeChecker, existingAliases?: Map<string, string>): CodegenResult => {
+const generateCode = (templates: TemplateInfo[], sourceFile: ts.SourceFile, checker?: ts.TypeChecker): CodegenResult => {
     let result: CodegenResult = {
-        imports: existingAliases ?? new Map(),
         prepend: [],
         replacements: [],
         templates: new Map()
@@ -351,13 +429,11 @@ const generateCode = (templates: TemplateInfo[], sourceFile: ts.SourceFile, chec
     }
 
     let ctx: CodegenContext = {
-            checker,
-            imports: result.imports,
-            printer,
-            sourceFile,
-            templates: result.templates
-        },
-        templateAlias = addImport(ctx, 'template');
+        checker,
+        printer,
+        sourceFile,
+        templates: result.templates
+    };
 
     for (let i = 0, n = rootTemplates.length; i < n; i++) {
         let template = rootTemplates[i];
@@ -369,7 +445,6 @@ const generateCode = (templates: TemplateInfo[], sourceFile: ts.SourceFile, chec
                     isArrowBody = codeBefore.trimEnd().endsWith('=>'),
                     localCtx: CodegenContext = {
                         checker,
-                        imports: ctx.imports,
                         printer,
                         sourceFile: sf,
                         templates: ctx.templates
@@ -400,8 +475,11 @@ const generateCode = (templates: TemplateInfo[], sourceFile: ts.SourceFile, chec
         });
     }
 
+    // Eager discovery: find all templates before prepend generation
+    discoverAllTemplates(ctx, templates);
+
     for (let [html, id] of ctx.templates) {
-        result.prepend.push(`const ${id} = ${templateAlias}(\`${html}\`);`);
+        result.prepend.push(`const ${id} = ${COMPILER_NAMESPACE}.template(\`${html}\`);`);
     }
 
     return result;

package/src/compiler/index.ts

@@ -1,56 +1,94 @@
-import type { ImportIntent, Plugin, TransformContext } from '@esportsplus/typescript/compiler';
-import { COMPILER_ENTRYPOINT, PACKAGE } from '~/constants';
+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 reactiveInliningPlugin, { SHARED_KEY } from './reactive-inlining';
-import { findHtmlTemplates } from './ts-parser';
+import { findHtmlTemplates, findReactiveCalls } from './ts-parser';
 
 
-const PATTERNS = [`${COMPILER_ENTRYPOINT}\``];
+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;
+}
 
 
-const templatePlugin: Plugin = {
-    patterns: PATTERNS,
+let printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
+
+
+const plugin: Plugin = {
+    patterns: [
+        `${COMPILER_ENTRYPOINT}\``,
+        `${COMPILER_ENTRYPOINT}.${COMPILER_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);
 
-        if (templates.length === 0) {
-            return {};
+        // Build ranges for all template nodes - reactive calls inside these are handled by template codegen
+        let templateRanges: { end: number; start: number }[] = [];
+
+        for (let i = 0, n = templates.length; i < n; i++) {
+            templateRanges.push({
+                end: templates[i].end,
+                start: templates[i].start
+            });
         }
 
-        let existingAliases = new Map<string, string>(),
-            existingArraySlotAlias = ctx.shared.get(SHARED_KEY) as string | undefined;
+        // Transform standalone html.reactive() calls (exclude those inside templates)
+        let reactiveCalls = findReactiveCalls(ctx.sourceFile, ctx.checker);
 
-        if (existingArraySlotAlias) {
-            existingAliases.set('ArraySlot', existingArraySlotAlias);
-        }
+        for (let i = 0, n = reactiveCalls.length; i < n; i++) {
+            let call = reactiveCalls[i];
 
-        let result = generateCode(templates, ctx.sourceFile, ctx.checker, existingAliases);
+            // Skip reactive calls that are inside template expressions - handled by template codegen
+            if (isInRange(templateRanges, call.start, call.end)) {
+                continue;
+            }
 
-        if (result.replacements.length === 0) {
-            return {};
+            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
+            });
         }
 
-        let aliasedImports: string[] = [];
+        // Transform html`` templates
+        if (templates.length > 0) {
+            let result = generateCode(templates, ctx.sourceFile, ctx.checker);
 
-        for (let [name, alias] of result.imports) {
-            aliasedImports.push(`${name} as ${alias}`);
+            prepend.push(...result.prepend);
+            replacements.push(...result.replacements);
+            removeImports.push(COMPILER_ENTRYPOINT);
+        }
+
+        if (replacements.length === 0 && prepend.length === 0) {
+            return {};
         }
 
-        let imports: ImportIntent[] = [{
-            add: aliasedImports,
+        importsIntent.push({
+            namespace: COMPILER_NAMESPACE,
             package: PACKAGE,
-            remove: [COMPILER_ENTRYPOINT]
-        }];
+            remove: removeImports
+        });
 
         return {
-            imports,
-            prepend: result.prepend,
-            replacements: result.replacements
+            imports: importsIntent,
+            prepend,
+            replacements
         };
     }
 };
 
 
-export default templatePlugin;
-export { reactiveInliningPlugin, templatePlugin };
+export default plugin;

package/src/compiler/plugins/tsc.ts

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

package/src/compiler/plugins/vite.ts

@@ -1,9 +1,9 @@
 import { plugin } from '@esportsplus/typescript/compiler';
-import { PACKAGE } from '../../constants';
-import { reactiveInliningPlugin, templatePlugin } from '..';
+import { PACKAGE } from '~/constants';
+import templatePlugin from '..';
 
 
 export default plugin.vite({
     name: PACKAGE,
-    plugins: [reactiveInliningPlugin, templatePlugin]
+    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"
+    ]
+}

package/build/compiler/reactive-inlining.d.ts

@@ -1,5 +0,0 @@
-import type { Plugin } from '@esportsplus/typescript/compiler';
-declare const SHARED_KEY = "template:arraySlotAlias";
-declare const plugin: Plugin;
-export default plugin;
-export { SHARED_KEY };

package/build/compiler/reactive-inlining.js

@@ -1,75 +0,0 @@
-import { ts } from '@esportsplus/typescript';
-import { uid } from '@esportsplus/typescript/compiler';
-import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, PACKAGE } from '../constants.js';
-const PATTERNS = [`${COMPILER_ENTRYPOINT}.${COMPILER_ENTRYPOINT_REACTIVITY}`];
-const SHARED_KEY = 'template:arraySlotAlias';
-let printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
-function isHtmlFromPackage(node, checker) {
-    if (node.text !== COMPILER_ENTRYPOINT) {
-        return false;
-    }
-    if (!checker) {
-        return true;
-    }
-    let symbol = checker.getSymbolAtLocation(node);
-    if (!symbol) {
-        return true;
-    }
-    if (symbol.flags & ts.SymbolFlags.Alias) {
-        symbol = checker.getAliasedSymbol(symbol);
-    }
-    let declarations = symbol.getDeclarations();
-    if (!declarations || declarations.length === 0) {
-        return true;
-    }
-    for (let i = 0, n = declarations.length; i < n; i++) {
-        let filename = declarations[i].getSourceFile().fileName;
-        if (filename.includes(PACKAGE) || filename.includes('@esportsplus/template')) {
-            return true;
-        }
-    }
-    return false;
-}
-function visit(node, calls, checker) {
-    if (ts.isCallExpression(node) &&
-        ts.isPropertyAccessExpression(node.expression) &&
-        ts.isIdentifier(node.expression.expression) &&
-        node.expression.name.text === COMPILER_ENTRYPOINT_REACTIVITY &&
-        node.arguments.length === 2 &&
-        isHtmlFromPackage(node.expression.expression, checker)) {
-        calls.push({
-            arrayArg: node.arguments[0],
-            callbackArg: node.arguments[1],
-            node
-        });
-    }
-    ts.forEachChild(node, child => visit(child, calls, checker));
-}
-const plugin = {
-    patterns: PATTERNS,
-    transform: (ctx) => {
-        let calls = [];
-        visit(ctx.sourceFile, calls, ctx.checker);
-        if (calls.length === 0) {
-            return {};
-        }
-        let arraySlotAlias = uid('ArraySlot'), replacements = [];
-        ctx.shared.set(SHARED_KEY, arraySlotAlias);
-        for (let i = 0, n = calls.length; i < n; i++) {
-            let call = calls[i];
-            replacements.push({
-                generate: (sourceFile) => `new ${arraySlotAlias}(${printer.printNode(ts.EmitHint.Expression, call.arrayArg, sourceFile)}, ${printer.printNode(ts.EmitHint.Expression, call.callbackArg, sourceFile)})`,
-                node: call.node
-            });
-        }
-        return {
-            imports: [{
-                    add: [`ArraySlot as ${arraySlotAlias}`],
-                    package: PACKAGE
-                }],
-            replacements
-        };
-    }
-};
-export default plugin;
-export { SHARED_KEY };

package/src/compiler/reactive-inlining.ts

@@ -1,116 +0,0 @@
-import type { Plugin, ReplacementIntent, TransformContext } from '@esportsplus/typescript/compiler';
-import { ts } from '@esportsplus/typescript';
-import { uid } from '@esportsplus/typescript/compiler';
-import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, PACKAGE } from '~/constants';
-
-
-type ReactiveCallInfo = {
-    arrayArg: ts.Expression;
-    callbackArg: ts.Expression;
-    node: ts.CallExpression;
-};
-
-
-const PATTERNS = [`${COMPILER_ENTRYPOINT}.${COMPILER_ENTRYPOINT_REACTIVITY}`];
-
-const SHARED_KEY = 'template:arraySlotAlias';
-
-
-let printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
-
-
-function isHtmlFromPackage(node: ts.Identifier, checker: ts.TypeChecker | undefined): boolean {
-    if (node.text !== COMPILER_ENTRYPOINT) {
-        return false;
-    }
-
-    if (!checker) {
-        return true;
-    }
-
-    let symbol = checker.getSymbolAtLocation(node);
-
-    if (!symbol) {
-        return true;
-    }
-
-    if (symbol.flags & ts.SymbolFlags.Alias) {
-        symbol = checker.getAliasedSymbol(symbol);
-    }
-
-    let declarations = symbol.getDeclarations();
-
-    if (!declarations || declarations.length === 0) {
-        return true;
-    }
-
-    for (let i = 0, n = declarations.length; i < n; i++) {
-        let filename = declarations[i].getSourceFile().fileName;
-
-        if (filename.includes(PACKAGE) || filename.includes('@esportsplus/template')) {
-            return true;
-        }
-    }
-
-    return false;
-}
-
-function visit(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.arguments.length === 2 &&
-        isHtmlFromPackage(node.expression.expression, checker)
-    ) {
-        calls.push({
-            arrayArg: node.arguments[0],
-            callbackArg: node.arguments[1],
-            node
-        });
-    }
-
-    ts.forEachChild(node, child => visit(child, calls, checker));
-}
-
-
-const plugin: Plugin = {
-    patterns: PATTERNS,
-
-    transform: (ctx: TransformContext) => {
-        let calls: ReactiveCallInfo[] = [];
-
-        visit(ctx.sourceFile, calls, ctx.checker);
-
-        if (calls.length === 0) {
-            return {};
-        }
-
-        let arraySlotAlias = uid('ArraySlot'),
-            replacements: ReplacementIntent[] = [];
-
-        ctx.shared.set(SHARED_KEY, arraySlotAlias);
-
-        for (let i = 0, n = calls.length; i < n; i++) {
-            let call = calls[i];
-
-            replacements.push({
-                generate: (sourceFile) => `new ${arraySlotAlias}(${printer.printNode(ts.EmitHint.Expression, call.arrayArg, sourceFile)}, ${printer.printNode(ts.EmitHint.Expression, call.callbackArg, sourceFile)})`,
-                node: call.node
-            });
-        }
-
-        return {
-            imports: [{
-                add: [`ArraySlot as ${arraySlotAlias}`],
-                package: PACKAGE
-            }],
-            replacements
-        };
-    }
-};
-
-
-export default plugin;
-export { SHARED_KEY };