@xtia/jel 0.6.4 → 0.7.0

package/README.md

@@ -42,7 +42,6 @@ body.append([
         ))
     )
 ])
-
 ```
 
 ## `DOMContent`
@@ -137,4 +136,42 @@ element.events.mousemove
 	.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(element.events, "mousemove")`.
+
+## Reactive styles
+
+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": 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.
+
+```ts
+import { animate } from "@xtia/timeline";
+
+button.style.opacity = animate(500).tween(0, 1);
+```

package/index.d.ts

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

package/index.js

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

package/internal/element.d.ts

@@ -1,2 +1,18 @@
-import { DomHelper } from "./types";
+import { DomHelper, Listenable } from "./types";
 export declare const $: DomHelper;
+export declare class ClassAccessor {
+    private classList;
+    private listen;
+    private unlisten;
+    constructor(classList: DOMTokenList, listen: (className: string, stream: Listenable<boolean>) => void, unlisten: (classNames: string[]) => void);
+    add(...className: string[]): void;
+    remove(...className: string[]): void;
+    toggle(className: string, value?: boolean): boolean;
+    toggle(className: string, value: Listenable<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

@@ -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 || []);
@@ -129,7 +133,8 @@ function observeMutations() {
     });
 }
 function isReactiveSource(value) {
-    return typeof value == "object" && value && ("listen" in value || "subscribe" in value);
+    return typeof value == "object" && value && (("listen" in value && typeof value.listen == "function")
+        || ("subscribe" in value && typeof value.subscribe == "function"));
 }
 function getWrappedElement(element) {
     if (!elementWrapCache.has(element)) {
@@ -145,6 +150,7 @@ function getWrappedElement(element) {
             style: {},
             cssVariable: {},
             content: {},
+            class: {},
         };
         function addListener(type, prop, source) {
             const set = {
@@ -153,7 +159,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)
@@ -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,9 +1,10 @@
+import { Listenable } from "./types";
 type Handler<T> = (value: T) => void;
 export type ListenFunc<T> = (handler: Handler<T>) => UnsubscribeFunc;
 export type UnsubscribeFunc = () => void;
-export declare class Emitter<T> {
+export declare class EventEmitter<T> {
     protected onListen: ListenFunc<T>;
-    protected constructor(onListen: ListenFunc<T>);
+    constructor(onListen: ListenFunc<T>);
     protected transform<R = T>(handler: (value: T, emit: (value: R) => void) => void): (fn: (v: R) => void) => UnsubscribeFunc;
     /**
      * Compatibility alias for `apply()` - registers a function to receive emitted values
@@ -22,13 +23,13 @@ export declare class Emitter<T> {
      * @param mapFunc
      * @returns Listenable: emits transformed values
      */
-    map<R>(mapFunc: (value: T) => R): Emitter<R>;
+    map<R>(mapFunc: (value: T) => 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
      * @returns Listenable: emits values that pass the filter
      */
-    filter(check: (value: T) => boolean): Emitter<T>;
+    filter(check: (value: T) => boolean): EventEmitter<T>;
     /**
      * Creates a chainable emitter that discards emitted values that are the same as the last value emitted by the new emitter
      * @param compare Optional function that takes the previous and next values and returns true if they should be considered equal
@@ -36,7 +37,7 @@ export declare class Emitter<T> {
      * If no `compare` function is provided, values will be compared via `===`
      * @returns Listenable: emits non-repeating values
      */
-    dedupe(compare?: (a: T, b: T) => boolean): Emitter<T>;
+    dedupe(compare?: (a: T, b: T) => boolean): EventEmitter<T>;
     /**
      * Creates a chainable emitter that mirrors emissions from the parent emitter, invoking the provided callback `cb` as a side effect for each emission.
      *
@@ -48,7 +49,7 @@ export declare class Emitter<T> {
      * @param cb A function to be called as a side effect for each value emitted by the parent emitter.
      * @returns A new emitter that forwards all values from the parent, invoking `cb` as a side effect.
      */
-    tap(cb: Handler<T>): Emitter<T>;
+    tap(cb: Handler<T>): EventEmitter<T>;
     /**
      * Immediately passes this emitter to a callback and returns this emitter
      *
@@ -66,39 +67,41 @@ export declare class Emitter<T> {
      * ```
      * @param cb
      */
-    fork(cb: (branch: this) => void): this;
-}
-export declare class EventEmitter<T> extends Emitter<T> {
-    constructor(listen: ListenFunc<T>);
+    fork(...cb: ((branch: this) => void)[]): this;
     debounce(ms: number): EventEmitter<T>;
     throttle(ms: number): EventEmitter<T>;
-    batch(ms: number): Emitter<T[]>;
+    batch(ms: number): EventEmitter<T[]>;
     /**
+     * Creates a chainable emitter that
      * **Experimental**: May change in future revisions
-     * Note: potential leak - This link will remain subscribed to the parent
-     * until it emits, regardless of subscriptions to this link.
+     * Note: only listens to the parent while at least one downstream subscription is present
      * @param notifier
      * @returns
      */
     once(): EventEmitter<T>;
+    delay(ms: number): EventEmitter<T>;
     scan<S>(updater: (state: S, value: T) => S, initial: S): EventEmitter<S>;
     buffer(count: number): EventEmitter<T[]>;
     /**
      * **Experimental**: May change in future revisions
-     * Note: potential leak - This link will remain subscribed to the parent
-     * until emission limit is reached, regardless of subscriptions to this link.
-     * @param notifier
+     * Note: only listens to the notifier while at least one downstream subscription is present
+     * @param limit
      * @returns
      */
     take(limit: number): EventEmitter<T>;
     /**
      * **Experimental**: May change in future revisions
-     * Note: potential leak - This link will remain subscribed to the notifier
-     * until it emits, regardless of subscriptions to this link.
+     * Note: only listens to the notifier while at least one downstream subscription is present
      * @param notifier
      * @returns
      */
-    takeUntil(notifier: Emitter<any>): Emitter<T>;
+    takeUntil(notifier: Listenable<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
+     * @param predicate Callback to determine whether to keep forwarding
+     */
+    takeWhile(predicate: (value: T) => boolean): EventEmitter<T>;
     /**
      * Creates a chainable emitter that immediately emits a value to every new subscriber,
      * then forwards parent emissions
@@ -106,46 +109,19 @@ export declare class EventEmitter<T> extends Emitter<T> {
      * @returns A new emitter that emits a value to new subscribers and forwards all values from the parent
      */
     immediate(value: T): EventEmitter<T>;
-    cached(): EventEmitter<T>;
-    /**
-     * Creates a chainable emitter that applies arbitrary transformation to values emitted by its parent
-     * @param mapFunc
-     * @returns Listenable: emits transformed values
-     */
-    map<R>(mapFunc: (value: T) => 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
-     * @returns Listenable: emits values that pass the filter
-     */
-    filter(check: (value: T) => boolean): EventEmitter<T>;
-    /**
-     * Creates a chainable emitter that discards emitted values that are the same as the last value emitted by the new emitter
-     * @param compare Optional function that takes the previous and next values and returns true if they should be considered equal
-     *
-     * If no `compare` function is provided, values will be compared via `===`
-     * @returns Listenable: emits non-repeating values
-     */
-    dedupe(compare?: (a: T, b: T) => boolean): EventEmitter<T>;
-    /**
-     * Creates a chainable emitter that mirrors emissions from the parent emitter, invoking the provided callback `cb` as a side effect for each emission.
-     *
-     * The callback `cb` is called exactly once per parent emission, regardless of how many listeners are attached to the returned emitter.
-     * All listeners attached to the returned emitter receive the same values as the parent emitter.
-     *
-     * *Note*, the side effect `cb` is only invoked when there is at least one listener attached to the returned emitter
-     *
-     * @param cb A function to be called as a side effect for each value emitted by the parent emitter.
-     * @returns A new emitter that forwards all values from the parent, invoking `cb` as a side effect.
+     * Creates a chainable emitter that forwards its parent's emissions, and
+     * immediately emits the latest value to new subscribers
+     * @returns
      */
-    tap(cb: Handler<T>): EventEmitter<T>;
+    cached(): EventEmitter<T>;
 }
 /**
  * Creates a linked Emitter and emit() pair
  * @example
  * ```ts
- * function createForm(options: { onsubmit?: (data: FormData) => void }) {
- *   const submitEvents = createEventSource(options.onsubmit);
+ * function createForm(options?: { onsubmit?: (data: FormData) => void }) {
+ *   const submitEvents = createEventSource(options?.onsubmit);
  *   const form = $.form({
  *     on: {
  *       submit: (e) => {
@@ -182,4 +158,10 @@ export declare function createListenable<T>(onAddFirst?: () => void, onRemoveLas
 export declare function interval(t: 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 {};

package/internal/emitter.js

@@ -1,4 +1,4 @@
-export class Emitter {
+export class EventEmitter {
     constructor(onListen) {
         this.onListen = onListen;
     }
@@ -36,7 +36,7 @@ export class Emitter {
      */
     map(mapFunc) {
         const listen = this.transform((value, emit) => emit(mapFunc(value)));
-        return new Emitter(listen);
+        return new EventEmitter(listen);
     }
     /**
      * Creates a chainable emitter that selectively forwards emissions along the chain
@@ -45,7 +45,7 @@ export class Emitter {
      */
     filter(check) {
         const listen = this.transform((value, emit) => check(value) && emit(value));
-        return new Emitter(listen);
+        return new EventEmitter(listen);
     }
     /**
      * Creates a chainable emitter that discards emitted values that are the same as the last value emitted by the new emitter
@@ -64,7 +64,7 @@ export class Emitter {
                 previous = { value };
             }
         });
-        return new Emitter(listen);
+        return new EventEmitter(listen);
     }
     /**
      * Creates a chainable emitter that mirrors emissions from the parent emitter, invoking the provided callback `cb` as a side effect for each emission.
@@ -82,7 +82,7 @@ export class Emitter {
             cb(value);
             emit(value);
         });
-        return new Emitter(listen);
+        return new EventEmitter(listen);
     }
     /**
      * Immediately passes this emitter to a callback and returns this emitter
@@ -101,15 +101,10 @@ export class Emitter {
      * ```
      * @param cb
      */
-    fork(cb) {
-        cb(this);
+    fork(...cb) {
+        cb.forEach(cb => cb(this));
         return this;
     }
-}
-export class EventEmitter extends Emitter {
-    constructor(listen) {
-        super(listen);
-    }
     debounce(ms) {
         let reset = null;
         const listen = this.transform((value, emit) => {
@@ -153,20 +148,37 @@ export class EventEmitter extends Emitter {
         return new EventEmitter(listen);
     }
     /**
+     * Creates a chainable emitter that
      * **Experimental**: May change in future revisions
-     * Note: potential leak - This link will remain subscribed to the parent
-     * until it emits, regardless of subscriptions to this link.
+     * Note: only listens to the parent while at least one downstream subscription is present
      * @param notifier
      * @returns
      */
     once() {
-        const { emit, listen } = createListenable();
-        const unsub = this.apply(v => {
-            unsub();
-            emit(v);
-        });
+        let parentUnsubscribe = null;
+        let completed = false;
+        const clear = () => {
+            if (parentUnsubscribe) {
+                parentUnsubscribe();
+                parentUnsubscribe = null;
+            }
+        };
+        const { emit, listen } = createListenable(() => {
+            if (completed)
+                return;
+            parentUnsubscribe = this.apply(v => {
+                completed = true;
+                clear();
+                emit(v);
+            });
+        }, clear);
         return new EventEmitter(listen);
     }
+    delay(ms) {
+        return new EventEmitter(this.transform((value, emit) => {
+            setTimeout(() => emit(value), ms);
+        }));
+    }
     scan(updater, initial) {
         let state = initial;
         const listen = this.transform((value, emit) => {
@@ -188,41 +200,101 @@ export class EventEmitter extends Emitter {
     }
     /**
      * **Experimental**: May change in future revisions
-     * Note: potential leak - This link will remain subscribed to the parent
-     * until emission limit is reached, regardless of subscriptions to this link.
-     * @param notifier
+     * Note: only listens to the notifier while at least one downstream subscription is present
+     * @param limit
      * @returns
      */
     take(limit) {
-        const { emit, listen } = createListenable();
+        let sourceUnsub = null;
         let count = 0;
-        const unsub = this.apply(v => {
-            if (count < limit) {
-                emit(v);
-                count++;
-                if (count >= limit) {
-                    unsub();
-                }
+        let completed = false;
+        const { emit, listen } = createListenable(() => {
+            if (completed)
+                return;
+            if (!sourceUnsub) {
+                sourceUnsub = this.apply(v => {
+                    if (count < limit) {
+                        emit(v);
+                        count++;
+                        if (count >= limit) {
+                            completed = true;
+                            if (sourceUnsub) {
+                                sourceUnsub();
+                                sourceUnsub = null;
+                            }
+                        }
+                    }
+                });
+            }
+        }, () => {
+            if (sourceUnsub) {
+                sourceUnsub();
+                sourceUnsub = null;
             }
         });
         return new EventEmitter(listen);
     }
     /**
      * **Experimental**: May change in future revisions
-     * Note: potential leak - This link will remain subscribed to the notifier
-     * until it emits, regardless of subscriptions to this link.
+     * Note: only listens to the notifier while at least one downstream subscription is present
      * @param notifier
      * @returns
      */
     takeUntil(notifier) {
-        const { emit, listen } = createListenable();
-        const unsub = this.apply(v => {
-            emit(v);
-        });
-        const unsubNotifier = notifier.apply(() => {
-            unsub();
-            unsubNotifier();
-        });
+        let parentUnsubscribe = null;
+        let notifierUnsub = null;
+        let completed = false;
+        const clear = () => {
+            if (parentUnsubscribe) {
+                parentUnsubscribe();
+                parentUnsubscribe = null;
+            }
+            if (notifierUnsub) {
+                notifierUnsub();
+                notifierUnsub = null;
+            }
+        };
+        const { emit, listen } = createListenable(() => {
+            if (completed)
+                return;
+            parentUnsubscribe = this.apply(emit);
+            const handler = () => {
+                completed = true;
+                clear();
+            };
+            notifierUnsub = "subscribe" in notifier
+                ? notifier.subscribe(handler)
+                : notifier.listen(handler);
+        }, clear);
+        return new EventEmitter(listen);
+    }
+    /**
+     * 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
+     * @param predicate Callback to determine whether to keep forwarding
+     */
+    takeWhile(predicate) {
+        let parentUnsubscribe = null;
+        let completed = false;
+        const clear = () => {
+            if (parentUnsubscribe) {
+                parentUnsubscribe();
+                parentUnsubscribe = null;
+            }
+        };
+        const { emit, listen } = createListenable(() => {
+            if (completed)
+                return;
+            parentUnsubscribe = this.apply(v => {
+                if (predicate(v)) {
+                    emit(v);
+                }
+                else {
+                    completed = true;
+                    clear();
+                }
+            });
+        }, clear);
         return new EventEmitter(listen);
     }
     /**
@@ -237,6 +309,11 @@ export class EventEmitter extends Emitter {
             return this.onListen(handle);
         });
     }
+    /**
+     * Creates a chainable emitter that forwards its parent's emissions, and
+     * immediately emits the latest value to new subscribers
+     * @returns
+     */
     cached() {
         let cache = null;
         let unsub = null;
@@ -254,68 +331,13 @@ export class EventEmitter extends Emitter {
             return listen(handler);
         });
     }
-    /**
-     * Creates a chainable emitter that applies arbitrary transformation to values emitted by its parent
-     * @param mapFunc
-     * @returns Listenable: emits transformed values
-     */
-    map(mapFunc) {
-        const listen = this.transform((value, emit) => emit(mapFunc(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
-     * @returns Listenable: emits values that pass the filter
-     */
-    filter(check) {
-        const listen = this.transform((value, emit) => check(value) && emit(value));
-        return new EventEmitter(listen);
-    }
-    /**
-     * Creates a chainable emitter that discards emitted values that are the same as the last value emitted by the new emitter
-     * @param compare Optional function that takes the previous and next values and returns true if they should be considered equal
-     *
-     * If no `compare` function is provided, values will be compared via `===`
-     * @returns Listenable: emits non-repeating values
-     */
-    dedupe(compare) {
-        let previous = null;
-        const listen = this.transform((value, emit) => {
-            if (!previous || (compare
-                ? !compare(previous.value, value)
-                : (previous.value !== value))) {
-                emit(value);
-                previous = { value };
-            }
-        });
-        return new EventEmitter(listen);
-    }
-    /**
-     * Creates a chainable emitter that mirrors emissions from the parent emitter, invoking the provided callback `cb` as a side effect for each emission.
-     *
-     * The callback `cb` is called exactly once per parent emission, regardless of how many listeners are attached to the returned emitter.
-     * All listeners attached to the returned emitter receive the same values as the parent emitter.
-     *
-     * *Note*, the side effect `cb` is only invoked when there is at least one listener attached to the returned emitter
-     *
-     * @param cb A function to be called as a side effect for each value emitted by the parent emitter.
-     * @returns A new emitter that forwards all values from the parent, invoking `cb` as a side effect.
-     */
-    tap(cb) {
-        const listen = this.transform((value, emit) => {
-            cb(value);
-            emit(value);
-        });
-        return new EventEmitter(listen);
-    }
 }
 /**
  * Creates a linked Emitter and emit() pair
  * @example
  * ```ts
- * function createForm(options: { onsubmit?: (data: FormData) => void }) {
- *   const submitEvents = createEventSource(options.onsubmit);
+ * function createForm(options?: { onsubmit?: (data: FormData) => void }) {
+ *   const submitEvents = createEventSource(options?.onsubmit);
  *   const form = $.form({
  *     on: {
  *       submit: (e) => {
@@ -381,3 +403,20 @@ export function interval(t) {
     }, () => 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 targetTime = Date.now() + ms;
+    let timeoutId = null;
+    const { emit, listen } = createListenable(() => {
+        const reminaingMs = targetTime - Date.now();
+        if (reminaingMs < 0)
+            return;
+        timeoutId = setTimeout(emit, reminaingMs);
+    }, () => {
+        clearTimeout(timeoutId);
+    });
+    return new EventEmitter(listen);
+}

package/internal/types.d.ts

@@ -1,13 +1,14 @@
+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 | Listenable<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 Listenable<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 +19,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 | Listenable<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 | Listenable<CSSValue>) => void);
+export type SetGetStyleFunc = SetStyleFunc & ((property: CSSProperty) => string | Listenable<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";
@@ -38,11 +39,11 @@ export type ElementDescriptor<Tag extends string> = {
         [E in keyof HTMLElementEventMap]+?: (event: HTMLElementEventMap[E]) => void;
     };
     style?: StylesDescriptor;
-    cssVariables?: Record<string, CSSValue | ReactiveSource<CSSValue>>;
+    cssVariables?: Record<string, CSSValue | Listenable<CSSValue>>;
 } & (Tag extends TagWithValue ? {
     value?: string | number;
 } : {}) & (Tag extends ContentlessTag ? {} : {
-    content?: DOMContent | ReactiveSource<DOMContent>;
+    content?: DOMContent | Listenable<DOMContent>;
 }) & (Tag extends TagWithSrc ? {
     src?: string;
 } : {}) & (Tag extends TagWithHref ? {
@@ -57,14 +58,14 @@ 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 | Listenable<CSSValue>): void;
+    setCSSVariable(table: Record<string, CSSValue | Listenable<CSSValue>>): void;
     qsa(selector: string): (Element | DomEntity<HTMLElement>)[];
     remove(): void;
     getRect(): DOMRect;
@@ -74,7 +75,7 @@ type ElementAPI<T extends HTMLElement> = {
 } & (T extends ContentlessElement ? {} : {
     append(...content: DOMContent[]): void;
     innerHTML: string;
-    content: DOMContent | ReactiveSource<DOMContent>;
+    content: DOMContent | Listenable<DOMContent>;
 }) & (T extends HTMLElementTagNameMap[TagWithValue] ? {
     value: string;
     select(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xtia/jel",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "repository": {
     "url": "https://github.com/tiadrop/jel-ts",
     "type": "github"
@@ -15,7 +15,11 @@
     },
     "./internal/*": null
   },
-  "description": "Lightweight DOM manipulation and componentisation",
+  "scripts": {
+    "prepublishOnly": "cp ../README.md .",
+    "postpublish": "rm README.md"
+  },
+  "description": "Lightweight DOM manipulation, componentisation and reactivity",
   "keywords": [
     "dom"
   ],