@esportsplus/template 0.31.7 → 0.32.1

package/src/transformer/plugins/tsc.ts

@@ -1,7 +1,15 @@
-import { createTransformer } from '../index';
 import { ts } from '@esportsplus/typescript';
+import { transformCode } from '~/transformer';
 
 
 export default (program: ts.Program): ts.TransformerFactory<ts.SourceFile> => {
-    return createTransformer(program);
+    let typeChecker = program.getTypeChecker();
+
+    return () => {
+        return (sourceFile: ts.SourceFile): ts.SourceFile => {
+            let result = transformCode(sourceFile.getFullText(), sourceFile, typeChecker);
+
+            return result.changed ? result.sourceFile : sourceFile;
+        };
+    };
 };

package/src/transformer/plugins/vite.ts

@@ -1,54 +1,41 @@
-import { createTransformer, mightNeedTransform, PATTERNS } from '../index';
-import { program, TRANSFORM_PATTERN } from '@esportsplus/typescript/transformer';
 import type { Plugin, ResolvedConfig } from 'vite';
 import { ts } from '@esportsplus/typescript';
+import { program, TRANSFORM_PATTERN } from '@esportsplus/typescript/transformer';
+import { PACKAGE } from '~/constants';
+import { transform } from '~/transformer';
 
 
 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;
         },
-
+        enforce: 'pre',
+        name: `${PACKAGE}/plugin-vite`,
         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 p = program.get(root),
-                    printer = ts.createPrinter(),
-                    sourceFile = ts.createSourceFile(id, code, ts.ScriptTarget.Latest, true),
-                    transformer = createTransformer(p),
-                    result = ts.transform(sourceFile, [transformer]),
-                    transformed = result.transformed[0];
+                let result = transform(
+                        ts.createSourceFile(id, code, ts.ScriptTarget.Latest, true),
+                        program.get(root)
+                    );
 
-                if (transformed === sourceFile) {
-                    result.dispose();
+                if (!result.changed) {
                     return null;
                 }
 
-                let output = printer.printFile(transformed);
-
-                result.dispose();
-
-                return { code: output, map: null };
+                return { code: result.code, map: null };
             }
             catch (error) {
-                console.error(`@esportsplus/template: Error transforming ${id}:`, error);
+                console.error(`${PACKAGE}: Error transforming ${id}:`, error);
                 return null;
             }
         },
-
         watchChange(id: string) {
             if (TRANSFORM_PATTERN.test(id)) {
                 program.delete(root);

package/src/transformer/ts-parser.ts

@@ -1,3 +1,4 @@
+import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY } from '../constants';
 import { ts } from '@esportsplus/typescript';
 
 
@@ -19,35 +20,6 @@ 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) ||
@@ -62,8 +34,8 @@ function visitReactiveCalls(node: ts.Node, calls: ReactiveCallInfo[]): void {
         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({
@@ -81,8 +53,33 @@ 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;
 
-    if (ts.isTaggedTemplateExpression(node) && ts.isIdentifier(node.tag) && node.tag.text === 'html') {
-        templates.push(extractTemplateInfo(node, 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);
+            }
+        }
+
+        templates.push({
+            depth,
+            end: node.end,
+            expressions,
+            literals,
+            node,
+            start: node.getStart()
+        });
     }
 
     ts.forEachChild(node, child => visitTemplates(child, nextDepth, templates));
@@ -108,16 +105,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,5 +1,10 @@
-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';
 
 
@@ -7,15 +12,6 @@ type AnalyzerContext = {
     checker?: ts.TypeChecker;
 };
 
-type SlotType =
-    | 'array-slot'
-    | 'document-fragment'
-    | 'effect'
-    | 'node'
-    | 'primitive'
-    | 'static'
-    | 'unknown';
-
 type SpreadAnalysis = {
     canUnpack: boolean;
     keys: string[];
@@ -81,87 +77,62 @@ function extractTypePropertyKeys(type: ts.Type): string[] {
     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 (ts.isPropertyAssignment(prop)) {
-            let name = ts.isIdentifier(prop.name)
-                ? prop.name.text
-                : ts.isStringLiteral(prop.name) ? prop.name.text : null;
-
-            if (name === key) {
-                return prop.initializer.getText(sourceFile);
-            }
-        }
-        else if (ts.isShorthandPropertyAssignment(prop) && prop.name.text === key) {
-            return prop.name.text;
-        }
-    }
-
-    return null;
-}
-
-function inferSlotType(expr: ts.Expression, ctx?: AnalyzerContext): SlotType {
+function inferCOMPILER_TYPES(expr: ts.Expression, ctx?: AnalyzerContext): 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, ctx),
+            whenTrue = inferCOMPILER_TYPES(expr.whenTrue, ctx);
 
         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) {
@@ -172,11 +143,11 @@ function inferSlotType(expr: ts.Expression, ctx?: AnalyzerContext): SlotType {
                 let type = checker.getTypeAtLocation(expr);
 
                 if (isTypeFunction(type, checker)) {
-                    return 'effect';
+                    return COMPILER_TYPES.Effect;
                 }
 
                 if (isTypeArray(type, checker)) {
-                    return 'array-slot';
+                    return COMPILER_TYPES.ArraySlot;
                 }
             }
             catch {
@@ -188,11 +159,11 @@ function inferSlotType(expr: ts.Expression, ctx?: AnalyzerContext): SlotType {
                 let type = checker.getTypeAtLocation(expr);
 
                 if (isTypeFunction(type, checker)) {
-                    return 'effect';
+                    return COMPILER_TYPES.Effect;
                 }
 
                 if (isTypeArray(type, checker)) {
-                    return 'array-slot';
+                    return COMPILER_TYPES.ArraySlot;
                 }
             }
             catch {
@@ -204,11 +175,11 @@ function inferSlotType(expr: ts.Expression, ctx?: AnalyzerContext): SlotType {
                 let type = checker.getTypeAtLocation(expr);
 
                 if (isTypeFunction(type, checker)) {
-                    return 'effect';
+                    return COMPILER_TYPES.Effect;
                 }
 
                 if (isTypeArray(type, checker)) {
-                    return 'array-slot';
+                    return COMPILER_TYPES.ArraySlot;
                 }
             }
             catch {
@@ -216,23 +187,17 @@ function inferSlotType(expr: ts.Expression, ctx?: AnalyzerContext): SlotType {
         }
     }
 
-    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<')) {
+    if (checker.isArrayType(type)) {
         return true;
     }
 
     let symbol = type.getSymbol();
 
-    if (symbol && (symbol.getName() === 'Array' || symbol.getName() === 'ReactiveArray')) {
-        return true;
-    }
-
-    return false;
+    return symbol?.getName() === 'ReactiveArray';
 }
 
 function isTypeFunction(type: ts.Type, checker: ts.TypeChecker): boolean {
@@ -252,41 +217,39 @@ 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 ? { checker } : undefined);
 };
 
-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 = (
@@ -294,7 +257,8 @@ const generateSpreadBindings = (
     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 +267,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 +275,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 name = ts.isIdentifier(prop.name)
+                        ? prop.name.text
+                        : ts.isStringLiteral(prop.name) ? prop.name.text : null;
+
+                    if (name === key) {
+                        value = prop.initializer.getText(sourceFile);
+                        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 +305,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 +314,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 };