@xtia/jel 0.8.0 → 0.10.0

package/README.md

@@ -65,14 +65,14 @@ function showDialogue(content: DOMContent) => {
 
 interface Job {
     name: string;
-    completionMessage: DOMContent;
+    completionMessage: () => DOMContent;
 }
 
 showDialogue("Hello, world");
 showDialogue(["Hello, ", $.i("world")]);
 showDialogue([
     $.h2(`${job.name} Complete`),
-    $.p(job.completionMessage),
+    $.p(job.completionMessage()),
 ]);
 ```
 
@@ -130,15 +130,15 @@ showDialogue(["Hello ", $("span.green", "world")]);
 Event emitters can be chained:
 
 ```ts
-element.events.mousemove
+div.events.mousemove
 	.takeUntil(body.events.mousedown.filter(e => e.button === 1))
 	.map(ev => [ev.offsetX, ev.offsetY])
 	.apply(([x, y]) => console.log("mouse @ ", x, y));
 ```
 
-For RxJS users, events can be observed with `fromEvent(element.events, "mousemove")`.
+For RxJS users, events can be observed with `fromEvent(ent.element, "mousemove")`.
 
-## Reactive styles
+## Reactive properties
 
 Style properties, content and class presence can be emitter subscriptions:
 
@@ -165,6 +165,20 @@ virtualCursor.classes.toggle(
 h1.content = websocket$
     .filter(msg => msg.type == "title")
     .map(msg => msg.text);
+
+const searchInput = $("input.search");
+const searchResults$ = searchInput.events.input
+    .debounce(300)
+    .map(() => searchInput.value)
+    .filter(term => term.length >= 2)
+    .mapAsync(term => performSearch(term)); // Returns emitter of search results
+
+// Then use it reactively
+$.ul({
+    content: searchResults$.map(results => 
+        results.map(result => $.li(result.title))
+    )
+});
 ```
 Removing an element from the page will unsubscribe from any attached stream, and resubscribe if subsequently appended.
 

package/index.d.ts

@@ -1,7 +1,9 @@
-export { DomEntity, ElementClassDescriptor, ElementDescriptor, DOMContent, DomHelper, StyleAccessor, JelEntity } from "./internal/types";
 import { $ } from "./internal/element";
 import { DomEntity } from "./internal/types";
+export { DomEntity, ElementClassDescriptor, ElementDescriptor, DOMContent, DomHelper, StyleAccessor, JelEntity, EventEmitterMap } from "./internal/types";
 export { createEntity } from "./internal/util";
-export { createEventSource, interval, timeout, SubjectEmitter, toEventEmitter, type EventEmitter, combineEmitters } from "./internal/emitter";
+export { createEventSource, createEventsSource, interval, timeout, SubjectEmitter, toEventEmitter, type EventEmitter, type EventRecording, type EventRecorder, combineEmitters } from "./internal/emitter";
+export { createEventsProxy } from "./internal/proxy";
 export { $ };
 export declare const $body: DomEntity<HTMLElement>;
+export declare const windowEvents: import(".").EventEmitterMap<WindowEventMap>;

package/index.js

@@ -1,5 +1,8 @@
 import { $ } from "./internal/element";
+import { createEventsProxy } from "./internal/proxy";
 export { createEntity } from "./internal/util";
-export { createEventSource, interval, timeout, SubjectEmitter, toEventEmitter, combineEmitters } from "./internal/emitter";
+export { createEventSource, createEventsSource, interval, timeout, SubjectEmitter, toEventEmitter, combineEmitters } from "./internal/emitter";
+export { createEventsProxy } from "./internal/proxy";
 export { $ };
 export const $body = "document" in globalThis ? $(document.body) : undefined;
+export const windowEvents = createEventsProxy(window);

package/internal/element.d.ts

@@ -11,6 +11,7 @@ export declare class ClassAccessor {
     toggle(className: string, value: EmitterLike<boolean>): void;
     contains(className: string): boolean;
     get length(): number;
+    get value(): string;
     toString(): string;
     replace(token: string, newToken: string): void;
     forEach(cb: (token: string, idx: number) => void): void;

package/internal/element.js

@@ -1,4 +1,5 @@
-import { attribsProxy, eventsProxy, styleProxy } from "./proxy";
+import { toEventEmitter } from "./emitter.js";
+import { attribsProxy, createEventsProxy, styleProxy } from "./proxy";
 import { entityDataSymbol, isContent, isJelEntity, isReactiveSource } from "./util";
 const elementWrapCache = new WeakMap();
 const recursiveAppend = (parent, c) => {
@@ -17,7 +18,7 @@ const recursiveAppend = (parent, c) => {
     parent.append(c);
 };
 function createElement(tag, descriptor = {}) {
-    if (isContent(descriptor))
+    if (isContent(descriptor) || isReactiveSource(descriptor))
         descriptor = {
             content: descriptor,
         };
@@ -200,8 +201,8 @@ function getWrappedElement(element) {
             if (listeners.style[prop])
                 removeListener("style", prop);
             if (typeof value == "object" && value) {
-                if ("listen" in value || "subscribe" in value) {
-                    addListener("style", prop, value);
+                if (isReactiveSource(value)) {
+                    addListener("style", prop, toEventEmitter(value));
                     return;
                 }
                 value = value.toString();
@@ -347,7 +348,7 @@ function getWrappedElement(element) {
                         removeListener("class", c);
                 });
             }),
-            events: new Proxy(element, eventsProxy)
+            events: createEventsProxy(element),
         };
         elementWrapCache.set(element, domEntity);
     }
@@ -381,6 +382,9 @@ export class ClassAccessor {
     get length() {
         return this.classList.length;
     }
+    get value() {
+        return this.classList.value;
+    }
     toString() {
         return this.classList.toString();
     }
@@ -393,13 +397,9 @@ export class ClassAccessor {
     }
     map(cb) {
         const result = [];
-        const entries = this.classList.entries();
-        let entry = entries.next();
-        while (!entry.done) {
-            const [idx, value] = entry.value;
-            result.push(cb(value, idx));
-            entry = entries.next();
-        }
+        this.classList.forEach((v, i) => {
+            result.push(cb(v, i));
+        });
         return result;
     }
 }

package/internal/emitter.d.ts

@@ -1,5 +1,4 @@
-import { EmitterLike } from "./types";
-type Handler<T> = (value: T) => void;
+import { Dictionary, EmissionSource, EmitterLike, EventHandlerMap, EventSource, Handler, Period } from "./types";
 export type ListenFunc<T> = (handler: Handler<T>) => UnsubscribeFunc;
 export type UnsubscribeFunc = () => void;
 export declare class EventEmitter<T> {
@@ -24,6 +23,8 @@ export declare class EventEmitter<T> {
      * @returns Listenable: emits transformed values
      */
     map<R>(mapFunc: (value: T) => R): EventEmitter<R>;
+    mapAsync<R>(mapFunc: (value: T) => Promise<R>): EventEmitter<R>;
+    as<R>(value: R): EventEmitter<R>;
     /**
      * Creates a chainable emitter that selectively forwards emissions along the chain
      * @param check Function that takes an emitted value and returns true if the emission should be forwarded along the chain
@@ -68,18 +69,33 @@ export declare class EventEmitter<T> {
      * @param cb
      */
     fork(...cb: ((branch: this) => void)[]): this;
+    /**
+     * Creates a chainable emitter that forwards the parent's last emission after a period of time in which the parent doesn't emit
+     * @param ms Delay in milliseconds
+     * @returns Debounced emitter
+     */
     debounce(ms: number): EventEmitter<T>;
+    debounce(period: Period): EventEmitter<T>;
+    /**
+     * Creates a chainable emitter that forwards the parent's emissions, with a minimum delay between emissions during which parent emssions are ignored
+     * @param ms Delay in milliseconds
+     * @returns Throttled emitter
+     */
     throttle(ms: number): EventEmitter<T>;
+    throttle(period: Period): EventEmitter<T>;
     batch(ms: number): EventEmitter<T[]>;
     /**
-     * Creates a chainable emitter that
+     * Creates a chainable emitter that forwards the next emission from the parent
      * **Experimental**: May change in future revisions
      * Note: only listens to the parent while at least one downstream subscription is present
      * @param notifier
      * @returns
      */
     once(): EventEmitter<T>;
+    once(handler: Handler<T>): UnsubscribeFunc;
+    getNext(): Promise<T>;
     delay(ms: number): EventEmitter<T>;
+    delay(period: Period): EventEmitter<T>;
     scan<S>(updater: (state: S, value: T) => S, initial: S): EventEmitter<S>;
     buffer(count: number): EventEmitter<T[]>;
     /**
@@ -124,7 +140,35 @@ export declare class EventEmitter<T> {
     memo(): Memo<T | undefined>;
     memo(initial: T): Memo<T>;
     memo<U>(initial: U): Memo<T | U>;
+    record(): EventRecorder<T>;
+}
+export declare class EventRecorder<T> {
+    private startTime;
+    private entries;
+    private recording;
+    private unsubscribe;
+    constructor(emitter: EventEmitter<T>);
+    private add;
+    stop(): EventRecording<T>;
 }
+export declare class EventRecording<T> {
+    private _entries;
+    constructor(entries: [number, T][]);
+    export(): [number, T][];
+    play(speed?: number): EventEmitter<T>;
+}
+type EmitEmitterPair<T> = {
+    emit: (value: T) => void;
+    emitter: EventEmitter<T>;
+};
+type CreateEventSourceOptions<T> = {
+    initialHandler?: Handler<T>;
+    /**
+     * Function to call when subscription count changes from 0
+     * Return a *deactivation* function, which will be called when subscription count changes back to 0
+     */
+    activate?(): UnsubscribeFunc;
+};
 /**
  * Creates a linked EventEmitter and emit() pair
  * @example
@@ -156,16 +200,17 @@ export declare class EventEmitter<T> {
  * @param initialHandler Optional listener automatically applied to the resulting Emitter
  * @returns
  */
-export declare function createEventSource<T>(initialHandler?: Handler<T>): {
-    emit: (value: T) => void;
-    emitter: EventEmitter<T>;
+export declare function createEventSource<T>(initialHandler?: Handler<T>): EmitEmitterPair<T>;
+export declare function createEventSource<T>(options?: CreateEventSourceOptions<T>): EmitEmitterPair<T>;
+export declare function createEventsSource<Map extends Dictionary<any>>(initialListeners?: EventHandlerMap<Map>): {
+    emitters: import("./types").EventEmitterMap<Map>;
+    trigger: <K extends keyof Map>(name: K, value: Map[K]) => void;
 };
-export declare function interval(ms: number | {
-    asMilliseconds: number;
-}): EventEmitter<number>;
-export declare function timeout(t: number | {
-    asMilliseconds: number;
-}): EventEmitter<void>;
+export declare function interval(ms: number): EventEmitter<number>;
+export declare function interval(period: Period): EventEmitter<number>;
+export declare const animationFrames: EventEmitter<number>;
+export declare function timeout(ms: number): EventEmitter<void>;
+export declare function timeout(period: Period): EventEmitter<void>;
 declare class Memo<T> {
     private _value;
     private unsubscribeFunc;
@@ -180,25 +225,17 @@ export declare class SubjectEmitter<T> extends EventEmitter<T> {
     get value(): T;
     next(value: T): void;
 }
-type EventSource<T, E extends string> = {
-    on: (eventName: E, handler: (value: T) => void) => UnsubscribeFunc;
-} | {
-    on: (eventName: E, handler: (value: T) => void) => void | UnsubscribeFunc;
-    off: (eventName: E, handler: (value: T) => void) => void;
-} | {
-    addEventListener: (eventName: E, handler: (value: T) => void) => UnsubscribeFunc;
-} | {
-    addEventListener: (eventName: E, handler: (value: T) => void) => void | UnsubscribeFunc;
-    removeEventListener: (eventName: E, handler: (value: T) => void) => void;
-};
 /**
- * Create an EventEmitter from an event source. Event sources can be RxJS observables, existing EventEmitters, or objects that
- * provide a subscribe()/listen() => UnsubscribeFunc method.
+ * Create an EventEmitter from an event source. Event source can be RxJS observable, existing `EventEmitter`, an object that
+ * provides a `subscribe()`/`listen() => UnsubscribeFunc` method, or a subscribe function itself.
+ * @param source
+ */
+export declare function toEventEmitter<E>(source: EmissionSource<E>): EventEmitter<E>;
+/**
+ * Create an EventEmitter from an event provider and event name. Event source may provide matching `addEventListener`/`on(name, handler)` and `removeEventListener`/`off(name, handler)` methods, or `addEventListener`/`on(name, handler): UnsubscribeFunc.
  * @param source
  */
-export declare function toEventEmitter<T>(source: EmitterLike<T>): EventEmitter<T>;
-export declare function toEventEmitter<T, E extends string>(source: EventSource<T, E>, eventName: E): EventEmitter<T>;
-type Dictionary<T> = Record<string | symbol, T>;
+export declare function toEventEmitter<E, N>(source: EventSource<E, N>, eventName: N): EventEmitter<E>;
 type ExtractEmitterValue<T> = T extends EmitterLike<infer U> ? U : never;
 type CombinedRecord<T extends Dictionary<EmitterLike<any>>> = {
     readonly [K in keyof T]: ExtractEmitterValue<T[K]>;

package/internal/emitter.js

@@ -1,4 +1,11 @@
+import { createEventsProxy } from "./proxy.js";
 import { isReactiveSource } from "./util";
+const NOOP = () => { };
+function periodAsMilliseconds(t) {
+    if (typeof t == "number")
+        return t;
+    return "asMilliseconds" in t ? t.asMilliseconds : (t.asSeconds * 1000);
+}
 export class EventEmitter {
     constructor(onListen) {
         this.onListen = onListen;
@@ -34,6 +41,14 @@ export class EventEmitter {
         const listen = this.transform((value, emit) => emit(mapFunc(value)));
         return new EventEmitter(listen);
     }
+    mapAsync(mapFunc) {
+        const listen = this.transform((value, emit) => mapFunc(value).then(emit));
+        return new EventEmitter(listen);
+    }
+    as(value) {
+        const listen = this.transform((_, emit) => emit(value));
+        return new EventEmitter(listen);
+    }
     /**
      * Creates a chainable emitter that selectively forwards emissions along the chain
      * @param check Function that takes an emitted value and returns true if the emission should be forwarded along the chain
@@ -101,14 +116,14 @@ export class EventEmitter {
         cb.forEach(cb => cb(this));
         return this;
     }
-    debounce(ms) {
+    debounce(t) {
         let reset = null;
         const listen = this.transform((value, emit) => {
             reset === null || reset === void 0 ? void 0 : reset();
             const timeout = setTimeout(() => {
                 reset = null;
                 emit(value);
-            }, ms);
+            }, periodAsMilliseconds(t));
             reset = () => {
                 reset = null;
                 clearTimeout(timeout);
@@ -116,11 +131,11 @@ export class EventEmitter {
         });
         return new EventEmitter(listen);
     }
-    throttle(ms) {
+    throttle(t) {
         let lastTime = -Infinity;
         const listen = this.transform((value, emit) => {
             const now = performance.now();
-            if (now >= lastTime + ms) {
+            if (now >= lastTime + periodAsMilliseconds(t)) {
                 lastTime = now;
                 emit(value);
             }
@@ -143,14 +158,7 @@ export class EventEmitter {
         });
         return new EventEmitter(listen);
     }
-    /**
-     * Creates a chainable emitter that
-     * **Experimental**: May change in future revisions
-     * Note: only listens to the parent while at least one downstream subscription is present
-     * @param notifier
-     * @returns
-     */
-    once() {
+    once(handler) {
         let parentUnsubscribe = null;
         let completed = false;
         const clear = () => {
@@ -169,11 +177,18 @@ export class EventEmitter {
             });
             return clear;
         });
-        return new EventEmitter(listen);
+        const emitter = new EventEmitter(listen);
+        return handler
+            ? emitter.apply(handler)
+            : emitter;
+    }
+    getNext() {
+        return new Promise((resolve) => this.once(resolve));
     }
-    delay(ms) {
+    delay(t) {
+        const ms = periodAsMilliseconds(t);
         return new EventEmitter(this.transform((value, emit) => {
-            setTimeout(() => emit(value), ms);
+            return timeout(ms).apply(() => emit(value));
         }));
     }
     scan(updater, initial) {
@@ -245,11 +260,10 @@ export class EventEmitter {
             if (completed)
                 return;
             parentUnsubscribe = this.apply(emit);
-            const handler = () => {
+            notifierUnsub = toEventEmitter(notifier).listen(() => {
                 completed = true;
                 clear();
-            };
-            notifierUnsub = toEventEmitter(notifier).listen(handler);
+            });
             return clear;
         });
         return new EventEmitter(listen);
@@ -317,40 +331,60 @@ export class EventEmitter {
     memo(initial) {
         return new Memo(this, initial);
     }
+    record() {
+        return new EventRecorder(this);
+    }
+}
+export class EventRecorder {
+    constructor(emitter) {
+        this.startTime = performance.now();
+        this.entries = [];
+        this.recording = true;
+        this.unsubscribe = emitter.listen(v => this.add(v));
+    }
+    add(value) {
+        const now = performance.now();
+        let time = now - this.startTime;
+        this.entries.push([time, value]);
+    }
+    stop() {
+        if (!this.recording) {
+            throw new Error("EventRecorder already stopped");
+        }
+        this.unsubscribe();
+        return new EventRecording(this.entries);
+    }
 }
-/**
- * Creates a linked EventEmitter and emit() pair
- * @example
- * ```ts
- * function createForm(options?: { onsubmit?: (data: FormData) => void }) {
- *   const submitEvents = createEventSource(options?.onsubmit);
- *   const form = $.form({
- *     on: {
- *       submit: (e) => {
- *         e.preventDefault();
- *         const data = new FormData(e.target);
- *         submitEvents.emit(data); // emit when form is submitted
- *       }
- *     }
- *   });
- *
- *   return createEntity(form, {
- *     events: {
- *       submit: submitEvents.emitter
- *     }
- *   })
- * }
- *
- * const form = createForm({
- *   onsubmit: (data) => handleSubmission(data)
- * });
- * ```
- *
- * @param initialHandler Optional listener automatically applied to the resulting Emitter
- * @returns
- */
-export function createEventSource(initialHandler) {
-    const { emit, listen } = createListenable();
+export class EventRecording {
+    constructor(entries) {
+        this._entries = entries;
+    }
+    export() {
+        return [...this._entries];
+    }
+    play(speed = 1) {
+        let idx = 0;
+        let elapsed = 0;
+        const { emit, listen } = createListenable();
+        const unsubscribe = animationFrames.listen((frameElapsed) => {
+            elapsed += frameElapsed * speed;
+            while (idx < this._entries.length && this._entries[idx][0] <= elapsed) {
+                emit(this._entries[idx][1]);
+                idx++;
+            }
+            if (idx >= this._entries.length) {
+                unsubscribe();
+            }
+        });
+        return new EventEmitter(listen);
+    }
+}
+export function createEventSource(arg) {
+    if (typeof arg === "function") {
+        arg = { initialHandler: arg };
+    }
+    const { initialHandler, activate } = arg !== null && arg !== void 0 ? arg : {};
+    const { emit, listen } = createListenable(activate);
     if (initialHandler)
         listen(initialHandler);
     return {
@@ -358,6 +392,30 @@ export function createEventSource(initialHandler) {
         emitter: new EventEmitter(listen)
     };
 }
+export function createEventsSource(initialListeners) {
+    const handlers = {};
+    const emitters = createEventsProxy({
+        on: (name, handler) => {
+            if (!handlers[name])
+                handlers[name] = [];
+            const unique = { fn: handler };
+            handlers[name].push(unique);
+            return () => {
+                const idx = handlers[name].indexOf(unique);
+                handlers[name].splice(idx, 1);
+                if (handlers[name].length == 0)
+                    delete handlers[name];
+            };
+        },
+    }, initialListeners);
+    return {
+        emitters,
+        trigger: (name, value) => {
+            var _a;
+            (_a = handlers[name]) === null || _a === void 0 ? void 0 : _a.forEach(entry => entry.fn(value));
+        }
+    };
+}
 function createListenable(sourceListen) {
     const handlers = [];
     let onRemoveLast;
@@ -380,26 +438,42 @@ function createListenable(sourceListen) {
         emit: (value) => handlers.forEach(h => h.fn(value)),
     };
 }
-export function interval(ms) {
+export function interval(t) {
     let intervalId = null;
     let idx = 0;
     const { emit, listen } = createListenable(() => {
         intervalId = setInterval(() => {
             emit(idx++);
-        }, typeof ms == "number" ? ms : ms.asMilliseconds);
+        }, periodAsMilliseconds(t));
         return () => clearInterval(intervalId);
     });
     return new EventEmitter(listen);
 }
+export const animationFrames = (() => {
+    const { emit, listen } = createListenable(() => {
+        let rafId = null;
+        let lastTime = null;
+        const frame = (time) => {
+            rafId = requestAnimationFrame(frame);
+            const elapsed = time - lastTime;
+            emit(elapsed);
+        };
+        lastTime = performance.now();
+        rafId = requestAnimationFrame(frame);
+        return () => cancelAnimationFrame(rafId);
+    });
+    return new EventEmitter(listen);
+})();
 export function timeout(t) {
-    const ms = typeof t === "number" ? t : t.asMilliseconds;
+    const ms = periodAsMilliseconds(t);
     const targetTime = Date.now() + ms;
-    let timeoutId = null;
     const { emit, listen } = createListenable(() => {
         const reminaingMs = targetTime - Date.now();
         if (reminaingMs < 0)
             return;
-        timeoutId = setTimeout(emit, reminaingMs);
+        const timeoutId = setTimeout(() => {
+            emit();
+        }, reminaingMs);
         return () => clearTimeout(timeoutId);
     });
     return new EventEmitter(listen);
@@ -424,7 +498,7 @@ export class SubjectEmitter extends EventEmitter {
     constructor(initial) {
         const { emit, listen } = createListenable();
         super(h => {
-            h(this._value);
+            h(this._value); // immediate emit on listen
             return listen(h);
         });
         this.emit = emit;
@@ -441,13 +515,15 @@ export class SubjectEmitter extends EventEmitter {
 export function toEventEmitter(source, eventName) {
     if (source instanceof EventEmitter)
         return source;
+    if (typeof source == "function")
+        return new EventEmitter(source);
     if (eventName !== undefined) {
         // addEL()
         if ("addEventListener" in source) {
             if ("removeEventListener" in source && typeof source.removeEventListener == "function") {
                 return new EventEmitter(h => {
-                    return source.addEventListener(eventName, h)
-                        || (() => source.removeEventListener(eventName, h));
+                    source.addEventListener(eventName, h);
+                    return () => source.removeEventListener(eventName, h);
                 });
             }
             return new EventEmitter(h => {

package/internal/proxy.d.ts

@@ -1,4 +1,4 @@
-import { SetGetStyleFunc } from "./types";
+import { SetGetStyleFunc, EventSource, EventEmitterMap, EventHandlerMap } from "./types";
 export declare const styleProxy: ProxyHandler<SetGetStyleFunc>;
 export declare const attribsProxy: ProxyHandler<HTMLElement>;
-export declare const eventsProxy: ProxyHandler<HTMLElement>;
+export declare function createEventsProxy<Map>(source: EventSource<any, keyof Map>, initialListeners?: EventHandlerMap<Map>): EventEmitterMap<Map>;

package/internal/proxy.js

@@ -34,14 +34,16 @@ export const attribsProxy = {
         return element.getAttributeNames();
     },
 };
-export const eventsProxy = {
-    get: (element, key) => {
-        if (key == "addEventListener") {
-            return (name, handler) => element.addEventListener(name, handler);
-        }
-        if (key == "removeEventListener") {
-            return (name, handler) => element.removeEventListener(name, handler);
-        }
-        return toEventEmitter(element, key);
+const eventsProxyDefinition = {
+    get: (object, key) => {
+        return toEventEmitter(object, key);
     }
 };
+export function createEventsProxy(source, initialListeners) {
+    const proxy = new Proxy(source, eventsProxyDefinition);
+    if (initialListeners) {
+        Object.entries(initialListeners)
+            .forEach(([name, handler]) => toEventEmitter(source, name).apply(handler));
+    }
+    return proxy;
+}

package/internal/types.d.ts

@@ -1,5 +1,5 @@
-import { type ClassAccessor } from "./element";
-import { EventEmitter, UnsubscribeFunc } from "./emitter";
+import { ClassAccessor } from "./element";
+import { EventEmitter, ListenFunc, UnsubscribeFunc } from "./emitter";
 import { entityDataSymbol } from "./util";
 export type ElementClassDescriptor = string | Record<string, boolean | EmitterLike<boolean> | undefined> | undefined | ElementClassDescriptor[];
 export type DOMContent = number | null | string | Element | JelEntity<object> | Text | DOMContent[];
@@ -10,6 +10,7 @@ export type EmitterLike<T> = {
 } | {
     listen: (callback: (value: T) => void) => UnsubscribeFunc;
 };
+export type EmissionSource<T> = EmitterLike<T> | ListenFunc<T>;
 export type CSSValue = string | number | null | HexCodeContainer;
 export type CSSProperty = keyof StylesDescriptor;
 type HexCodeContainer = {
@@ -35,7 +36,7 @@ type TagWithName = 'input' | 'textarea' | 'select' | 'form';
 type ContentlessElement = HTMLElementTagNameMap[ContentlessTag];
 export type ElementDescriptor<Tag extends HTMLTag> = {
     classes?: ElementClassDescriptor;
-    attribs?: Record<string, string | number | boolean>;
+    attribs?: Record<string, string | number | boolean | undefined>;
     on?: {
         [E in keyof HTMLElementEventMap]+?: (event: HTMLElementEventMap[E]) => void;
     };
@@ -64,7 +65,7 @@ type ElementAPI<T extends HTMLElement> = {
     readonly attribs: {
         [key: string]: string | null;
     };
-    readonly events: EventsAccessor;
+    readonly events: EventEmitterMap<HTMLElementEventMap>;
     readonly style: StyleAccessor;
     setCSSVariable(variableName: string, value: CSSValue | EmitterLike<CSSValue>): void;
     setCSSVariable(table: Record<string, CSSValue | EmitterLike<CSSValue>>): void;
@@ -73,6 +74,13 @@ type ElementAPI<T extends HTMLElement> = {
     getRect(): DOMRect;
     focus(): void;
     blur(): void;
+    /**
+     * Add an event listener
+     * @param eventId
+     * @param handler
+     * @returns Function to remove the listener
+     * @deprecated Use ent.events
+     */
     on<E extends keyof HTMLElementEventMap>(eventId: E, handler: (this: ElementAPI<T>, data: HTMLElementEventMap[E]) => void): UnsubscribeFunc;
 } & (T extends ContentlessElement ? {} : {
     append(...content: DOMContent[]): void;
@@ -120,7 +128,7 @@ export type DomHelper = ((
 <T extends HTMLElement>(element: T) => DomEntity<T>) & {
     [T in HTMLTag]: (descriptor: ElementDescriptor<T>) => DomEntity<HTMLElementTagNameMap[T]>;
 } & {
-    [T in HTMLTag]: T extends ContentlessTag ? () => DomEntity<HTMLElementTagNameMap[T]> : (content?: DOMContent) => DomEntity<HTMLElementTagNameMap[T]>;
+    [T in HTMLTag]: T extends ContentlessTag ? () => DomEntity<HTMLElementTagNameMap[T]> : (((content?: DOMContent) => DomEntity<HTMLElementTagNameMap[T]>) & ((contentEmitter: EmitterLike<DOMContent>) => DomEntity<HTMLElementTagNameMap[T]>));
 });
 type JelEntityData = {
     dom: DOMContent;
@@ -128,10 +136,28 @@ type JelEntityData = {
 export type JelEntity<API extends object | void> = (API extends void ? {} : API) & {
     readonly [entityDataSymbol]: JelEntityData;
 };
-export type EventsAccessor = {
-    [K in keyof HTMLElementEventMap]: EventEmitter<HTMLElementEventMap[K]>;
-} & {
-    addEventListener<K extends keyof HTMLElementEventMap>(eventName: K, listener: (event: HTMLElementEventMap[K]) => void): void;
-    removeEventListener<K extends keyof HTMLElementEventMap>(eventName: K, listener: (event: HTMLElementEventMap[K]) => void): void;
+export type Handler<T> = (value: T) => void;
+export type Period = {
+    asMilliseconds: number;
+} | {
+    asSeconds: number;
+};
+export type EventSource<E, N> = {
+    on: (eventName: N, handler: Handler<E>) => UnsubscribeFunc;
+} | {
+    on: (eventName: N, handler: Handler<E>) => void | UnsubscribeFunc;
+    off: (eventName: N, handler: Handler<E>) => void;
+} | {
+    addEventListener: (eventName: N, handler: Handler<E>) => UnsubscribeFunc;
+} | {
+    addEventListener: (eventName: N, handler: Handler<E>) => void;
+    removeEventListener: (eventName: N, handler: Handler<E>) => void;
+};
+export type Dictionary<T> = Record<string | symbol, T>;
+export type EventEmitterMap<Map> = {
+    [K in keyof Map]: EventEmitter<Map[K]>;
+};
+export type EventHandlerMap<Map> = {
+    [K in keyof Map]?: (value: Map[K]) => void;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xtia/jel",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "repository": {
     "url": "https://github.com/tiadrop/jel-ts",
     "type": "github"