@xtia/jel 0.6.5 → 0.7.1

package/README.md

@@ -42,7 +42,6 @@ body.append([
         ))
     )
 ])
-
 ```
 
 ## `DOMContent`
@@ -141,20 +140,33 @@ For RxJS users, events can be observed with `fromEvent(element.events, "mousemov
 
 ## Reactive styles
 
-Style properties can be emitter subscriptions:
+Style properties, content and class presence can be emitter subscriptions:
 
 ```ts
 const mousePosition$ = $(document.body).events.mousemove
     .map(ev => ({x: ev.clientX, y: ev.clientY}));
 
 const virtualCursor = $.div({
-    classes: "virtual-cursor",
+    classes: {
+        "virtual-cursor": true,
+        "near-top": mousePosition$.map(v => v.y < 100)
+    },
     style: {
         left: mousePosition$.map(v => v.x + "px"),
         top: mousePosition$.map(v => v.y + "px")
     }
 });
+
+virtualCursor.classes.toggle(
+    "near-left",
+    mousePosition$.map(v => v.x < 100>)
+);
+
+h1.content = websocket$
+    .filter(msg => msg.type == "title")
+    .map(msg => msg.text);
 ```
+Removing an element from the page will unsubscribe from any attached stream, and resubscribe if subsequently appended.
 
 Emitters for this purpose can be Jel events, [@xtia/timeline](https://github.com/tiadrop/timeline) progressions, RxJS Observables or any object with either `subscribe()` or `listen()` that returns teardown logic.
 

package/index.d.ts

@@ -1,6 +1,6 @@
 export { DomEntity, ElementClassDescriptor, ElementDescriptor, DOMContent, DomHelper, StyleAccessor, JelEntity } from "./internal/types";
 import { $ } from "./internal/element";
 export { createEntity } from "./internal/util";
-export { createEventSource, interval } from "./internal/emitter";
+export { createEventSource, interval, timeout, SubjectEmitter, toEventEmitter } from "./internal/emitter";
 export { $ };
 export declare const $body: import(".").DomEntity<HTMLElement>;

package/index.js

@@ -1,5 +1,5 @@
 import { $ } from "./internal/element";
 export { createEntity } from "./internal/util";
-export { createEventSource, interval } from "./internal/emitter";
+export { createEventSource, interval, timeout, SubjectEmitter, toEventEmitter } from "./internal/emitter";
 export { $ };
 export const $body = $(document.body);

package/internal/element.d.ts

@@ -1,2 +1,18 @@
-import { DomHelper } from "./types";
+import { DomHelper, EmitterLike } from "./types";
 export declare const $: DomHelper;
+export declare class ClassAccessor {
+    private classList;
+    private listen;
+    private unlisten;
+    constructor(classList: DOMTokenList, listen: (className: string, stream: EmitterLike<boolean>) => void, unlisten: (classNames: string[]) => void);
+    add(...className: string[]): void;
+    remove(...className: string[]): void;
+    toggle(className: string, value?: boolean): boolean;
+    toggle(className: string, value: EmitterLike<boolean>): void;
+    contains(className: string): boolean;
+    get length(): number;
+    toString(): string;
+    replace(token: string, newToken: string): void;
+    forEach(cb: (token: string, idx: number) => void): void;
+    map<R>(cb: (token: string, idx: number) => R): R[];
+}

package/internal/element.js

@@ -1,5 +1,5 @@
 import { attribsProxy, eventsProxy, styleProxy } from "./proxy";
-import { entityDataSymbol, isContent, isJelEntity } from "./util";
+import { entityDataSymbol, isContent, isJelEntity, isReactiveSource } from "./util";
 const elementWrapCache = new WeakMap();
 const recursiveAppend = (parent, c) => {
     if (c === null || c === undefined)
@@ -18,9 +18,9 @@ const recursiveAppend = (parent, c) => {
 };
 function createElement(tag, descriptor = {}) {
     if (isContent(descriptor))
-        return createElement(tag, {
+        descriptor = {
             content: descriptor,
-        });
+        };
     const domElement = document.createElement(tag);
     const ent = getWrappedElement(domElement);
     const applyClasses = (classes) => {
@@ -34,8 +34,12 @@ function createElement(tag, descriptor = {}) {
         if (classes === undefined)
             return;
         Object.entries(classes).forEach(([className, state]) => {
-            if (state)
+            if (isReactiveSource(state)) {
+                ent.classes.toggle(className, state);
+            }
+            else if (state) {
                 applyClasses(className);
+            }
         });
     };
     applyClasses(descriptor.classes || []);
@@ -64,6 +68,8 @@ function createElement(tag, descriptor = {}) {
     if (descriptor.on) {
         Object.entries(descriptor.on).forEach(([eventName, handler]) => ent.events[eventName].apply(handler));
     }
+    if (descriptor.init)
+        descriptor.init(ent);
     return ent;
 }
 ;
@@ -128,9 +134,6 @@ function observeMutations() {
         subtree: true
     });
 }
-function isReactiveSource(value) {
-    return typeof value == "object" && value && ("listen" in value || "subscribe" in value);
-}
 function getWrappedElement(element) {
     if (!elementWrapCache.has(element)) {
         const setCSSVariable = (k, v) => {
@@ -145,6 +148,7 @@ function getWrappedElement(element) {
             style: {},
             cssVariable: {},
             content: {},
+            class: {},
         };
         function addListener(type, prop, source) {
             const set = {
@@ -153,7 +157,8 @@ function getWrappedElement(element) {
                 content: (v) => {
                     element.innerHTML = "";
                     recursiveAppend(element, v);
-                }
+                },
+                class: (v) => element.classList.toggle(prop, v),
             }[type];
             const subscribe = "subscribe" in source
                 ? () => source.subscribe(set)
@@ -166,7 +171,7 @@ function getWrappedElement(element) {
                 elementMutationMap.set(element, {
                     add: () => {
                         Object.values(listeners).forEach(group => {
-                            Object.values(group).forEach(l => { var _a; return l.unsubscribe = (_a = l.subscribe) === null || _a === void 0 ? void 0 : _a.call(l); });
+                            Object.values(group).forEach(l => l.unsubscribe = l.subscribe());
                         });
                     },
                     remove: () => {
@@ -214,9 +219,11 @@ function getWrappedElement(element) {
             },
             get element() { return element; },
             on(eventId, handler) {
-                element.addEventListener(eventId, eventData => {
+                const fn = (eventData) => {
                     handler.call(domEntity, eventData);
-                });
+                };
+                element.addEventListener(eventId, fn);
+                return () => element.removeEventListener(eventId, fn);
             },
             append(...content) {
                 var _a;
@@ -334,10 +341,65 @@ function getWrappedElement(element) {
                 }
             },
             style: new Proxy(setStyle, styleProxy),
-            classes: element.classList,
+            classes: new ClassAccessor(element.classList, (className, stream) => addListener("class", className, stream), (classNames) => {
+                classNames.forEach(c => {
+                    if (listeners.class[c])
+                        removeListener("class", c);
+                });
+            }),
             events: new Proxy(element, eventsProxy)
         };
         elementWrapCache.set(element, domEntity);
     }
     return elementWrapCache.get(element);
 }
+export class ClassAccessor {
+    constructor(classList, listen, unlisten) {
+        this.classList = classList;
+        this.listen = listen;
+        this.unlisten = unlisten;
+    }
+    add(...className) {
+        this.unlisten(className);
+        this.classList.add(...className);
+    }
+    remove(...className) {
+        this.unlisten(className);
+        this.classList.remove(...className);
+    }
+    toggle(className, value) {
+        this.unlisten([className]);
+        if (isReactiveSource(value)) {
+            this.listen(className, value);
+            return;
+        }
+        return this.classList.toggle(className, value);
+    }
+    contains(className) {
+        return this.classList.contains(className);
+    }
+    get length() {
+        return this.classList.length;
+    }
+    toString() {
+        return this.classList.toString();
+    }
+    replace(token, newToken) {
+        this.unlisten([token, newToken]);
+        this.classList.replace(token, newToken);
+    }
+    forEach(cb) {
+        this.classList.forEach(cb);
+    }
+    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();
+        }
+        return result;
+    }
+}

package/internal/emitter.d.ts

@@ -1,11 +1,7 @@
+import { EmitterLike } from "./types";
 type Handler<T> = (value: T) => void;
 export type ListenFunc<T> = (handler: Handler<T>) => UnsubscribeFunc;
 export type UnsubscribeFunc = () => void;
-export type Listenable<T> = {
-    subscribe: (callback: (value: T) => void) => UnsubscribeFunc;
-} | {
-    listen: (callback: (value: T) => void) => UnsubscribeFunc;
-};
 export declare class EventEmitter<T> {
     protected onListen: ListenFunc<T>;
     constructor(onListen: ListenFunc<T>);
@@ -99,7 +95,7 @@ export declare class EventEmitter<T> {
      * @param notifier
      * @returns
      */
-    takeUntil(notifier: Listenable<any>): EventEmitter<T>;
+    takeUntil(notifier: EmitterLike<any>): EventEmitter<T>;
     /**
      * Creates a chainable emitter that forwards its parent's emissions while the predicate returns true
      * Disconnects from the parent and becomes inert when the predicate returns false
@@ -119,9 +115,15 @@ export declare class EventEmitter<T> {
      * @returns
      */
     cached(): EventEmitter<T>;
+    /**
+     * Creates a chainable emitter that forwards emissions from the parent and any of the provided emitters
+     * @param emitters
+     */
+    or(...emitters: EmitterLike<T>[]): EmitterLike<T>;
+    or<U>(...emitters: EmitterLike<U>[]): EmitterLike<T | U>;
 }
 /**
- * Creates a linked Emitter and emit() pair
+ * Creates a linked EventEmitter and emit() pair
  * @example
  * ```ts
  * function createForm(options?: { onsubmit?: (data: FormData) => void }) {
@@ -155,17 +157,39 @@ export declare function createEventSource<T>(initialHandler?: Handler<T>): {
     emit: (value: T) => void;
     emitter: EventEmitter<T>;
 };
-export declare function createListenable<T>(onAddFirst?: () => void, onRemoveLast?: () => void): {
+export declare function createListenable<T>(sourceListen?: () => UnsubscribeFunc | undefined): {
     listen: (fn: (v: T) => void) => UnsubscribeFunc;
     emit: (value: T) => void;
 };
-export declare function interval(t: number | {
+export declare function interval(ms: number | {
     asMilliseconds: number;
 }): EventEmitter<number>;
-export declare function timeoutx(t: number | {
-    asMilliseconds: number;
-}): EventEmitter<void>;
 export declare function timeout(t: number | {
     asMilliseconds: number;
 }): EventEmitter<void>;
+export declare class SubjectEmitter<T> extends EventEmitter<T> {
+    private emit;
+    private _value;
+    constructor(initial: 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.
+ * @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>;
 export {};

package/internal/emitter.js

@@ -1,16 +1,12 @@
+import { isReactiveSource } from "./util";
 export class EventEmitter {
     constructor(onListen) {
         this.onListen = onListen;
     }
     transform(handler) {
-        let parentUnsubscribe = null;
-        const parentListen = this.onListen;
-        const { emit, listen } = createListenable(() => parentUnsubscribe = parentListen(value => {
+        const { emit, listen } = createListenable(() => this.onListen(value => {
             handler(value, emit);
-        }), () => {
-            parentUnsubscribe();
-            parentUnsubscribe = null;
-        });
+        }));
         return listen;
     }
     /**
@@ -171,7 +167,8 @@ export class EventEmitter {
                 clear();
                 emit(v);
             });
-        }, clear);
+            return clear;
+        });
         return new EventEmitter(listen);
     }
     delay(ms) {
@@ -226,11 +223,7 @@ export class EventEmitter {
                     }
                 });
             }
-        }, () => {
-            if (sourceUnsub) {
-                sourceUnsub();
-                sourceUnsub = null;
-            }
+            return sourceUnsub;
         });
         return new EventEmitter(listen);
     }
@@ -245,14 +238,8 @@ export class EventEmitter {
         let notifierUnsub = null;
         let completed = false;
         const clear = () => {
-            if (parentUnsubscribe) {
-                parentUnsubscribe();
-                parentUnsubscribe = null;
-            }
-            if (notifierUnsub) {
-                notifierUnsub();
-                notifierUnsub = null;
-            }
+            parentUnsubscribe === null || parentUnsubscribe === void 0 ? void 0 : parentUnsubscribe();
+            notifierUnsub === null || notifierUnsub === void 0 ? void 0 : notifierUnsub();
         };
         const { emit, listen } = createListenable(() => {
             if (completed)
@@ -262,10 +249,9 @@ export class EventEmitter {
                 completed = true;
                 clear();
             };
-            notifierUnsub = "subscribe" in notifier
-                ? notifier.subscribe(handler)
-                : notifier.listen(handler);
-        }, clear);
+            notifierUnsub = toEventEmitter(notifier).listen(handler);
+            return clear;
+        });
         return new EventEmitter(listen);
     }
     /**
@@ -274,14 +260,8 @@ export class EventEmitter {
      * @param predicate Callback to determine whether to keep forwarding
      */
     takeWhile(predicate) {
-        let parentUnsubscribe = null;
+        let parentUnsubscribe;
         let completed = false;
-        const clear = () => {
-            if (parentUnsubscribe) {
-                parentUnsubscribe();
-                parentUnsubscribe = null;
-            }
-        };
         const { emit, listen } = createListenable(() => {
             if (completed)
                 return;
@@ -291,10 +271,12 @@ export class EventEmitter {
                 }
                 else {
                     completed = true;
-                    clear();
+                    parentUnsubscribe();
+                    parentUnsubscribe = undefined;
                 }
             });
-        }, clear);
+            return () => parentUnsubscribe === null || parentUnsubscribe === void 0 ? void 0 : parentUnsubscribe();
+        });
         return new EventEmitter(listen);
     }
     /**
@@ -316,24 +298,25 @@ export class EventEmitter {
      */
     cached() {
         let cache = null;
-        let unsub = null;
-        const { listen, emit } = createListenable(() => {
-            unsub = this.onListen((value => {
-                cache = { value };
-                emit(value);
-            }));
-        }, () => {
-            unsub();
-        });
+        const { listen, emit } = createListenable(() => this.onListen((value => {
+            cache = { value };
+            emit(value);
+        })));
         return new EventEmitter(handler => {
             if (cache)
                 handler(cache.value);
             return listen(handler);
         });
     }
+    or(...emitters) {
+        return new EventEmitter(handler => {
+            const unsubs = [this, ...emitters].map(e => toEventEmitter(e).listen(handler));
+            return () => unsubs.forEach(unsub => unsub());
+        });
+    }
 }
 /**
- * Creates a linked Emitter and emit() pair
+ * Creates a linked EventEmitter and emit() pair
  * @example
  * ```ts
  * function createForm(options?: { onsubmit?: (data: FormData) => void }) {
@@ -372,13 +355,14 @@ export function createEventSource(initialHandler) {
         emitter: new EventEmitter(listen)
     };
 }
-export function createListenable(onAddFirst, onRemoveLast) {
+export function createListenable(sourceListen) {
     const handlers = [];
+    let onRemoveLast;
     const addListener = (fn) => {
         const unique = { fn };
         handlers.push(unique);
-        if (onAddFirst && handlers.length == 1)
-            onAddFirst();
+        if (sourceListen && handlers.length == 1)
+            onRemoveLast = sourceListen();
         return () => {
             const idx = handlers.indexOf(unique);
             if (idx === -1)
@@ -393,22 +377,82 @@ export function createListenable(onAddFirst, onRemoveLast) {
         emit: (value) => handlers.forEach(h => h.fn(value)),
     };
 }
-export function interval(t) {
+export function interval(ms) {
     let intervalId = null;
     let idx = 0;
     const { emit, listen } = createListenable(() => {
         intervalId = setInterval(() => {
             emit(idx++);
-        }, typeof t == "number" ? t : t.asMilliseconds);
-    }, () => clearInterval(intervalId));
+        }, typeof ms == "number" ? ms : ms.asMilliseconds);
+        return () => clearInterval(intervalId);
+    });
     return new EventEmitter(listen);
 }
-export function timeoutx(t) {
-    return interval(t).once().map(() => { });
-}
 export function timeout(t) {
     const ms = typeof t === "number" ? t : t.asMilliseconds;
-    const { emit, listen } = createListenable();
-    setTimeout(emit, ms);
+    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);
+        return () => clearTimeout(timeoutId);
+    });
     return new EventEmitter(listen);
 }
+export class SubjectEmitter extends EventEmitter {
+    constructor(initial) {
+        const { emit, listen } = createListenable();
+        super(h => {
+            h(this._value);
+            return listen(h);
+        });
+        this.emit = emit;
+        this._value = initial;
+    }
+    get value() {
+        return this._value;
+    }
+    next(value) {
+        this._value = value;
+        this.emit(value);
+    }
+}
+export function toEventEmitter(source, eventName) {
+    if (source instanceof EventEmitter)
+        return source;
+    if (eventName !== undefined) {
+        // addEL()
+        if ("addEventListener" in source) {
+            if ("removeEventListener" in source && typeof source.removeEventListener == "function") {
+                return new EventEmitter(h => {
+                    var _a;
+                    return (_a = source.addEventListener(eventName, h)) !== null && _a !== void 0 ? _a : (() => source.removeEventListener(eventName, h));
+                });
+            }
+            return new EventEmitter(h => {
+                return source.addEventListener(eventName, h);
+            });
+        }
+        // on()
+        if ("on" in source) {
+            if ("off" in source && typeof source.off == "function") {
+                return new EventEmitter(h => {
+                    var _a;
+                    return (_a = source.on(eventName, h)) !== null && _a !== void 0 ? _a : (() => source.off(eventName, h));
+                });
+            }
+            return new EventEmitter(h => {
+                return source.on(eventName, h);
+            });
+        }
+    }
+    if (isReactiveSource(source)) {
+        const subscribe = "subscribe" in source
+            ? (h) => source.subscribe(h)
+            : (h) => source.listen(h);
+        return new EventEmitter(subscribe);
+    }
+    throw new Error("Invalid event source");
+}

package/internal/proxy.js

@@ -1,4 +1,4 @@
-import { EventEmitter } from "./emitter";
+import { toEventEmitter } from "./emitter";
 export const styleProxy = {
     get(style, prop) {
         return style(prop);
@@ -42,13 +42,6 @@ export const eventsProxy = {
         if (key == "removeEventListener") {
             return (name, handler) => element.removeEventListener(name, handler);
         }
-        const listen = (handler) => {
-            const wrappedHandler = (event) => handler(event);
-            element.addEventListener(key, wrappedHandler);
-            return () => {
-                element.removeEventListener(key, wrappedHandler);
-            };
-        };
-        return new EventEmitter(listen);
+        return toEventEmitter(element, key);
     }
 };

package/internal/types.d.ts

@@ -1,13 +1,15 @@
+import { type ClassAccessor } from "./element";
 import { EventEmitter, UnsubscribeFunc } from "./emitter";
 import { entityDataSymbol } from "./util";
-export type ElementClassDescriptor = string | Record<string, boolean | undefined> | undefined | ElementClassDescriptor[];
+export type ElementClassDescriptor = string | Record<string, boolean | EmitterLike<boolean> | undefined> | undefined | ElementClassDescriptor[];
 export type DOMContent = number | null | string | Element | JelEntity<object> | Text | DOMContent[];
 export type DomEntity<T extends HTMLElement> = JelEntity<ElementAPI<T>>;
-export type ReactiveSource<T> = ({
-    listen: (handler: (value: T) => void) => UnsubscribeFunc;
+export type HTMLTag = keyof HTMLElementTagNameMap;
+export type EmitterLike<T> = {
+    subscribe: (callback: (value: T) => void) => UnsubscribeFunc;
 } | {
-    subscribe: (handler: (value: T) => void) => UnsubscribeFunc;
-});
+    listen: (callback: (value: T) => void) => UnsubscribeFunc;
+};
 export type CSSValue = string | number | null | HexCodeContainer;
 export type CSSProperty = keyof StylesDescriptor;
 type HexCodeContainer = {
@@ -18,10 +20,10 @@ export type StylesDescriptor = {
     [K in keyof CSSStyleDeclaration as [
         K,
         CSSStyleDeclaration[K]
-    ] extends [string, string] ? K : never]+?: CSSValue | ReactiveSource<CSSValue>;
+    ] extends [string, string] ? K : never]+?: CSSValue | EmitterLike<CSSValue>;
 };
-export type SetStyleFunc = ((property: CSSProperty, value: CSSValue | ReactiveSource<CSSValue>) => void);
-export type SetGetStyleFunc = SetStyleFunc & ((property: CSSProperty) => string | ReactiveSource<CSSValue>);
+export type SetStyleFunc = ((property: CSSProperty, value: CSSValue | EmitterLike<CSSValue>) => void);
+export type SetGetStyleFunc = SetStyleFunc & ((property: CSSProperty) => string | EmitterLike<CSSValue>);
 export type StyleAccessor = ((styles: StylesDescriptor) => void) & StylesDescriptor & SetStyleFunc;
 type ContentlessTag = "area" | "br" | "hr" | "iframe" | "input" | "textarea" | "img" | "canvas" | "link" | "meta" | "source" | "embed" | "track" | "base";
 type TagWithHref = "a" | "link" | "base";
@@ -31,18 +33,19 @@ type TagWithWidthHeight = "canvas" | "img" | "embed" | "iframe" | "video";
 type TagWithType = "input" | "source" | "button";
 type TagWithName = 'input' | 'textarea' | 'select' | 'form';
 type ContentlessElement = HTMLElementTagNameMap[ContentlessTag];
-export type ElementDescriptor<Tag extends string> = {
+export type ElementDescriptor<Tag extends HTMLTag> = {
     classes?: ElementClassDescriptor;
     attribs?: Record<string, string | number | boolean>;
     on?: {
         [E in keyof HTMLElementEventMap]+?: (event: HTMLElementEventMap[E]) => void;
     };
     style?: StylesDescriptor;
-    cssVariables?: Record<string, CSSValue | ReactiveSource<CSSValue>>;
+    cssVariables?: Record<string, CSSValue | EmitterLike<CSSValue>>;
+    init?: (entity: DomEntity<HTMLElementTagNameMap[Tag]>) => void;
 } & (Tag extends TagWithValue ? {
     value?: string | number;
 } : {}) & (Tag extends ContentlessTag ? {} : {
-    content?: DOMContent | ReactiveSource<DOMContent>;
+    content?: DOMContent | EmitterLike<DOMContent>;
 }) & (Tag extends TagWithSrc ? {
     src?: string;
 } : {}) & (Tag extends TagWithHref ? {
@@ -57,24 +60,24 @@ export type ElementDescriptor<Tag extends string> = {
 } : {});
 type ElementAPI<T extends HTMLElement> = {
     readonly element: T;
-    readonly classes: DOMTokenList;
+    readonly classes: ClassAccessor;
     readonly attribs: {
         [key: string]: string | null;
     };
     readonly events: EventsAccessor;
     readonly style: StyleAccessor;
-    setCSSVariable(variableName: string, value: CSSValue | ReactiveSource<CSSValue>): void;
-    setCSSVariable(table: Record<string, CSSValue | ReactiveSource<CSSValue>>): void;
+    setCSSVariable(variableName: string, value: CSSValue | EmitterLike<CSSValue>): void;
+    setCSSVariable(table: Record<string, CSSValue | EmitterLike<CSSValue>>): void;
     qsa(selector: string): (Element | DomEntity<HTMLElement>)[];
     remove(): void;
     getRect(): DOMRect;
     focus(): void;
     blur(): void;
-    on<E extends keyof HTMLElementEventMap>(eventId: E, handler: (this: ElementAPI<T>, data: HTMLElementEventMap[E]) => void): void;
+    on<E extends keyof HTMLElementEventMap>(eventId: E, handler: (this: ElementAPI<T>, data: HTMLElementEventMap[E]) => void): UnsubscribeFunc;
 } & (T extends ContentlessElement ? {} : {
     append(...content: DOMContent[]): void;
     innerHTML: string;
-    content: DOMContent | ReactiveSource<DOMContent>;
+    content: DOMContent | EmitterLike<DOMContent>;
 }) & (T extends HTMLElementTagNameMap[TagWithValue] ? {
     value: string;
     select(): void;
@@ -98,26 +101,26 @@ export type DomHelper = ((
 /**
  * Creates an element of the specified tag
  */
-<T extends keyof HTMLElementTagNameMap>(tagName: T, descriptor: ElementDescriptor<T>) => DomEntity<HTMLElementTagNameMap[T]>) & (
+<T extends HTMLTag>(tagName: T, descriptor: ElementDescriptor<T>) => DomEntity<HTMLElementTagNameMap[T]>) & (
 /**
  * Creates an element of the specified tag
  */
-<T extends keyof HTMLElementTagNameMap>(tagName: T) => DomEntity<HTMLElementTagNameMap[T]>) & (
+<T extends HTMLTag>(tagName: T) => DomEntity<HTMLElementTagNameMap[T]>) & (
 /**
  * Creates an element with ID and classes as specified by a selector-like string
  */
-<T extends keyof HTMLElementTagNameMap>(selector: `${T}#${string}`, content?: T extends ContentlessTag ? void : DOMContent) => DomEntity<HTMLElementTagNameMap[T]>) & (
+<T extends HTMLTag>(selector: `${T}#${string}`, content?: T extends ContentlessTag ? void : DOMContent) => DomEntity<HTMLElementTagNameMap[T]>) & (
 /**
  * Creates an element with ID and classes as specified by a selector-like string
  */
-<T extends keyof HTMLElementTagNameMap>(selector: `${T}.${string}`, content?: T extends ContentlessTag ? void : DOMContent) => DomEntity<HTMLElementTagNameMap[T]>) & (
+<T extends HTMLTag>(selector: `${T}.${string}`, content?: T extends ContentlessTag ? void : DOMContent) => DomEntity<HTMLElementTagNameMap[T]>) & (
 /**
  * Wraps an existing element as a DomEntity
  */
 <T extends HTMLElement>(element: T) => DomEntity<T>) & {
-    [T in keyof HTMLElementTagNameMap]: (descriptor: ElementDescriptor<T>) => DomEntity<HTMLElementTagNameMap[T]>;
+    [T in HTMLTag]: (descriptor: ElementDescriptor<T>) => DomEntity<HTMLElementTagNameMap[T]>;
 } & {
-    [T in keyof HTMLElementTagNameMap]: 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]>;
 });
 type JelEntityData = {
     dom: DOMContent;

package/internal/util.d.ts

@@ -1,6 +1,6 @@
-import { DOMContent, ElementDescriptor, JelEntity } from "./types";
+import { DOMContent, ElementDescriptor, EmitterLike, HTMLTag, JelEntity } from "./types";
 export declare const entityDataSymbol: unique symbol;
-export declare const isContent: (value: DOMContent | ElementDescriptor<string> | undefined) => value is DOMContent;
+export declare const isContent: <T extends HTMLTag>(value: DOMContent | ElementDescriptor<T> | undefined) => value is DOMContent;
 export declare function isJelEntity(content: DOMContent): content is JelEntity<object>;
 /**
  * Wraps an object such that it can be appended as DOM content while retaining its original API
@@ -9,3 +9,4 @@ export declare function isJelEntity(content: DOMContent): content is JelEntity<o
  */
 export declare function createEntity<API extends object>(content: DOMContent, api: API extends DOMContent ? never : API): JelEntity<API>;
 export declare function createEntity(content: DOMContent): JelEntity<void>;
+export declare function isReactiveSource(value: any): value is EmitterLike<any>;

package/internal/util.js

@@ -26,3 +26,7 @@ export function createEntity(content, api) {
     });
 }
 ;
+export function isReactiveSource(value) {
+    return typeof value == "object" && value && (("listen" in value && typeof value.listen == "function")
+        || ("subscribe" in value && typeof value.subscribe == "function"));
+}

package/package.json

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