@esportsplus/template 0.28.1 → 0.29.1

package/src/transformer/type-analyzer.ts

@@ -0,0 +1,334 @@
+import { getNames } from './codegen';
+import { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS } from '../event/constants';
+import ts from 'typescript';
+
+
+type AnalyzerContext = {
+    checker?: ts.TypeChecker;
+};
+
+type SlotType =
+    | 'array-slot'
+    | 'document-fragment'
+    | 'effect'
+    | 'node'
+    | 'primitive'
+    | 'static'
+    | 'unknown';
+
+type SpreadAnalysis = {
+    canUnpack: boolean;
+    keys: string[];
+};
+
+
+function analyzeSpread(expr: ts.Expression, checker?: ts.TypeChecker): SpreadAnalysis {
+    while (ts.isParenthesizedExpression(expr)) {
+        expr = expr.expression;
+    }
+
+    if (ts.isObjectLiteralExpression(expr)) {
+        let keys: string[] = [];
+
+        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: 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;
+        }
+
+        keys.push(name);
+    }
+
+    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 {
+    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: 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')) {
+        return true;
+    }
+
+    return false;
+}
+
+function isTypeFunction(type: ts.Type, checker: ts.TypeChecker): boolean {
+    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: ts.Expression, checker?: ts.TypeChecker): SlotType => {
+    return inferSlotType(expr, checker ? { checker } : undefined);
+};
+
+const generateAttributeBinding = (elementVar: string, name: string, expr: string, staticValue: string): string => {
+    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: ts.Expression,
+    exprCode: string,
+    elementVar: string,
+    sourceFile: ts.SourceFile,
+    checker?: ts.TypeChecker
+): string[] => {
+    while (ts.isParenthesizedExpression(expr)) {
+        expr = expr.expression;
+    }
+
+    let analysis = analyzeSpread(expr, checker);
+
+    if (!analysis.canUnpack) {
+        return [`${getNames().attr}.spread(${elementVar}, ${exprCode});`];
+    }
+
+    let lines: string[] = [];
+
+    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 };
+export type { SlotType };

package/src/types.ts

@@ -1,4 +1,3 @@
-import { firstChild } from './utilities/node';
 import { ArraySlot } from './slot/array';
 import attributes from './attributes';
 import slot from './slot';
@@ -39,9 +38,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;
 };
 
@@ -52,4 +51,4 @@ export type {
     Renderable,
     SlotGroup,
     Template
-};
+};

package/src/utilities.ts

@@ -0,0 +1,52 @@
+import { SLOT_HTML } from './constants';
+
+
+let clonableTemplate = document.createElement('template'),
+    clonableText = document.createTextNode('');
+
+
+// Firefox's importNode outperforms cloneNode in certain scenarios
+const clone = typeof navigator !== 'undefined' && navigator.userAgent.includes('Firefox')
+    ? document.importNode.bind(document)
+    : <T extends DocumentFragment | Node>(node: T, deep: boolean = true) => node.cloneNode(deep) as T;
+
+// Create a fragment from HTML string
+const fragment = (html: string): DocumentFragment => {
+    let element = clonableTemplate.cloneNode() as HTMLTemplateElement;
+
+    element.innerHTML = html;
+
+    return element.content;
+};
+
+const marker = fragment(SLOT_HTML).firstChild!;
+
+const raf = globalThis?.requestAnimationFrame;
+
+// Factory that caches the fragment for repeated cloning
+const template = (html: string) => {
+    let cached: DocumentFragment | undefined;
+
+    return () => {
+        if (!cached) {
+            let element = clonableTemplate.cloneNode() as HTMLTemplateElement;
+            element.innerHTML = html;
+            cached = element.content;
+        }
+
+        return clone(cached, true) as DocumentFragment;
+    };
+};
+
+const text = (value: string) => {
+    let element = clonableText.cloneNode();
+
+    if (value !== '') {
+        element.nodeValue = value;
+    }
+
+    return element;
+};
+
+
+export { clone, fragment, template, marker, raf, text };