@xtia/jel 0.6.5 → 0.7.0

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/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,11 +1,7 @@
+import { Listenable } 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>);

package/internal/emitter.js

@@ -408,7 +408,15 @@ export function timeoutx(t) {
 }
 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);
+    }, () => {
+        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.5",
+  "version": "0.7.0",
   "repository": {
     "url": "https://github.com/tiadrop/jel-ts",
     "type": "github"