@esportsplus/template 0.32.0 → 0.32.1

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.js

@@ -1,4 +1,10 @@
-import { createTransformer } from '../index.js';
+import { transformCode } from '../../transformer/index.js';
 export default (program) => {
-    return createTransformer(program);
+    let typeChecker = program.getTypeChecker();
+    return () => {
+        return (sourceFile) => {
+            let result = transformCode(sourceFile.getFullText(), sourceFile, typeChecker);
+            return result.changed ? result.sourceFile : sourceFile;
+        };
+    };
 };

package/build/transformer/plugins/vite.js

@@ -1,30 +1,28 @@
-import { mightNeedTransform, PATTERNS, transform } from '../index.js';
-import { program, TRANSFORM_PATTERN } from '@esportsplus/typescript/transformer';
 import { ts } from '@esportsplus/typescript';
+import { program, TRANSFORM_PATTERN } from '@esportsplus/typescript/transformer';
+import { PACKAGE } from '../../constants.js';
+import { transform } from '../../transformer/index.js';
 export default (options) => {
     let root;
     return {
-        enforce: 'pre',
-        name: '@esportsplus/template/plugin-vite',
         configResolved(config) {
             root = options?.root ?? config.root;
         },
+        enforce: 'pre',
+        name: `${PACKAGE}/plugin-vite`,
         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));
+                let result = transform(ts.createSourceFile(id, code, ts.ScriptTarget.Latest, true), program.get(root));
                 if (!result.changed) {
                     return 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;
             }
         },

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,26 +1,5 @@
+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) ||
@@ -31,8 +10,8 @@ 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],
@@ -46,8 +25,27 @@ function visitReactiveCalls(node, 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));
+    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 +60,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, sourceFile: ts.SourceFile, 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)) {
@@ -46,67 +45,47 @@ function extractTypePropertyKeys(type) {
     }
     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, ctx) {
     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, 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) {
         let checker = ctx.checker;
@@ -114,10 +93,10 @@ function inferSlotType(expr, ctx) {
             try {
                 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 {
@@ -127,10 +106,10 @@ function inferSlotType(expr, ctx) {
             try {
                 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 {
@@ -140,28 +119,24 @@ function inferSlotType(expr, ctx) {
             try {
                 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 {
             }
         }
     }
-    return 'unknown';
+    return COMPILER_TYPES.Unknown;
 }
 function isTypeArray(type, checker) {
-    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, checker) {
     if (type.getCallSignatures().length > 0) {
@@ -177,52 +152,67 @@ function isTypeFunction(type, checker) {
     return false;
 }
 const analyzeExpression = (expr, checker) => {
-    return inferSlotType(expr, checker ? { checker } : undefined);
+    return inferCOMPILER_TYPES(expr, checker ? { checker } : undefined);
 };
-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, sourceFile, 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 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));
             }
         }
     }
     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;

package/package.json

@@ -2,12 +2,12 @@
   "author": "ICJR",
   "dependencies": {
     "@esportsplus/queue": "^0.2.0",
-    "@esportsplus/reactivity": "^0.25.2",
+    "@esportsplus/reactivity": "^0.25.7",
     "@esportsplus/utilities": "^0.27.2",
     "serve": "^14.2.5"
   },
   "devDependencies": {
-    "@esportsplus/typescript": "^0.17.3",
+    "@esportsplus/typescript": "^0.17.5",
     "@types/node": "^25.0.3",
     "vite": "^7.3.0",
     "vite-tsconfig-paths": "^6.0.3"
@@ -22,13 +22,13 @@
       "types": "./build/constants.d.ts"
     },
     "./plugins/tsc": {
+      "types": "./build/transformer/plugins/tsc.d.ts",
       "import": "./build/transformer/plugins/tsc.js",
-      "require": "./build/transformer/plugins/tsc.js",
-      "types": "./build/transformer/plugins/tsc.d.ts"
+      "require": "./build/transformer/plugins/tsc.js"
     },
     "./plugins/vite": {
-      "import": "./build/transformer/plugins/vite.js",
-      "types": "./build/transformer/plugins/vite.d.ts"
+      "types": "./build/transformer/plugins/vite.d.ts",
+      "import": "./build/transformer/plugins/vite.js"
     }
   },
   "main": "./build/index.js",
@@ -40,7 +40,7 @@
   },
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.32.0",
+  "version": "0.32.1",
   "scripts": {
     "build": "tsc",
     "build:test": "vite build --config test/vite.config.ts",

package/src/attributes.ts

@@ -1,15 +1,12 @@
 import { effect } from '@esportsplus/reactivity';
 import { isArray, isObject } from '@esportsplus/utilities';
-import { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS, STATE_HYDRATING, STATE_NONE, STATE_WAITING } from './constants';
+import { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS, STATE_HYDRATING, STATE_NONE, STATE_WAITING, STORE } from './constants';
 import { Attributes, Element } from './types';
 import { raf } from './utilities';
 import q from '@esportsplus/queue';
 import event from './event';
 
 
-const STORE = Symbol();
-
-
 type Context = {
     effect?: 0,
     element: Element;

package/src/constants.ts

@@ -1,11 +1,45 @@
-import { fragment } from './utilities';
+import { uid } from '@esportsplus/typescript/transformer';
 
 
 const ARRAY_SLOT = Symbol('template.array.slot');
 
 const CLEANUP = Symbol('template.cleanup');
 
-const EMPTY_FRAGMENT = fragment('');
+
+const COMPILER_ENTRYPOINT = 'html';
+
+const COMPILER_ENTRYPOINT_REACTIVITY = 'reactive';
+
+const COMPILER_NAMESPACE = uid('template');
+
+const enum COMPILER_TYPES {
+    ArraySlot,
+    AttributeSlot,
+    AttributeSpreadSlot,
+    DocumentFragment,
+    Effect,
+    NodeSlot,
+    Primitive,
+    Static,
+    Unknown
+};
+
+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'
+]);
+
+const PACKAGE = '@esportsplus/template';
+
 
 const SLOT_HTML = '<!--$-->';
 
@@ -21,7 +55,9 @@ const STORE = Symbol('template.store');
 export {
     ARRAY_SLOT,
     CLEANUP,
-    EMPTY_FRAGMENT,
-    SLOT_HTML, STATE_HYDRATING, STATE_NONE, STATE_WAITING, STORE
-};
-export * from './event/constants';
+    COMPILER_ENTRYPOINT, COMPILER_ENTRYPOINT_REACTIVITY, COMPILER_NAMESPACE, COMPILER_TYPES,
+    DIRECT_ATTACH_EVENTS,
+    LIFECYCLE_EVENTS,
+    PACKAGE,
+    SLOT_HTML, STATE_HYDRATING, STATE_NONE, STATE_WAITING, STORE,
+};

package/src/html.ts

@@ -1,16 +1,16 @@
-import { ReactiveArray } from '@esportsplus/reactivity';
+import { Reactive } from '@esportsplus/reactivity';
 import { Attribute, Attributes, Renderable } from '~/types';
 import { ArraySlot } from '~/slot/array';
 
 
-type Values<T> = Attribute | Attributes<any> | ArraySlot<T> | Renderable<T>;
+type Values<T> = ArraySlot<T extends unknown[] ? T : never> | Attribute | Attributes<any> | Renderable<T>;
 
 
 const html = <T>(_literals: TemplateStringsArray, ..._values: (Values<T> | Values<T>[])[]): DocumentFragment => {
     throw new Error('html`` templates must be compiled. Ensure vite-plugin is configured.');
 };
 
-html.reactive = <T>(_arr: ReactiveArray<T>, _template: (value: T) => DocumentFragment): ArraySlot<T> => {
+html.reactive = <T>(_arr: Reactive<T[]>, _template: (value: T) => DocumentFragment): ArraySlot<T[]> => {
     throw new Error('html.reactive() must be compiled. Ensure vite-plugin is configured.');
 };
 

package/src/slot/array.ts

@@ -1,7 +1,7 @@
-import { read, root, set, signal, ReactiveArray } from '@esportsplus/reactivity';
-import { ARRAY_SLOT, EMPTY_FRAGMENT } from '~/constants';
+import { read, root, signal, write, Reactive } from '@esportsplus/reactivity';
+import { ARRAY_SLOT } from '~/constants';
 import { Element, SlotGroup } from '~/types';
-import { clone, marker, raf } from '~/utilities';
+import { clone, fragment, marker, raf } from '~/utilities';
 import { ondisconnect, remove } from './cleanup';
 import html from '~/html';
 
@@ -18,18 +18,21 @@ type ArraySlotOp<T> =
     | { op: 'sort'; order: number[] };
 
 
+const EMPTY_FRAGMENT = fragment('');
+
+
 class ArraySlot<T> {
     private marker: Element;
     private nodes: SlotGroup[] = [];
     private queue: ArraySlotOp<T>[] = [];
     private scheduled = false;
     private signal;
-    private template: (...args: Parameters<(value: T) => ReturnType<typeof html>>) => SlotGroup;
+    private template: (...args: Parameters<(value: Reactive<T[]>[number]) => ReturnType<typeof html>>) => SlotGroup;
 
     readonly fragment: DocumentFragment;
 
 
-    constructor(private array: ReactiveArray<T>, template: ((value: T) => ReturnType<typeof html>)) {
+    constructor(private array: Reactive<T[]>, template: ((value: Reactive<T[]>[number]) => ReturnType<typeof html>)) {
         let fragment = this.fragment = clone(EMPTY_FRAGMENT);
 
         this.marker = marker.cloneNode() as unknown as Element;
@@ -171,7 +174,7 @@ class ArraySlot<T> {
                 }
             });
 
-            set(this.signal, this.nodes.length);
+            write(this.signal, this.nodes.length);
         });
     }
 

package/src/slot/render.ts

@@ -1,10 +1,13 @@
 import { isArray } from '@esportsplus/utilities';
-import { ARRAY_SLOT, EMPTY_FRAGMENT } from '~/constants';
+import { ARRAY_SLOT } from '~/constants';
 import { Element } from '~/types';
-import { clone, text } from '~/utilities';
+import { clone, fragment, text } from '~/utilities';
 import { ArraySlot } from './array';
 
 
+const EMPTY_FRAGMENT = fragment('');
+
+
 export default function render(anchor: Element, value: unknown): Node {
     if (value == null || value === false || value === '') {
         return EMPTY_FRAGMENT;