@esportsplus/template 0.28.3 → 0.29.2

package/build/transformer/ts-parser.d.ts

@@ -0,0 +1,21 @@
+import ts from 'typescript';
+type ReactiveCallInfo = {
+    arrayArg: ts.Expression;
+    callbackArg: ts.Expression;
+    end: number;
+    node: ts.CallExpression;
+    start: number;
+};
+type TemplateInfo = {
+    depth: number;
+    end: number;
+    expressions: ts.Expression[];
+    literals: string[];
+    node: ts.TaggedTemplateExpression;
+    start: number;
+};
+declare const findHtmlTemplates: (sourceFile: ts.SourceFile) => TemplateInfo[];
+declare const findReactiveCalls: (sourceFile: ts.SourceFile) => ReactiveCallInfo[];
+declare const getTemplateExpressions: (info: TemplateInfo, sourceFile: ts.SourceFile) => string[];
+export { findHtmlTemplates, findReactiveCalls, getTemplateExpressions };
+export type { ReactiveCallInfo, TemplateInfo };

package/build/transformer/ts-parser.js

@@ -0,0 +1,72 @@
+import ts from 'typescript';
+function extractTemplateInfo(node, depth) {
+    let expressions = [], literals = [], 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) {
+    return (ts.isArrowFunction(node) ||
+        ts.isFunctionDeclaration(node) ||
+        ts.isFunctionExpression(node) ||
+        ts.isMethodDeclaration(node));
+}
+function visitReactiveCalls(node, calls) {
+    if (ts.isCallExpression(node) &&
+        ts.isPropertyAccessExpression(node.expression) &&
+        ts.isIdentifier(node.expression.expression) &&
+        node.expression.expression.text === 'html' &&
+        node.expression.name.text === 'reactive' &&
+        node.arguments.length === 2) {
+        calls.push({
+            arrayArg: node.arguments[0],
+            callbackArg: node.arguments[1],
+            end: node.end,
+            node,
+            start: node.getStart()
+        });
+    }
+    ts.forEachChild(node, child => visitReactiveCalls(child, calls));
+}
+function visitTemplates(node, depth, templates) {
+    let nextDepth = isFunctionNode(node) ? depth + 1 : depth;
+    if (ts.isTaggedTemplateExpression(node) && ts.isIdentifier(node.tag) && node.tag.text === 'html') {
+        templates.push(extractTemplateInfo(node, depth));
+    }
+    ts.forEachChild(node, child => visitTemplates(child, nextDepth, templates));
+}
+const findHtmlTemplates = (sourceFile) => {
+    let templates = [];
+    visitTemplates(sourceFile, 0, templates);
+    templates.sort((a, b) => a.depth !== b.depth ? b.depth - a.depth : a.start - b.start);
+    return templates;
+};
+const findReactiveCalls = (sourceFile) => {
+    let calls = [];
+    visitReactiveCalls(sourceFile, calls);
+    return calls;
+};
+const getTemplateExpressions = (info, sourceFile) => {
+    let exprs = [];
+    for (let i = 0, n = info.expressions.length; i < n; i++) {
+        exprs.push(info.expressions[i].getText(sourceFile));
+    }
+    return exprs;
+};
+export { findHtmlTemplates, findReactiveCalls, getTemplateExpressions };

package/build/transformer/type-analyzer.d.ts

@@ -0,0 +1,7 @@
+import ts from 'typescript';
+type SlotType = 'array-slot' | 'document-fragment' | 'effect' | 'node' | 'primitive' | 'static' | 'unknown';
+declare const analyzeExpression: (expr: ts.Expression, checker?: ts.TypeChecker) => SlotType;
+declare const generateAttributeBinding: (elementVar: string, name: string, expr: string, staticValue: string) => string;
+declare const generateSpreadBindings: (expr: ts.Expression, exprCode: string, elementVar: string, sourceFile: ts.SourceFile, checker?: ts.TypeChecker) => string[];
+export { analyzeExpression, generateAttributeBinding, generateSpreadBindings };
+export type { SlotType };

package/build/transformer/type-analyzer.js

@@ -0,0 +1,230 @@
+import { getNames } from './codegen.js';
+import { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS } from '../event/constants.js';
+import ts from 'typescript';
+function analyzeSpread(expr, checker) {
+    while (ts.isParenthesizedExpression(expr)) {
+        expr = expr.expression;
+    }
+    if (ts.isObjectLiteralExpression(expr)) {
+        let keys = [];
+        for (let i = 0, n = expr.properties.length; i < n; i++) {
+            let prop = expr.properties[i];
+            if (ts.isPropertyAssignment(prop)) {
+                if (ts.isIdentifier(prop.name) || ts.isStringLiteral(prop.name)) {
+                    keys.push(prop.name.text);
+                }
+            }
+            else if (ts.isShorthandPropertyAssignment(prop)) {
+                keys.push(prop.name.text);
+            }
+            else if (ts.isSpreadAssignment(prop)) {
+                return { canUnpack: false, keys: [] };
+            }
+        }
+        return { canUnpack: true, keys };
+    }
+    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) {
+    let keys = [], props = type.getProperties();
+    for (let i = 0, n = props.length; i < n; i++) {
+        let name = props[i].getName();
+        if (name.startsWith('__') || name.startsWith('[')) {
+            continue;
+        }
+        keys.push(name);
+    }
+    return keys;
+}
+function getObjectPropertyValue(expr, key, sourceFile) {
+    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, ctx) {
+    while (ts.isParenthesizedExpression(expr)) {
+        expr = expr.expression;
+    }
+    if (ts.isArrowFunction(expr) || ts.isFunctionExpression(expr)) {
+        return 'effect';
+    }
+    if (ts.isCallExpression(expr) &&
+        ts.isPropertyAccessExpression(expr.expression) &&
+        ts.isIdentifier(expr.expression.expression) &&
+        expr.expression.expression.text === 'html' &&
+        expr.expression.name.text === 'reactive') {
+        return 'array-slot';
+    }
+    if (ts.isTaggedTemplateExpression(expr) && ts.isIdentifier(expr.tag) && expr.tag.text === 'html') {
+        return 'document-fragment';
+    }
+    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';
+    }
+    if (expr.kind === ts.SyntaxKind.NullKeyword || expr.kind === ts.SyntaxKind.UndefinedKeyword) {
+        return 'static';
+    }
+    if (ts.isTemplateExpression(expr)) {
+        return 'primitive';
+    }
+    if (ts.isConditionalExpression(expr)) {
+        let whenFalse = inferSlotType(expr.whenFalse, ctx), whenTrue = inferSlotType(expr.whenTrue, ctx);
+        if (whenTrue === whenFalse) {
+            return whenTrue;
+        }
+        if (whenTrue === 'effect' || whenFalse === 'effect') {
+            return 'effect';
+        }
+        return '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 (isTypeArray(type, checker)) {
+                    return 'array-slot';
+                }
+            }
+            catch {
+            }
+        }
+        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 (ts.isCallExpression(expr)) {
+            try {
+                let type = checker.getTypeAtLocation(expr);
+                if (isTypeFunction(type, checker)) {
+                    return 'effect';
+                }
+                if (isTypeArray(type, checker)) {
+                    return 'array-slot';
+                }
+            }
+            catch {
+            }
+        }
+    }
+    return 'unknown';
+}
+function isTypeArray(type, checker) {
+    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')) {
+        return true;
+    }
+    return false;
+}
+function isTypeFunction(type, checker) {
+    if (type.getCallSignatures().length > 0) {
+        return true;
+    }
+    if (type.isUnion()) {
+        for (let i = 0, n = type.types.length; i < n; i++) {
+            if (isTypeFunction(type.types[i], checker)) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+const analyzeExpression = (expr, checker) => {
+    return inferSlotType(expr, checker ? { checker } : undefined);
+};
+const generateAttributeBinding = (elementVar, name, expr, staticValue) => {
+    let n = getNames();
+    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});`;
+        }
+        if (DIRECT_ATTACH_EVENTS.has(key)) {
+            return `${n.event}.direct(${elementVar}, '${event}', ${expr});`;
+        }
+        return `${n.event}.delegate(${elementVar}, '${event}', ${expr});`;
+    }
+    if (name === 'class') {
+        return `${n.attr}.setClass(${elementVar}, '${staticValue}', ${expr});`;
+    }
+    if (name === 'spread') {
+        return `${n.attr}.spread(${elementVar}, ${expr});`;
+    }
+    if (name === 'style') {
+        return `${n.attr}.setStyle(${elementVar}, '${staticValue}', ${expr});`;
+    }
+    return `${n.attr}.setProperty(${elementVar}, '${name}', ${expr});`;
+};
+const generateSpreadBindings = (expr, exprCode, elementVar, sourceFile, checker) => {
+    while (ts.isParenthesizedExpression(expr)) {
+        expr = expr.expression;
+    }
+    let analysis = analyzeSpread(expr, checker);
+    if (!analysis.canUnpack) {
+        return [`${getNames().attr}.spread(${elementVar}, ${exprCode});`];
+    }
+    let lines = [];
+    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);
+            if (value !== null) {
+                lines.push(generateAttributeBinding(elementVar, key, value, ''));
+            }
+        }
+    }
+    else {
+        for (let i = 0, n = analysis.keys.length; i < n; i++) {
+            let key = analysis.keys[i];
+            lines.push(generateAttributeBinding(elementVar, key, `${exprCode}.${key}`, ''));
+        }
+    }
+    return lines;
+};
+export { analyzeExpression, generateAttributeBinding, generateSpreadBindings };

package/build/types.d.ts

@@ -1,4 +1,3 @@
-import { firstChild } from './utilities/node.js';
 import { ArraySlot } from './slot/array.js';
 import attributes from './attributes.js';
 import slot from './slot/index.js';
@@ -28,9 +27,9 @@ type Template = {
     html: string;
     literals: TemplateStringsArray;
     slots: {
-        fn: typeof attributes.set | typeof attributes.spread | typeof slot;
+        fn: typeof attributes.spread | typeof slot;
         name: string | null;
-        path: typeof firstChild[];
+        path: (() => ChildNode | null)[];
     }[] | null;
 };
 export type { Attribute, Attributes, Effect, Element, Renderable, SlotGroup, Template };

package/build/utilities.d.ts

@@ -0,0 +1,7 @@
+declare const clone: <T extends Node>(node: T, options?: boolean | ImportNodeOptions) => T;
+declare const fragment: (html: string) => DocumentFragment;
+declare const marker: ChildNode;
+declare const raf: typeof requestAnimationFrame;
+declare const template: (html: string) => () => DocumentFragment;
+declare const text: (value: string) => Node;
+export { clone, fragment, template, marker, raf, text };

package/build/utilities.js

@@ -0,0 +1,31 @@
+import { SLOT_HTML } from './constants.js';
+let clonableTemplate = document.createElement('template'), clonableText = document.createTextNode('');
+const clone = typeof navigator !== 'undefined' && navigator.userAgent.includes('Firefox')
+    ? document.importNode.bind(document)
+    : (node, deep = true) => node.cloneNode(deep);
+const fragment = (html) => {
+    let element = clonableTemplate.cloneNode();
+    element.innerHTML = html;
+    return element.content;
+};
+const marker = fragment(SLOT_HTML).firstChild;
+const raf = globalThis?.requestAnimationFrame;
+const template = (html) => {
+    let cached;
+    return () => {
+        if (!cached) {
+            let element = clonableTemplate.cloneNode();
+            element.innerHTML = html;
+            cached = element.content;
+        }
+        return clone(cached, true);
+    };
+};
+const text = (value) => {
+    let element = clonableText.cloneNode();
+    if (value !== '') {
+        element.nodeValue = value;
+    }
+    return element;
+};
+export { clone, fragment, template, marker, raf, text };

package/package.json

@@ -2,11 +2,39 @@
   "author": "ICJR",
   "dependencies": {
     "@esportsplus/queue": "^0.2.0",
-    "@esportsplus/reactivity": "^0.22.0",
-    "@esportsplus/utilities": "^0.25.0"
+    "@esportsplus/reactivity": "^0.23.2",
+    "@esportsplus/utilities": "^0.27.2",
+    "serve": "^14.2.5"
   },
   "devDependencies": {
-    "@esportsplus/typescript": "^0.9.2"
+    "@esportsplus/typescript": "^0.13.0",
+    "@types/node": "^25.0.3",
+    "esbuild": "^0.27.2",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vite-tsconfig-paths": "^6.0.3"
+  },
+  "exports": {
+    ".": {
+      "import": "./build/index.js",
+      "types": "./build/index.d.ts"
+    },
+    "./constants": {
+      "import": "./build/constants.js",
+      "types": "./build/constants.d.ts"
+    },
+    "./plugins/esbuild": {
+      "import": "./build/transformer/plugins/esbuild.js",
+      "types": "./build/transformer/plugins/esbuild.d.ts"
+    },
+    "./plugins/tsc": {
+      "import": "./build/transformer/plugins/tsc.js",
+      "types": "./build/transformer/plugins/tsc.d.ts"
+    },
+    "./plugins/vite": {
+      "import": "./build/transformer/plugins/vite.js",
+      "types": "./build/transformer/plugins/vite.d.ts"
+    }
   },
   "main": "./build/index.js",
   "name": "@esportsplus/template",
@@ -17,9 +45,10 @@
   },
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.28.3",
+  "version": "0.29.2",
   "scripts": {
     "build": "tsc && tsc-alias",
+    "compile:test": "vite build --config test/vite.config.ts",
     "-": "-"
   }
 }