@xtia/jel 0.5.1 → 0.6.1

package/index.d.ts

@@ -1,4 +1,4 @@
 export { DomEntity, ElementClassDescriptor, ElementDescriptor, DOMContent, DomHelper, StyleAccessor, JelEntity } from "./internal/types";
 export { $ } from "./internal/element";
 export { createEntity } from "./internal/util";
-export { createEventSource } from "./internal/emitter";
+export { createEventSource, interval } from "./internal/emitter";

package/index.js

@@ -1,3 +1,3 @@
 export { $ } from "./internal/element";
 export { createEntity } from "./internal/util";
-export { createEventSource } from "./internal/emitter";
+export { createEventSource, interval } from "./internal/emitter";

package/internal/element.js

@@ -97,6 +97,30 @@ export const $ = new Proxy(createElement, {
         };
     }
 });
+const elementMutationMap = new WeakMap();
+let mutationObserver = null;
+function observeMutations() {
+    if (mutationObserver !== null)
+        return;
+    mutationObserver = new MutationObserver((mutations) => {
+        mutations.forEach(mut => {
+            mut.addedNodes.forEach(node => {
+                if (elementMutationMap.has(node)) {
+                    elementMutationMap.get(node).add();
+                }
+            });
+            mut.removedNodes.forEach(node => {
+                if (elementMutationMap.has(node)) {
+                    elementMutationMap.get(node).remove();
+                }
+            });
+        });
+    });
+    mutationObserver.observe(document.body, {
+        childList: true,
+        subtree: true
+    });
+}
 function getWrappedElement(element) {
     if (!elementWrapCache.has(element)) {
         const setCSSVariable = (k, v) => {
@@ -107,6 +131,57 @@ function getWrappedElement(element) {
                 element.style.setProperty("--" + k, v);
             }
         };
+        const styleListeners = {};
+        function addStyleListener(prop, source) {
+            const subscribe = "subscribe" in source
+                ? () => source.subscribe(v => element.style[prop] = v)
+                : () => source.listen(v => element.style[prop] = v);
+            styleListeners[prop] = {
+                subscribe,
+                unsubscribe: element.isConnected ? subscribe() : null,
+            };
+            if (!elementMutationMap.has(element)) {
+                elementMutationMap.set(element, {
+                    add: () => {
+                        Object.values(styleListeners).forEach(l => { var _a; return l.unsubscribe = (_a = l.subscribe) === null || _a === void 0 ? void 0 : _a.call(l); });
+                    },
+                    remove: () => {
+                        Object.values(styleListeners).forEach(l => {
+                            var _a;
+                            (_a = l.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(l);
+                            l.unsubscribe = null;
+                        });
+                    }
+                });
+            }
+            observeMutations();
+        }
+        function removeStyleListener(prop) {
+            if (styleListeners[prop].unsubscribe) {
+                styleListeners[prop].unsubscribe();
+            }
+            delete styleListeners[prop];
+            if (Object.keys(styleListeners).length == 0) {
+                elementMutationMap.delete(element);
+            }
+        }
+        function setStyle(prop, value) {
+            if (styleListeners[prop])
+                removeStyleListener(prop);
+            if (typeof value == "object" && value) {
+                if ("listen" in value || "subscribe" in value) {
+                    addStyleListener(prop, value);
+                    return;
+                }
+                value = value.toString();
+            }
+            if (value === undefined) {
+                return prop in styleListeners
+                    ? styleListeners[prop].subscribe
+                    : element.style[prop];
+            }
+            element.style[prop] = value;
+        }
         const domEntity = {
             [entityDataSymbol]: {
                 dom: element,
@@ -210,7 +285,7 @@ function getWrappedElement(element) {
                     element.setAttribute("name", v);
                 }
             },
-            style: new Proxy(() => element.style, styleProxy),
+            style: new Proxy(setStyle, styleProxy),
             classes: element.classList,
             events: new Proxy(element, eventsProxy)
         };

package/internal/emitter.d.ts

@@ -73,13 +73,72 @@ export declare class EventEmitter<T> extends Emitter<T> {
     debounce(ms: number): EventEmitter<T>;
     throttle(ms: number): EventEmitter<T>;
     batch(ms: number): Emitter<T[]>;
-    filter(check: (value: T) => boolean): EventEmitter<T>;
+    /**
+     * **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.
+     * @param notifier
+     * @returns
+     */
     once(): 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
+     * @returns
+     */
     take(limit: number): EventEmitter<T>;
-    tap(cb: Handler<T>): 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.
+     * @param notifier
+     * @returns
+     */
     takeUntil(notifier: Emitter<any>): Emitter<T>;
+    /**
+     * Creates a chainable emitter that immediately emits a value to every new subscriber,
+     * then forwards parent emissions
+     * @param value
+     * @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.
+     */
+    tap(cb: Handler<T>): EventEmitter<T>;
 }
 /**
  * Creates a linked Emitter and emit() pair
@@ -120,4 +179,7 @@ export declare function createListenable<T>(onAddFirst?: () => void, onRemoveLas
     listen: (fn: (v: T) => void) => UnsubscribeFunc;
     emit: (value: T) => void;
 };
+export declare function interval(t: number | {
+    asMilliseconds: number;
+}): EventEmitter<number>;
 export {};

package/internal/emitter.js

@@ -152,10 +152,13 @@ export class EventEmitter extends Emitter {
         });
         return new EventEmitter(listen);
     }
-    filter(check) {
-        const listen = this.transform((value, emit) => check(value) && emit(value));
-        return new EventEmitter(listen);
-    }
+    /**
+     * **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.
+     * @param notifier
+     * @returns
+     */
     once() {
         const { emit, listen } = createListenable();
         const unsub = this.apply(v => {
@@ -183,6 +186,13 @@ export class EventEmitter extends Emitter {
         });
         return new EventEmitter(listen);
     }
+    /**
+     * **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
+     * @returns
+     */
     take(limit) {
         const { emit, listen } = createListenable();
         let count = 0;
@@ -197,13 +207,13 @@ export class EventEmitter extends Emitter {
         });
         return new EventEmitter(listen);
     }
-    tap(cb) {
-        const listen = this.transform((value, emit) => {
-            cb(value);
-            emit(value);
-        });
-        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.
+     * @param notifier
+     * @returns
+     */
     takeUntil(notifier) {
         const { emit, listen } = createListenable();
         const unsub = this.apply(v => {
@@ -213,7 +223,91 @@ export class EventEmitter extends Emitter {
             unsub();
             unsubNotifier();
         });
-        return new Emitter(listen);
+        return new EventEmitter(listen);
+    }
+    /**
+     * Creates a chainable emitter that immediately emits a value to every new subscriber,
+     * then forwards parent emissions
+     * @param value
+     * @returns A new emitter that emits a value to new subscribers and forwards all values from the parent
+     */
+    immediate(value) {
+        return new EventEmitter(handle => {
+            handle(value);
+            return this.onListen(handle);
+        });
+    }
+    cached() {
+        let cache = null;
+        let unsub = null;
+        const { listen, emit } = createListenable(() => {
+            unsub = this.onListen((value => {
+                cache = { value };
+                emit(value);
+            }));
+        }, () => {
+            unsub();
+        });
+        return new EventEmitter(handler => {
+            if (cache)
+                handler(cache.value);
+            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);
     }
 }
 /**
@@ -277,3 +371,13 @@ export function createListenable(onAddFirst, onRemoveLast) {
         emit: (value) => handlers.forEach(h => h.fn(value)),
     };
 }
+export function interval(t) {
+    let intervalId = null;
+    let idx = 0;
+    const { emit, listen } = createListenable(() => {
+        intervalId = setInterval(() => {
+            emit(idx++);
+        }, typeof t == "number" ? t : t.asMilliseconds);
+    }, () => clearInterval(intervalId));
+    return new EventEmitter(listen);
+}

package/internal/proxy.d.ts

@@ -1,3 +1,4 @@
-export declare const styleProxy: ProxyHandler<() => CSSStyleDeclaration>;
+import { SetGetStyleFunc } from "./types";
+export declare const styleProxy: ProxyHandler<SetGetStyleFunc>;
 export declare const attribsProxy: ProxyHandler<HTMLElement>;
 export declare const eventsProxy: ProxyHandler<HTMLElement>;

package/internal/proxy.js

@@ -1,22 +1,21 @@
 import { EventEmitter } from "./emitter";
 export const styleProxy = {
-    get(getStyle, prop) {
-        return getStyle()[prop];
+    get(style, prop) {
+        return style(prop);
     },
-    set(getStyle, prop, value) {
-        getStyle()[prop] = value;
+    set(style, prop, value) {
+        style(prop, value);
         return true;
     },
-    apply(getStyle, _, [stylesOrProp, value]) {
-        const style = getStyle();
+    apply(style, _, [stylesOrProp, value]) {
         if (typeof stylesOrProp == "object") {
-            Object.entries(stylesOrProp).forEach(([prop, val]) => style[prop] = val);
+            Object.entries(stylesOrProp).forEach(([prop, val]) => style(prop, val));
             return;
         }
-        style[stylesOrProp] = value;
+        style(stylesOrProp, value);
     },
-    deleteProperty(getStyle, prop) {
-        getStyle()[prop] = null;
+    deleteProperty(style, prop) {
+        style(prop, null);
         return true;
     }
 };

package/internal/types.d.ts

@@ -1,9 +1,15 @@
-import { EventEmitter } from "./emitter";
+import { EventEmitter, UnsubscribeFunc } from "./emitter";
 import { entityDataSymbol } from "./util";
 export type ElementClassDescriptor = string | Record<string, boolean | undefined> | undefined | ElementClassDescriptor[];
 export type DOMContent = number | null | string | Element | JelEntity<object> | Text | DOMContent[];
 export type DomEntity<T extends HTMLElement> = JelEntity<ElementAPI<T>>;
-type CSSValue = string | number | null | HexCodeContainer;
+export type ReactiveSource<T> = ({
+    listen: (handler: (value: T) => void) => UnsubscribeFunc;
+} | {
+    subscribe: (handler: (value: T) => void) => UnsubscribeFunc;
+});
+export type CSSValue = string | number | null | HexCodeContainer;
+export type CSSProperty = keyof StylesDescriptor;
 type HexCodeContainer = {
     hexCode: string;
     toString(): string;
@@ -12,9 +18,11 @@ export type StylesDescriptor = {
     [K in keyof CSSStyleDeclaration as [
         K,
         CSSStyleDeclaration[K]
-    ] extends [string, string] ? K : never]+?: CSSValue;
+    ] extends [string, string] ? K : never]+?: CSSValue | ReactiveSource<CSSValue>;
 };
-export type StyleAccessor = StylesDescriptor & ((styles: StylesDescriptor) => void) & ((property: keyof StylesDescriptor, value: CSSValue) => void);
+export type SetStyleFunc = ((property: CSSProperty, value: CSSValue | ReactiveSource<CSSValue>) => void);
+export type SetGetStyleFunc = SetStyleFunc & ((property: CSSProperty) => string | ReactiveSource<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";
 type TagWithSrc = "img" | "script" | "iframe" | "video" | "audio" | "embed" | "source" | "track";
@@ -34,7 +42,7 @@ export type ElementDescriptor<Tag extends string> = {
 } & (Tag extends TagWithValue ? {
     value?: string | number;
 } : {}) & (Tag extends ContentlessTag ? {} : {
-    content?: DOMContent;
+    content?: DOMContent | ReactiveSource<DOMContent>;
 }) & (Tag extends TagWithSrc ? {
     src?: string;
 } : {}) & (Tag extends TagWithHref ? {

package/package.json

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