@xtia/jel 0.7.2 → 0.9.1

package/index.d.ts

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

package/index.js

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

package/internal/emitter.d.ts

@@ -1,5 +1,10 @@
 import { EmitterLike } from "./types";
 type Handler<T> = (value: T) => void;
+type Period = {
+    asMilliseconds: number;
+} | {
+    asSeconds: number;
+};
 export type ListenFunc<T> = (handler: Handler<T>) => UnsubscribeFunc;
 export type UnsubscribeFunc = () => void;
 export declare class EventEmitter<T> {
@@ -24,6 +29,7 @@ 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>;
     /**
      * 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,8 +74,20 @@ 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
@@ -80,6 +98,7 @@ export declare class EventEmitter<T> {
      */
     once(): EventEmitter<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[]>;
     /**
@@ -121,6 +140,10 @@ export declare class EventEmitter<T> {
      */
     or(...emitters: EmitterLike<T>[]): EventEmitter<T>;
     or<U>(...emitters: EmitterLike<U>[]): EventEmitter<T | U>;
+    then<R>(handler: (value: T) => R): Promise<R>;
+    memo(): Memo<T | undefined>;
+    memo(initial: T): Memo<T>;
+    memo<U>(initial: U): Memo<T | U>;
 }
 /**
  * Creates a linked EventEmitter and emit() pair
@@ -157,16 +180,17 @@ export declare function createEventSource<T>(initialHandler?: Handler<T>): {
     emit: (value: T) => void;
     emitter: EventEmitter<T>;
 };
-export declare function createListenable<T>(sourceListen?: () => UnsubscribeFunc | undefined): {
-    listen: (fn: (v: T) => void) => UnsubscribeFunc;
-    emit: (value: T) => 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 function timeout(ms: number): EventEmitter<void>;
+export declare function timeout(period: Period): EventEmitter<void>;
+declare class Memo<T> {
+    private _value;
+    private unsubscribeFunc;
+    get value(): T;
+    constructor(source: EmitterLike<T>, initial: T);
+    dispose(): void;
+}
 export declare class SubjectEmitter<T> extends EventEmitter<T> {
     private emit;
     private _value;
@@ -175,15 +199,15 @@ export declare class SubjectEmitter<T> extends EventEmitter<T> {
     next(value: T): void;
 }
 type EventSource<T, E extends string> = {
-    on: (eventName: E, handler: (value: T) => void) => UnsubscribeFunc;
+    on: (eventName: E, handler: Handler<T>) => UnsubscribeFunc;
 } | {
-    on: (eventName: E, handler: (value: T) => void) => void | UnsubscribeFunc;
-    off: (eventName: E, handler: (value: T) => void) => void;
+    on: (eventName: E, handler: Handler<T>) => void | UnsubscribeFunc;
+    off: (eventName: E, handler: Handler<T>) => void;
 } | {
-    addEventListener: (eventName: E, handler: (value: T) => void) => UnsubscribeFunc;
+    addEventListener: (eventName: E, handler: Handler<T>) => UnsubscribeFunc;
 } | {
-    addEventListener: (eventName: E, handler: (value: T) => void) => void | UnsubscribeFunc;
-    removeEventListener: (eventName: E, handler: (value: T) => void) => void;
+    addEventListener: (eventName: E, handler: Handler<T>) => void | UnsubscribeFunc;
+    removeEventListener: (eventName: E, handler: Handler<T>) => void;
 };
 /**
  * Create an EventEmitter from an event source. Event sources can be RxJS observables, existing EventEmitters, or objects that
@@ -192,4 +216,14 @@ type EventSource<T, E extends string> = {
  */
 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 declare function toEventEmitter<T>(subscribe: ListenFunc<T>): EventEmitter<T>;
+type Dictionary<T> = Record<string | symbol, T>;
+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]>;
+};
+export declare function combineEmitters<U extends Dictionary<EmitterLike<any>>>(emitters: U): EventEmitter<CombinedRecord<U>>;
+export declare function combineEmitters<U extends EmitterLike<any>[]>(emitters: [...U]): EventEmitter<{
+    [K in keyof U]: ExtractEmitterValue<U[K]>;
+}>;
 export {};

package/internal/emitter.js

@@ -1,4 +1,9 @@
 import { isReactiveSource } from "./util";
+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 +39,10 @@ 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);
+    }
     /**
      * 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 +110,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 +125,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);
             }
@@ -171,9 +180,9 @@ export class EventEmitter {
         });
         return new EventEmitter(listen);
     }
-    delay(ms) {
+    delay(t) {
         return new EventEmitter(this.transform((value, emit) => {
-            setTimeout(() => emit(value), ms);
+            setTimeout(() => emit(value), periodAsMilliseconds(t));
         }));
     }
     scan(updater, initial) {
@@ -245,11 +254,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);
@@ -314,6 +322,14 @@ export class EventEmitter {
             return () => unsubs.forEach(unsub => unsub());
         });
     }
+    then(handler) {
+        return new Promise(resolve => {
+            this.once().apply(v => resolve(handler(v)));
+        });
+    }
+    memo(initial) {
+        return new Memo(this, initial);
+    }
 }
 /**
  * Creates a linked EventEmitter and emit() pair
@@ -355,7 +371,7 @@ export function createEventSource(initialHandler) {
         emitter: new EventEmitter(listen)
     };
 }
-export function createListenable(sourceListen) {
+function createListenable(sourceListen) {
     const handlers = [];
     let onRemoveLast;
     const addListener = (fn) => {
@@ -377,19 +393,19 @@ export 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 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(() => {
@@ -401,6 +417,22 @@ export function timeout(t) {
     });
     return new EventEmitter(listen);
 }
+class Memo {
+    get value() {
+        return this._value;
+    }
+    constructor(source, initial) {
+        this._value = initial;
+        const emitter = toEventEmitter(source);
+        this.unsubscribeFunc = emitter.listen(v => this._value = v);
+    }
+    dispose() {
+        this.unsubscribeFunc();
+        this.unsubscribeFunc = () => {
+            throw new Error("Memo object already disposed");
+        };
+    }
+}
 export class SubjectEmitter extends EventEmitter {
     constructor(initial) {
         const { emit, listen } = createListenable();
@@ -422,6 +454,8 @@ 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) {
@@ -456,3 +490,39 @@ export function toEventEmitter(source, eventName) {
     }
     throw new Error("Invalid event source");
 }
+function combineArray(emitters) {
+    let values = Array.from({ length: emitters.length });
+    const { emit, listen } = createListenable(() => {
+        const unsubFuncs = emitters.map((emitter, idx) => {
+            return emitter.listen(v => {
+                values[idx] = { value: v };
+                if (values.every(v => v !== undefined))
+                    emit(values.map(vc => vc.value));
+            });
+        });
+        return () => unsubFuncs.forEach(f => f());
+    });
+    return new EventEmitter(listen);
+}
+function combineRecord(emitters) {
+    const keys = Object.keys(emitters);
+    let values = {};
+    const { emit, listen } = createListenable(() => {
+        const unsubFuncs = keys.map(key => {
+            return emitters[key].listen(v => {
+                values[key] = { value: v };
+                if (keys.every(k => values[k] !== undefined)) {
+                    const record = Object.fromEntries(Object.entries(values).map(([k, vc]) => [k, vc.value]));
+                    emit(record);
+                }
+            });
+        });
+        return () => unsubFuncs.forEach(f => f());
+    });
+    return new EventEmitter(listen);
+}
+export function combineEmitters(emitters) {
+    if (Array.isArray(emitters))
+        return combineArray(emitters.map(toEventEmitter));
+    return combineRecord(Object.fromEntries(Object.entries(emitters).map(([k, e]) => [k, toEventEmitter(e)])));
+}

package/internal/types.d.ts

@@ -35,7 +35,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;
     };

package/package.json

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