@esportsplus/template 0.32.0 → 0.32.1

package/build/attributes.js

@@ -1,10 +1,9 @@
 import { effect } from '@esportsplus/reactivity';
 import { isArray, isObject } from '@esportsplus/utilities';
-import { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS, STATE_HYDRATING, STATE_NONE, STATE_WAITING } from './constants.js';
+import { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS, STATE_HYDRATING, STATE_NONE, STATE_WAITING, STORE } from './constants.js';
 import { raf } from './utilities.js';
 import q from '@esportsplus/queue';
 import event from './event/index.js';
-const STORE = Symbol();
 let delimiters = {
     class: ' ',
     style: ';'

package/build/constants.d.ts

@@ -1,10 +1,25 @@
 declare const ARRAY_SLOT: unique symbol;
 declare const CLEANUP: unique symbol;
-declare const EMPTY_FRAGMENT: DocumentFragment;
+declare const COMPILER_ENTRYPOINT = "html";
+declare const COMPILER_ENTRYPOINT_REACTIVITY = "reactive";
+declare const COMPILER_NAMESPACE: string;
+declare const enum COMPILER_TYPES {
+    ArraySlot = 0,
+    AttributeSlot = 1,
+    AttributeSpreadSlot = 2,
+    DocumentFragment = 3,
+    Effect = 4,
+    NodeSlot = 5,
+    Primitive = 6,
+    Static = 7,
+    Unknown = 8
+}
+declare const DIRECT_ATTACH_EVENTS: Set<string>;
+declare const LIFECYCLE_EVENTS: Set<string>;
+declare const PACKAGE = "@esportsplus/template";
 declare const SLOT_HTML = "<!--$-->";
 declare const STATE_HYDRATING = 0;
 declare const STATE_NONE = 1;
 declare const STATE_WAITING = 2;
 declare const STORE: unique symbol;
-export { ARRAY_SLOT, CLEANUP, EMPTY_FRAGMENT, SLOT_HTML, STATE_HYDRATING, STATE_NONE, STATE_WAITING, STORE };
-export * from './event/constants.js';
+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,11 +1,38 @@
-import { fragment } from './utilities.js';
+import { uid } from '@esportsplus/typescript/transformer';
 const ARRAY_SLOT = Symbol('template.array.slot');
 const CLEANUP = Symbol('template.cleanup');
-const EMPTY_FRAGMENT = fragment('');
+const COMPILER_ENTRYPOINT = 'html';
+const COMPILER_ENTRYPOINT_REACTIVITY = 'reactive';
+const COMPILER_NAMESPACE = uid('template');
+var COMPILER_TYPES;
+(function (COMPILER_TYPES) {
+    COMPILER_TYPES[COMPILER_TYPES["ArraySlot"] = 0] = "ArraySlot";
+    COMPILER_TYPES[COMPILER_TYPES["AttributeSlot"] = 1] = "AttributeSlot";
+    COMPILER_TYPES[COMPILER_TYPES["AttributeSpreadSlot"] = 2] = "AttributeSpreadSlot";
+    COMPILER_TYPES[COMPILER_TYPES["DocumentFragment"] = 3] = "DocumentFragment";
+    COMPILER_TYPES[COMPILER_TYPES["Effect"] = 4] = "Effect";
+    COMPILER_TYPES[COMPILER_TYPES["NodeSlot"] = 5] = "NodeSlot";
+    COMPILER_TYPES[COMPILER_TYPES["Primitive"] = 6] = "Primitive";
+    COMPILER_TYPES[COMPILER_TYPES["Static"] = 7] = "Static";
+    COMPILER_TYPES[COMPILER_TYPES["Unknown"] = 8] = "Unknown";
+})(COMPILER_TYPES || (COMPILER_TYPES = {}));
+;
+const DIRECT_ATTACH_EVENTS = new Set([
+    'onblur',
+    'onerror',
+    'onfocus', 'onfocusin', 'onfocusout',
+    'onload',
+    'onplay', 'onpause', 'onended', 'ontimeupdate',
+    'onreset',
+    'onscroll', 'onsubmit'
+]);
+const LIFECYCLE_EVENTS = new Set([
+    'onconnect', 'ondisconnect', 'onrender', 'onresize', 'ontick'
+]);
+const PACKAGE = '@esportsplus/template';
 const SLOT_HTML = '<!--$-->';
 const STATE_HYDRATING = 0;
 const STATE_NONE = 1;
 const STATE_WAITING = 2;
 const STORE = Symbol('template.store');
-export { ARRAY_SLOT, CLEANUP, EMPTY_FRAGMENT, SLOT_HTML, STATE_HYDRATING, STATE_NONE, STATE_WAITING, STORE };
-export * from './event/constants.js';
+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/html.d.ts

@@ -1,9 +1,9 @@
-import { ReactiveArray } from '@esportsplus/reactivity';
+import { Reactive } from '@esportsplus/reactivity';
 import { Attribute, Attributes, Renderable } from './types.js';
 import { ArraySlot } from './slot/array.js';
-type Values<T> = Attribute | Attributes<any> | ArraySlot<T> | Renderable<T>;
+type Values<T> = ArraySlot<T extends unknown[] ? T : never> | Attribute | Attributes<any> | Renderable<T>;
 declare const html: {
     <T>(_literals: TemplateStringsArray, ..._values: (Values<T> | Values<T>[])[]): DocumentFragment;
-    reactive<T>(_arr: ReactiveArray<T>, _template: (value: T) => DocumentFragment): ArraySlot<T>;
+    reactive<T>(_arr: Reactive<T[]>, _template: (value: T) => DocumentFragment): ArraySlot<T[]>;
 };
 export default html;

package/build/slot/array.d.ts

@@ -1,4 +1,4 @@
-import { ReactiveArray } from '@esportsplus/reactivity';
+import { Reactive } from '@esportsplus/reactivity';
 import html from '../html.js';
 declare class ArraySlot<T> {
     private array;
@@ -9,7 +9,7 @@ declare class ArraySlot<T> {
     private signal;
     private template;
     readonly fragment: DocumentFragment;
-    constructor(array: ReactiveArray<T>, template: ((value: T) => ReturnType<typeof html>));
+    constructor(array: Reactive<T[]>, template: ((value: Reactive<T[]>[number]) => ReturnType<typeof html>));
     private anchor;
     private clear;
     private pop;

package/build/slot/array.js

@@ -1,7 +1,8 @@
-import { read, root, set, signal } from '@esportsplus/reactivity';
-import { ARRAY_SLOT, EMPTY_FRAGMENT } from '../constants.js';
-import { clone, marker, raf } from '../utilities.js';
+import { read, root, signal, write } from '@esportsplus/reactivity';
+import { ARRAY_SLOT } from '../constants.js';
+import { clone, fragment, marker, raf } from '../utilities.js';
 import { ondisconnect, remove } from './cleanup.js';
+const EMPTY_FRAGMENT = fragment('');
 class ArraySlot {
     array;
     marker;
@@ -129,7 +130,7 @@ class ArraySlot {
                     }
                 }
             });
-            set(this.signal, this.nodes.length);
+            write(this.signal, this.nodes.length);
         });
     }
     shift() {

package/build/slot/render.js

@@ -1,6 +1,7 @@
 import { isArray } from '@esportsplus/utilities';
-import { ARRAY_SLOT, EMPTY_FRAGMENT } from '../constants.js';
-import { clone, text } from '../utilities.js';
+import { ARRAY_SLOT } from '../constants.js';
+import { clone, fragment, text } from '../utilities.js';
+const EMPTY_FRAGMENT = fragment('');
 export default function render(anchor, value) {
     if (value == null || value === false || value === '') {
         return EMPTY_FRAGMENT;

package/build/transformer/codegen.d.ts

@@ -5,14 +5,8 @@ type CodegenResult = {
     code: string;
 };
 declare const addArraySlotImport: (code: string) => string;
-declare const generateCode: (templates: TemplateInfo[], originalCode: string, sourceFile: ts.SourceFile) => CodegenResult;
+declare const generateCode: (templates: TemplateInfo[], originalCode: string, sourceFile: ts.SourceFile, checker?: ts.TypeChecker) => CodegenResult;
 declare const generateReactiveInlining: (calls: ReactiveCallInfo[], code: string, sourceFile: ts.SourceFile) => string;
-declare const getNames: () => {
-    attr: string;
-    event: string;
-    slot: string;
-};
 declare const needsArraySlotImport: (sourceFile: ts.SourceFile) => boolean;
-declare const setTypeChecker: (checker: ts.TypeChecker | undefined) => void;
-export { addArraySlotImport, generateCode, generateReactiveInlining, getNames, needsArraySlotImport, setTypeChecker };
+export { addArraySlotImport, generateCode, generateReactiveInlining, needsArraySlotImport };
 export type { CodegenResult };

package/build/transformer/codegen.js

@@ -1,42 +1,23 @@
-import { addImport, applyReplacementsReverse, uid } from '@esportsplus/typescript/transformer';
+import { code as c, uid } from '@esportsplus/typescript/transformer';
 import { analyzeExpression, generateAttributeBinding, generateSpreadBindings } from './type-analyzer.js';
 import { ts } from '@esportsplus/typescript';
+import { COMPILER_ENTRYPOINT, COMPILER_NAMESPACE, COMPILER_TYPES, PACKAGE } from '../constants.js';
 import parser from './parser.js';
 const ARROW_EMPTY_PARAMS = /\(\s*\)\s*=>\s*$/;
-let currentChecker, hoistedFactories = new Map(), htmlToTemplateId = new Map(), nameArraySlot = '', nameAttr = '', nameEffectSlot = '', nameEvent = '', nameSlot = '', nameTemplate = '', needsArraySlot = false, needsAttr = false, needsEffectSlot = false, needsEvent = false, needsSlot = false;
-function collectNestedTemplateReplacements(node, exprStart, sourceFile, replacements) {
+let printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed });
+function collectNestedTemplateReplacements(ctx, node, exprStart, replacements) {
     if (isNestedHtmlTemplate(node)) {
         replacements.push({
             end: node.end - exprStart,
-            newText: generateNestedTemplateCode(node, sourceFile),
+            newText: generateNestedTemplateCode(ctx, node),
             start: node.getStart() - exprStart
         });
     }
     else {
-        ts.forEachChild(node, child => collectNestedTemplateReplacements(child, exprStart, sourceFile, replacements));
+        ts.forEachChild(node, child => collectNestedTemplateReplacements(ctx, child, exprStart, replacements));
     }
 }
-function generateImports() {
-    let specifiers = [];
-    if (needsArraySlot) {
-        specifiers.push(`ArraySlot as ${nameArraySlot}`);
-    }
-    if (needsEffectSlot) {
-        specifiers.push(`EffectSlot as ${nameEffectSlot}`);
-    }
-    if (needsAttr) {
-        specifiers.push(`attributes as ${nameAttr}`);
-    }
-    if (needsEvent) {
-        specifiers.push(`event as ${nameEvent}`);
-    }
-    if (needsSlot) {
-        specifiers.push(`slot as ${nameSlot}`);
-    }
-    specifiers.push(`template as ${nameTemplate}`);
-    return `import { ${specifiers.join(', ')} } from '@esportsplus/template';`;
-}
-function generateNestedTemplateCode(node, sourceFile) {
+function generateNestedTemplateCode(ctx, node) {
     let expressions = [], exprTexts = [], literals = [], template = node.template;
     if (ts.isNoSubstitutionTemplateLiteral(template)) {
         literals.push(template.text);
@@ -47,42 +28,38 @@ function generateNestedTemplateCode(node, sourceFile) {
             let expr = template.templateSpans[i].expression;
             expressions.push(expr);
             literals.push(template.templateSpans[i].literal.text);
-            exprTexts.push(rewriteExpression(expr, sourceFile));
+            exprTexts.push(rewriteExpression(ctx, expr));
         }
     }
-    return generateTemplateCode(parser.parse(literals), exprTexts, expressions, sourceFile, false);
+    return generateTemplateCode(ctx, parser.parse(literals), exprTexts, expressions, false);
 }
-function generateNodeBinding(anchor, exprText, exprNode, sourceFile) {
+function generateNodeBinding(ctx, anchor, exprText, exprNode) {
     if (!exprNode) {
-        needsSlot = true;
-        return `${nameSlot}(${anchor}, ${exprText});`;
+        return `${COMPILER_NAMESPACE}.slot(${anchor}, ${exprText});`;
     }
     if (isNestedHtmlTemplate(exprNode)) {
-        return `${anchor}.parentNode.insertBefore(${generateNestedTemplateCode(exprNode, sourceFile)}, ${anchor});`;
+        return `${anchor}.parentNode.insertBefore(${generateNestedTemplateCode(ctx, exprNode)}, ${anchor});`;
     }
-    let slotType = analyzeExpression(exprNode, currentChecker);
+    let slotType = analyzeExpression(exprNode, ctx.checker);
     switch (slotType) {
-        case 'effect':
-            needsEffectSlot = true;
-            return `new ${nameEffectSlot}(${anchor}, ${exprText});`;
-        case 'array-slot':
-            needsArraySlot = true;
-            return `new ${nameArraySlot}(${anchor}, ${exprText});`;
-        case 'static':
+        case COMPILER_TYPES.Effect:
+            return `new ${COMPILER_NAMESPACE}.EffectSlot(${anchor}, ${exprText});`;
+        case COMPILER_TYPES.ArraySlot:
+            return `new ${COMPILER_NAMESPACE}.ArraySlot(${anchor}, ${exprText});`;
+        case COMPILER_TYPES.Static:
             return `${anchor}.textContent = ${exprText};`;
-        case 'document-fragment':
+        case COMPILER_TYPES.DocumentFragment:
             return `${anchor}.parentNode.insertBefore(${exprText}, ${anchor});`;
         default:
-            needsSlot = true;
-            return `${nameSlot}(${anchor}, ${exprText});`;
+            return `${COMPILER_NAMESPACE}.slot(${anchor}, ${exprText});`;
     }
 }
-function generateTemplateCode({ html, slots }, exprTexts, exprNodes, sourceFile, isArrowBody) {
+function generateTemplateCode(ctx, { html, slots }, exprTexts, exprNodes, isArrowBody) {
     if (!slots || slots.length === 0) {
-        return `${getOrCreateTemplateId(html)}()`;
+        return `${getOrCreateTemplateId(ctx, html)}()`;
     }
     let code = [], declarations = [], index = 0, nodes = new Map(), root = uid('root');
-    declarations.push(`${root} = ${getOrCreateTemplateId(html)}()`);
+    declarations.push(`${root} = ${getOrCreateTemplateId(ctx, html)}()`);
     nodes.set('', root);
     for (let i = 0, n = slots.length; i < n; i++) {
         let path = slots[i].path;
@@ -111,26 +88,24 @@ function generateTemplateCode({ html, slots }, exprTexts, exprNodes, sourceFile,
         let elementVar = slots[i].path.length === 0
             ? root
             : (nodes.get(slots[i].path.join('.')) || root), slot = slots[i];
-        if (slot.type === 'attributes') {
+        if (slot.type === COMPILER_TYPES.AttributeSlot) {
             for (let j = 0, m = slot.attributes.names.length; j < m; j++) {
                 let name = slot.attributes.names[j];
                 if (name === 'spread') {
-                    let bindings = generateSpreadBindings(exprNodes[index], exprTexts[index] || 'undefined', elementVar, sourceFile, currentChecker);
+                    let bindings = generateSpreadBindings(exprNodes[index], exprTexts[index] || 'undefined', elementVar, ctx.sourceFile, ctx.checker, COMPILER_NAMESPACE);
                     for (let k = 0, o = bindings.length; k < o; k++) {
-                        trackBindingUsage(bindings[k]);
                         code.push(bindings[k]);
                     }
                     index++;
                 }
                 else {
-                    let binding = generateAttributeBinding(elementVar, name, exprTexts[index++] || 'undefined', slot.attributes.statics[name] || '');
-                    trackBindingUsage(binding);
+                    let binding = generateAttributeBinding(elementVar, name, exprTexts[index++] || 'undefined', slot.attributes.statics[name] || '', COMPILER_NAMESPACE);
                     code.push(binding);
                 }
             }
         }
         else {
-            code.push(generateNodeBinding(elementVar, exprTexts[index] || 'undefined', exprNodes[index], sourceFile));
+            code.push(generateNodeBinding(ctx, elementVar, exprTexts[index] || 'undefined', exprNodes[index]));
             index++;
         }
     }
@@ -138,12 +113,12 @@ function generateTemplateCode({ html, slots }, exprTexts, exprNodes, sourceFile,
     code.push(isArrowBody ? `}` : `})()`);
     return code.join('\n');
 }
-function getOrCreateTemplateId(html) {
-    let id = htmlToTemplateId.get(html);
+function getOrCreateTemplateId(ctx, html) {
+    let id = ctx.htmlToTemplateId.get(html);
     if (!id) {
         id = uid('tmpl');
-        hoistedFactories.set(id, html);
-        htmlToTemplateId.set(html, id);
+        ctx.hoistedFactories.set(id, html);
+        ctx.htmlToTemplateId.set(html, id);
     }
     return id;
 }
@@ -165,98 +140,78 @@ function hasArraySlotImport(sourceFile) {
     }
     return false;
 }
-function hasArraySlotUsage(node) {
-    if (ts.isNewExpression(node) &&
-        ts.isIdentifier(node.expression) &&
-        node.expression.text === 'ArraySlot') {
+function hasMatch(node, predicate) {
+    if (predicate(node)) {
         return true;
     }
     let found = false;
     ts.forEachChild(node, child => {
-        if (!found && hasArraySlotUsage(child)) {
-            found = true;
+        if (!found) {
+            found = hasMatch(child, predicate);
         }
     });
     return found;
 }
+function hasArraySlotUsage(node) {
+    return hasMatch(node, n => ts.isNewExpression(n) &&
+        ts.isPropertyAccessExpression(n.expression) &&
+        n.expression.name.text === 'ArraySlot');
+}
 function hasNestedTemplates(node) {
-    if (isNestedHtmlTemplate(node)) {
-        return true;
-    }
-    let found = false;
-    ts.forEachChild(node, child => {
-        if (!found && hasNestedTemplates(child)) {
-            found = true;
-        }
-    });
-    return found;
+    return hasMatch(node, n => isNestedHtmlTemplate(n));
 }
 function isNestedHtmlTemplate(expr) {
-    return ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === 'html';
+    return ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === COMPILER_ENTRYPOINT;
 }
-function isNestedTemplate(template, allTemplates) {
-    for (let i = 0, n = allTemplates.length; i < n; i++) {
-        let other = allTemplates[i];
-        if (other === template) {
-            continue;
-        }
-        for (let j = 0, m = other.expressions.length; j < m; j++) {
-            let expr = other.expressions[j];
-            if (template.start >= expr.getStart() && template.end <= expr.end) {
-                return true;
-            }
+function isNestedTemplate(template, exprRanges) {
+    for (let i = 0, n = exprRanges.length; i < n; i++) {
+        let range = exprRanges[i];
+        if (template.start >= range.start && template.end <= range.end) {
+            return true;
         }
     }
     return false;
 }
-function rewriteExpression(expr, sourceFile) {
+function rewriteExpression(ctx, expr) {
     if (isNestedHtmlTemplate(expr)) {
-        return generateNestedTemplateCode(expr, sourceFile);
+        return generateNestedTemplateCode(ctx, expr);
     }
     if (!hasNestedTemplates(expr)) {
-        return ts.createPrinter({ newLine: ts.NewLineKind.LineFeed }).printNode(ts.EmitHint.Expression, expr, sourceFile);
+        return ctx.printer.printNode(ts.EmitHint.Expression, expr, ctx.sourceFile);
     }
     let exprStart = expr.getStart(), replacements = [];
-    collectNestedTemplateReplacements(expr, exprStart, sourceFile, replacements);
-    return applyReplacementsReverse(expr.getText(sourceFile), replacements);
-}
-function trackBindingUsage(binding) {
-    if (binding.startsWith(nameEvent + '.')) {
-        needsEvent = true;
-    }
-    else if (binding.startsWith(nameAttr + '.')) {
-        needsAttr = true;
-    }
+    collectNestedTemplateReplacements(ctx, expr, exprStart, replacements);
+    return c.replaceReverse(expr.getText(ctx.sourceFile), replacements);
 }
 const addArraySlotImport = (code) => {
-    return addImport(code, '@esportsplus/template', ['ArraySlot']);
+    return `import * as ${COMPILER_NAMESPACE} from '${PACKAGE}';\n` + code;
 };
-const generateCode = (templates, originalCode, sourceFile) => {
+const generateCode = (templates, originalCode, sourceFile, checker) => {
     if (templates.length === 0) {
         return { changed: false, code: originalCode };
     }
-    hoistedFactories.clear();
-    htmlToTemplateId.clear();
-    nameArraySlot = uid('ArraySlot');
-    nameAttr = uid('attr');
-    nameEffectSlot = uid('EffectSlot');
-    nameEvent = uid('event');
-    nameSlot = uid('slot');
-    nameTemplate = uid('template');
-    needsArraySlot = false;
-    needsAttr = false;
-    needsEffectSlot = false;
-    needsEvent = false;
-    needsSlot = false;
-    let rootTemplates = templates.filter(t => !isNestedTemplate(t, templates));
+    let exprRanges = [];
+    for (let i = 0, n = templates.length; i < n; i++) {
+        let exprs = templates[i].expressions;
+        for (let j = 0, m = exprs.length; j < m; j++) {
+            exprRanges.push({ end: exprs[j].end, start: exprs[j].getStart() });
+        }
+    }
+    let rootTemplates = templates.filter(t => !isNestedTemplate(t, exprRanges));
     if (rootTemplates.length === 0) {
         return { changed: false, code: originalCode };
     }
-    let replacements = [];
+    let ctx = {
+        checker,
+        hoistedFactories: new Map(),
+        htmlToTemplateId: new Map(),
+        printer,
+        sourceFile
+    }, replacements = [];
     for (let i = 0, n = rootTemplates.length; i < n; i++) {
         let exprTexts = [], template = rootTemplates[i];
         for (let j = 0, m = template.expressions.length; j < m; j++) {
-            exprTexts.push(rewriteExpression(template.expressions[j], sourceFile));
+            exprTexts.push(rewriteExpression(ctx, template.expressions[j]));
         }
         let codeBefore = originalCode.slice(0, template.start), isArrowBody = codeBefore.trimEnd().endsWith('=>'), parsed = parser.parse(template.literals);
         if (isArrowBody && (!parsed.slots || parsed.slots.length === 0)) {
@@ -264,7 +219,7 @@ const generateCode = (templates, originalCode, sourceFile) => {
             if (arrowMatch) {
                 replacements.push({
                     end: template.end,
-                    newText: getOrCreateTemplateId(parsed.html),
+                    newText: getOrCreateTemplateId(ctx, parsed.html),
                     start: template.start - arrowMatch[0].length
                 });
                 continue;
@@ -272,17 +227,17 @@ const generateCode = (templates, originalCode, sourceFile) => {
         }
         replacements.push({
             end: template.end,
-            newText: generateTemplateCode(parsed, exprTexts, template.expressions, sourceFile, isArrowBody),
+            newText: generateTemplateCode(ctx, parsed, exprTexts, template.expressions, isArrowBody),
             start: template.start
         });
     }
-    let changed = replacements.length > 0, code = applyReplacementsReverse(originalCode, replacements);
-    if (changed && hoistedFactories.size > 0) {
+    let changed = replacements.length > 0, code = c.replaceReverse(originalCode, replacements);
+    if (changed && ctx.hoistedFactories.size > 0) {
         let factories = [];
-        for (let [id, html] of hoistedFactories) {
-            factories.push(`const ${id} = ${nameTemplate}(\`${html}\`);`);
+        for (let [id, html] of ctx.hoistedFactories) {
+            factories.push(`const ${id} = ${COMPILER_NAMESPACE}.template(\`${html}\`);`);
         }
-        code = generateImports() + '\n\n' + factories.join('\n') + '\n\n' + code;
+        code = `import * as ${COMPILER_NAMESPACE} from '${PACKAGE}';\n\n` + factories.join('\n') + '\n\n' + code;
     }
     return { changed, code };
 };
@@ -290,27 +245,21 @@ const generateReactiveInlining = (calls, code, sourceFile) => {
     if (calls.length === 0) {
         return code;
     }
-    let printer = ts.createPrinter({ newLine: ts.NewLineKind.LineFeed }), result = code;
-    for (let i = calls.length - 1; i >= 0; i--) {
+    let replacements = [];
+    for (let i = 0, n = calls.length; i < n; i++) {
         let call = calls[i];
-        result = result.slice(0, call.start);
-        result += `new ${nameArraySlot}(
+        replacements.push({
+            end: call.end,
+            newText: `new ${COMPILER_NAMESPACE}.ArraySlot(
                 ${printer.printNode(ts.EmitHint.Expression, call.arrayArg, sourceFile)},
                 ${printer.printNode(ts.EmitHint.Expression, call.callbackArg, sourceFile)}
-            )`;
-        result += result.slice(call.end);
+            )`,
+            start: call.start
+        });
     }
-    return result;
+    return c.replaceReverse(code, replacements);
 };
-const getNames = () => ({
-    attr: nameAttr,
-    event: nameEvent,
-    slot: nameSlot
-});
 const needsArraySlotImport = (sourceFile) => {
     return hasArraySlotUsage(sourceFile) && !hasArraySlotImport(sourceFile);
 };
-const setTypeChecker = (checker) => {
-    currentChecker = checker;
-};
-export { addArraySlotImport, generateCode, generateReactiveInlining, getNames, needsArraySlotImport, setTypeChecker };
+export { addArraySlotImport, generateCode, generateReactiveInlining, needsArraySlotImport };

package/build/transformer/index.d.ts

@@ -1,4 +1,3 @@
-import { mightNeedTransform } from '@esportsplus/typescript/transformer';
 import { ts } from '@esportsplus/typescript';
 type TransformResult = {
     changed: boolean;
@@ -8,5 +7,5 @@ type TransformResult = {
 declare const PATTERNS: string[];
 declare function createTransformer(program: ts.Program): ts.TransformerFactory<ts.SourceFile>;
 declare const transform: (sourceFile: ts.SourceFile, program: ts.Program) => TransformResult;
-export type { TransformResult };
-export { createTransformer, mightNeedTransform, PATTERNS, transform };
+declare const transformCode: (code: string, sourceFile: ts.SourceFile, checker?: ts.TypeChecker) => TransformResult;
+export { createTransformer, transform, transformCode, PATTERNS };

package/build/transformer/index.js

@@ -1,18 +1,18 @@
-import { mightNeedTransform } from '@esportsplus/typescript/transformer';
-import { addArraySlotImport, generateCode, generateReactiveInlining, needsArraySlotImport, setTypeChecker } from './codegen.js';
+import { code as c } from '@esportsplus/typescript/transformer';
+import { addArraySlotImport, generateCode, generateReactiveInlining, needsArraySlotImport } from './codegen.js';
+import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY } from '../constants.js';
 import { findHtmlTemplates, findReactiveCalls } from './ts-parser.js';
 import { ts } from '@esportsplus/typescript';
-const PATTERNS = ['html`', 'html.reactive'];
+const PATTERNS = [`${COMPILER_ENTRYPOINT}\``, `${COMPILER_ENTRYPOINT}.${COMPILER_ENTRYPOINT_REACTIVITY}`];
 function createTransformer(program) {
     let typeChecker = program.getTypeChecker();
     return (_context) => {
         return (sourceFile) => {
             let code = sourceFile.getFullText();
-            if (!mightNeedTransform(code, { patterns: PATTERNS })) {
+            if (!c.contains(code, { patterns: PATTERNS })) {
                 return sourceFile;
             }
-            setTypeChecker(typeChecker);
-            let result = transformCode(code, sourceFile);
+            let result = transformCode(code, sourceFile, typeChecker);
             if (!result.changed) {
                 return sourceFile;
             }
@@ -20,43 +20,44 @@ function createTransformer(program) {
         };
     };
 }
-function transformCode(code, sourceFile) {
-    let changed = false, result = code;
-    let reactiveCalls = findReactiveCalls(sourceFile);
+const transform = (sourceFile, program) => {
+    let code = sourceFile.getFullText();
+    if (!c.contains(code, { patterns: PATTERNS })) {
+        return { changed: false, code, sourceFile };
+    }
+    let checker, fileName = sourceFile.fileName, programSourceFile = program.getSourceFile(fileName)
+        || program.getSourceFile(fileName.replace(/\\/g, '/'))
+        || program.getSourceFile(fileName.replace(/\//g, '\\'));
+    if (programSourceFile) {
+        checker = program.getTypeChecker();
+        sourceFile = programSourceFile;
+    }
+    return transformCode(code, sourceFile, checker);
+};
+const transformCode = (code, sourceFile, checker) => {
+    let changed = false, codegenChanged = false, needsImport = false, result = code, reactiveCalls = findReactiveCalls(sourceFile);
     if (reactiveCalls.length > 0) {
         result = generateReactiveInlining(reactiveCalls, result, sourceFile);
         changed = true;
         sourceFile = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
-        if (needsArraySlotImport(sourceFile)) {
-            result = addArraySlotImport(result);
-            sourceFile = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
-        }
-        setTypeChecker(undefined);
+        needsImport = needsArraySlotImport(sourceFile);
+        checker = undefined;
     }
     let templates = findHtmlTemplates(sourceFile);
     if (templates.length > 0) {
-        let codegenResult = generateCode(templates, result, sourceFile);
+        let codegenResult = generateCode(templates, result, sourceFile, checker);
         if (codegenResult.changed) {
             changed = true;
+            codegenChanged = true;
             result = codegenResult.code;
-            sourceFile = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
         }
     }
-    return { changed, code: result, sourceFile };
-}
-const transform = (sourceFile, program) => {
-    let code = sourceFile.getFullText();
-    if (!mightNeedTransform(code, { patterns: PATTERNS })) {
-        return { changed: false, code, sourceFile };
+    if (needsImport && !codegenChanged) {
+        result = addArraySlotImport(result);
     }
-    let programSourceFile = program.getSourceFile(sourceFile.fileName);
-    if (programSourceFile) {
-        setTypeChecker(program.getTypeChecker());
-        sourceFile = programSourceFile;
-    }
-    else {
-        setTypeChecker(undefined);
+    if (changed) {
+        sourceFile = ts.createSourceFile(sourceFile.fileName, result, sourceFile.languageVersion, true);
     }
-    return transformCode(code, sourceFile);
+    return { changed, code: result, sourceFile };
 };
-export { createTransformer, mightNeedTransform, PATTERNS, transform };
+export { createTransformer, transform, transformCode, PATTERNS };