@esportsplus/template 0.32.3 → 0.32.5

package/build/attributes.d.ts

@@ -1,15 +1,6 @@
 import { Attributes, Element } from './types.js';
-declare const set: (element: Element, name: string, value: unknown) => void;
 declare const setClass: (element: Element, classlist: false | string | undefined, value: unknown) => void;
 declare const setProperty: (element: Element, name: string, value: unknown) => void;
+declare const setProperties: (element: Element, value: Attributes | Attributes[]) => void;
 declare const setStyle: (element: Element, styles: false | string | undefined, value: unknown) => void;
-declare const spread: (element: Element, value: Attributes | Attributes[]) => void;
-declare const _default: {
-    set: (element: Element, name: string, value: unknown) => void;
-    setClass: (element: Element, classlist: false | string | undefined, value: unknown) => void;
-    setProperty: (element: Element, name: string, value: unknown) => void;
-    setStyle: (element: Element, styles: false | string | undefined, value: unknown) => void;
-    spread: (element: Element, value: Attributes | Attributes[]) => void;
-};
-export default _default;
-export { set, setClass, setProperty, setStyle, spread };
+export { setClass, setProperty, setProperties, setStyle };

package/build/attributes.js

@@ -1,9 +1,9 @@
 import { effect } from '@esportsplus/reactivity';
 import { isArray, isObject } from '@esportsplus/utilities';
-import { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS, STATE_HYDRATING, STATE_NONE, STATE_WAITING, STORE } from './constants.js';
+import { STATE_HYDRATING, STATE_NONE, STATE_WAITING, STORE } from './constants.js';
 import { raf } from './utilities.js';
 import q from '@esportsplus/queue';
-import event from './event/index.js';
+import { runtime } from './event/index.js';
 let delimiters = {
     class: ' ',
     style: ';'
@@ -138,36 +138,10 @@ function schedule(ctx, element, name, state, value) {
     scheduled = true;
     raf(task);
 }
-function task() {
-    let context, n = queue.length;
-    while ((context = queue.next()) && n--) {
-        let { element, updates } = context;
-        for (let name in updates) {
-            apply(element, name, updates[name]);
-        }
-        context.updates = {};
-        context.updating = false;
-    }
-    if (queue.length) {
-        raf(task);
-    }
-    else {
-        scheduled = false;
-    }
-}
-const set = (element, name, value) => {
+function set(element, name, value) {
     if (typeof value === 'function') {
         if (name[0] === 'o' && name[1] === 'n') {
-            let e = name.slice(2).toLowerCase(), key = name.toLowerCase();
-            if (LIFECYCLE_EVENTS.has(key)) {
-                event[key](element, value);
-            }
-            else if (DIRECT_ATTACH_EVENTS.has(key)) {
-                event.direct(element, e, value);
-            }
-            else {
-                event.delegate(element, e, value);
-            }
+            runtime(element, name, value);
         }
         else {
             reactive(element, name, STATE_HYDRATING, value);
@@ -187,7 +161,24 @@ const set = (element, name, value) => {
         return;
     }
     (name === 'class' || name === 'style' ? list : property)(null, element, null, name, STATE_HYDRATING, value);
-};
+}
+function task() {
+    let context, n = queue.length;
+    while ((context = queue.next()) && n--) {
+        let { element, updates } = context;
+        for (let name in updates) {
+            apply(element, name, updates[name]);
+        }
+        context.updates = {};
+        context.updating = false;
+    }
+    if (queue.length) {
+        raf(task);
+    }
+    else {
+        scheduled = false;
+    }
+}
 const setClass = (element, classlist, value) => {
     let ctx = context(element), store = ctx.store ??= {};
     store['class.static'] = classlist || '';
@@ -207,18 +198,7 @@ const setProperty = (element, name, value) => {
         property(null, element, null, name, STATE_HYDRATING, value);
     }
 };
-const setStyle = (element, styles, value) => {
-    let ctx = context(element), store = ctx.store ??= {};
-    store['style.static'] = styles || '';
-    store['style'] ??= new Set();
-    if (typeof value === 'function') {
-        reactive(element, 'style', STATE_HYDRATING, value);
-    }
-    else {
-        list(ctx, element, null, 'style', STATE_HYDRATING, value);
-    }
-};
-const spread = function (element, value) {
+const setProperties = function (element, value) {
     if (isObject(value)) {
         for (let name in value) {
             let v = value[name];
@@ -230,9 +210,19 @@ const spread = function (element, value) {
     }
     else if (isArray(value)) {
         for (let i = 0, n = value.length; i < n; i++) {
-            spread(element, value[i]);
+            setProperties(element, value[i]);
         }
     }
 };
-export default { set, setClass, setProperty, setStyle, spread };
-export { set, setClass, setProperty, setStyle, spread };
+const setStyle = (element, styles, value) => {
+    let ctx = context(element), store = ctx.store ??= {};
+    store['style.static'] = styles || '';
+    store['style'] ??= new Set();
+    if (typeof value === 'function') {
+        reactive(element, 'style', STATE_HYDRATING, value);
+    }
+    else {
+        list(ctx, element, null, 'style', STATE_HYDRATING, value);
+    }
+};
+export { setClass, setProperty, setProperties, setStyle };

package/build/constants.d.ts

@@ -4,15 +4,15 @@ declare const COMPILER_ENTRYPOINT = "html";
 declare const COMPILER_ENTRYPOINT_REACTIVITY = "reactive";
 declare const COMPILER_NAMESPACE: string;
 declare const enum COMPILER_TYPES {
-    ArraySlot = 0,
-    AttributeSlot = 1,
-    AttributeSpreadSlot = 2,
-    DocumentFragment = 3,
-    Effect = 4,
-    NodeSlot = 5,
-    Primitive = 6,
-    Static = 7,
-    Unknown = 8
+    ArraySlot = "array-slot",
+    Attributes = "attributes",
+    Attribute = "attribute",
+    DocumentFragment = "document-fragment",
+    Effect = "effect",
+    Node = "node",
+    Primitive = "primitive",
+    Static = "static",
+    Unknown = "unknown"
 }
 declare const DIRECT_ATTACH_EVENTS: Set<string>;
 declare const LIFECYCLE_EVENTS: Set<string>;

package/build/constants.js

@@ -6,15 +6,15 @@ const COMPILER_ENTRYPOINT_REACTIVITY = 'reactive';
 const COMPILER_NAMESPACE = uid('template');
 var COMPILER_TYPES;
 (function (COMPILER_TYPES) {
-    COMPILER_TYPES[COMPILER_TYPES["ArraySlot"] = 0] = "ArraySlot";
-    COMPILER_TYPES[COMPILER_TYPES["AttributeSlot"] = 1] = "AttributeSlot";
-    COMPILER_TYPES[COMPILER_TYPES["AttributeSpreadSlot"] = 2] = "AttributeSpreadSlot";
-    COMPILER_TYPES[COMPILER_TYPES["DocumentFragment"] = 3] = "DocumentFragment";
-    COMPILER_TYPES[COMPILER_TYPES["Effect"] = 4] = "Effect";
-    COMPILER_TYPES[COMPILER_TYPES["NodeSlot"] = 5] = "NodeSlot";
-    COMPILER_TYPES[COMPILER_TYPES["Primitive"] = 6] = "Primitive";
-    COMPILER_TYPES[COMPILER_TYPES["Static"] = 7] = "Static";
-    COMPILER_TYPES[COMPILER_TYPES["Unknown"] = 8] = "Unknown";
+    COMPILER_TYPES["ArraySlot"] = "array-slot";
+    COMPILER_TYPES["Attributes"] = "attributes";
+    COMPILER_TYPES["Attribute"] = "attribute";
+    COMPILER_TYPES["DocumentFragment"] = "document-fragment";
+    COMPILER_TYPES["Effect"] = "effect";
+    COMPILER_TYPES["Node"] = "node";
+    COMPILER_TYPES["Primitive"] = "primitive";
+    COMPILER_TYPES["Static"] = "static";
+    COMPILER_TYPES["Unknown"] = "unknown";
 })(COMPILER_TYPES || (COMPILER_TYPES = {}));
 ;
 const DIRECT_ATTACH_EVENTS = new Set([

package/build/event/index.d.ts

@@ -1,11 +1,10 @@
 import { Element } from '../types.js';
-declare const _default: {
-    delegate: (element: Element, event: string, listener: Function) => void;
-    direct: (element: Element, event: string, listener: Function) => void;
-    onconnect: (element: globalThis.Element, listener: Function) => void;
-    ondisconnect: (element: Element, listener: Function) => void;
-    onrender: (element: Element, listener: Function) => void;
-    onresize: (element: Element, listener: Function) => void;
-    ontick: (element: globalThis.Element, listener: Function) => void;
-};
-export default _default;
+import onconnect from './onconnect.js';
+import onresize from './onresize.js';
+import ontick from './ontick.js';
+declare const delegate: (element: Element, event: string, listener: Function) => void;
+declare const on: (element: Element, event: string, listener: Function) => void;
+declare const ondisconnect: (element: Element, listener: Function) => void;
+declare const onrender: (element: Element, listener: Function) => void;
+declare const runtime: (element: Element, event: `on${string}`, listener: Function) => void;
+export { delegate, on, onconnect, ondisconnect, onrender, onresize, ontick, runtime };

package/build/event/index.js

@@ -4,6 +4,7 @@ import { ondisconnect as disconnect } from '../slot/cleanup.js';
 import onconnect from './onconnect.js';
 import onresize from './onresize.js';
 import ontick from './ontick.js';
+import { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS } from '../constants.js';
 let controllers = new Map(), host = window.document, keys = {}, passive = new Set([
     'animationend', 'animationiteration', 'animationstart',
     'mousedown', 'mouseenter', 'mouseleave', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'mousewheel',
@@ -61,7 +62,7 @@ function register(element, event) {
 const delegate = (element, event, listener) => {
     element[keys[event] || register(element, event)] = listener;
 };
-const direct = (element, event, listener) => {
+const on = (element, event, listener) => {
     let handler = (e) => listener.call(element, e);
     element.addEventListener(event, handler, {
         passive: passive.has(event)
@@ -76,4 +77,19 @@ const ondisconnect = (element, listener) => {
 const onrender = (element, listener) => {
     root(() => listener(element));
 };
-export default { delegate, direct, onconnect, ondisconnect, onrender, onresize, ontick };
+const lifecycle = { onconnect, ondisconnect, onrender, onresize, ontick };
+const runtime = (element, event, listener) => {
+    let key = event.toLowerCase();
+    if (LIFECYCLE_EVENTS.has(key)) {
+        lifecycle[key](element, listener);
+        return;
+    }
+    let e = event.slice(2).toLowerCase();
+    if (DIRECT_ATTACH_EVENTS.has(key)) {
+        on(element, e, listener);
+    }
+    else {
+        delegate(element, e, listener);
+    }
+};
+export { delegate, on, onconnect, ondisconnect, onrender, onresize, ontick, runtime };

package/build/index.d.ts

@@ -2,8 +2,8 @@ import './runtime.js';
 export { default as html } from './html.js';
 export { default as render } from './render.js';
 export { default as svg } from './svg.js';
-export { default as attributes } from './attributes.js';
-export { default as event } from './event/index.js';
+export * from './attributes.js';
+export * from './event/index.js';
 export { default as slot } from './slot/index.js';
 export { ArraySlot } from './slot/array.js';
 export { EffectSlot } from './slot/effect.js';

package/build/index.js

@@ -2,8 +2,8 @@ import './runtime.js';
 export { default as html } from './html.js';
 export { default as render } from './render.js';
 export { default as svg } from './svg.js';
-export { default as attributes } from './attributes.js';
-export { default as event } from './event/index.js';
+export * from './attributes.js';
+export * from './event/index.js';
 export { default as slot } from './slot/index.js';
 export { ArraySlot } from './slot/array.js';
 export { EffectSlot } from './slot/effect.js';

package/build/transformer/codegen.js

@@ -80,7 +80,7 @@ function generateTemplateCode(ctx, { html, slots }, exprTexts, exprNodes, isArro
             }
         }
         let name = uid('element'), suffix = path.slice(startIdx).join('.');
-        declarations.push(`${name} = ${ancestorVar}.${suffix}`);
+        declarations.push(`${name} = ${ancestorVar}.${suffix}!`);
         nodes.set(key, name);
     }
     code.push(isArrowBody ? '{' : `(() => {`, `let ${declarations.join(',\n')};`);
@@ -88,11 +88,11 @@ function generateTemplateCode(ctx, { html, slots }, exprTexts, exprNodes, isArro
         let elementVar = slots[i].path.length === 0
             ? root
             : (nodes.get(slots[i].path.join('.')) || root), slot = slots[i];
-        if (slot.type === COMPILER_TYPES.AttributeSlot) {
+        if (slot.type === COMPILER_TYPES.Attribute) {
             let names = slot.attributes.names;
             for (let j = 0, m = names.length; j < m; j++) {
                 let name = names[j];
-                if (name === 'spread') {
+                if (name === COMPILER_TYPES.Attributes) {
                     let bindings = generateSpreadBindings(exprNodes[index], exprTexts[index] || 'undefined', elementVar, ctx.checker, COMPILER_NAMESPACE);
                     for (let k = 0, o = bindings.length; k < o; k++) {
                         code.push(bindings[k]);

package/build/transformer/parser.d.ts

@@ -5,14 +5,14 @@ declare const _default: {
         html: string;
         slots: ({
             path: NodePath;
-            type: COMPILER_TYPES.NodeSlot;
+            type: COMPILER_TYPES.Node;
         } | {
             attributes: {
                 names: string[];
                 statics: Record<string, string>;
             };
             path: NodePath;
-            type: COMPILER_TYPES.AttributeSlot;
+            type: COMPILER_TYPES.Attribute;
         })[] | null;
     };
 };

package/build/transformer/parser.js

@@ -53,7 +53,7 @@ const parse = (literals) => {
     if (n === 0) {
         return { html, slots: null };
     }
-    let attributes = {}, buffer = '', events = false, index = 0, level = 0, levels = [{ children: 0, elements: 0, path: [] }], parsed = html.split(SLOT_MARKER), slot = 0, slots = [];
+    let attributes = {}, buffer = '', index = 0, level = 0, levels = [{ children: 0, elements: 0, path: [] }], parsed = html.split(SLOT_MARKER), slot = 0, slots = [];
     {
         let attribute = '', buffer = '', char = '', quote = '';
         for (let match of html.matchAll(REGEX_SLOT_ATTRIBUTES)) {
@@ -102,12 +102,9 @@ const parse = (literals) => {
                             }
                         }
                         else {
-                            names.push('spread');
+                            names.push(COMPILER_TYPES.Attributes);
                         }
                     }
-                    else if (buffer === 'on') {
-                        events = true;
-                    }
                 }
             }
         }
@@ -127,7 +124,7 @@ const parse = (literals) => {
                     if (!attrs) {
                         throw new Error(`${PACKAGE}: attribute metadata could not be found for '${attr}'`);
                     }
-                    slots.push({ attributes: attrs, path, type: COMPILER_TYPES.AttributeSlot });
+                    slots.push({ attributes: attrs, path, type: COMPILER_TYPES.Attribute });
                     for (let i = 0, n = attrs.names.length; i < n; i++) {
                         buffer += parsed[slot++];
                     }
@@ -139,7 +136,10 @@ const parse = (literals) => {
             }
             else if (type === NODE_SLOT) {
                 buffer += parsed[slot++] + SLOT_HTML;
-                slots.push({ path: methods(parent.children, parent.path, 'firstChild', 'nextSibling'), type: COMPILER_TYPES.NodeSlot });
+                slots.push({
+                    path: methods(parent.children, parent.path, 'firstChild', 'nextSibling'),
+                    type: COMPILER_TYPES.Node
+                });
             }
             if (n === slot) {
                 buffer += parsed[slot];
@@ -154,10 +154,9 @@ const parse = (literals) => {
             index = (match.index || 0) + match[0].length;
         }
     }
-    if (events) {
-        buffer = buffer.replace(REGEX_EVENTS, '');
-    }
-    buffer = buffer.replace(REGEX_EMPTY_ATTRIBUTES, '');
+    buffer = buffer
+        .replace(REGEX_EVENTS, '')
+        .replace(REGEX_EMPTY_ATTRIBUTES, '');
     return {
         html: buffer,
         slots: slots.length ? slots : null

package/build/transformer/type-analyzer.js

@@ -123,23 +123,23 @@ 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 `${ns}.event.${key}(${elementVar}, ${expr});`;
+            return `${ns}.${key}(${elementVar}, ${expr});`;
         }
         if (DIRECT_ATTACH_EVENTS.has(key)) {
-            return `${ns}.event.direct(${elementVar}, '${event}', ${expr});`;
+            return `${ns}.on(${elementVar}, '${event}', ${expr});`;
         }
-        return `${ns}.event.delegate(${elementVar}, '${event}', ${expr});`;
+        return `${ns}.delegate(${elementVar}, '${event}', ${expr});`;
     }
     if (name === 'class') {
-        return `${ns}.attributes.setClass(${elementVar}, '${staticValue}', ${expr});`;
+        return `${ns}.setClass(${elementVar}, '${staticValue}', ${expr});`;
     }
-    if (name === 'spread') {
-        return `${ns}.attributes.spread(${elementVar}, ${expr});`;
+    if (name === COMPILER_TYPES.Attributes) {
+        return `${ns}.setProperties(${elementVar}, ${expr});`;
     }
     if (name === 'style') {
-        return `${ns}.attributes.setStyle(${elementVar}, '${staticValue}', ${expr});`;
+        return `${ns}.setStyle(${elementVar}, '${staticValue}', ${expr});`;
     }
-    return `${ns}.attributes.setProperty(${elementVar}, '${name}', ${expr});`;
+    return `${ns}.setProperty(${elementVar}, '${name}', ${expr});`;
 };
 const generateSpreadBindings = (expr, exprCode, elementVar, checker, ns) => {
     while (ts.isParenthesizedExpression(expr)) {
@@ -147,7 +147,7 @@ const generateSpreadBindings = (expr, exprCode, elementVar, checker, ns) => {
     }
     let analysis = analyzeSpread(expr, checker);
     if (!analysis.canUnpack) {
-        return [`${ns}.attributes.spread(${elementVar}, ${exprCode});`];
+        return [`${ns}.setProperties(${elementVar}, ${exprCode});`];
     }
     let lines = [];
     if (ts.isObjectLiteralExpression(expr)) {

package/build/types.d.ts

@@ -1,5 +1,5 @@
 import { ArraySlot } from './slot/array.js';
-import attributes from './attributes.js';
+import { setProperties } from './attributes.js';
 import slot from './slot/index.js';
 type Attribute = Effect<Primitive | Primitive[]> | ((...args: any[]) => void) | Primitive;
 type Attributes<T extends HTMLElement = Element> = {
@@ -27,7 +27,7 @@ type Template = {
     html: string;
     literals: TemplateStringsArray;
     slots: {
-        fn: typeof attributes.spread | typeof slot;
+        fn: typeof setProperties | typeof slot;
         name: string | null;
         path: (() => ChildNode | null)[];
     }[] | null;

package/package.json

@@ -40,7 +40,7 @@
   },
   "type": "module",
   "types": "./build/index.d.ts",
-  "version": "0.32.3",
+  "version": "0.32.5",
   "scripts": {
     "build": "tsc",
     "build:test": "vite build --config test/vite.config.ts",

package/src/attributes.ts

@@ -1,10 +1,10 @@
 import { effect } from '@esportsplus/reactivity';
 import { isArray, isObject } from '@esportsplus/utilities';
-import { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS, STATE_HYDRATING, STATE_NONE, STATE_WAITING, STORE } from './constants';
+import { 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';
+import { runtime } from './event';
 
 
 type Context = {
@@ -221,45 +221,10 @@ function schedule(ctx: Context | null, element: Element, name: string, state: St
     raf(task);
 }
 
-function task() {
-    let context,
-        n = queue.length;
-
-    while ((context = queue.next()) && n--) {
-        let { element, updates } = context;
-
-        for (let name in updates) {
-            apply(element, name, updates[name]);
-        }
-
-        context.updates = {};
-        context.updating = false;
-    }
-
-    if (queue.length) {
-        raf(task);
-    }
-    else {
-        scheduled = false;
-    }
-}
-
-
-const set = (element: Element, name: string, value: unknown) => {
+function set(element: Element, name: string, value: unknown) {
     if (typeof value === 'function') {
         if (name[0] === 'o' && name[1] === 'n') {
-            let e = name.slice(2).toLowerCase(),
-                key = name.toLowerCase();
-
-            if (LIFECYCLE_EVENTS.has(key)) {
-                (event as any)[key](element, value as Function);
-            }
-            else if (DIRECT_ATTACH_EVENTS.has(key)) {
-                event.direct(element, e, value as Function);
-            }
-            else {
-                event.delegate(element, e, value as Function);
-            }
+            runtime(element, name as `on${string}`, value as Function);
         }
         else {
             reactive(element, name, STATE_HYDRATING, value);
@@ -283,7 +248,31 @@ const set = (element: Element, name: string, value: unknown) => {
     }
 
     (name === 'class' || name === 'style' ? list : property)(null, element, null, name, STATE_HYDRATING, value);
-};
+}
+
+function task() {
+    let context,
+        n = queue.length;
+
+    while ((context = queue.next()) && n--) {
+        let { element, updates } = context;
+
+        for (let name in updates) {
+            apply(element, name, updates[name]);
+        }
+
+        context.updates = {};
+        context.updating = false;
+    }
+
+    if (queue.length) {
+        raf(task);
+    }
+    else {
+        scheduled = false;
+    }
+}
+
 
 const setClass = (element: Element, classlist: false | string | undefined, value: unknown) => {
     let ctx = context(element),
@@ -309,22 +298,7 @@ const setProperty = (element: Element, name: string, value: unknown) => {
     }
 };
 
-const setStyle = (element: Element, styles: false | string | undefined, value: unknown) => {
-    let ctx = context(element),
-        store = ctx.store ??= {};
-
-    store['style.static'] = styles || '';
-    store['style'] ??= new Set<string>();
-
-    if (typeof value === 'function') {
-        reactive(element, 'style', STATE_HYDRATING, value);
-    }
-    else {
-        list(ctx, element, null, 'style', STATE_HYDRATING, value);
-    }
-};
-
-const spread = function (element: Element, value: Attributes | Attributes[]) {
+const setProperties = function (element: Element, value: Attributes | Attributes[]) {
     if (isObject(value)) {
         for (let name in value) {
             let v = value[name];
@@ -338,11 +312,25 @@ const spread = function (element: Element, value: Attributes | Attributes[]) {
     }
     else if (isArray(value)) {
         for (let i = 0, n = value.length; i < n; i++) {
-            spread(element, value[i]);
+            setProperties(element, value[i]);
         }
     }
 };
 
+const setStyle = (element: Element, styles: false | string | undefined, value: unknown) => {
+    let ctx = context(element),
+        store = ctx.store ??= {};
+
+    store['style.static'] = styles || '';
+    store['style'] ??= new Set<string>();
+
+    if (typeof value === 'function') {
+        reactive(element, 'style', STATE_HYDRATING, value);
+    }
+    else {
+        list(ctx, element, null, 'style', STATE_HYDRATING, value);
+    }
+};
+
 
-export default { set, setClass, setProperty, setStyle, spread };
-export { set, setClass, setProperty, setStyle, spread };
+export { setClass, setProperty, setProperties, setStyle };

package/src/constants.ts

@@ -13,15 +13,15 @@ const COMPILER_ENTRYPOINT_REACTIVITY = 'reactive';
 const COMPILER_NAMESPACE = uid('template');
 
 const enum COMPILER_TYPES {
-    ArraySlot,
-    AttributeSlot,
-    AttributeSpreadSlot,
-    DocumentFragment,
-    Effect,
-    NodeSlot,
-    Primitive,
-    Static,
-    Unknown
+    ArraySlot = 'array-slot',
+    Attributes = 'attributes',
+    Attribute = 'attribute',
+    DocumentFragment = 'document-fragment',
+    Effect = 'effect',
+    Node = 'node',
+    Primitive = 'primitive',
+    Static = 'static',
+    Unknown = 'unknown'
 };
 
 const DIRECT_ATTACH_EVENTS = new Set<string>([

package/src/event/index.ts

@@ -5,6 +5,7 @@ import { ondisconnect as disconnect } from '~/slot/cleanup';
 import onconnect from './onconnect';
 import onresize from './onresize';
 import ontick from './ontick';
+import { DIRECT_ATTACH_EVENTS, LIFECYCLE_EVENTS } from '~/constants';
 
 
 let controllers = new Map<string, (AbortController & { listeners: number }) | null>(),
@@ -92,7 +93,7 @@ const delegate = (element: Element, event: string, listener: Function): void =>
 };
 
 // DIRECT_ATTACH_EVENTS in ./constants.ts tells compiler to use this function
-const direct = (element: Element, event: string, listener: Function): void => {
+const on = (element: Element, event: string, listener: Function): void => {
     let handler = (e: Event) => listener.call(element, e);
 
     element.addEventListener(event, handler, {
@@ -112,5 +113,25 @@ const onrender = (element: Element, listener: Function) => {
     root(() => listener(element));
 };
 
+const lifecycle = { onconnect, ondisconnect, onrender, onresize, ontick };
 
-export default { delegate, direct, onconnect, ondisconnect, onrender, onresize, ontick };
+const runtime = (element: Element, event: `on${string}`, listener: Function): void => {
+    let key = event.toLowerCase();
+
+    if (LIFECYCLE_EVENTS.has(key)) {
+        lifecycle[key as keyof typeof lifecycle](element, listener);
+        return;
+    }
+
+    let e = event.slice(2).toLowerCase();
+
+    if (DIRECT_ATTACH_EVENTS.has(key)) {
+        on(element, e, listener);
+    }
+    else {
+        delegate(element, e, listener);
+    }
+};
+
+
+export { delegate, on, onconnect, ondisconnect, onrender, onresize, ontick, runtime };

package/src/index.ts

@@ -4,8 +4,8 @@ export { default as render } from './render';
 export { default as svg } from './svg';
 
 // Must be exported for compilation even if not used directly
-export { default as attributes } from './attributes';
-export { default as event } from './event';
+export * from './attributes';
+export * from './event';
 export { default as slot } from './slot';
 export { ArraySlot } from './slot/array';
 export { EffectSlot } from './slot/effect';

package/src/transformer/codegen.ts

@@ -9,13 +9,13 @@ import {
 import parser from './parser';
 
 
-type AttributeSlot = {
+type Attribute = {
     attributes: {
         names: string[];
         statics: Record<string, string>;
     };
     path: string[];
-    type: COMPILER_TYPES.AttributeSlot;
+    type: COMPILER_TYPES.Attribute;
 };
 
 type CodegenContext = {
@@ -31,14 +31,14 @@ type CodegenResult = {
     code: string;
 };
 
-type NodeSlot = {
+type Node = {
     path: string[];
-    type: COMPILER_TYPES.NodeSlot;
+    type: COMPILER_TYPES.Node;
 };
 
 type ParseResult = {
     html: string;
-    slots: (AttributeSlot | NodeSlot)[] | null;
+    slots: (Attribute | Node)[] | null;
 };
 
 
@@ -174,7 +174,7 @@ function generateTemplateCode(
         let name = uid('element'),
             suffix = path.slice(startIdx).join('.');
 
-        declarations.push(`${name} = ${ancestorVar}.${suffix}`);
+        declarations.push(`${name} = ${ancestorVar}.${suffix}!`);
         nodes.set(key, name);
     }
 
@@ -189,13 +189,13 @@ function generateTemplateCode(
                 : (nodes.get(slots[i].path.join('.')) || root),
             slot = slots[i];
 
-        if (slot.type === COMPILER_TYPES.AttributeSlot) {
+        if (slot.type === COMPILER_TYPES.Attribute) {
             let names = slot.attributes.names;
 
             for (let j = 0, m = names.length; j < m; j++) {
                 let name = names[j];
 
-                if (name === 'spread') {
+                if (name === COMPILER_TYPES.Attributes) {
                     let bindings = generateSpreadBindings(
                             exprNodes[index],
                             exprTexts[index] || 'undefined',

package/src/transformer/parser.ts

@@ -1,8 +1,4 @@
-import {
-    COMPILER_TYPES,
-    PACKAGE,
-    SLOT_HTML
-} from '../constants';
+import { COMPILER_TYPES, PACKAGE, SLOT_HTML } from '../constants';
 
 
 type NodePath = ('firstChild' | 'firstElementChild' | 'nextElementSibling' | 'nextSibling')[];
@@ -88,15 +84,14 @@ const parse = (literals: string[]) => {
 
     let attributes: Record<string, { names: string[], statics: Record<string, string> }> = {},
         buffer = '',
-        events = false,
         index = 0,
         level = 0,
         levels = [{ children: 0, elements: 0, path: [] as NodePath }],
         parsed = html.split(SLOT_MARKER),
         slot = 0,
         slots: (
-            { path: NodePath; type: COMPILER_TYPES.NodeSlot } |
-            { attributes: typeof attributes[string]; path: NodePath; type: COMPILER_TYPES.AttributeSlot }
+            { path: NodePath; type: COMPILER_TYPES.Node } |
+            { attributes: typeof attributes[string]; path: NodePath; type: COMPILER_TYPES.Attribute }
         )[] = [];
 
     {
@@ -159,12 +154,9 @@ const parse = (literals: string[]) => {
                             }
                         }
                         else {
-                            names.push('spread');
+                            names.push(COMPILER_TYPES.Attributes);
                         }
                     }
-                    else if (buffer === 'on') {
-                        events = true;
-                    }
                 }
             }
         }
@@ -192,7 +184,7 @@ const parse = (literals: string[]) => {
                         throw new Error(`${PACKAGE}: attribute metadata could not be found for '${attr}'`);
                     }
 
-                    slots.push({ attributes: attrs, path, type: COMPILER_TYPES.AttributeSlot });
+                    slots.push({ attributes: attrs, path, type: COMPILER_TYPES.Attribute });
 
                     for (let i = 0, n = attrs.names.length; i < n; i++) {
                         buffer += parsed[slot++];
@@ -207,7 +199,10 @@ const parse = (literals: string[]) => {
             }
             else if (type === NODE_SLOT) {
                 buffer += parsed[slot++] + SLOT_HTML;
-                slots.push({ path: methods(parent.children, parent.path, 'firstChild', 'nextSibling'), type: COMPILER_TYPES.NodeSlot });
+                slots.push({
+                    path: methods(parent.children, parent.path, 'firstChild', 'nextSibling'),
+                    type: COMPILER_TYPES.Node
+                });
             }
 
             if (n === slot) {
@@ -226,11 +221,9 @@ const parse = (literals: string[]) => {
         }
     }
 
-    if (events) {
-        buffer = buffer.replace(REGEX_EVENTS, '');
-    }
-
-    buffer = buffer.replace(REGEX_EMPTY_ATTRIBUTES, '');
+    buffer = buffer
+        .replace(REGEX_EVENTS, '')
+        .replace(REGEX_EMPTY_ATTRIBUTES, '');
 
     return {
         html: buffer,

package/src/transformer/type-analyzer.ts

@@ -178,29 +178,29 @@ const generateAttributeBinding = (elementVar: string, name: string, expr: string
             key = name.toLowerCase();
 
         if (LIFECYCLE_EVENTS.has(key)) {
-            return `${ns}.event.${key}(${elementVar}, ${expr});`;
+            return `${ns}.${key}(${elementVar}, ${expr});`;
         }
 
         if (DIRECT_ATTACH_EVENTS.has(key)) {
-            return `${ns}.event.direct(${elementVar}, '${event}', ${expr});`;
+            return `${ns}.on(${elementVar}, '${event}', ${expr});`;
         }
 
-        return `${ns}.event.delegate(${elementVar}, '${event}', ${expr});`;
+        return `${ns}.delegate(${elementVar}, '${event}', ${expr});`;
     }
 
     if (name === 'class') {
-        return `${ns}.attributes.setClass(${elementVar}, '${staticValue}', ${expr});`;
+        return `${ns}.setClass(${elementVar}, '${staticValue}', ${expr});`;
     }
 
-    if (name === 'spread') {
-        return `${ns}.attributes.spread(${elementVar}, ${expr});`;
+    if (name === COMPILER_TYPES.Attributes) {
+        return `${ns}.setProperties(${elementVar}, ${expr});`;
     }
 
     if (name === 'style') {
-        return `${ns}.attributes.setStyle(${elementVar}, '${staticValue}', ${expr});`;
+        return `${ns}.setStyle(${elementVar}, '${staticValue}', ${expr});`;
     }
 
-    return `${ns}.attributes.setProperty(${elementVar}, '${name}', ${expr});`;
+    return `${ns}.setProperty(${elementVar}, '${name}', ${expr});`;
 };
 
 const generateSpreadBindings = (
@@ -217,7 +217,7 @@ const generateSpreadBindings = (
     let analysis = analyzeSpread(expr, checker);
 
     if (!analysis.canUnpack) {
-        return [`${ns}.attributes.spread(${elementVar}, ${exprCode});`];
+        return [`${ns}.setProperties(${elementVar}, ${exprCode});`];
     }
 
     let lines: string[] = [];

package/src/types.ts

@@ -1,5 +1,5 @@
 import { ArraySlot } from './slot/array';
-import attributes from './attributes';
+import { setProperties } from './attributes';
 import slot from './slot';
 
 
@@ -38,7 +38,7 @@ type Template = {
     html: string;
     literals: TemplateStringsArray;
     slots: {
-        fn: typeof attributes.spread | typeof slot;
+        fn: typeof setProperties | typeof slot;
         name: string | null;
         path: (() => ChildNode | null)[];
     }[] | null;