@xtia/jel 0.6.3 → 0.6.4

package/internal/element.js

@@ -2,7 +2,7 @@ import { attribsProxy, eventsProxy, styleProxy } from "./proxy";
 import { entityDataSymbol, isContent, isJelEntity } from "./util";
 const elementWrapCache = new WeakMap();
 const recursiveAppend = (parent, c) => {
-    if (c === null)
+    if (c === null || c === undefined)
         return;
     if (Array.isArray(c)) {
         c.forEach(item => recursiveAppend(parent, item));
@@ -52,8 +52,9 @@ function createElement(tag, descriptor = {}) {
             domElement.setAttribute(k, v === true ? k : v);
         });
     }
-    if (descriptor.content !== undefined)
-        recursiveAppend(domElement, descriptor.content);
+    if ("content" in descriptor) {
+        ent.content = descriptor.content;
+    }
     if (descriptor.style) {
         ent.style(descriptor.style);
     }
@@ -127,6 +128,9 @@ function observeMutations() {
         subtree: true
     });
 }
+function isReactiveSource(value) {
+    return typeof value == "object" && value && ("listen" in value || "subscribe" in value);
+}
 function getWrappedElement(element) {
     if (!elementWrapCache.has(element)) {
         const setCSSVariable = (k, v) => {
@@ -137,53 +141,69 @@ function getWrappedElement(element) {
                 element.style.setProperty("--" + k, v);
             }
         };
-        const styleListeners = {};
-        function addStyleListener(prop, source) {
+        const listeners = {
+            style: {},
+            cssVariable: {},
+            content: {},
+        };
+        function addListener(type, prop, source) {
+            const set = {
+                style: (v) => element.style[prop] = v,
+                cssVariable: (v) => setCSSVariable(prop, v),
+                content: (v) => {
+                    element.innerHTML = "";
+                    recursiveAppend(element, v);
+                }
+            }[type];
             const subscribe = "subscribe" in source
-                ? () => source.subscribe(v => element.style[prop] = v)
-                : () => source.listen(v => element.style[prop] = v);
-            styleListeners[prop] = {
+                ? () => source.subscribe(set)
+                : () => source.listen(set);
+            listeners[type][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); });
+                        Object.values(listeners).forEach(group => {
+                            Object.values(group).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;
+                        Object.values(listeners).forEach(group => {
+                            Object.values(group).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();
+        function removeListener(type, prop) {
+            if (listeners[type][prop].unsubscribe) {
+                listeners[type][prop].unsubscribe();
             }
-            delete styleListeners[prop];
-            if (Object.keys(styleListeners).length == 0) {
+            delete listeners[type][prop];
+            if (!Object.keys(listeners).some(group => Object.keys(group).length == 0)) {
                 elementMutationMap.delete(element);
             }
         }
         function setStyle(prop, value) {
-            if (styleListeners[prop])
-                removeStyleListener(prop);
+            if (listeners.style[prop])
+                removeListener("style", prop);
             if (typeof value == "object" && value) {
                 if ("listen" in value || "subscribe" in value) {
-                    addStyleListener(prop, value);
+                    addListener("style", prop, value);
                     return;
                 }
                 value = value.toString();
             }
             if (value === undefined) {
-                return prop in styleListeners
-                    ? styleListeners[prop].subscribe
+                return prop in listeners
+                    ? listeners.style[prop].subscribe
                     : element.style[prop];
             }
             element.style[prop] = value;
@@ -199,12 +219,27 @@ function getWrappedElement(element) {
                 });
             },
             append(...content) {
+                var _a;
+                if ((_a = listeners.content) === null || _a === void 0 ? void 0 : _a[""])
+                    removeListener("content", "");
                 recursiveAppend(element, content);
             },
             remove: () => element.remove(),
             setCSSVariable(variableNameOrTable, value) {
                 if (typeof variableNameOrTable == "object") {
-                    Object.entries(variableNameOrTable).forEach(([k, v]) => setCSSVariable(k, v));
+                    Object.entries(variableNameOrTable).forEach(([k, v]) => {
+                        if (isReactiveSource(v)) {
+                            addListener("cssVariable", k, v);
+                            return;
+                        }
+                        setCSSVariable(k, v);
+                    });
+                    return;
+                }
+                if (listeners.cssVariable[variableNameOrTable])
+                    removeListener("cssVariable", variableNameOrTable);
+                if (isReactiveSource(value)) {
+                    addListener("cssVariable", variableNameOrTable, value);
                     return;
                 }
                 setCSSVariable(variableNameOrTable, value);
@@ -231,6 +266,13 @@ function getWrappedElement(element) {
                 });
             },
             set content(v) {
+                var _a;
+                if ((_a = listeners.content) === null || _a === void 0 ? void 0 : _a[""])
+                    removeListener("content", "");
+                if (isReactiveSource(v)) {
+                    addListener("content", "", v);
+                    return;
+                }
                 element.innerHTML = "";
                 recursiveAppend(element, v);
             },

package/internal/types.d.ts

@@ -38,7 +38,7 @@ export type ElementDescriptor<Tag extends string> = {
         [E in keyof HTMLElementEventMap]+?: (event: HTMLElementEventMap[E]) => void;
     };
     style?: StylesDescriptor;
-    cssVariables?: Record<string, CSSValue>;
+    cssVariables?: Record<string, CSSValue | ReactiveSource<CSSValue>>;
 } & (Tag extends TagWithValue ? {
     value?: string | number;
 } : {}) & (Tag extends ContentlessTag ? {} : {
@@ -63,8 +63,8 @@ type ElementAPI<T extends HTMLElement> = {
     };
     readonly events: EventsAccessor;
     readonly style: StyleAccessor;
-    setCSSVariable(variableName: string, value: CSSValue): void;
-    setCSSVariable(table: Record<string, CSSValue>): void;
+    setCSSVariable(variableName: string, value: CSSValue | ReactiveSource<CSSValue>): void;
+    setCSSVariable(table: Record<string, CSSValue | ReactiveSource<CSSValue>>): void;
     qsa(selector: string): (Element | DomEntity<HTMLElement>)[];
     remove(): void;
     getRect(): DOMRect;
@@ -74,7 +74,7 @@ type ElementAPI<T extends HTMLElement> = {
 } & (T extends ContentlessElement ? {} : {
     append(...content: DOMContent[]): void;
     innerHTML: string;
-    content: DOMContent;
+    content: DOMContent | ReactiveSource<DOMContent>;
 }) & (T extends HTMLElementTagNameMap[TagWithValue] ? {
     value: string;
     select(): void;

package/package.json

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