@esportsplus/template 0.32.0 → 0.32.2

package/src/transformer/parser.ts

@@ -1,5 +1,8 @@
-// Inlined to avoid importing constants.ts which depends on utilities.ts (uses document)
-const SLOT_HTML = '<!--$-->';
+import {
+    COMPILER_TYPES,
+    PACKAGE,
+    SLOT_HTML
+} from '../constants';
 
 
 type NodePath = ('firstChild' | 'firstElementChild' | 'nextElementSibling' | 'nextSibling')[];
@@ -92,8 +95,8 @@ const parse = (literals: string[]) => {
         parsed = html.split(SLOT_MARKER),
         slot = 0,
         slots: (
-            { path: NodePath; type: 'slot' } |
-            { attributes: typeof attributes[string]; path: NodePath; type: 'attributes' }
+            { path: NodePath; type: COMPILER_TYPES.NodeSlot } |
+            { attributes: typeof attributes[string]; path: NodePath; type: COMPILER_TYPES.AttributeSlot }
         )[] = [];
 
     {
@@ -186,10 +189,10 @@ const parse = (literals: string[]) => {
                     let attrs = attributes[attr];
 
                     if (!attrs) {
-                        throw new Error(`@esportsplus/template: attribute metadata could not be found for '${attr}'`);
+                        throw new Error(`${PACKAGE}: attribute metadata could not be found for '${attr}'`);
                     }
 
-                    slots.push({ attributes: attrs, path, type: 'attributes' });
+                    slots.push({ attributes: attrs, path, type: COMPILER_TYPES.AttributeSlot });
 
                     for (let i = 0, n = attrs.names.length; i < n; i++) {
                         buffer += parsed[slot++];
@@ -204,7 +207,7 @@ const parse = (literals: string[]) => {
             }
             else if (type === NODE_SLOT) {
                 buffer += parsed[slot++] + SLOT_HTML;
-                slots.push({ path: methods(parent.children, parent.path, 'firstChild', 'nextSibling'), type: 'slot' });
+                slots.push({ path: methods(parent.children, parent.path, 'firstChild', 'nextSibling'), type: COMPILER_TYPES.NodeSlot });
             }
 
             if (n === slot) {

package/src/transformer/plugins/tsc.ts

@@ -1,7 +1,5 @@
-import { createTransformer } from '../index';
-import { ts } from '@esportsplus/typescript';
+import { plugin } from '@esportsplus/typescript/transformer';
+import { transform } from '..';
 
 
-export default (program: ts.Program): ts.TransformerFactory<ts.SourceFile> => {
-    return createTransformer(program);
-};
+export default plugin.tsc(transform) as ReturnType<typeof plugin.tsc>;

package/src/transformer/plugins/vite.ts

@@ -1,49 +1,9 @@
-import { mightNeedTransform, PATTERNS, transform } from '../index';
-import { program, TRANSFORM_PATTERN } from '@esportsplus/typescript/transformer';
-import type { Plugin, ResolvedConfig } from 'vite';
-import { ts } from '@esportsplus/typescript';
+import { plugin } from '@esportsplus/typescript/transformer';
+import { PACKAGE } from '../../constants';
+import { transform } from '..';
 
 
-export default (options?: { root?: string }): Plugin => {
-    let root: string;
-
-    return {
-        enforce: 'pre',
-        name: '@esportsplus/template/plugin-vite',
-
-        configResolved(config: ResolvedConfig) {
-            root = options?.root ?? config.root;
-        },
-
-        transform(code: string, id: string) {
-            if (!TRANSFORM_PATTERN.test(id) || id.includes('node_modules')) {
-                return null;
-            }
-
-            if (!mightNeedTransform(code, { patterns: PATTERNS })) {
-                return null;
-            }
-
-            try {
-                let sourceFile = ts.createSourceFile(id, code, ts.ScriptTarget.Latest, true),
-                    result = transform(sourceFile, program.get(root));
-
-                if (!result.changed) {
-                    return null;
-                }
-
-                return { code: result.code, map: null };
-            }
-            catch (error) {
-                console.error(`@esportsplus/template: Error transforming ${id}:`, error);
-                return null;
-            }
-        },
-
-        watchChange(id: string) {
-            if (TRANSFORM_PATTERN.test(id)) {
-                program.delete(root);
-            }
-        }
-    };
-};
+export default plugin.vite({
+    name: PACKAGE,
+    transform
+});

package/src/transformer/ts-parser.ts

@@ -1,3 +1,4 @@
+import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY } from '../constants';
 import { ts } from '@esportsplus/typescript';
 
 
@@ -19,51 +20,13 @@ type TemplateInfo = {
 };
 
 
-function extractTemplateInfo(node: ts.TaggedTemplateExpression, depth: number): TemplateInfo {
-    let expressions: ts.Expression[] = [],
-        literals: string[] = [],
-        template = node.template;
-
-    if (ts.isNoSubstitutionTemplateLiteral(template)) {
-        literals.push(template.text);
-    }
-    else if (ts.isTemplateExpression(template)) {
-        literals.push(template.head.text);
-
-        for (let i = 0, n = template.templateSpans.length; i < n; i++) {
-            let span = template.templateSpans[i];
-
-            expressions.push(span.expression);
-            literals.push(span.literal.text);
-        }
-    }
-
-    return {
-        depth,
-        end: node.end,
-        expressions,
-        literals,
-        node,
-        start: node.getStart()
-    };
-}
-
-function isFunctionNode(node: ts.Node): boolean {
-    return (
-        ts.isArrowFunction(node) ||
-        ts.isFunctionDeclaration(node) ||
-        ts.isFunctionExpression(node) ||
-        ts.isMethodDeclaration(node)
-    );
-}
-
 function visitReactiveCalls(node: ts.Node, calls: ReactiveCallInfo[]): void {
     if (
         ts.isCallExpression(node) &&
         ts.isPropertyAccessExpression(node.expression) &&
         ts.isIdentifier(node.expression.expression) &&
-        node.expression.expression.text === 'html' &&
-        node.expression.name.text === 'reactive' &&
+        node.expression.expression.text === COMPILER_ENTRYPOINT &&
+        node.expression.name.text === COMPILER_ENTRYPOINT_REACTIVITY &&
         node.arguments.length === 2
     ) {
         calls.push({
@@ -79,10 +42,37 @@ function visitReactiveCalls(node: ts.Node, calls: ReactiveCallInfo[]): void {
 }
 
 function visitTemplates(node: ts.Node, depth: number, templates: TemplateInfo[]): void {
-    let nextDepth = isFunctionNode(node) ? depth + 1 : depth;
+    let nextDepth = (ts.isArrowFunction(node) || ts.isFunctionDeclaration(node) || ts.isFunctionExpression(node) || ts.isMethodDeclaration(node))
+            ? depth + 1
+            : depth;
+
+    if (ts.isTaggedTemplateExpression(node) && ts.isIdentifier(node.tag) && node.tag.text === COMPILER_ENTRYPOINT) {
+        let expressions: ts.Expression[] = [],
+            literals: string[] = [],
+            template = node.template;
+
+        if (ts.isNoSubstitutionTemplateLiteral(template)) {
+            literals.push(template.text);
+        }
+        else if (ts.isTemplateExpression(template)) {
+            literals.push(template.head.text);
+
+            for (let i = 0, n = template.templateSpans.length; i < n; i++) {
+                let span = template.templateSpans[i];
+
+                expressions.push(span.expression);
+                literals.push(span.literal.text);
+            }
+        }
 
-    if (ts.isTaggedTemplateExpression(node) && ts.isIdentifier(node.tag) && node.tag.text === 'html') {
-        templates.push(extractTemplateInfo(node, depth));
+        templates.push({
+            depth,
+            end: node.end,
+            expressions,
+            literals,
+            node,
+            start: node.getStart()
+        });
     }
 
     ts.forEachChild(node, child => visitTemplates(child, nextDepth, templates));
@@ -108,16 +98,6 @@ const findReactiveCalls = (sourceFile: ts.SourceFile): ReactiveCallInfo[] => {
     return calls;
 };
 
-const getTemplateExpressions = (info: TemplateInfo, sourceFile: ts.SourceFile): string[] => {
-    let exprs: string[] = [];
-
-    for (let i = 0, n = info.expressions.length; i < n; i++) {
-        exprs.push(info.expressions[i].getText(sourceFile));
-    }
-
-    return exprs;
-};
-
 
-export { findHtmlTemplates, findReactiveCalls, getTemplateExpressions };
+export { findHtmlTemplates, findReactiveCalls };
 export type { ReactiveCallInfo, TemplateInfo };

package/src/transformer/type-analyzer.ts

@@ -1,21 +1,13 @@
-import { getNames } from './codegen';
-import { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS } from '../event/constants';
+import {
+    COMPILER_ENTRYPOINT,
+    COMPILER_ENTRYPOINT_REACTIVITY,
+    COMPILER_TYPES,
+    DIRECT_ATTACH_EVENTS,
+    LIFECYCLE_EVENTS
+} from '../constants';
 import { ts } from '@esportsplus/typescript';
 
 
-type AnalyzerContext = {
-    checker?: ts.TypeChecker;
-};
-
-type SlotType =
-    | 'array-slot'
-    | 'document-fragment'
-    | 'effect'
-    | 'node'
-    | 'primitive'
-    | 'static'
-    | 'unknown';
-
 type SpreadAnalysis = {
     canUnpack: boolean;
     keys: string[];
@@ -51,188 +43,112 @@ function analyzeSpread(expr: ts.Expression, checker?: ts.TypeChecker): SpreadAna
 
     if (checker && (ts.isIdentifier(expr) || ts.isPropertyAccessExpression(expr))) {
         try {
-            let keys = extractTypePropertyKeys(checker.getTypeAtLocation(expr));
-
-            if (keys.length > 0) {
-                return { canUnpack: true, keys };
-            }
-        }
-        catch {
-        }
-    }
-
-    return { canUnpack: false, keys: [] };
-}
-
-function extractTypePropertyKeys(type: ts.Type): string[] {
-    let keys: string[] = [],
-        props = type.getProperties();
-
-    for (let i = 0, n = props.length; i < n; i++) {
-        let name = props[i].getName();
-
-        if (name.startsWith('__') || name.startsWith('[')) {
-            continue;
-        }
+            let keys: string[] = [],
+                props = checker.getTypeAtLocation(expr).getProperties();
 
-        keys.push(name);
-    }
+            for (let i = 0, n = props.length; i < n; i++) {
+                let name = props[i].getName();
 
-    return keys;
-}
-
-function getObjectPropertyValue(expr: ts.ObjectLiteralExpression, key: string, sourceFile: ts.SourceFile): string | null {
-    for (let i = 0, n = expr.properties.length; i < n; i++) {
-        let prop = expr.properties[i];
+                if (name.startsWith('__') || name.startsWith('[')) {
+                    continue;
+                }
 
-        if (ts.isPropertyAssignment(prop)) {
-            let name = ts.isIdentifier(prop.name)
-                ? prop.name.text
-                : ts.isStringLiteral(prop.name) ? prop.name.text : null;
+                keys.push(name);
+            }
 
-            if (name === key) {
-                return prop.initializer.getText(sourceFile);
+            if (keys.length > 0) {
+                return { canUnpack: true, keys };
             }
         }
-        else if (ts.isShorthandPropertyAssignment(prop) && prop.name.text === key) {
-            return prop.name.text;
-        }
+        catch { }
     }
 
-    return null;
+    return { canUnpack: false, keys: [] };
 }
 
-function inferSlotType(expr: ts.Expression, ctx?: AnalyzerContext): SlotType {
+function inferCOMPILER_TYPES(expr: ts.Expression, checker?: ts.TypeChecker): COMPILER_TYPES {
     while (ts.isParenthesizedExpression(expr)) {
         expr = expr.expression;
     }
 
     if (ts.isArrowFunction(expr) || ts.isFunctionExpression(expr)) {
-        return 'effect';
+        return COMPILER_TYPES.Effect;
     }
 
     if (
         ts.isCallExpression(expr) &&
         ts.isPropertyAccessExpression(expr.expression) &&
         ts.isIdentifier(expr.expression.expression) &&
-        expr.expression.expression.text === 'html' &&
-        expr.expression.name.text === 'reactive'
+        expr.expression.expression.text === COMPILER_ENTRYPOINT &&
+        expr.expression.name.text === COMPILER_ENTRYPOINT_REACTIVITY
     ) {
-        return 'array-slot';
+        return COMPILER_TYPES.ArraySlot;
     }
 
-    if (ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === 'html') {
-        return 'document-fragment';
+    if (ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === COMPILER_ENTRYPOINT) {
+        return COMPILER_TYPES.DocumentFragment;
     }
 
     if (ts.isArrayLiteralExpression(expr)) {
-        return 'array-slot';
-    }
-
-    if (ts.isStringLiteral(expr) || ts.isNoSubstitutionTemplateLiteral(expr)) {
-        return 'static';
-    }
-
-    if (ts.isNumericLiteral(expr)) {
-        return 'static';
-    }
-
-    if (expr.kind === ts.SyntaxKind.TrueKeyword || expr.kind === ts.SyntaxKind.FalseKeyword) {
-        return 'static';
+        return COMPILER_TYPES.ArraySlot;
     }
 
-    if (expr.kind === ts.SyntaxKind.NullKeyword || expr.kind === ts.SyntaxKind.UndefinedKeyword) {
-        return 'static';
+    if (
+        ts.isNumericLiteral(expr) ||
+        ts.isStringLiteral(expr) ||
+        ts.isNoSubstitutionTemplateLiteral(expr) ||
+        expr.kind === ts.SyntaxKind.TrueKeyword ||
+        expr.kind === ts.SyntaxKind.FalseKeyword ||
+        expr.kind === ts.SyntaxKind.NullKeyword ||
+        expr.kind === ts.SyntaxKind.UndefinedKeyword
+    ) {
+        return COMPILER_TYPES.Static;
     }
 
     if (ts.isTemplateExpression(expr)) {
-        return 'primitive';
+        return COMPILER_TYPES.Primitive;
     }
 
     if (ts.isConditionalExpression(expr)) {
-        let whenFalse = inferSlotType(expr.whenFalse, ctx),
-            whenTrue = inferSlotType(expr.whenTrue, ctx);
+        let whenFalse = inferCOMPILER_TYPES(expr.whenFalse, checker),
+            whenTrue = inferCOMPILER_TYPES(expr.whenTrue, checker);
 
         if (whenTrue === whenFalse) {
             return whenTrue;
         }
 
-        if (whenTrue === 'effect' || whenFalse === 'effect') {
-            return 'effect';
+        if (whenTrue === COMPILER_TYPES.Effect || whenFalse === COMPILER_TYPES.Effect) {
+            return COMPILER_TYPES.Effect;
         }
 
-        return 'unknown';
+        return COMPILER_TYPES.Unknown;
     }
 
-    if (ctx?.checker) {
-        let checker = ctx.checker;
-
-        if (ts.isIdentifier(expr)) {
-            try {
-                let type = checker.getTypeAtLocation(expr);
-
-                if (isTypeFunction(type, checker)) {
-                    return 'effect';
-                }
+    if (checker && (ts.isIdentifier(expr) || ts.isPropertyAccessExpression(expr) || ts.isCallExpression(expr))) {
+        try {
+            let type = checker.getTypeAtLocation(expr);
 
-                if (isTypeArray(type, checker)) {
-                    return 'array-slot';
-                }
-            }
-            catch {
+            if (isTypeFunction(type, checker)) {
+                return COMPILER_TYPES.Effect;
             }
-        }
-
-        if (ts.isPropertyAccessExpression(expr)) {
-            try {
-                let type = checker.getTypeAtLocation(expr);
 
-                if (isTypeFunction(type, checker)) {
-                    return 'effect';
-                }
-
-                if (isTypeArray(type, checker)) {
-                    return 'array-slot';
-                }
-            }
-            catch {
+            if (isTypeArray(type, checker)) {
+                return COMPILER_TYPES.ArraySlot;
             }
         }
-
-        if (ts.isCallExpression(expr)) {
-            try {
-                let type = checker.getTypeAtLocation(expr);
-
-                if (isTypeFunction(type, checker)) {
-                    return 'effect';
-                }
-
-                if (isTypeArray(type, checker)) {
-                    return 'array-slot';
-                }
-            }
-            catch {
-            }
+        catch {
         }
     }
 
-    return 'unknown';
+    return COMPILER_TYPES.Unknown;
 }
 
 function isTypeArray(type: ts.Type, checker: ts.TypeChecker): boolean {
-    let typeStr = checker.typeToString(type);
-
-    if (typeStr.endsWith('[]') || typeStr.startsWith('Array<') || typeStr.startsWith('ReactiveArray<')) {
-        return true;
-    }
-
-    let symbol = type.getSymbol();
-
-    if (symbol && (symbol.getName() === 'Array' || symbol.getName() === 'ReactiveArray')) {
+    if (checker.isArrayType(type)) {
         return true;
     }
 
-    return false;
+    return type.getSymbol()?.getName() === 'ReactiveArray';
 }
 
 function isTypeFunction(type: ts.Type, checker: ts.TypeChecker): boolean {
@@ -252,49 +168,47 @@ function isTypeFunction(type: ts.Type, checker: ts.TypeChecker): boolean {
 }
 
 
-const analyzeExpression = (expr: ts.Expression, checker?: ts.TypeChecker): SlotType => {
-    return inferSlotType(expr, checker ? { checker } : undefined);
+const analyzeExpression = (expr: ts.Expression, checker?: ts.TypeChecker): COMPILER_TYPES => {
+    return inferCOMPILER_TYPES(expr, checker);
 };
 
-const generateAttributeBinding = (elementVar: string, name: string, expr: string, staticValue: string): string => {
-    let n = getNames();
-
+const generateAttributeBinding = (elementVar: string, name: string, expr: string, staticValue: string, ns: string): string => {
     if (name.startsWith('on') && name.length > 2) {
         let event = name.slice(2).toLowerCase(),
             key = name.toLowerCase();
 
         if (LIFECYCLE_EVENTS.has(key)) {
-            return `${n.event}.${key}(${elementVar}, ${expr});`;
+            return `${ns}.event.${key}(${elementVar}, ${expr});`;
         }
 
         if (DIRECT_ATTACH_EVENTS.has(key)) {
-            return `${n.event}.direct(${elementVar}, '${event}', ${expr});`;
+            return `${ns}.event.direct(${elementVar}, '${event}', ${expr});`;
         }
 
-        return `${n.event}.delegate(${elementVar}, '${event}', ${expr});`;
+        return `${ns}.event.delegate(${elementVar}, '${event}', ${expr});`;
     }
 
     if (name === 'class') {
-        return `${n.attr}.setClass(${elementVar}, '${staticValue}', ${expr});`;
+        return `${ns}.attributes.setClass(${elementVar}, '${staticValue}', ${expr});`;
     }
 
     if (name === 'spread') {
-        return `${n.attr}.spread(${elementVar}, ${expr});`;
+        return `${ns}.attributes.spread(${elementVar}, ${expr});`;
     }
 
     if (name === 'style') {
-        return `${n.attr}.setStyle(${elementVar}, '${staticValue}', ${expr});`;
+        return `${ns}.attributes.setStyle(${elementVar}, '${staticValue}', ${expr});`;
     }
 
-    return `${n.attr}.setProperty(${elementVar}, '${name}', ${expr});`;
+    return `${ns}.attributes.setProperty(${elementVar}, '${name}', ${expr});`;
 };
 
 const generateSpreadBindings = (
     expr: ts.Expression,
     exprCode: string,
     elementVar: string,
-    sourceFile: ts.SourceFile,
-    checker?: ts.TypeChecker
+    checker: ts.TypeChecker | undefined,
+    ns: string
 ): string[] => {
     while (ts.isParenthesizedExpression(expr)) {
         expr = expr.expression;
@@ -303,7 +217,7 @@ const generateSpreadBindings = (
     let analysis = analyzeSpread(expr, checker);
 
     if (!analysis.canUnpack) {
-        return [`${getNames().attr}.spread(${elementVar}, ${exprCode});`];
+        return [`${ns}.attributes.spread(${elementVar}, ${exprCode});`];
     }
 
     let lines: string[] = [];
@@ -311,10 +225,29 @@ const generateSpreadBindings = (
     if (ts.isObjectLiteralExpression(expr)) {
         for (let i = 0, n = analysis.keys.length; i < n; i++) {
             let key = analysis.keys[i],
-                value = getObjectPropertyValue(expr, key, sourceFile);
+                value: string | null = null;
+
+            for (let j = 0, m = expr.properties.length; j < m; j++) {
+                let prop = expr.properties[j];
+
+                if (ts.isPropertyAssignment(prop)) {
+                    let text = ts.isIdentifier(prop.name)
+                            ? prop.name.text
+                            : ts.isStringLiteral(prop.name) ? prop.name.text : null;
+
+                    if (text === key) {
+                        value = prop.initializer.getText();
+                        break;
+                    }
+                }
+                else if (ts.isShorthandPropertyAssignment(prop) && prop.name.text === key) {
+                    value = prop.name.text;
+                    break;
+                }
+            }
 
             if (value !== null) {
-                lines.push(generateAttributeBinding(elementVar, key, value, ''));
+                lines.push(generateAttributeBinding(elementVar, key, value, '', ns));
             }
         }
     }
@@ -322,7 +255,7 @@ const generateSpreadBindings = (
         for (let i = 0, n = analysis.keys.length; i < n; i++) {
             let key = analysis.keys[i];
 
-            lines.push(generateAttributeBinding(elementVar, key, `${exprCode}.${key}`, ''));
+            lines.push(generateAttributeBinding(elementVar, key, `${exprCode}.${key}`, '', ns));
         }
     }
 
@@ -331,4 +264,3 @@ const generateSpreadBindings = (
 
 
 export { analyzeExpression, generateAttributeBinding, generateSpreadBindings };
-export type { SlotType };

package/src/types.ts

@@ -26,7 +26,7 @@ type Element = HTMLElement & Attributes<any>;
 // - Importing from ^ causes 'cannot be named without a reference to...' error
 type Primitive = bigint | boolean | null | number | string | undefined;
 
-type Renderable<T> = DocumentFragment | ArraySlot<T> | Effect<T> | Node | NodeList | Primitive | Renderable<T>[];
+type Renderable<T> = ArraySlot<T> | DocumentFragment | Effect<T> | Node | NodeList | Primitive | Renderable<T>[];
 
 type SlotGroup = {
     head: Element;

package/test/vite.config.ts

@@ -40,7 +40,7 @@ export default defineConfig({
     },
     plugins: [
         tsconfigPaths(),
-        templatePlugin()
+        templatePlugin({ root: __dirname })
     ],
     resolve: {
         alias: {

package/build/event/constants.d.ts

@@ -1,3 +0,0 @@
-declare const DIRECT_ATTACH_EVENTS: Set<string>;
-declare const LIFECYCLE_EVENTS: Set<string>;
-export { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS };

package/build/event/constants.js

@@ -1,13 +0,0 @@
-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'
-]);
-export { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS };

package/src/event/constants.ts

@@ -1,16 +0,0 @@
-const DIRECT_ATTACH_EVENTS = new Set<string>([
-    'onblur',
-    'onerror',
-    'onfocus', 'onfocusin', 'onfocusout',
-    'onload',
-    'onplay', 'onpause', 'onended', 'ontimeupdate',
-    'onreset',
-    'onscroll', 'onsubmit'
-]);
-
-const LIFECYCLE_EVENTS = new Set<string>([
-    'onconnect', 'ondisconnect', 'onrender', 'onresize', 'ontick'
-]);
-
-
-export { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS };