@xtia/jel 0.5.0 → 0.6.0

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

@@ -74,11 +74,32 @@ export declare class EventEmitter<T> extends Emitter<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>;
 }
 /**

package/internal/emitter.js

@@ -126,10 +126,10 @@ export class EventEmitter extends Emitter {
         return new EventEmitter(listen);
     }
     throttle(ms) {
-        let lastTime = 0;
+        let lastTime = -Infinity;
         const listen = this.transform((value, emit) => {
-            const now = Date.now();
-            if (now < lastTime + ms) {
+            const now = performance.now();
+            if (now >= lastTime + ms) {
                 lastTime = now;
                 emit(value);
             }
@@ -156,6 +156,13 @@ export class EventEmitter extends Emitter {
         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 +190,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;
@@ -204,6 +218,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 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 +234,7 @@ export class EventEmitter extends Emitter {
             unsub();
             unsubNotifier();
         });
-        return new Emitter(listen);
+        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.0",
+  "version": "0.6.0",
   "repository": {
     "url": "https://github.com/tiadrop/jel-ts",
     "type": "github"