@esportsplus/template 0.32.0 → 0.32.2

package/build/transformer/index.js

@@ -1,62 +1,46 @@
-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'];
-function createTransformer(program) {
-    let typeChecker = program.getTypeChecker();
-    return (_context) => {
-        return (sourceFile) => {
-            let code = sourceFile.getFullText();
-            if (!mightNeedTransform(code, { patterns: PATTERNS })) {
-                return sourceFile;
-            }
-            setTypeChecker(typeChecker);
-            let result = transformCode(code, sourceFile);
-            if (!result.changed) {
-                return sourceFile;
-            }
-            return result.sourceFile;
-        };
-    };
-}
-function transformCode(code, sourceFile) {
-    let changed = false, result = code;
-    let reactiveCalls = findReactiveCalls(sourceFile);
+const PATTERNS = [`${COMPILER_ENTRYPOINT}\``, `${COMPILER_ENTRYPOINT}.${COMPILER_ENTRYPOINT_REACTIVITY}`];
+const REGEX_BACKSLASH = /\\/g;
+const REGEX_FORWARD_SLASH = /\//g;
+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(REGEX_BACKSLASH, '/'))
+        || program.getSourceFile(fileName.replace(REGEX_FORWARD_SLASH, '\\'));
+    if (programSourceFile) {
+        checker = program.getTypeChecker();
+        sourceFile = programSourceFile;
+    }
+    let changed = false, codegenChanged = false, needsImport = false, reactiveCalls = findReactiveCalls(sourceFile), result = code;
     if (reactiveCalls.length > 0) {
-        result = generateReactiveInlining(reactiveCalls, result, sourceFile);
         changed = true;
+        checker = undefined;
+        result = generateReactiveInlining(reactiveCalls, result, sourceFile);
         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);
     }
     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 { transform };

package/build/transformer/parser.d.ts

@@ -1,17 +1,18 @@
+import { COMPILER_TYPES } from '../constants.js';
 type NodePath = ('firstChild' | 'firstElementChild' | 'nextElementSibling' | 'nextSibling')[];
 declare const _default: {
     parse: (literals: string[]) => {
         html: string;
         slots: ({
             path: NodePath;
-            type: "slot";
+            type: COMPILER_TYPES.NodeSlot;
         } | {
             attributes: {
                 names: string[];
                 statics: Record<string, string>;
             };
             path: NodePath;
-            type: "attributes";
+            type: COMPILER_TYPES.AttributeSlot;
         })[] | null;
     };
 };

package/build/transformer/parser.js

@@ -1,4 +1,4 @@
-const SLOT_HTML = '<!--$-->';
+import { COMPILER_TYPES, PACKAGE, SLOT_HTML } from '../constants.js';
 const ATTRIBUTE_DELIMITERS = {
     class: ' ',
     style: ';'
@@ -125,9 +125,9 @@ const parse = (literals) => {
                 if (attr) {
                     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++];
                     }
@@ -139,7 +139,7 @@ const parse = (literals) => {
             }
             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) {
                 buffer += parsed[slot];

package/build/transformer/plugins/tsc.d.ts

@@ -1,3 +1,3 @@
-import { ts } from '@esportsplus/typescript';
-declare const _default: (program: ts.Program) => ts.TransformerFactory<ts.SourceFile>;
+import { plugin } from '@esportsplus/typescript/transformer';
+declare const _default: ReturnType<typeof plugin.tsc>;
 export default _default;

package/build/transformer/plugins/tsc.js

@@ -1,4 +1,3 @@
-import { createTransformer } from '../index.js';
-export default (program) => {
-    return createTransformer(program);
-};
+import { plugin } from '@esportsplus/typescript/transformer';
+import { transform } from '../index.js';
+export default plugin.tsc(transform);

package/build/transformer/plugins/vite.d.ts

@@ -1,5 +1,13 @@
-import type { Plugin } from 'vite';
-declare const _default: (options?: {
+declare const _default: ({ root }?: {
     root?: string;
-}) => Plugin;
+}) => {
+    configResolved(config: import("vite").ResolvedConfig): void;
+    enforce: string;
+    name: string;
+    transform(code: string, id: string): {
+        code: string;
+        map: null;
+    } | null;
+    watchChange(id: string): void;
+};
 export default _default;

package/build/transformer/plugins/vite.js

@@ -1,37 +1,7 @@
-import { mightNeedTransform, PATTERNS, transform } from '../index.js';
-import { program, TRANSFORM_PATTERN } from '@esportsplus/typescript/transformer';
-import { ts } from '@esportsplus/typescript';
-export default (options) => {
-    let root;
-    return {
-        enforce: 'pre',
-        name: '@esportsplus/template/plugin-vite',
-        configResolved(config) {
-            root = options?.root ?? config.root;
-        },
-        transform(code, id) {
-            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) {
-            if (TRANSFORM_PATTERN.test(id)) {
-                program.delete(root);
-            }
-        }
-    };
-};
+import { plugin } from '@esportsplus/typescript/transformer';
+import { PACKAGE } from '../../constants.js';
+import { transform } from '../index.js';
+export default plugin.vite({
+    name: PACKAGE,
+    transform
+});

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

@@ -16,6 +16,5 @@ type TemplateInfo = {
 };
 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 { findHtmlTemplates, findReactiveCalls };
 export type { ReactiveCallInfo, TemplateInfo };

package/build/transformer/ts-parser.js

@@ -1,38 +1,11 @@
+import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY } from '../constants.js';
 import { ts } from '@esportsplus/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.expression.expression.text === COMPILER_ENTRYPOINT &&
+        node.expression.name.text === COMPILER_ENTRYPOINT_REACTIVITY &&
         node.arguments.length === 2) {
         calls.push({
             arrayArg: node.arguments[0],
@@ -45,9 +18,30 @@ function visitReactiveCalls(node, calls) {
     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));
+    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 = [], 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);
+            }
+        }
+        templates.push({
+            depth,
+            end: node.end,
+            expressions,
+            literals,
+            node,
+            start: node.getStart()
+        });
     }
     ts.forEachChild(node, child => visitTemplates(child, nextDepth, templates));
 }
@@ -62,11 +56,4 @@ const findReactiveCalls = (sourceFile) => {
     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 };
+export { findHtmlTemplates, findReactiveCalls };

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

@@ -1,7 +1,6 @@
+import { COMPILER_TYPES } from '../constants.js';
 import { ts } from '@esportsplus/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[];
+declare const analyzeExpression: (expr: ts.Expression, checker?: ts.TypeChecker) => COMPILER_TYPES;
+declare const generateAttributeBinding: (elementVar: string, name: string, expr: string, staticValue: string, ns: string) => string;
+declare const generateSpreadBindings: (expr: ts.Expression, exprCode: string, elementVar: string, checker: ts.TypeChecker | undefined, ns: string) => string[];
 export { analyzeExpression, generateAttributeBinding, generateSpreadBindings };
-export type { SlotType };

package/build/transformer/type-analyzer.js

@@ -1,5 +1,4 @@
-import { getNames } from './codegen.js';
-import { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS } from '../event/constants.js';
+import { COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, COMPILER_TYPES, DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS } from '../constants.js';
 import { ts } from '@esportsplus/typescript';
 function analyzeSpread(expr, checker) {
     while (ts.isParenthesizedExpression(expr)) {
@@ -25,143 +24,84 @@ function analyzeSpread(expr, checker) {
     }
     if (checker && (ts.isIdentifier(expr) || ts.isPropertyAccessExpression(expr))) {
         try {
-            let keys = extractTypePropertyKeys(checker.getTypeAtLocation(expr));
+            let keys = [], props = checker.getTypeAtLocation(expr).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);
+            }
             if (keys.length > 0) {
                 return { canUnpack: true, keys };
             }
         }
-        catch {
-        }
+        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) {
+function inferCOMPILER_TYPES(expr, checker) {
     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') {
-        return 'array-slot';
+        expr.expression.expression.text === COMPILER_ENTRYPOINT &&
+        expr.expression.name.text === COMPILER_ENTRYPOINT_REACTIVITY) {
+        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';
+        return COMPILER_TYPES.ArraySlot;
     }
-    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.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';
-    }
-    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';
-                }
+        return COMPILER_TYPES.Unknown;
+    }
+    if (checker && (ts.isIdentifier(expr) || ts.isPropertyAccessExpression(expr) || ts.isCallExpression(expr))) {
+        try {
+            let type = checker.getTypeAtLocation(expr);
+            if (isTypeFunction(type, checker)) {
+                return COMPILER_TYPES.Effect;
             }
-            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, 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')) {
+    if (checker.isArrayType(type)) {
         return true;
     }
-    return false;
+    return type.getSymbol()?.getName() === 'ReactiveArray';
 }
 function isTypeFunction(type, checker) {
     if (type.getCallSignatures().length > 0) {
@@ -177,52 +117,67 @@ function isTypeFunction(type, checker) {
     return false;
 }
 const analyzeExpression = (expr, checker) => {
-    return inferSlotType(expr, checker ? { checker } : undefined);
+    return inferCOMPILER_TYPES(expr, checker);
 };
-const generateAttributeBinding = (elementVar, name, expr, staticValue) => {
-    let n = getNames();
+const generateAttributeBinding = (elementVar, name, expr, staticValue, ns) => {
     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, exprCode, elementVar, sourceFile, checker) => {
+const generateSpreadBindings = (expr, exprCode, elementVar, checker, ns) => {
     while (ts.isParenthesizedExpression(expr)) {
         expr = expr.expression;
     }
     let analysis = analyzeSpread(expr, checker);
     if (!analysis.canUnpack) {
-        return [`${getNames().attr}.spread(${elementVar}, ${exprCode});`];
+        return [`${ns}.attributes.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);
+            let key = analysis.keys[i], value = 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));
             }
         }
     }
     else {
         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));
         }
     }
     return lines;

package/build/types.d.ts

@@ -17,7 +17,7 @@ type Attributes<T extends HTMLElement = Element> = {
 type Effect<T> = () => T extends [] ? Renderable<T>[] : Renderable<T>;
 type Element = HTMLElement & Attributes<any>;
 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;
     tail: Element;