From b347bdffc1ba8497365d1ea47aa0df3575306957 Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Tue, 18 Feb 2025 22:03:36 +0100 Subject: [PATCH] :bug: Fixes update of dataset/classList --- dist/dde-with-signals.js | 1159 +++++++++++++--------- dist/dde.js | 759 ++++++++------ dist/esm-with-signals.js | 1159 +++++++++++++--------- dist/esm.js | 759 ++++++++------ examples/components/fullNameComponent.js | 4 + src/dom.js | 22 +- 6 files changed, 2277 insertions(+), 1585 deletions(-) diff --git a/dist/dde-with-signals.js b/dist/dde-with-signals.js index 4268220..de4de9b 100644 --- a/dist/dde-with-signals.js +++ b/dist/dde-with-signals.js @@ -1,665 +1,870 @@ //deka-dom-el library is available via global namespace `dde` (()=> { // src/signals-common.js -var N = { - isSignal(t) { - return !1; +var signals_global = { + isSignal(attributes) { + return false; }, - processReactiveAttribute(t, e, r, n) { - return r; + processReactiveAttribute(obj, key, attr, set) { + return attr; } }; -function H(t, e = !0) { - return e ? Object.assign(N, t) : (Object.setPrototypeOf(t, N), t); +function registerReactivity(def, global = true) { + if (global) return Object.assign(signals_global, def); + Object.setPrototypeOf(def, signals_global); + return def; } -function j(t) { - return N.isPrototypeOf(t) && t !== N ? t : N; +function signals(_this) { + return signals_global.isPrototypeOf(_this) && _this !== signals_global ? _this : signals_global; } // src/helpers.js -var I = (...t) => Object.prototype.hasOwnProperty.call(...t); -function A(t) { - return typeof t > "u"; +var hasOwn = (...a) => Object.prototype.hasOwnProperty.call(...a); +function isUndef(value) { + return typeof value === "undefined"; } -function X(t) { - let e = typeof t; - return e !== "object" ? e : t === null ? "null" : Object.prototype.toString.call(t); +function typeOf(v) { + const t = typeof v; + if (t !== "object") return t; + if (v === null) return "null"; + return Object.prototype.toString.call(v); } -function P(t, e) { - if (!t || !(t instanceof AbortSignal)) - return !0; - if (!t.aborted) - return t.addEventListener("abort", e), function() { - t.removeEventListener("abort", e); - }; +function onAbort(signal2, listener) { + if (!signal2 || !(signal2 instanceof AbortSignal)) + return true; + if (signal2.aborted) + return; + signal2.addEventListener("abort", listener); + return function cleanUp() { + signal2.removeEventListener("abort", listener); + }; } -function W(t, e) { - let { observedAttributes: r = [] } = t.constructor; - return r.reduce(function(n, o) { - return n[dt(o)] = e(t, o), n; +function observedAttributes(instance, observedAttribute2) { + const { observedAttributes: observedAttributes3 = [] } = instance.constructor; + return observedAttributes3.reduce(function(out, name) { + out[kebabToCamel(name)] = observedAttribute2(instance, name); + return out; }, {}); } -function dt(t) { - return t.replace(/-./g, (e) => e[1].toUpperCase()); +function kebabToCamel(name) { + return name.replace(/-./g, (x) => x[1].toUpperCase()); } // src/dom-common.js -var d = { - setDeleteAttr: pt, +var enviroment = { + setDeleteAttr, ssr: "", D: globalThis.document, F: globalThis.DocumentFragment, H: globalThis.HTMLElement, S: globalThis.SVGElement, M: globalThis.MutationObserver, - q: (t) => t || Promise.resolve() + q: (p) => p || Promise.resolve() }; -function pt(t, e, r) { - if (Reflect.set(t, e, r), !!A(r)) { - if (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === "undefined") - return t.removeAttribute(e); - if (Reflect.get(t, e) === "undefined") - return Reflect.set(t, e, ""); - } +function setDeleteAttr(obj, prop, val) { + Reflect.set(obj, prop, val); + if (!isUndef(val)) return; + Reflect.deleteProperty(obj, prop); + if (obj instanceof enviroment.H && obj.getAttribute(prop) === "undefined") + return obj.removeAttribute(prop); + if (Reflect.get(obj, prop) === "undefined") + return Reflect.set(obj, prop, ""); } -var O = "__dde_lifecyclesToEvents", w = "dde:connected", S = "dde:disconnected", T = "dde:attributeChanged"; +var keyLTE = "__dde_lifecyclesToEvents"; +var evc = "dde:connected"; +var evd = "dde:disconnected"; +var eva = "dde:attributeChanged"; // src/dom.js -function Mt(t) { - return d.q(t); +function queue(promise) { + return enviroment.q(promise); } -var y = [{ +var scopes = [{ get scope() { - return d.D.body; + return enviroment.D.body; }, - host: (t) => t ? t(d.D.body) : d.D.body, - prevent: !0 -}], x = { + host: (c) => c ? c(enviroment.D.body) : enviroment.D.body, + prevent: true +}]; +var scope = { get current() { - return y[y.length - 1]; + return scopes[scopes.length - 1]; }, get host() { return this.current.host; }, preventDefault() { - let { current: t } = this; - return t.prevent = !0, t; + const { current } = this; + current.prevent = true; + return current; }, get state() { - return [...y]; + return [...scopes]; }, - push(t = {}) { - return y.push(Object.assign({}, this.current, { prevent: !1 }, t)); + push(s = {}) { + return scopes.push(Object.assign({}, this.current, { prevent: false }, s)); }, pushRoot() { - return y.push(y[0]); + return scopes.push(scopes[0]); }, pop() { - if (y.length !== 1) - return y.pop(); + if (scopes.length === 1) return; + return scopes.pop(); } }; -function Y(...t) { - return this.appendOriginal(...t), this; +function append(...els) { + this.appendOriginal(...els); + return this; } -function lt(t) { - return t.append === Y || (t.appendOriginal = t.append, t.append = Y), t; +function chainableAppend(el) { + if (el.append === append) return el; + el.appendOriginal = el.append; + el.append = append; + return el; } -var $; -function M(t, e, ...r) { - let n = j(this), o = 0, c, u; - switch ((Object(e) !== e || n.isSignal(e)) && (e = { textContent: e }), !0) { - case typeof t == "function": { - o = 1; - let a = (...l) => l.length ? (o === 1 ? r.unshift(...l) : l.forEach((E) => E(u)), void 0) : u; - x.push({ scope: t, host: a }), c = t(e || void 0); - let h = c instanceof d.F; - if (c.nodeName === "#comment") break; - let v = M.mark({ +var namespace; +function createElement(tag, attributes, ...addons) { + const s = signals(this); + let scoped = 0; + let el, el_host; + if (Object(attributes) !== attributes || s.isSignal(attributes)) + attributes = { textContent: attributes }; + switch (true) { + case typeof tag === "function": { + scoped = 1; + const host = (...c) => !c.length ? el_host : (scoped === 1 ? addons.unshift(...c) : c.forEach((c2) => c2(el_host)), void 0); + scope.push({ scope: tag, host }); + el = tag(attributes || void 0); + const is_fragment = el instanceof enviroment.F; + if (el.nodeName === "#comment") break; + const el_mark = createElement.mark({ type: "component", - name: t.name, - host: h ? "this" : "parentElement" + name: tag.name, + host: is_fragment ? "this" : "parentElement" }); - c.prepend(v), h && (u = v); + el.prepend(el_mark); + if (is_fragment) el_host = el_mark; break; } - case t === "#text": - c = q.call(this, d.D.createTextNode(""), e); + case tag === "#text": + el = assign.call(this, enviroment.D.createTextNode(""), attributes); break; - case (t === "<>" || !t): - c = q.call(this, d.D.createDocumentFragment(), e); + case (tag === "<>" || !tag): + el = assign.call(this, enviroment.D.createDocumentFragment(), attributes); break; - case !!$: - c = q.call(this, d.D.createElementNS($, t), e); + case Boolean(namespace): + el = assign.call(this, enviroment.D.createElementNS(namespace, tag), attributes); break; - case !c: - c = q.call(this, d.D.createElement(t), e); + case !el: + el = assign.call(this, enviroment.D.createElement(tag), attributes); } - return lt(c), u || (u = c), r.forEach((a) => a(u)), o && x.pop(), o = 2, c; + chainableAppend(el); + if (!el_host) el_host = el; + addons.forEach((c) => c(el_host)); + if (scoped) scope.pop(); + scoped = 2; + return el; } -M.mark = function(t, e = !1) { - t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); - let r = e ? "" : "/", n = d.D.createComment(``); - return e && (n.end = d.D.createComment("")), n; +createElement.mark = function(attrs, is_open = false) { + attrs = Object.entries(attrs).map(([n, v]) => n + `="${v}"`).join(" "); + const end = is_open ? "" : "/"; + const out = enviroment.D.createComment(``); + if (is_open) out.end = enviroment.D.createComment(""); + return out; }; -function jt(t) { - let e = this; - return function(...n) { - $ = t; - let o = M.call(e, ...n); - return $ = void 0, o; +function createElementNS(ns) { + const _this = this; + return function createElementNSCurried(...rest) { + namespace = ns; + const el = createElement.call(_this, ...rest); + namespace = void 0; + return el; }; } -function Pt(t, e = t) { - let r = "\xB9\u2070", n = "\u2713", o = Object.fromEntries( - Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(r)).map((c) => [c.name += r, c]) +function simulateSlots(element, root = element) { + const mark_e = "\xB9\u2070", mark_s = "\u2713"; + const slots = Object.fromEntries( + Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s]) ); - if (t.append = new Proxy(t.append, { - apply(c, u, a) { - if (a[0] === e) return c.apply(t, a); - for (let h of a) { - let v = (h.slot || "") + r; + element.append = new Proxy(element.append, { + apply(orig, _, els) { + if (els[0] === root) return orig.apply(element, els); + for (const el of els) { + const name = (el.slot || "") + mark_e; try { - bt(h, "remove", "slot"); - } catch { + elementAttribute(el, "remove", "slot"); + } catch (_error) { } - let l = o[v]; - if (!l) return; - l.name.startsWith(n) || (l.childNodes.forEach((E) => E.remove()), l.name = n + v), l.append(h); + const slot = slots[name]; + if (!slot) return; + if (!slot.name.startsWith(mark_s)) { + slot.childNodes.forEach((c) => c.remove()); + slot.name = mark_s + name; + } + slot.append(el); } - return t.append = c, t; + element.append = orig; + return element; } - }), t !== e) { - let c = Array.from(t.childNodes); - t.append(...c); + }); + if (element !== root) { + const els = Array.from(element.childNodes); + element.append(...els); } - return e; + return root; } -var F = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d; -function q(t, ...e) { - if (!e.length) return t; - F.set(t, rt(t, this)); - for (let [r, n] of Object.entries(Object.assign({}, ...e))) - nt.call(this, t, r, n); - return F.delete(t), t; +var assign_context = /* @__PURE__ */ new WeakMap(); +var { setDeleteAttr: setDeleteAttr2 } = enviroment; +function assign(element, ...attributes) { + if (!attributes.length) return element; + assign_context.set(element, assignContext(element, this)); + for (const [key, value] of Object.entries(Object.assign({}, ...attributes))) + assignAttribute.call(this, element, key, value); + assign_context.delete(element); + return element; } -function nt(t, e, r) { - let { setRemoveAttr: n, s: o } = rt(t, this), c = this; - r = o.processReactiveAttribute( - t, - e, - r, - (a, h) => nt.call(c, t, a, h) +function assignAttribute(element, key, value) { + const { setRemoveAttr, s } = assignContext(element, this); + const _this = this; + value = s.processReactiveAttribute( + element, + key, + value, + (key2, value2) => assignAttribute.call(_this, element, key2, value2) ); - let [u] = e; - if (u === "=") return n(e.slice(1), r); - if (u === ".") return et(t, e.slice(1), r); - if (/(aria|data)([A-Z])/.test(e)) - return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), n(e, r); - switch (e === "className" && (e = "class"), e) { + const [k] = key; + if ("=" === k) return setRemoveAttr(key.slice(1), value); + if ("." === k) return setDelete(element, key.slice(1), value); + if (/(aria|data)([A-Z])/.test(key)) { + key = key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(); + return setRemoveAttr(key, value); + } + if ("className" === key) key = "class"; + switch (key) { case "xlink:href": - return n(e, r, "http://www.w3.org/1999/xlink"); + return setRemoveAttr(key, value, "http://www.w3.org/1999/xlink"); case "textContent": - return tt(t, e, r); + return setDeleteAttr2(element, key, value); case "style": - if (typeof r != "object") break; + if (typeof value !== "object") break; /* falls through */ case "dataset": - return B(o, r, et.bind(null, t[e])); + return forEachEntries(s, key, element, value, setDelete.bind(null, element[key])); case "ariaset": - return B(o, r, (a, h) => n("aria-" + a, h)); + return forEachEntries(s, key, element, value, (key2, val) => setRemoveAttr("aria-" + key2, val)); case "classList": - return ht.call(c, t, r); + return classListDeclarative.call(_this, element, value); } - return gt(t, e) ? tt(t, e, r) : n(e, r); + return isPropSetter(element, key) ? setDeleteAttr2(element, key, value) : setRemoveAttr(key, value); } -function rt(t, e) { - if (F.has(t)) return F.get(t); - let n = (t instanceof d.S ? mt : vt).bind(null, t, "Attribute"), o = j(e); - return { setRemoveAttr: n, s: o }; +function assignContext(element, _this) { + if (assign_context.has(element)) return assign_context.get(element); + const is_svg = element instanceof enviroment.S; + const setRemoveAttr = (is_svg ? setRemoveNS : setRemove).bind(null, element, "Attribute"); + const s = signals(_this); + return { setRemoveAttr, s }; } -function ht(t, e) { - let r = j(this); - return B( - r, - e, - (n, o) => t.classList.toggle(n, o === -1 ? void 0 : !!o) - ), t; +function classListDeclarative(element, toggle) { + const s = signals(this); + forEachEntries( + s, + "classList", + element, + toggle, + (class_name, val) => element.classList.toggle(class_name, val === -1 ? void 0 : Boolean(val)) + ); + return element; } -function bt(t, e, r, n) { - return t instanceof d.H ? t[e + "Attribute"](r, n) : t[e + "AttributeNS"](null, r, n); +function elementAttribute(element, op, key, value) { + if (element instanceof enviroment.H) + return element[op + "Attribute"](key, value); + return element[op + "AttributeNS"](null, key, value); } -function gt(t, e) { - if (!(e in t)) return !1; - let r = ot(t, e); - return !A(r.set); +function isPropSetter(el, key) { + if (!(key in el)) return false; + const des = getPropDescriptor(el, key); + return !isUndef(des.set); } -function ot(t, e) { - if (t = Object.getPrototypeOf(t), !t) return {}; - let r = Object.getOwnPropertyDescriptor(t, e); - return r || ot(t, e); +function getPropDescriptor(p, key) { + p = Object.getPrototypeOf(p); + if (!p) return {}; + const des = Object.getOwnPropertyDescriptor(p, key); + if (!des) return getPropDescriptor(p, key); + return des; } -function B(t, e, r) { - if (!(typeof e != "object" || e === null)) - return Object.entries(e).forEach(function([o, c]) { - o && (c = t.processReactiveAttribute(e, o, c, r), r(o, c)); - }); +function forEachEntries(s, target, element, obj, cb) { + const S = String; + if (typeof obj !== "object" || obj === null) return; + return Object.entries(obj).forEach(function process([key, val]) { + if (!key) return; + key = new S(key); + key.target = target; + val = s.processReactiveAttribute(element, key, val, cb); + cb(key, val); + }); } -function vt(t, e, r, n) { - return t[(A(n) ? "remove" : "set") + e](r, n); +function setRemove(obj, prop, key, val) { + return obj[(isUndef(val) ? "remove" : "set") + prop](key, val); } -function mt(t, e, r, n, o = null) { - return t[(A(n) ? "remove" : "set") + e + "NS"](o, r, n); +function setRemoveNS(obj, prop, key, val, ns = null) { + return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val); } -function et(t, e, r) { - if (Reflect.set(t, e, r), !!A(r)) - return Reflect.deleteProperty(t, e); +function setDelete(obj, key, val) { + Reflect.set(obj, key, val); + if (!isUndef(val)) return; + return Reflect.deleteProperty(obj, key); } // src/events-observer.js -var C = d.M ? Et() : new Proxy({}, { +var c_ch_o = enviroment.M ? connectionsChangesObserverConstructor() : new Proxy({}, { get() { return () => { }; } }); -function Et() { - let t = /* @__PURE__ */ new Map(), e = !1, r = (i) => function(s) { - for (let f of s) - if (f.type === "childList") { - if (l(f.addedNodes, !0)) { - i(); - continue; - } - E(f.removedNodes, !0) && i(); +function connectionsChangesObserverConstructor() { + const store = /* @__PURE__ */ new Map(); + let is_observing = false; + const observerListener = (stop2) => function(mutations) { + for (const mutation of mutations) { + if (mutation.type !== "childList") continue; + if (observerAdded(mutation.addedNodes, true)) { + stop2(); + continue; } - }, n = new d.M(r(a)); - return { - observe(i) { - let s = new d.M(r(() => { - })); - return s.observe(i, { childList: !0, subtree: !0 }), () => s.disconnect(); - }, - onConnected(i, s) { - u(); - let f = c(i); - f.connected.has(s) || (f.connected.add(s), f.length_c += 1); - }, - offConnected(i, s) { - if (!t.has(i)) return; - let f = t.get(i); - f.connected.has(s) && (f.connected.delete(s), f.length_c -= 1, o(i, f)); - }, - onDisconnected(i, s) { - u(); - let f = c(i); - f.disconnected.has(s) || (f.disconnected.add(s), f.length_d += 1); - }, - offDisconnected(i, s) { - if (!t.has(i)) return; - let f = t.get(i); - f.disconnected.has(s) && (f.disconnected.delete(s), f.length_d -= 1, o(i, f)); + if (observerRemoved(mutation.removedNodes, true)) + stop2(); } }; - function o(i, s) { - s.length_c || s.length_d || (t.delete(i), a()); + const observer = new enviroment.M(observerListener(stop)); + return { + observe(element) { + const o = new enviroment.M(observerListener(() => { + })); + o.observe(element, { childList: true, subtree: true }); + return () => o.disconnect(); + }, + onConnected(element, listener) { + start(); + const listeners = getElementStore(element); + if (listeners.connected.has(listener)) return; + listeners.connected.add(listener); + listeners.length_c += 1; + }, + offConnected(element, listener) { + if (!store.has(element)) return; + const ls = store.get(element); + if (!ls.connected.has(listener)) return; + ls.connected.delete(listener); + ls.length_c -= 1; + cleanWhenOff(element, ls); + }, + onDisconnected(element, listener) { + start(); + const listeners = getElementStore(element); + if (listeners.disconnected.has(listener)) return; + listeners.disconnected.add(listener); + listeners.length_d += 1; + }, + offDisconnected(element, listener) { + if (!store.has(element)) return; + const ls = store.get(element); + if (!ls.disconnected.has(listener)) return; + ls.disconnected.delete(listener); + ls.length_d -= 1; + cleanWhenOff(element, ls); + } + }; + function cleanWhenOff(element, ls) { + if (ls.length_c || ls.length_d) + return; + store.delete(element); + stop(); } - function c(i) { - if (t.has(i)) return t.get(i); - let s = { + function getElementStore(element) { + if (store.has(element)) return store.get(element); + const out = { connected: /* @__PURE__ */ new WeakSet(), length_c: 0, disconnected: /* @__PURE__ */ new WeakSet(), length_d: 0 }; - return t.set(i, s), s; + store.set(element, out); + return out; } - function u() { - e || (e = !0, n.observe(d.D.body, { childList: !0, subtree: !0 })); + function start() { + if (is_observing) return; + is_observing = true; + observer.observe(enviroment.D.body, { childList: true, subtree: true }); } - function a() { - !e || t.size || (e = !1, n.disconnect()); + function stop() { + if (!is_observing || store.size) return; + is_observing = false; + observer.disconnect(); } - function h() { - return new Promise(function(i) { - (requestIdleCallback || requestAnimationFrame)(i); + function requestIdle() { + return new Promise(function(resolve) { + (requestIdleCallback || requestAnimationFrame)(resolve); }); } - async function v(i) { - t.size > 30 && await h(); - let s = []; - if (!(i instanceof Node)) return s; - for (let f of t.keys()) - f === i || !(f instanceof Node) || i.contains(f) && s.push(f); - return s; - } - function l(i, s) { - let f = !1; - for (let b of i) { - if (s && v(b).then(l), !t.has(b)) continue; - let L = t.get(b); - L.length_c && (b.dispatchEvent(new Event(w)), L.connected = /* @__PURE__ */ new WeakSet(), L.length_c = 0, L.length_d || t.delete(b), f = !0); + async function collectChildren(element) { + if (store.size > 30) + await requestIdle(); + const out = []; + if (!(element instanceof Node)) return out; + for (const el of store.keys()) { + if (el === element || !(el instanceof Node)) continue; + if (element.contains(el)) + out.push(el); } - return f; + return out; } - function E(i, s) { - let f = !1; - for (let b of i) - s && v(b).then(E), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(k(b)), f = !0); - return f; + function observerAdded(addedNodes, is_root) { + let out = false; + for (const element of addedNodes) { + if (is_root) collectChildren(element).then(observerAdded); + if (!store.has(element)) continue; + const ls = store.get(element); + if (!ls.length_c) continue; + element.dispatchEvent(new Event(evc)); + ls.connected = /* @__PURE__ */ new WeakSet(); + ls.length_c = 0; + if (!ls.length_d) store.delete(element); + out = true; + } + return out; } - function k(i) { + function observerRemoved(removedNodes, is_root) { + let out = false; + for (const element of removedNodes) { + if (is_root) collectChildren(element).then(observerRemoved); + if (!store.has(element)) continue; + const ls = store.get(element); + if (!ls.length_d) continue; + (globalThis.queueMicrotask || setTimeout)(dispatchRemove(element)); + out = true; + } + return out; + } + function dispatchRemove(element) { return () => { - i.isConnected || (i.dispatchEvent(new Event(S)), t.delete(i)); + if (element.isConnected) return; + element.dispatchEvent(new Event(evd)); + store.delete(element); }; } } // src/customElement.js -function It(t, e, r = _t) { - let n = t.host || t; - x.push({ - scope: n, - host: (...u) => u.length ? u.forEach((a) => a(n)) : n - }), typeof r == "function" && (r = r.call(n, n)); - let o = n[O]; - o || xt(n); - let c = e.call(n, r); - return o || n.dispatchEvent(new Event(w)), t.nodeType === 11 && typeof t.mode == "string" && n.addEventListener(S, C.observe(t), { once: !0 }), x.pop(), t.append(c); +function customElementRender(target, render, props = observedAttributes2) { + const custom_element = target.host || target; + scope.push({ + scope: custom_element, + host: (...c) => c.length ? c.forEach((c2) => c2(custom_element)) : custom_element + }); + if (typeof props === "function") props = props.call(custom_element, custom_element); + const is_lte = custom_element[keyLTE]; + if (!is_lte) lifecyclesToEvents(custom_element); + const out = render.call(custom_element, props); + if (!is_lte) custom_element.dispatchEvent(new Event(evc)); + if (target.nodeType === 11 && typeof target.mode === "string") + custom_element.addEventListener(evd, c_ch_o.observe(target), { once: true }); + scope.pop(); + return target.append(out); } -function xt(t) { - return J(t.prototype, "connectedCallback", function(e, r, n) { - e.apply(r, n), r.dispatchEvent(new Event(w)); - }), J(t.prototype, "disconnectedCallback", function(e, r, n) { - e.apply(r, n), (globalThis.queueMicrotask || setTimeout)( - () => !r.isConnected && r.dispatchEvent(new Event(S)) +function lifecyclesToEvents(class_declaration) { + wrapMethod(class_declaration.prototype, "connectedCallback", function(target, thisArg, detail) { + target.apply(thisArg, detail); + thisArg.dispatchEvent(new Event(evc)); + }); + wrapMethod(class_declaration.prototype, "disconnectedCallback", function(target, thisArg, detail) { + target.apply(thisArg, detail); + (globalThis.queueMicrotask || setTimeout)( + () => !thisArg.isConnected && thisArg.dispatchEvent(new Event(evd)) ); - }), J(t.prototype, "attributeChangedCallback", function(e, r, n) { - let [o, , c] = n; - r.dispatchEvent(new CustomEvent(T, { - detail: [o, c] - })), e.apply(r, n); - }), t.prototype[O] = !0, t; + }); + wrapMethod(class_declaration.prototype, "attributeChangedCallback", function(target, thisArg, detail) { + const [attribute, , value] = detail; + thisArg.dispatchEvent(new CustomEvent(eva, { + detail: [attribute, value] + })); + target.apply(thisArg, detail); + }); + class_declaration.prototype[keyLTE] = true; + return class_declaration; } -function J(t, e, r) { - t[e] = new Proxy(t[e] || (() => { - }), { apply: r }); +function wrapMethod(obj, method, apply) { + obj[method] = new Proxy(obj[method] || (() => { + }), { apply }); } -function _t(t) { - return W(t, (e, r) => e.getAttribute(r)); +function observedAttributes2(instance) { + return observedAttributes(instance, (i, n) => i.getAttribute(n)); } // src/events.js -function Gt(t, e, r) { - return e || (e = {}), function(o, ...c) { - r && (c.unshift(o), o = typeof r == "function" ? r() : r); - let u = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e); - return o.dispatchEvent(u); +function dispatchEvent(name, options, host) { + if (!options) options = {}; + return function dispatch(element, ...d) { + if (host) { + d.unshift(element); + element = typeof host === "function" ? host() : host; + } + const event = d.length ? new CustomEvent(name, Object.assign({ detail: d[0] }, options)) : new Event(name, options); + return element.dispatchEvent(event); }; } -function _(t, e, r) { - return function(o) { - return o.addEventListener(t, e, r), o; +function on(event, listener, options) { + return function registerElement(element) { + element.addEventListener(event, listener, options); + return element; }; } -var ct = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); -_.connected = function(t, e) { - return e = ct(e), function(n) { - return n.addEventListener(w, t, e), n[O] ? n : n.isConnected ? (n.dispatchEvent(new Event(w)), n) : (P(e.signal, () => C.offConnected(n, t)) && C.onConnected(n, t), n); +var lifeOptions = (obj) => Object.assign({}, typeof obj === "object" ? obj : null, { once: true }); +on.connected = function(listener, options) { + options = lifeOptions(options); + return function registerElement(element) { + element.addEventListener(evc, listener, options); + if (element[keyLTE]) return element; + if (element.isConnected) return element.dispatchEvent(new Event(evc)), element; + const c = onAbort(options.signal, () => c_ch_o.offConnected(element, listener)); + if (c) c_ch_o.onConnected(element, listener); + return element; }; }; -_.disconnected = function(t, e) { - return e = ct(e), function(n) { - return n.addEventListener(S, t, e), n[O] || P(e.signal, () => C.offDisconnected(n, t)) && C.onDisconnected(n, t), n; +on.disconnected = function(listener, options) { + options = lifeOptions(options); + return function registerElement(element) { + element.addEventListener(evd, listener, options); + if (element[keyLTE]) return element; + const c = onAbort(options.signal, () => c_ch_o.offDisconnected(element, listener)); + if (c) c_ch_o.onDisconnected(element, listener); + return element; }; }; -var Z = /* @__PURE__ */ new WeakMap(); -_.disconnectedAsAbort = function(t) { - if (Z.has(t)) return Z.get(t); - let e = new AbortController(); - return Z.set(t, e), t(_.disconnected(() => e.abort())), e; +var store_abort = /* @__PURE__ */ new WeakMap(); +on.disconnectedAsAbort = function(host) { + if (store_abort.has(host)) return store_abort.get(host); + const a = new AbortController(); + store_abort.set(host, a); + host(on.disconnected(() => a.abort())); + return a; }; -var wt = /* @__PURE__ */ new WeakSet(); -_.attributeChanged = function(t, e) { - return typeof e != "object" && (e = {}), function(n) { - if (n.addEventListener(T, t, e), n[O] || wt.has(n) || !d.M) return n; - let o = new d.M(function(u) { - for (let { attributeName: a, target: h } of u) - h.dispatchEvent( - new CustomEvent(T, { detail: [a, h.getAttribute(a)] }) +var els_attribute_store = /* @__PURE__ */ new WeakSet(); +on.attributeChanged = function(listener, options) { + if (typeof options !== "object") + options = {}; + return function registerElement(element) { + element.addEventListener(eva, listener, options); + if (element[keyLTE] || els_attribute_store.has(element)) + return element; + if (!enviroment.M) return element; + const observer = new enviroment.M(function(mutations) { + for (const { attributeName, target } of mutations) + target.dispatchEvent( + new CustomEvent(eva, { detail: [attributeName, target.getAttribute(attributeName)] }) ); }); - return P(e.signal, () => o.disconnect()) && o.observe(n, { attributes: !0 }), n; + const c = onAbort(options.signal, () => observer.disconnect()); + if (c) observer.observe(element, { attributes: true }); + return element; }; }; // src/signals-lib.js -var p = "__dde_signal"; -function U(t) { +var mark = "__dde_signal"; +function isSignal(candidate) { try { - return I(t, p); - } catch { - return !1; + return hasOwn(candidate, mark); + } catch (e) { + return false; } } -var z = [], g = /* @__PURE__ */ new WeakMap(); -function m(t, e) { - if (typeof t != "function") - return it(!1, t, e); - if (U(t)) return t; - let r = it(!0), n = function() { - let [o, ...c] = g.get(n); - if (g.set(n, /* @__PURE__ */ new Set([o])), z.push(n), at(r, t()), z.pop(), !c.length) return; - let u = g.get(n); - for (let a of c) - u.has(a) || R(a, n); +var stack_watch = []; +var deps = /* @__PURE__ */ new WeakMap(); +function signal(value, actions) { + if (typeof value !== "function") + return create(false, value, actions); + if (isSignal(value)) return value; + const out = create(true); + const contextReWatch = function() { + const [origin, ...deps_old] = deps.get(contextReWatch); + deps.set(contextReWatch, /* @__PURE__ */ new Set([origin])); + stack_watch.push(contextReWatch); + write(out, value()); + stack_watch.pop(); + if (!deps_old.length) return; + const deps_curr = deps.get(contextReWatch); + for (const dep_signal of deps_old) { + if (deps_curr.has(dep_signal)) continue; + removeSignalListener(dep_signal, contextReWatch); + } }; - return g.set(r[p], n), g.set(n, /* @__PURE__ */ new Set([r])), n(), r; + deps.set(out[mark], contextReWatch); + deps.set(contextReWatch, /* @__PURE__ */ new Set([out])); + contextReWatch(); + return out; } -m.action = function(t, e, ...r) { - let n = t[p], { actions: o } = n; - if (!o || !(e in o)) - throw new Error(`'${t}' has no action with name '${e}'!`); - if (o[e].apply(n, r), n.skip) return delete n.skip; - n.listeners.forEach((c) => c(n.value)); +signal.action = function(s, name, ...a) { + const M = s[mark], { actions } = M; + if (!actions || !(name in actions)) + throw new Error(`'${s}' has no action with name '${name}'!`); + actions[name].apply(M, a); + if (M.skip) return delete M.skip; + M.listeners.forEach((l) => l(M.value)); }; -m.on = function t(e, r, n = {}) { - let { signal: o } = n; - if (!(o && o.aborted)) { - if (Array.isArray(e)) return e.forEach((c) => t(c, r, n)); - Q(e, r), o && o.addEventListener("abort", () => R(e, r)); - } +signal.on = function on2(s, listener, options = {}) { + const { signal: as } = options; + if (as && as.aborted) return; + if (Array.isArray(s)) return s.forEach((s2) => on2(s2, listener, options)); + addSignalListener(s, listener); + if (as) as.addEventListener("abort", () => removeSignalListener(s, listener)); }; -m.symbols = { +signal.symbols = { //signal: mark, onclear: Symbol.for("Signal.onclear") }; -m.clear = function(...t) { - for (let r of t) { - let n = r[p]; - n && (delete r.toJSON, n.onclear.forEach((o) => o.call(n)), e(r, n), delete r[p]); +signal.clear = function(...signals2) { + for (const s of signals2) { + const M = s[mark]; + if (!M) continue; + delete s.toJSON; + M.onclear.forEach((f) => f.call(M)); + clearListDeps(s, M); + delete s[mark]; } - function e(r, n) { - n.listeners.forEach((o) => { - if (n.listeners.delete(o), !g.has(o)) return; - let c = g.get(o); - c.delete(r), !(c.size > 1) && (r.clear(...c), g.delete(o)); + function clearListDeps(s, o) { + o.listeners.forEach((l) => { + o.listeners.delete(l); + if (!deps.has(l)) return; + const ls = deps.get(l); + ls.delete(s); + if (ls.size > 1) return; + s.clear(...ls); + deps.delete(l); }); } }; -var D = "__dde_reactive"; -m.el = function(t, e) { - let r = M.mark({ type: "reactive" }, !0), n = r.end, o = d.D.createDocumentFragment(); - o.append(r, n); - let { current: c } = x, u = {}, a = (h) => { - if (!r.parentNode || !n.parentNode) - return R(t, a); - let v = u; - u = {}, x.push(c); - let l = e(h, function(s, f) { - let b; - return I(v, s) ? (b = v[s], delete v[s]) : b = f(), u[s] = b, b; +var key_reactive = "__dde_reactive"; +signal.el = function(s, map) { + const mark_start = createElement.mark({ type: "reactive" }, true); + const mark_end = mark_start.end; + const out = enviroment.D.createDocumentFragment(); + out.append(mark_start, mark_end); + const { current } = scope; + let cache = {}; + const reRenderReactiveElement = (v) => { + if (!mark_start.parentNode || !mark_end.parentNode) + return removeSignalListener(s, reRenderReactiveElement); + const cache_tmp = cache; + cache = {}; + scope.push(current); + let els = map(v, function useCache(key, fun) { + let value; + if (hasOwn(cache_tmp, key)) { + value = cache_tmp[key]; + delete cache_tmp[key]; + } else + value = fun(); + cache[key] = value; + return value; }); - x.pop(), Array.isArray(l) || (l = [l]); - let E = document.createComment(""); - l.push(E), r.after(...l); - let k; - for (; (k = E.nextSibling) && k !== n; ) - k.remove(); - E.remove(), r.isConnected && yt(c.host()); + scope.pop(); + if (!Array.isArray(els)) + els = [els]; + const el_start_rm = document.createComment(""); + els.push(el_start_rm); + mark_start.after(...els); + let el_r; + while ((el_r = el_start_rm.nextSibling) && el_r !== mark_end) + el_r.remove(); + el_start_rm.remove(); + if (mark_start.isConnected) + requestCleanUpReactives(current.host()); }; - return Q(t, a), ut(t, a, r, e), a(t()), o; + addSignalListener(s, reRenderReactiveElement); + removeSignalsFromElements(s, reRenderReactiveElement, mark_start, map); + reRenderReactiveElement(s()); + return out; }; -function yt(t) { - !t || !t[D] || (requestIdleCallback || setTimeout)(function() { - t[D] = t[D].filter(([e, r]) => r.isConnected ? !0 : (R(...e), !1)); +function requestCleanUpReactives(host) { + if (!host || !host[key_reactive]) return; + (requestIdleCallback || setTimeout)(function() { + host[key_reactive] = host[key_reactive].filter(([s, el]) => el.isConnected ? true : (removeSignalListener(...s), false)); }); } -var At = { - _set(t) { - this.value = t; +var observedAttributeActions = { + _set(value) { + this.value = value; } }; -function Ot(t) { - return function(e, r) { - let n = (...c) => c.length ? e.setAttribute(r, ...c) : K(n), o = ft(n, e.getAttribute(r), At); - return t[r] = o, o; +function observedAttribute(store) { + return function(instance, name) { + const varS = (...args) => !args.length ? read(varS) : instance.setAttribute(name, ...args); + const out = toSignal(varS, instance.getAttribute(name), observedAttributeActions); + store[name] = out; + return out; }; } -var G = "__dde_attributes"; -m.observedAttributes = function(t) { - let e = t[G] = {}, r = W(t, Ot(e)); - return _.attributeChanged(function({ detail: o }) { +var key_attributes = "__dde_attributes"; +signal.observedAttributes = function(element) { + const store = element[key_attributes] = {}; + const attrs = observedAttributes(element, observedAttribute(store)); + on.attributeChanged(function attributeChangeToSignal({ detail }) { /*! This maps attributes to signals (`S.observedAttributes`). * Investigate `__dde_attributes` key of the element.*/ - let [c, u] = o, a = this[G][c]; - if (a) return m.action(a, "_set", u); - })(t), _.disconnected(function() { + const [name, value] = detail; + const curr = this[key_attributes][name]; + if (curr) return signal.action(curr, "_set", value); + })(element); + on.disconnected(function() { /*! This removes all signals mapped to attributes (`S.observedAttributes`). * Investigate `__dde_attributes` key of the element.*/ - m.clear(...Object.values(this[G])); - })(t), r; + signal.clear(...Object.values(this[key_attributes])); + })(element); + return attrs; }; -var st = { - isSignal: U, - processReactiveAttribute(t, e, r, n) { - if (!U(r)) return r; - let o = (c) => { - if (!t.isConnected) - return R(r, o); - n(e, c); +var signals_config = { + isSignal, + processReactiveAttribute(element, key, attrs, set) { + if (!isSignal(attrs)) return attrs; + const l = (attr) => { + if (!element.isConnected) + return removeSignalListener(attrs, l); + set(key, attr); }; - return Q(r, o), ut(r, o, t, e), r(); + addSignalListener(attrs, l); + removeSignalsFromElements(attrs, l, element, key); + return attrs(); } }; -function ut(t, e, ...r) { - let { current: n } = x; - n.prevent || n.host(function(o) { - o[D] || (o[D] = [], _.disconnected( - () => ( - /*! - * Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?). - * You can investigate the `__dde_reactive` key of the element. - * */ - o[D].forEach(([[c, u]]) => R(c, u, c[p] && c[p].host && c[p].host() === o)) - ) - )(o)), o[D].push([[t, e], ...r]); +function removeSignalsFromElements(s, listener, ...notes) { + const { current } = scope; + if (current.prevent) return; + current.host(function(element) { + if (!element[key_reactive]) { + element[key_reactive] = []; + on.disconnected( + () => ( + /*! + * Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?). + * You can investigate the `__dde_reactive` key of the element. + * */ + element[key_reactive].forEach(([[s2, listener2]]) => removeSignalListener(s2, listener2, s2[mark] && s2[mark].host && s2[mark].host() === element)) + ) + )(element); + } + element[key_reactive].push([[s, listener], ...notes]); }); } -function it(t, e, r) { - let n = t ? () => K(n) : (...o) => o.length ? at(n, ...o) : K(n); - return ft(n, e, r, t); +function create(is_readonly, value, actions) { + const varS = is_readonly ? () => read(varS) : (...value2) => value2.length ? write(varS, ...value2) : read(varS); + return toSignal(varS, value, actions, is_readonly); } -var St = Object.assign(/* @__PURE__ */ Object.create(null), { +var protoSigal = Object.assign(/* @__PURE__ */ Object.create(null), { stopPropagation() { - this.skip = !0; + this.skip = true; } -}), V = class extends Error { +}); +var SignalDefined = class extends Error { constructor() { super(); - let [e, ...r] = this.stack.split(` -`), n = e.slice(e.indexOf("@"), e.indexOf(".js:") + 4); - this.stack = r.find((o) => !o.includes(n)); + const [curr, ...rest] = this.stack.split("\n"); + const curr_file = curr.slice(curr.indexOf("@"), curr.indexOf(".js:") + 4); + this.stack = rest.find((l) => !l.includes(curr_file)); } }; -function ft(t, e, r, n = !1) { - let o = []; - X(r) !== "[object Object]" && (r = {}); - let { onclear: c } = m.symbols; - r[c] && (o.push(r[c]), delete r[c]); - let { host: u } = x; - return Reflect.defineProperty(t, p, { - value: { - value: e, - actions: r, - onclear: o, - host: u, - listeners: /* @__PURE__ */ new Set(), - defined: new V().stack, - readonly: n - }, - enumerable: !1, - writable: !1, - configurable: !0 - }), t.toJSON = () => t(), t.valueOf = () => t[p] && t[p].value, Object.setPrototypeOf(t[p], St), t; -} -function Ct() { - return z[z.length - 1]; -} -function K(t) { - if (!t[p]) return; - let { value: e, listeners: r } = t[p], n = Ct(); - return n && r.add(n), g.has(n) && g.get(n).add(t), e; -} -function at(t, e, r) { - if (!t[p]) return; - let n = t[p]; - if (!(!r && n.value === e)) - return n.value = e, n.listeners.forEach((o) => o(e)), e; -} -function Q(t, e) { - if (t[p]) - return t[p].listeners.add(e); -} -function R(t, e, r) { - let n = t[p]; - if (!n) return; - let o = n.listeners.delete(e); - if (r && !n.listeners.size) { - if (m.clear(t), !g.has(n)) return o; - let c = g.get(n); - if (!g.has(c)) return o; - g.get(c).forEach((u) => R(u, c, !0)); +function toSignal(s, value, actions, readonly = false) { + const onclear = []; + if (typeOf(actions) !== "[object Object]") + actions = {}; + const { onclear: ocs } = signal.symbols; + if (actions[ocs]) { + onclear.push(actions[ocs]); + delete actions[ocs]; } - return o; + const { host } = scope; + Reflect.defineProperty(s, mark, { + value: { + value, + actions, + onclear, + host, + listeners: /* @__PURE__ */ new Set(), + defined: new SignalDefined().stack, + readonly + }, + enumerable: false, + writable: false, + configurable: true + }); + s.toJSON = () => s(); + s.valueOf = () => s[mark] && s[mark].value; + Object.setPrototypeOf(s[mark], protoSigal); + return s; +} +function currentContext() { + return stack_watch[stack_watch.length - 1]; +} +function read(s) { + if (!s[mark]) return; + const { value, listeners } = s[mark]; + const context = currentContext(); + if (context) listeners.add(context); + if (deps.has(context)) deps.get(context).add(s); + return value; +} +function write(s, value, force) { + if (!s[mark]) return; + const M = s[mark]; + if (!force && M.value === value) return; + M.value = value; + M.listeners.forEach((l) => l(value)); + return value; +} +function addSignalListener(s, listener) { + if (!s[mark]) return; + return s[mark].listeners.add(listener); +} +function removeSignalListener(s, listener, clear_when_empty) { + const M = s[mark]; + if (!M) return; + const out = M.listeners.delete(listener); + if (clear_when_empty && !M.listeners.size) { + signal.clear(s); + if (!deps.has(M)) return out; + const c = deps.get(M); + if (!deps.has(c)) return out; + deps.get(c).forEach((sig) => removeSignalListener(sig, c, true)); + } + return out; } // signals.js -H(st); +registerReactivity(signals_config); globalThis.dde= { - S: m, - assign: q, - assignAttribute: nt, - chainableAppend: lt, - classListDeclarative: ht, - createElement: M, - createElementNS: jt, - customElementRender: It, - customElementWithDDE: xt, - dispatchEvent: Gt, - el: M, - elNS: jt, - elementAttribute: bt, - isSignal: U, - lifecyclesToEvents: xt, - observedAttributes: _t, - on: _, - queue: Mt, - registerReactivity: H, - scope: x, - signal: m, - simulateSlots: Pt + S: signal, + assign, + assignAttribute, + chainableAppend, + classListDeclarative, + createElement, + createElementNS, + customElementRender, + customElementWithDDE: lifecyclesToEvents, + dispatchEvent, + el: createElement, + elNS: createElementNS, + elementAttribute, + isSignal, + lifecyclesToEvents, + observedAttributes: observedAttributes2, + on, + queue, + registerReactivity, + scope, + signal, + simulateSlots }; })(); \ No newline at end of file diff --git a/dist/dde.js b/dist/dde.js index 7b5e2e8..202ef1a 100644 --- a/dist/dde.js +++ b/dist/dde.js @@ -1,453 +1,588 @@ //deka-dom-el library is available via global namespace `dde` (()=> { // src/signals-common.js -var A = { - isSignal(t) { - return !1; +var signals_global = { + isSignal(attributes) { + return false; }, - processReactiveAttribute(t, e, n, r) { - return n; + processReactiveAttribute(obj, key, attr, set) { + return attr; } }; -function Z(t, e = !0) { - return e ? Object.assign(A, t) : (Object.setPrototypeOf(t, A), t); +function registerReactivity(def, global = true) { + if (global) return Object.assign(signals_global, def); + Object.setPrototypeOf(def, signals_global); + return def; } -function S(t) { - return A.isPrototypeOf(t) && t !== A ? t : A; +function signals(_this) { + return signals_global.isPrototypeOf(_this) && _this !== signals_global ? _this : signals_global; } // src/helpers.js -function m(t) { - return typeof t > "u"; +function isUndef(value) { + return typeof value === "undefined"; } -function L(t, e) { - if (!t || !(t instanceof AbortSignal)) - return !0; - if (!t.aborted) - return t.addEventListener("abort", e), function() { - t.removeEventListener("abort", e); - }; +function onAbort(signal, listener) { + if (!signal || !(signal instanceof AbortSignal)) + return true; + if (signal.aborted) + return; + signal.addEventListener("abort", listener); + return function cleanUp() { + signal.removeEventListener("abort", listener); + }; } -function W(t, e) { - let { observedAttributes: n = [] } = t.constructor; - return n.reduce(function(r, o) { - return r[G(o)] = e(t, o), r; +function observedAttributes(instance, observedAttribute) { + const { observedAttributes: observedAttributes3 = [] } = instance.constructor; + return observedAttributes3.reduce(function(out, name) { + out[kebabToCamel(name)] = observedAttribute(instance, name); + return out; }, {}); } -function G(t) { - return t.replace(/-./g, (e) => e[1].toUpperCase()); +function kebabToCamel(name) { + return name.replace(/-./g, (x) => x[1].toUpperCase()); } // src/dom-common.js -var f = { - setDeleteAttr: V, +var enviroment = { + setDeleteAttr, ssr: "", D: globalThis.document, F: globalThis.DocumentFragment, H: globalThis.HTMLElement, S: globalThis.SVGElement, M: globalThis.MutationObserver, - q: (t) => t || Promise.resolve() + q: (p) => p || Promise.resolve() }; -function V(t, e, n) { - if (Reflect.set(t, e, n), !!m(n)) { - if (Reflect.deleteProperty(t, e), t instanceof f.H && t.getAttribute(e) === "undefined") - return t.removeAttribute(e); - if (Reflect.get(t, e) === "undefined") - return Reflect.set(t, e, ""); - } +function setDeleteAttr(obj, prop, val) { + Reflect.set(obj, prop, val); + if (!isUndef(val)) return; + Reflect.deleteProperty(obj, prop); + if (obj instanceof enviroment.H && obj.getAttribute(prop) === "undefined") + return obj.removeAttribute(prop); + if (Reflect.get(obj, prop) === "undefined") + return Reflect.set(obj, prop, ""); } -var x = "__dde_lifecyclesToEvents", v = "dde:connected", w = "dde:disconnected", C = "dde:attributeChanged"; +var keyLTE = "__dde_lifecyclesToEvents"; +var evc = "dde:connected"; +var evd = "dde:disconnected"; +var eva = "dde:attributeChanged"; // src/dom.js -function dt(t) { - return f.q(t); +function queue(promise) { + return enviroment.q(promise); } -var g = [{ +var scopes = [{ get scope() { - return f.D.body; + return enviroment.D.body; }, - host: (t) => t ? t(f.D.body) : f.D.body, - prevent: !0 -}], O = { + host: (c) => c ? c(enviroment.D.body) : enviroment.D.body, + prevent: true +}]; +var scope = { get current() { - return g[g.length - 1]; + return scopes[scopes.length - 1]; }, get host() { return this.current.host; }, preventDefault() { - let { current: t } = this; - return t.prevent = !0, t; + const { current } = this; + current.prevent = true; + return current; }, get state() { - return [...g]; + return [...scopes]; }, - push(t = {}) { - return g.push(Object.assign({}, this.current, { prevent: !1 }, t)); + push(s = {}) { + return scopes.push(Object.assign({}, this.current, { prevent: false }, s)); }, pushRoot() { - return g.push(g[0]); + return scopes.push(scopes[0]); }, pop() { - if (g.length !== 1) - return g.pop(); + if (scopes.length === 1) return; + return scopes.pop(); } }; -function q(...t) { - return this.appendOriginal(...t), this; +function append(...els) { + this.appendOriginal(...els); + return this; } -function J(t) { - return t.append === q || (t.appendOriginal = t.append, t.append = q), t; +function chainableAppend(el) { + if (el.append === append) return el; + el.appendOriginal = el.append; + el.append = append; + return el; } -var T; -function P(t, e, ...n) { - let r = S(this), o = 0, c, a; - switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) { - case typeof t == "function": { - o = 1; - let d = (...l) => l.length ? (o === 1 ? n.unshift(...l) : l.forEach((E) => E(a)), void 0) : a; - O.push({ scope: t, host: d }), c = t(e || void 0); - let p = c instanceof f.F; - if (c.nodeName === "#comment") break; - let b = P.mark({ +var namespace; +function createElement(tag, attributes, ...addons) { + const s = signals(this); + let scoped = 0; + let el, el_host; + if (Object(attributes) !== attributes || s.isSignal(attributes)) + attributes = { textContent: attributes }; + switch (true) { + case typeof tag === "function": { + scoped = 1; + const host = (...c) => !c.length ? el_host : (scoped === 1 ? addons.unshift(...c) : c.forEach((c2) => c2(el_host)), void 0); + scope.push({ scope: tag, host }); + el = tag(attributes || void 0); + const is_fragment = el instanceof enviroment.F; + if (el.nodeName === "#comment") break; + const el_mark = createElement.mark({ type: "component", - name: t.name, - host: p ? "this" : "parentElement" + name: tag.name, + host: is_fragment ? "this" : "parentElement" }); - c.prepend(b), p && (a = b); + el.prepend(el_mark); + if (is_fragment) el_host = el_mark; break; } - case t === "#text": - c = R.call(this, f.D.createTextNode(""), e); + case tag === "#text": + el = assign.call(this, enviroment.D.createTextNode(""), attributes); break; - case (t === "<>" || !t): - c = R.call(this, f.D.createDocumentFragment(), e); + case (tag === "<>" || !tag): + el = assign.call(this, enviroment.D.createDocumentFragment(), attributes); break; - case !!T: - c = R.call(this, f.D.createElementNS(T, t), e); + case Boolean(namespace): + el = assign.call(this, enviroment.D.createElementNS(namespace, tag), attributes); break; - case !c: - c = R.call(this, f.D.createElement(t), e); + case !el: + el = assign.call(this, enviroment.D.createElement(tag), attributes); } - return J(c), a || (a = c), n.forEach((d) => d(a)), o && O.pop(), o = 2, c; + chainableAppend(el); + if (!el_host) el_host = el; + addons.forEach((c) => c(el_host)); + if (scoped) scope.pop(); + scoped = 2; + return el; } -P.mark = function(t, e = !1) { - t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); - let n = e ? "" : "/", r = f.D.createComment(``); - return e && (r.end = f.D.createComment("")), r; +createElement.mark = function(attrs, is_open = false) { + attrs = Object.entries(attrs).map(([n, v]) => n + `="${v}"`).join(" "); + const end = is_open ? "" : "/"; + const out = enviroment.D.createComment(``); + if (is_open) out.end = enviroment.D.createComment(""); + return out; }; -function pt(t) { - let e = this; - return function(...r) { - T = t; - let o = P.call(e, ...r); - return T = void 0, o; +function createElementNS(ns) { + const _this = this; + return function createElementNSCurried(...rest) { + namespace = ns; + const el = createElement.call(_this, ...rest); + namespace = void 0; + return el; }; } -function lt(t, e = t) { - let n = "\xB9\u2070", r = "\u2713", o = Object.fromEntries( - Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(n)).map((c) => [c.name += n, c]) +function simulateSlots(element, root = element) { + const mark_e = "\xB9\u2070", mark_s = "\u2713"; + const slots = Object.fromEntries( + Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s]) ); - if (t.append = new Proxy(t.append, { - apply(c, a, d) { - if (d[0] === e) return c.apply(t, d); - for (let p of d) { - let b = (p.slot || "") + n; + element.append = new Proxy(element.append, { + apply(orig, _, els) { + if (els[0] === root) return orig.apply(element, els); + for (const el of els) { + const name = (el.slot || "") + mark_e; try { - Q(p, "remove", "slot"); - } catch { + elementAttribute(el, "remove", "slot"); + } catch (_error) { } - let l = o[b]; - if (!l) return; - l.name.startsWith(r) || (l.childNodes.forEach((E) => E.remove()), l.name = r + b), l.append(p); + const slot = slots[name]; + if (!slot) return; + if (!slot.name.startsWith(mark_s)) { + slot.childNodes.forEach((c) => c.remove()); + slot.name = mark_s + name; + } + slot.append(el); } - return t.append = c, t; + element.append = orig; + return element; } - }), t !== e) { - let c = Array.from(t.childNodes); - t.append(...c); + }); + if (element !== root) { + const els = Array.from(element.childNodes); + element.append(...els); } - return e; + return root; } -var N = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: $ } = f; -function R(t, ...e) { - if (!e.length) return t; - N.set(t, H(t, this)); - for (let [n, r] of Object.entries(Object.assign({}, ...e))) - U.call(this, t, n, r); - return N.delete(t), t; +var assign_context = /* @__PURE__ */ new WeakMap(); +var { setDeleteAttr: setDeleteAttr2 } = enviroment; +function assign(element, ...attributes) { + if (!attributes.length) return element; + assign_context.set(element, assignContext(element, this)); + for (const [key, value] of Object.entries(Object.assign({}, ...attributes))) + assignAttribute.call(this, element, key, value); + assign_context.delete(element); + return element; } -function U(t, e, n) { - let { setRemoveAttr: r, s: o } = H(t, this), c = this; - n = o.processReactiveAttribute( - t, - e, - n, - (d, p) => U.call(c, t, d, p) +function assignAttribute(element, key, value) { + const { setRemoveAttr, s } = assignContext(element, this); + const _this = this; + value = s.processReactiveAttribute( + element, + key, + value, + (key2, value2) => assignAttribute.call(_this, element, key2, value2) ); - let [a] = e; - if (a === "=") return r(e.slice(1), n); - if (a === ".") return F(t, e.slice(1), n); - if (/(aria|data)([A-Z])/.test(e)) - return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), r(e, n); - switch (e === "className" && (e = "class"), e) { + const [k] = key; + if ("=" === k) return setRemoveAttr(key.slice(1), value); + if ("." === k) return setDelete(element, key.slice(1), value); + if (/(aria|data)([A-Z])/.test(key)) { + key = key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(); + return setRemoveAttr(key, value); + } + if ("className" === key) key = "class"; + switch (key) { case "xlink:href": - return r(e, n, "http://www.w3.org/1999/xlink"); + return setRemoveAttr(key, value, "http://www.w3.org/1999/xlink"); case "textContent": - return $(t, e, n); + return setDeleteAttr2(element, key, value); case "style": - if (typeof n != "object") break; + if (typeof value !== "object") break; /* falls through */ case "dataset": - return M(o, n, F.bind(null, t[e])); + return forEachEntries(s, key, element, value, setDelete.bind(null, element[key])); case "ariaset": - return M(o, n, (d, p) => r("aria-" + d, p)); + return forEachEntries(s, key, element, value, (key2, val) => setRemoveAttr("aria-" + key2, val)); case "classList": - return K.call(c, t, n); + return classListDeclarative.call(_this, element, value); } - return X(t, e) ? $(t, e, n) : r(e, n); + return isPropSetter(element, key) ? setDeleteAttr2(element, key, value) : setRemoveAttr(key, value); } -function H(t, e) { - if (N.has(t)) return N.get(t); - let r = (t instanceof f.S ? tt : Y).bind(null, t, "Attribute"), o = S(e); - return { setRemoveAttr: r, s: o }; +function assignContext(element, _this) { + if (assign_context.has(element)) return assign_context.get(element); + const is_svg = element instanceof enviroment.S; + const setRemoveAttr = (is_svg ? setRemoveNS : setRemove).bind(null, element, "Attribute"); + const s = signals(_this); + return { setRemoveAttr, s }; } -function K(t, e) { - let n = S(this); - return M( - n, - e, - (r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o) - ), t; +function classListDeclarative(element, toggle) { + const s = signals(this); + forEachEntries( + s, + "classList", + element, + toggle, + (class_name, val) => element.classList.toggle(class_name, val === -1 ? void 0 : Boolean(val)) + ); + return element; } -function Q(t, e, n, r) { - return t instanceof f.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r); +function elementAttribute(element, op, key, value) { + if (element instanceof enviroment.H) + return element[op + "Attribute"](key, value); + return element[op + "AttributeNS"](null, key, value); } -function X(t, e) { - if (!(e in t)) return !1; - let n = z(t, e); - return !m(n.set); +function isPropSetter(el, key) { + if (!(key in el)) return false; + const des = getPropDescriptor(el, key); + return !isUndef(des.set); } -function z(t, e) { - if (t = Object.getPrototypeOf(t), !t) return {}; - let n = Object.getOwnPropertyDescriptor(t, e); - return n || z(t, e); +function getPropDescriptor(p, key) { + p = Object.getPrototypeOf(p); + if (!p) return {}; + const des = Object.getOwnPropertyDescriptor(p, key); + if (!des) return getPropDescriptor(p, key); + return des; } -function M(t, e, n) { - if (!(typeof e != "object" || e === null)) - return Object.entries(e).forEach(function([o, c]) { - o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c)); - }); +function forEachEntries(s, target, element, obj, cb) { + const S = String; + if (typeof obj !== "object" || obj === null) return; + return Object.entries(obj).forEach(function process([key, val]) { + if (!key) return; + key = new S(key); + key.target = target; + val = s.processReactiveAttribute(element, key, val, cb); + cb(key, val); + }); } -function Y(t, e, n, r) { - return t[(m(r) ? "remove" : "set") + e](n, r); +function setRemove(obj, prop, key, val) { + return obj[(isUndef(val) ? "remove" : "set") + prop](key, val); } -function tt(t, e, n, r, o = null) { - return t[(m(r) ? "remove" : "set") + e + "NS"](o, n, r); +function setRemoveNS(obj, prop, key, val, ns = null) { + return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val); } -function F(t, e, n) { - if (Reflect.set(t, e, n), !!m(n)) - return Reflect.deleteProperty(t, e); +function setDelete(obj, key, val) { + Reflect.set(obj, key, val); + if (!isUndef(val)) return; + return Reflect.deleteProperty(obj, key); } // src/events-observer.js -var y = f.M ? et() : new Proxy({}, { +var c_ch_o = enviroment.M ? connectionsChangesObserverConstructor() : new Proxy({}, { get() { return () => { }; } }); -function et() { - let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) { - for (let i of u) - if (i.type === "childList") { - if (l(i.addedNodes, !0)) { - s(); - continue; - } - E(i.removedNodes, !0) && s(); +function connectionsChangesObserverConstructor() { + const store = /* @__PURE__ */ new Map(); + let is_observing = false; + const observerListener = (stop2) => function(mutations) { + for (const mutation of mutations) { + if (mutation.type !== "childList") continue; + if (observerAdded(mutation.addedNodes, true)) { + stop2(); + continue; } - }, r = new f.M(n(d)); - return { - observe(s) { - let u = new f.M(n(() => { - })); - return u.observe(s, { childList: !0, subtree: !0 }), () => u.disconnect(); - }, - onConnected(s, u) { - a(); - let i = c(s); - i.connected.has(u) || (i.connected.add(u), i.length_c += 1); - }, - offConnected(s, u) { - if (!t.has(s)) return; - let i = t.get(s); - i.connected.has(u) && (i.connected.delete(u), i.length_c -= 1, o(s, i)); - }, - onDisconnected(s, u) { - a(); - let i = c(s); - i.disconnected.has(u) || (i.disconnected.add(u), i.length_d += 1); - }, - offDisconnected(s, u) { - if (!t.has(s)) return; - let i = t.get(s); - i.disconnected.has(u) && (i.disconnected.delete(u), i.length_d -= 1, o(s, i)); + if (observerRemoved(mutation.removedNodes, true)) + stop2(); } }; - function o(s, u) { - u.length_c || u.length_d || (t.delete(s), d()); + const observer = new enviroment.M(observerListener(stop)); + return { + observe(element) { + const o = new enviroment.M(observerListener(() => { + })); + o.observe(element, { childList: true, subtree: true }); + return () => o.disconnect(); + }, + onConnected(element, listener) { + start(); + const listeners = getElementStore(element); + if (listeners.connected.has(listener)) return; + listeners.connected.add(listener); + listeners.length_c += 1; + }, + offConnected(element, listener) { + if (!store.has(element)) return; + const ls = store.get(element); + if (!ls.connected.has(listener)) return; + ls.connected.delete(listener); + ls.length_c -= 1; + cleanWhenOff(element, ls); + }, + onDisconnected(element, listener) { + start(); + const listeners = getElementStore(element); + if (listeners.disconnected.has(listener)) return; + listeners.disconnected.add(listener); + listeners.length_d += 1; + }, + offDisconnected(element, listener) { + if (!store.has(element)) return; + const ls = store.get(element); + if (!ls.disconnected.has(listener)) return; + ls.disconnected.delete(listener); + ls.length_d -= 1; + cleanWhenOff(element, ls); + } + }; + function cleanWhenOff(element, ls) { + if (ls.length_c || ls.length_d) + return; + store.delete(element); + stop(); } - function c(s) { - if (t.has(s)) return t.get(s); - let u = { + function getElementStore(element) { + if (store.has(element)) return store.get(element); + const out = { connected: /* @__PURE__ */ new WeakSet(), length_c: 0, disconnected: /* @__PURE__ */ new WeakSet(), length_d: 0 }; - return t.set(s, u), u; + store.set(element, out); + return out; } - function a() { - e || (e = !0, r.observe(f.D.body, { childList: !0, subtree: !0 })); + function start() { + if (is_observing) return; + is_observing = true; + observer.observe(enviroment.D.body, { childList: true, subtree: true }); } - function d() { - !e || t.size || (e = !1, r.disconnect()); + function stop() { + if (!is_observing || store.size) return; + is_observing = false; + observer.disconnect(); } - function p() { - return new Promise(function(s) { - (requestIdleCallback || requestAnimationFrame)(s); + function requestIdle() { + return new Promise(function(resolve) { + (requestIdleCallback || requestAnimationFrame)(resolve); }); } - async function b(s) { - t.size > 30 && await p(); - let u = []; - if (!(s instanceof Node)) return u; - for (let i of t.keys()) - i === s || !(i instanceof Node) || s.contains(i) && u.push(i); - return u; - } - function l(s, u) { - let i = !1; - for (let h of s) { - if (u && b(h).then(l), !t.has(h)) continue; - let _ = t.get(h); - _.length_c && (h.dispatchEvent(new Event(v)), _.connected = /* @__PURE__ */ new WeakSet(), _.length_c = 0, _.length_d || t.delete(h), i = !0); + async function collectChildren(element) { + if (store.size > 30) + await requestIdle(); + const out = []; + if (!(element instanceof Node)) return out; + for (const el of store.keys()) { + if (el === element || !(el instanceof Node)) continue; + if (element.contains(el)) + out.push(el); } - return i; + return out; } - function E(s, u) { - let i = !1; - for (let h of s) - u && b(h).then(E), !(!t.has(h) || !t.get(h).length_d) && ((globalThis.queueMicrotask || setTimeout)(I(h)), i = !0); - return i; + function observerAdded(addedNodes, is_root) { + let out = false; + for (const element of addedNodes) { + if (is_root) collectChildren(element).then(observerAdded); + if (!store.has(element)) continue; + const ls = store.get(element); + if (!ls.length_c) continue; + element.dispatchEvent(new Event(evc)); + ls.connected = /* @__PURE__ */ new WeakSet(); + ls.length_c = 0; + if (!ls.length_d) store.delete(element); + out = true; + } + return out; } - function I(s) { + function observerRemoved(removedNodes, is_root) { + let out = false; + for (const element of removedNodes) { + if (is_root) collectChildren(element).then(observerRemoved); + if (!store.has(element)) continue; + const ls = store.get(element); + if (!ls.length_d) continue; + (globalThis.queueMicrotask || setTimeout)(dispatchRemove(element)); + out = true; + } + return out; + } + function dispatchRemove(element) { return () => { - s.isConnected || (s.dispatchEvent(new Event(w)), t.delete(s)); + if (element.isConnected) return; + element.dispatchEvent(new Event(evd)); + store.delete(element); }; } } // src/customElement.js -function wt(t, e, n = rt) { - let r = t.host || t; - O.push({ - scope: r, - host: (...a) => a.length ? a.forEach((d) => d(r)) : r - }), typeof n == "function" && (n = n.call(r, r)); - let o = r[x]; - o || nt(r); - let c = e.call(r, n); - return o || r.dispatchEvent(new Event(v)), t.nodeType === 11 && typeof t.mode == "string" && r.addEventListener(w, y.observe(t), { once: !0 }), O.pop(), t.append(c); +function customElementRender(target, render, props = observedAttributes2) { + const custom_element = target.host || target; + scope.push({ + scope: custom_element, + host: (...c) => c.length ? c.forEach((c2) => c2(custom_element)) : custom_element + }); + if (typeof props === "function") props = props.call(custom_element, custom_element); + const is_lte = custom_element[keyLTE]; + if (!is_lte) lifecyclesToEvents(custom_element); + const out = render.call(custom_element, props); + if (!is_lte) custom_element.dispatchEvent(new Event(evc)); + if (target.nodeType === 11 && typeof target.mode === "string") + custom_element.addEventListener(evd, c_ch_o.observe(target), { once: true }); + scope.pop(); + return target.append(out); } -function nt(t) { - return k(t.prototype, "connectedCallback", function(e, n, r) { - e.apply(n, r), n.dispatchEvent(new Event(v)); - }), k(t.prototype, "disconnectedCallback", function(e, n, r) { - e.apply(n, r), (globalThis.queueMicrotask || setTimeout)( - () => !n.isConnected && n.dispatchEvent(new Event(w)) +function lifecyclesToEvents(class_declaration) { + wrapMethod(class_declaration.prototype, "connectedCallback", function(target, thisArg, detail) { + target.apply(thisArg, detail); + thisArg.dispatchEvent(new Event(evc)); + }); + wrapMethod(class_declaration.prototype, "disconnectedCallback", function(target, thisArg, detail) { + target.apply(thisArg, detail); + (globalThis.queueMicrotask || setTimeout)( + () => !thisArg.isConnected && thisArg.dispatchEvent(new Event(evd)) ); - }), k(t.prototype, "attributeChangedCallback", function(e, n, r) { - let [o, , c] = r; - n.dispatchEvent(new CustomEvent(C, { - detail: [o, c] - })), e.apply(n, r); - }), t.prototype[x] = !0, t; + }); + wrapMethod(class_declaration.prototype, "attributeChangedCallback", function(target, thisArg, detail) { + const [attribute, , value] = detail; + thisArg.dispatchEvent(new CustomEvent(eva, { + detail: [attribute, value] + })); + target.apply(thisArg, detail); + }); + class_declaration.prototype[keyLTE] = true; + return class_declaration; } -function k(t, e, n) { - t[e] = new Proxy(t[e] || (() => { - }), { apply: n }); +function wrapMethod(obj, method, apply) { + obj[method] = new Proxy(obj[method] || (() => { + }), { apply }); } -function rt(t) { - return W(t, (e, n) => e.getAttribute(n)); +function observedAttributes2(instance) { + return observedAttributes(instance, (i, n) => i.getAttribute(n)); } // src/events.js -function Ct(t, e, n) { - return e || (e = {}), function(o, ...c) { - n && (c.unshift(o), o = typeof n == "function" ? n() : n); - let a = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e); - return o.dispatchEvent(a); +function dispatchEvent(name, options, host) { + if (!options) options = {}; + return function dispatch(element, ...d) { + if (host) { + d.unshift(element); + element = typeof host === "function" ? host() : host; + } + const event = d.length ? new CustomEvent(name, Object.assign({ detail: d[0] }, options)) : new Event(name, options); + return element.dispatchEvent(event); }; } -function D(t, e, n) { - return function(o) { - return o.addEventListener(t, e, n), o; +function on(event, listener, options) { + return function registerElement(element) { + element.addEventListener(event, listener, options); + return element; }; } -var B = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); -D.connected = function(t, e) { - return e = B(e), function(r) { - return r.addEventListener(v, t, e), r[x] ? r : r.isConnected ? (r.dispatchEvent(new Event(v)), r) : (L(e.signal, () => y.offConnected(r, t)) && y.onConnected(r, t), r); +var lifeOptions = (obj) => Object.assign({}, typeof obj === "object" ? obj : null, { once: true }); +on.connected = function(listener, options) { + options = lifeOptions(options); + return function registerElement(element) { + element.addEventListener(evc, listener, options); + if (element[keyLTE]) return element; + if (element.isConnected) return element.dispatchEvent(new Event(evc)), element; + const c = onAbort(options.signal, () => c_ch_o.offConnected(element, listener)); + if (c) c_ch_o.onConnected(element, listener); + return element; }; }; -D.disconnected = function(t, e) { - return e = B(e), function(r) { - return r.addEventListener(w, t, e), r[x] || L(e.signal, () => y.offDisconnected(r, t)) && y.onDisconnected(r, t), r; +on.disconnected = function(listener, options) { + options = lifeOptions(options); + return function registerElement(element) { + element.addEventListener(evd, listener, options); + if (element[keyLTE]) return element; + const c = onAbort(options.signal, () => c_ch_o.offDisconnected(element, listener)); + if (c) c_ch_o.onDisconnected(element, listener); + return element; }; }; -var j = /* @__PURE__ */ new WeakMap(); -D.disconnectedAsAbort = function(t) { - if (j.has(t)) return j.get(t); - let e = new AbortController(); - return j.set(t, e), t(D.disconnected(() => e.abort())), e; +var store_abort = /* @__PURE__ */ new WeakMap(); +on.disconnectedAsAbort = function(host) { + if (store_abort.has(host)) return store_abort.get(host); + const a = new AbortController(); + store_abort.set(host, a); + host(on.disconnected(() => a.abort())); + return a; }; -var ot = /* @__PURE__ */ new WeakSet(); -D.attributeChanged = function(t, e) { - return typeof e != "object" && (e = {}), function(r) { - if (r.addEventListener(C, t, e), r[x] || ot.has(r) || !f.M) return r; - let o = new f.M(function(a) { - for (let { attributeName: d, target: p } of a) - p.dispatchEvent( - new CustomEvent(C, { detail: [d, p.getAttribute(d)] }) +var els_attribute_store = /* @__PURE__ */ new WeakSet(); +on.attributeChanged = function(listener, options) { + if (typeof options !== "object") + options = {}; + return function registerElement(element) { + element.addEventListener(eva, listener, options); + if (element[keyLTE] || els_attribute_store.has(element)) + return element; + if (!enviroment.M) return element; + const observer = new enviroment.M(function(mutations) { + for (const { attributeName, target } of mutations) + target.dispatchEvent( + new CustomEvent(eva, { detail: [attributeName, target.getAttribute(attributeName)] }) ); }); - return L(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r; + const c = onAbort(options.signal, () => observer.disconnect()); + if (c) observer.observe(element, { attributes: true }); + return element; }; }; globalThis.dde= { - assign: R, - assignAttribute: U, - chainableAppend: J, - classListDeclarative: K, - createElement: P, - createElementNS: pt, - customElementRender: wt, - customElementWithDDE: nt, - dispatchEvent: Ct, - el: P, - elNS: pt, - elementAttribute: Q, - lifecyclesToEvents: nt, - observedAttributes: rt, - on: D, - queue: dt, - registerReactivity: Z, - scope: O, - simulateSlots: lt + assign, + assignAttribute, + chainableAppend, + classListDeclarative, + createElement, + createElementNS, + customElementRender, + customElementWithDDE: lifecyclesToEvents, + dispatchEvent, + el: createElement, + elNS: createElementNS, + elementAttribute, + lifecyclesToEvents, + observedAttributes: observedAttributes2, + on, + queue, + registerReactivity, + scope, + simulateSlots }; })(); \ No newline at end of file diff --git a/dist/esm-with-signals.js b/dist/esm-with-signals.js index ba54399..8d4a8b5 100644 --- a/dist/esm-with-signals.js +++ b/dist/esm-with-signals.js @@ -1,660 +1,865 @@ // src/signals-common.js -var N = { - isSignal(t) { - return !1; +var signals_global = { + isSignal(attributes) { + return false; }, - processReactiveAttribute(t, e, r, n) { - return r; + processReactiveAttribute(obj, key, attr, set) { + return attr; } }; -function H(t, e = !0) { - return e ? Object.assign(N, t) : (Object.setPrototypeOf(t, N), t); +function registerReactivity(def, global = true) { + if (global) return Object.assign(signals_global, def); + Object.setPrototypeOf(def, signals_global); + return def; } -function j(t) { - return N.isPrototypeOf(t) && t !== N ? t : N; +function signals(_this) { + return signals_global.isPrototypeOf(_this) && _this !== signals_global ? _this : signals_global; } // src/helpers.js -var I = (...t) => Object.prototype.hasOwnProperty.call(...t); -function A(t) { - return typeof t > "u"; +var hasOwn = (...a) => Object.prototype.hasOwnProperty.call(...a); +function isUndef(value) { + return typeof value === "undefined"; } -function X(t) { - let e = typeof t; - return e !== "object" ? e : t === null ? "null" : Object.prototype.toString.call(t); +function typeOf(v) { + const t = typeof v; + if (t !== "object") return t; + if (v === null) return "null"; + return Object.prototype.toString.call(v); } -function P(t, e) { - if (!t || !(t instanceof AbortSignal)) - return !0; - if (!t.aborted) - return t.addEventListener("abort", e), function() { - t.removeEventListener("abort", e); - }; +function onAbort(signal2, listener) { + if (!signal2 || !(signal2 instanceof AbortSignal)) + return true; + if (signal2.aborted) + return; + signal2.addEventListener("abort", listener); + return function cleanUp() { + signal2.removeEventListener("abort", listener); + }; } -function W(t, e) { - let { observedAttributes: r = [] } = t.constructor; - return r.reduce(function(n, o) { - return n[dt(o)] = e(t, o), n; +function observedAttributes(instance, observedAttribute2) { + const { observedAttributes: observedAttributes3 = [] } = instance.constructor; + return observedAttributes3.reduce(function(out, name) { + out[kebabToCamel(name)] = observedAttribute2(instance, name); + return out; }, {}); } -function dt(t) { - return t.replace(/-./g, (e) => e[1].toUpperCase()); +function kebabToCamel(name) { + return name.replace(/-./g, (x) => x[1].toUpperCase()); } // src/dom-common.js -var d = { - setDeleteAttr: pt, +var enviroment = { + setDeleteAttr, ssr: "", D: globalThis.document, F: globalThis.DocumentFragment, H: globalThis.HTMLElement, S: globalThis.SVGElement, M: globalThis.MutationObserver, - q: (t) => t || Promise.resolve() + q: (p) => p || Promise.resolve() }; -function pt(t, e, r) { - if (Reflect.set(t, e, r), !!A(r)) { - if (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === "undefined") - return t.removeAttribute(e); - if (Reflect.get(t, e) === "undefined") - return Reflect.set(t, e, ""); - } +function setDeleteAttr(obj, prop, val) { + Reflect.set(obj, prop, val); + if (!isUndef(val)) return; + Reflect.deleteProperty(obj, prop); + if (obj instanceof enviroment.H && obj.getAttribute(prop) === "undefined") + return obj.removeAttribute(prop); + if (Reflect.get(obj, prop) === "undefined") + return Reflect.set(obj, prop, ""); } -var O = "__dde_lifecyclesToEvents", w = "dde:connected", S = "dde:disconnected", T = "dde:attributeChanged"; +var keyLTE = "__dde_lifecyclesToEvents"; +var evc = "dde:connected"; +var evd = "dde:disconnected"; +var eva = "dde:attributeChanged"; // src/dom.js -function Mt(t) { - return d.q(t); +function queue(promise) { + return enviroment.q(promise); } -var y = [{ +var scopes = [{ get scope() { - return d.D.body; + return enviroment.D.body; }, - host: (t) => t ? t(d.D.body) : d.D.body, - prevent: !0 -}], x = { + host: (c) => c ? c(enviroment.D.body) : enviroment.D.body, + prevent: true +}]; +var scope = { get current() { - return y[y.length - 1]; + return scopes[scopes.length - 1]; }, get host() { return this.current.host; }, preventDefault() { - let { current: t } = this; - return t.prevent = !0, t; + const { current } = this; + current.prevent = true; + return current; }, get state() { - return [...y]; + return [...scopes]; }, - push(t = {}) { - return y.push(Object.assign({}, this.current, { prevent: !1 }, t)); + push(s = {}) { + return scopes.push(Object.assign({}, this.current, { prevent: false }, s)); }, pushRoot() { - return y.push(y[0]); + return scopes.push(scopes[0]); }, pop() { - if (y.length !== 1) - return y.pop(); + if (scopes.length === 1) return; + return scopes.pop(); } }; -function Y(...t) { - return this.appendOriginal(...t), this; +function append(...els) { + this.appendOriginal(...els); + return this; } -function lt(t) { - return t.append === Y || (t.appendOriginal = t.append, t.append = Y), t; +function chainableAppend(el) { + if (el.append === append) return el; + el.appendOriginal = el.append; + el.append = append; + return el; } -var $; -function M(t, e, ...r) { - let n = j(this), o = 0, c, u; - switch ((Object(e) !== e || n.isSignal(e)) && (e = { textContent: e }), !0) { - case typeof t == "function": { - o = 1; - let a = (...l) => l.length ? (o === 1 ? r.unshift(...l) : l.forEach((E) => E(u)), void 0) : u; - x.push({ scope: t, host: a }), c = t(e || void 0); - let h = c instanceof d.F; - if (c.nodeName === "#comment") break; - let v = M.mark({ +var namespace; +function createElement(tag, attributes, ...addons) { + const s = signals(this); + let scoped = 0; + let el, el_host; + if (Object(attributes) !== attributes || s.isSignal(attributes)) + attributes = { textContent: attributes }; + switch (true) { + case typeof tag === "function": { + scoped = 1; + const host = (...c) => !c.length ? el_host : (scoped === 1 ? addons.unshift(...c) : c.forEach((c2) => c2(el_host)), void 0); + scope.push({ scope: tag, host }); + el = tag(attributes || void 0); + const is_fragment = el instanceof enviroment.F; + if (el.nodeName === "#comment") break; + const el_mark = createElement.mark({ type: "component", - name: t.name, - host: h ? "this" : "parentElement" + name: tag.name, + host: is_fragment ? "this" : "parentElement" }); - c.prepend(v), h && (u = v); + el.prepend(el_mark); + if (is_fragment) el_host = el_mark; break; } - case t === "#text": - c = q.call(this, d.D.createTextNode(""), e); + case tag === "#text": + el = assign.call(this, enviroment.D.createTextNode(""), attributes); break; - case (t === "<>" || !t): - c = q.call(this, d.D.createDocumentFragment(), e); + case (tag === "<>" || !tag): + el = assign.call(this, enviroment.D.createDocumentFragment(), attributes); break; - case !!$: - c = q.call(this, d.D.createElementNS($, t), e); + case Boolean(namespace): + el = assign.call(this, enviroment.D.createElementNS(namespace, tag), attributes); break; - case !c: - c = q.call(this, d.D.createElement(t), e); + case !el: + el = assign.call(this, enviroment.D.createElement(tag), attributes); } - return lt(c), u || (u = c), r.forEach((a) => a(u)), o && x.pop(), o = 2, c; + chainableAppend(el); + if (!el_host) el_host = el; + addons.forEach((c) => c(el_host)); + if (scoped) scope.pop(); + scoped = 2; + return el; } -M.mark = function(t, e = !1) { - t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); - let r = e ? "" : "/", n = d.D.createComment(``); - return e && (n.end = d.D.createComment("")), n; +createElement.mark = function(attrs, is_open = false) { + attrs = Object.entries(attrs).map(([n, v]) => n + `="${v}"`).join(" "); + const end = is_open ? "" : "/"; + const out = enviroment.D.createComment(``); + if (is_open) out.end = enviroment.D.createComment(""); + return out; }; -function jt(t) { - let e = this; - return function(...n) { - $ = t; - let o = M.call(e, ...n); - return $ = void 0, o; +function createElementNS(ns) { + const _this = this; + return function createElementNSCurried(...rest) { + namespace = ns; + const el = createElement.call(_this, ...rest); + namespace = void 0; + return el; }; } -function Pt(t, e = t) { - let r = "\xB9\u2070", n = "\u2713", o = Object.fromEntries( - Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(r)).map((c) => [c.name += r, c]) +function simulateSlots(element, root = element) { + const mark_e = "\xB9\u2070", mark_s = "\u2713"; + const slots = Object.fromEntries( + Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s]) ); - if (t.append = new Proxy(t.append, { - apply(c, u, a) { - if (a[0] === e) return c.apply(t, a); - for (let h of a) { - let v = (h.slot || "") + r; + element.append = new Proxy(element.append, { + apply(orig, _, els) { + if (els[0] === root) return orig.apply(element, els); + for (const el of els) { + const name = (el.slot || "") + mark_e; try { - bt(h, "remove", "slot"); - } catch { + elementAttribute(el, "remove", "slot"); + } catch (_error) { } - let l = o[v]; - if (!l) return; - l.name.startsWith(n) || (l.childNodes.forEach((E) => E.remove()), l.name = n + v), l.append(h); + const slot = slots[name]; + if (!slot) return; + if (!slot.name.startsWith(mark_s)) { + slot.childNodes.forEach((c) => c.remove()); + slot.name = mark_s + name; + } + slot.append(el); } - return t.append = c, t; + element.append = orig; + return element; } - }), t !== e) { - let c = Array.from(t.childNodes); - t.append(...c); + }); + if (element !== root) { + const els = Array.from(element.childNodes); + element.append(...els); } - return e; + return root; } -var F = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d; -function q(t, ...e) { - if (!e.length) return t; - F.set(t, rt(t, this)); - for (let [r, n] of Object.entries(Object.assign({}, ...e))) - nt.call(this, t, r, n); - return F.delete(t), t; +var assign_context = /* @__PURE__ */ new WeakMap(); +var { setDeleteAttr: setDeleteAttr2 } = enviroment; +function assign(element, ...attributes) { + if (!attributes.length) return element; + assign_context.set(element, assignContext(element, this)); + for (const [key, value] of Object.entries(Object.assign({}, ...attributes))) + assignAttribute.call(this, element, key, value); + assign_context.delete(element); + return element; } -function nt(t, e, r) { - let { setRemoveAttr: n, s: o } = rt(t, this), c = this; - r = o.processReactiveAttribute( - t, - e, - r, - (a, h) => nt.call(c, t, a, h) +function assignAttribute(element, key, value) { + const { setRemoveAttr, s } = assignContext(element, this); + const _this = this; + value = s.processReactiveAttribute( + element, + key, + value, + (key2, value2) => assignAttribute.call(_this, element, key2, value2) ); - let [u] = e; - if (u === "=") return n(e.slice(1), r); - if (u === ".") return et(t, e.slice(1), r); - if (/(aria|data)([A-Z])/.test(e)) - return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), n(e, r); - switch (e === "className" && (e = "class"), e) { + const [k] = key; + if ("=" === k) return setRemoveAttr(key.slice(1), value); + if ("." === k) return setDelete(element, key.slice(1), value); + if (/(aria|data)([A-Z])/.test(key)) { + key = key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(); + return setRemoveAttr(key, value); + } + if ("className" === key) key = "class"; + switch (key) { case "xlink:href": - return n(e, r, "http://www.w3.org/1999/xlink"); + return setRemoveAttr(key, value, "http://www.w3.org/1999/xlink"); case "textContent": - return tt(t, e, r); + return setDeleteAttr2(element, key, value); case "style": - if (typeof r != "object") break; + if (typeof value !== "object") break; /* falls through */ case "dataset": - return B(o, r, et.bind(null, t[e])); + return forEachEntries(s, key, element, value, setDelete.bind(null, element[key])); case "ariaset": - return B(o, r, (a, h) => n("aria-" + a, h)); + return forEachEntries(s, key, element, value, (key2, val) => setRemoveAttr("aria-" + key2, val)); case "classList": - return ht.call(c, t, r); + return classListDeclarative.call(_this, element, value); } - return gt(t, e) ? tt(t, e, r) : n(e, r); + return isPropSetter(element, key) ? setDeleteAttr2(element, key, value) : setRemoveAttr(key, value); } -function rt(t, e) { - if (F.has(t)) return F.get(t); - let n = (t instanceof d.S ? mt : vt).bind(null, t, "Attribute"), o = j(e); - return { setRemoveAttr: n, s: o }; +function assignContext(element, _this) { + if (assign_context.has(element)) return assign_context.get(element); + const is_svg = element instanceof enviroment.S; + const setRemoveAttr = (is_svg ? setRemoveNS : setRemove).bind(null, element, "Attribute"); + const s = signals(_this); + return { setRemoveAttr, s }; } -function ht(t, e) { - let r = j(this); - return B( - r, - e, - (n, o) => t.classList.toggle(n, o === -1 ? void 0 : !!o) - ), t; +function classListDeclarative(element, toggle) { + const s = signals(this); + forEachEntries( + s, + "classList", + element, + toggle, + (class_name, val) => element.classList.toggle(class_name, val === -1 ? void 0 : Boolean(val)) + ); + return element; } -function bt(t, e, r, n) { - return t instanceof d.H ? t[e + "Attribute"](r, n) : t[e + "AttributeNS"](null, r, n); +function elementAttribute(element, op, key, value) { + if (element instanceof enviroment.H) + return element[op + "Attribute"](key, value); + return element[op + "AttributeNS"](null, key, value); } -function gt(t, e) { - if (!(e in t)) return !1; - let r = ot(t, e); - return !A(r.set); +function isPropSetter(el, key) { + if (!(key in el)) return false; + const des = getPropDescriptor(el, key); + return !isUndef(des.set); } -function ot(t, e) { - if (t = Object.getPrototypeOf(t), !t) return {}; - let r = Object.getOwnPropertyDescriptor(t, e); - return r || ot(t, e); +function getPropDescriptor(p, key) { + p = Object.getPrototypeOf(p); + if (!p) return {}; + const des = Object.getOwnPropertyDescriptor(p, key); + if (!des) return getPropDescriptor(p, key); + return des; } -function B(t, e, r) { - if (!(typeof e != "object" || e === null)) - return Object.entries(e).forEach(function([o, c]) { - o && (c = t.processReactiveAttribute(e, o, c, r), r(o, c)); - }); +function forEachEntries(s, target, element, obj, cb) { + const S = String; + if (typeof obj !== "object" || obj === null) return; + return Object.entries(obj).forEach(function process([key, val]) { + if (!key) return; + key = new S(key); + key.target = target; + val = s.processReactiveAttribute(element, key, val, cb); + cb(key, val); + }); } -function vt(t, e, r, n) { - return t[(A(n) ? "remove" : "set") + e](r, n); +function setRemove(obj, prop, key, val) { + return obj[(isUndef(val) ? "remove" : "set") + prop](key, val); } -function mt(t, e, r, n, o = null) { - return t[(A(n) ? "remove" : "set") + e + "NS"](o, r, n); +function setRemoveNS(obj, prop, key, val, ns = null) { + return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val); } -function et(t, e, r) { - if (Reflect.set(t, e, r), !!A(r)) - return Reflect.deleteProperty(t, e); +function setDelete(obj, key, val) { + Reflect.set(obj, key, val); + if (!isUndef(val)) return; + return Reflect.deleteProperty(obj, key); } // src/events-observer.js -var C = d.M ? Et() : new Proxy({}, { +var c_ch_o = enviroment.M ? connectionsChangesObserverConstructor() : new Proxy({}, { get() { return () => { }; } }); -function Et() { - let t = /* @__PURE__ */ new Map(), e = !1, r = (i) => function(s) { - for (let f of s) - if (f.type === "childList") { - if (l(f.addedNodes, !0)) { - i(); - continue; - } - E(f.removedNodes, !0) && i(); +function connectionsChangesObserverConstructor() { + const store = /* @__PURE__ */ new Map(); + let is_observing = false; + const observerListener = (stop2) => function(mutations) { + for (const mutation of mutations) { + if (mutation.type !== "childList") continue; + if (observerAdded(mutation.addedNodes, true)) { + stop2(); + continue; } - }, n = new d.M(r(a)); - return { - observe(i) { - let s = new d.M(r(() => { - })); - return s.observe(i, { childList: !0, subtree: !0 }), () => s.disconnect(); - }, - onConnected(i, s) { - u(); - let f = c(i); - f.connected.has(s) || (f.connected.add(s), f.length_c += 1); - }, - offConnected(i, s) { - if (!t.has(i)) return; - let f = t.get(i); - f.connected.has(s) && (f.connected.delete(s), f.length_c -= 1, o(i, f)); - }, - onDisconnected(i, s) { - u(); - let f = c(i); - f.disconnected.has(s) || (f.disconnected.add(s), f.length_d += 1); - }, - offDisconnected(i, s) { - if (!t.has(i)) return; - let f = t.get(i); - f.disconnected.has(s) && (f.disconnected.delete(s), f.length_d -= 1, o(i, f)); + if (observerRemoved(mutation.removedNodes, true)) + stop2(); } }; - function o(i, s) { - s.length_c || s.length_d || (t.delete(i), a()); + const observer = new enviroment.M(observerListener(stop)); + return { + observe(element) { + const o = new enviroment.M(observerListener(() => { + })); + o.observe(element, { childList: true, subtree: true }); + return () => o.disconnect(); + }, + onConnected(element, listener) { + start(); + const listeners = getElementStore(element); + if (listeners.connected.has(listener)) return; + listeners.connected.add(listener); + listeners.length_c += 1; + }, + offConnected(element, listener) { + if (!store.has(element)) return; + const ls = store.get(element); + if (!ls.connected.has(listener)) return; + ls.connected.delete(listener); + ls.length_c -= 1; + cleanWhenOff(element, ls); + }, + onDisconnected(element, listener) { + start(); + const listeners = getElementStore(element); + if (listeners.disconnected.has(listener)) return; + listeners.disconnected.add(listener); + listeners.length_d += 1; + }, + offDisconnected(element, listener) { + if (!store.has(element)) return; + const ls = store.get(element); + if (!ls.disconnected.has(listener)) return; + ls.disconnected.delete(listener); + ls.length_d -= 1; + cleanWhenOff(element, ls); + } + }; + function cleanWhenOff(element, ls) { + if (ls.length_c || ls.length_d) + return; + store.delete(element); + stop(); } - function c(i) { - if (t.has(i)) return t.get(i); - let s = { + function getElementStore(element) { + if (store.has(element)) return store.get(element); + const out = { connected: /* @__PURE__ */ new WeakSet(), length_c: 0, disconnected: /* @__PURE__ */ new WeakSet(), length_d: 0 }; - return t.set(i, s), s; + store.set(element, out); + return out; } - function u() { - e || (e = !0, n.observe(d.D.body, { childList: !0, subtree: !0 })); + function start() { + if (is_observing) return; + is_observing = true; + observer.observe(enviroment.D.body, { childList: true, subtree: true }); } - function a() { - !e || t.size || (e = !1, n.disconnect()); + function stop() { + if (!is_observing || store.size) return; + is_observing = false; + observer.disconnect(); } - function h() { - return new Promise(function(i) { - (requestIdleCallback || requestAnimationFrame)(i); + function requestIdle() { + return new Promise(function(resolve) { + (requestIdleCallback || requestAnimationFrame)(resolve); }); } - async function v(i) { - t.size > 30 && await h(); - let s = []; - if (!(i instanceof Node)) return s; - for (let f of t.keys()) - f === i || !(f instanceof Node) || i.contains(f) && s.push(f); - return s; - } - function l(i, s) { - let f = !1; - for (let b of i) { - if (s && v(b).then(l), !t.has(b)) continue; - let L = t.get(b); - L.length_c && (b.dispatchEvent(new Event(w)), L.connected = /* @__PURE__ */ new WeakSet(), L.length_c = 0, L.length_d || t.delete(b), f = !0); + async function collectChildren(element) { + if (store.size > 30) + await requestIdle(); + const out = []; + if (!(element instanceof Node)) return out; + for (const el of store.keys()) { + if (el === element || !(el instanceof Node)) continue; + if (element.contains(el)) + out.push(el); } - return f; + return out; } - function E(i, s) { - let f = !1; - for (let b of i) - s && v(b).then(E), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(k(b)), f = !0); - return f; + function observerAdded(addedNodes, is_root) { + let out = false; + for (const element of addedNodes) { + if (is_root) collectChildren(element).then(observerAdded); + if (!store.has(element)) continue; + const ls = store.get(element); + if (!ls.length_c) continue; + element.dispatchEvent(new Event(evc)); + ls.connected = /* @__PURE__ */ new WeakSet(); + ls.length_c = 0; + if (!ls.length_d) store.delete(element); + out = true; + } + return out; } - function k(i) { + function observerRemoved(removedNodes, is_root) { + let out = false; + for (const element of removedNodes) { + if (is_root) collectChildren(element).then(observerRemoved); + if (!store.has(element)) continue; + const ls = store.get(element); + if (!ls.length_d) continue; + (globalThis.queueMicrotask || setTimeout)(dispatchRemove(element)); + out = true; + } + return out; + } + function dispatchRemove(element) { return () => { - i.isConnected || (i.dispatchEvent(new Event(S)), t.delete(i)); + if (element.isConnected) return; + element.dispatchEvent(new Event(evd)); + store.delete(element); }; } } // src/customElement.js -function It(t, e, r = _t) { - let n = t.host || t; - x.push({ - scope: n, - host: (...u) => u.length ? u.forEach((a) => a(n)) : n - }), typeof r == "function" && (r = r.call(n, n)); - let o = n[O]; - o || xt(n); - let c = e.call(n, r); - return o || n.dispatchEvent(new Event(w)), t.nodeType === 11 && typeof t.mode == "string" && n.addEventListener(S, C.observe(t), { once: !0 }), x.pop(), t.append(c); +function customElementRender(target, render, props = observedAttributes2) { + const custom_element = target.host || target; + scope.push({ + scope: custom_element, + host: (...c) => c.length ? c.forEach((c2) => c2(custom_element)) : custom_element + }); + if (typeof props === "function") props = props.call(custom_element, custom_element); + const is_lte = custom_element[keyLTE]; + if (!is_lte) lifecyclesToEvents(custom_element); + const out = render.call(custom_element, props); + if (!is_lte) custom_element.dispatchEvent(new Event(evc)); + if (target.nodeType === 11 && typeof target.mode === "string") + custom_element.addEventListener(evd, c_ch_o.observe(target), { once: true }); + scope.pop(); + return target.append(out); } -function xt(t) { - return J(t.prototype, "connectedCallback", function(e, r, n) { - e.apply(r, n), r.dispatchEvent(new Event(w)); - }), J(t.prototype, "disconnectedCallback", function(e, r, n) { - e.apply(r, n), (globalThis.queueMicrotask || setTimeout)( - () => !r.isConnected && r.dispatchEvent(new Event(S)) +function lifecyclesToEvents(class_declaration) { + wrapMethod(class_declaration.prototype, "connectedCallback", function(target, thisArg, detail) { + target.apply(thisArg, detail); + thisArg.dispatchEvent(new Event(evc)); + }); + wrapMethod(class_declaration.prototype, "disconnectedCallback", function(target, thisArg, detail) { + target.apply(thisArg, detail); + (globalThis.queueMicrotask || setTimeout)( + () => !thisArg.isConnected && thisArg.dispatchEvent(new Event(evd)) ); - }), J(t.prototype, "attributeChangedCallback", function(e, r, n) { - let [o, , c] = n; - r.dispatchEvent(new CustomEvent(T, { - detail: [o, c] - })), e.apply(r, n); - }), t.prototype[O] = !0, t; + }); + wrapMethod(class_declaration.prototype, "attributeChangedCallback", function(target, thisArg, detail) { + const [attribute, , value] = detail; + thisArg.dispatchEvent(new CustomEvent(eva, { + detail: [attribute, value] + })); + target.apply(thisArg, detail); + }); + class_declaration.prototype[keyLTE] = true; + return class_declaration; } -function J(t, e, r) { - t[e] = new Proxy(t[e] || (() => { - }), { apply: r }); +function wrapMethod(obj, method, apply) { + obj[method] = new Proxy(obj[method] || (() => { + }), { apply }); } -function _t(t) { - return W(t, (e, r) => e.getAttribute(r)); +function observedAttributes2(instance) { + return observedAttributes(instance, (i, n) => i.getAttribute(n)); } // src/events.js -function Gt(t, e, r) { - return e || (e = {}), function(o, ...c) { - r && (c.unshift(o), o = typeof r == "function" ? r() : r); - let u = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e); - return o.dispatchEvent(u); +function dispatchEvent(name, options, host) { + if (!options) options = {}; + return function dispatch(element, ...d) { + if (host) { + d.unshift(element); + element = typeof host === "function" ? host() : host; + } + const event = d.length ? new CustomEvent(name, Object.assign({ detail: d[0] }, options)) : new Event(name, options); + return element.dispatchEvent(event); }; } -function _(t, e, r) { - return function(o) { - return o.addEventListener(t, e, r), o; +function on(event, listener, options) { + return function registerElement(element) { + element.addEventListener(event, listener, options); + return element; }; } -var ct = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); -_.connected = function(t, e) { - return e = ct(e), function(n) { - return n.addEventListener(w, t, e), n[O] ? n : n.isConnected ? (n.dispatchEvent(new Event(w)), n) : (P(e.signal, () => C.offConnected(n, t)) && C.onConnected(n, t), n); +var lifeOptions = (obj) => Object.assign({}, typeof obj === "object" ? obj : null, { once: true }); +on.connected = function(listener, options) { + options = lifeOptions(options); + return function registerElement(element) { + element.addEventListener(evc, listener, options); + if (element[keyLTE]) return element; + if (element.isConnected) return element.dispatchEvent(new Event(evc)), element; + const c = onAbort(options.signal, () => c_ch_o.offConnected(element, listener)); + if (c) c_ch_o.onConnected(element, listener); + return element; }; }; -_.disconnected = function(t, e) { - return e = ct(e), function(n) { - return n.addEventListener(S, t, e), n[O] || P(e.signal, () => C.offDisconnected(n, t)) && C.onDisconnected(n, t), n; +on.disconnected = function(listener, options) { + options = lifeOptions(options); + return function registerElement(element) { + element.addEventListener(evd, listener, options); + if (element[keyLTE]) return element; + const c = onAbort(options.signal, () => c_ch_o.offDisconnected(element, listener)); + if (c) c_ch_o.onDisconnected(element, listener); + return element; }; }; -var Z = /* @__PURE__ */ new WeakMap(); -_.disconnectedAsAbort = function(t) { - if (Z.has(t)) return Z.get(t); - let e = new AbortController(); - return Z.set(t, e), t(_.disconnected(() => e.abort())), e; +var store_abort = /* @__PURE__ */ new WeakMap(); +on.disconnectedAsAbort = function(host) { + if (store_abort.has(host)) return store_abort.get(host); + const a = new AbortController(); + store_abort.set(host, a); + host(on.disconnected(() => a.abort())); + return a; }; -var wt = /* @__PURE__ */ new WeakSet(); -_.attributeChanged = function(t, e) { - return typeof e != "object" && (e = {}), function(n) { - if (n.addEventListener(T, t, e), n[O] || wt.has(n) || !d.M) return n; - let o = new d.M(function(u) { - for (let { attributeName: a, target: h } of u) - h.dispatchEvent( - new CustomEvent(T, { detail: [a, h.getAttribute(a)] }) +var els_attribute_store = /* @__PURE__ */ new WeakSet(); +on.attributeChanged = function(listener, options) { + if (typeof options !== "object") + options = {}; + return function registerElement(element) { + element.addEventListener(eva, listener, options); + if (element[keyLTE] || els_attribute_store.has(element)) + return element; + if (!enviroment.M) return element; + const observer = new enviroment.M(function(mutations) { + for (const { attributeName, target } of mutations) + target.dispatchEvent( + new CustomEvent(eva, { detail: [attributeName, target.getAttribute(attributeName)] }) ); }); - return P(e.signal, () => o.disconnect()) && o.observe(n, { attributes: !0 }), n; + const c = onAbort(options.signal, () => observer.disconnect()); + if (c) observer.observe(element, { attributes: true }); + return element; }; }; // src/signals-lib.js -var p = "__dde_signal"; -function U(t) { +var mark = "__dde_signal"; +function isSignal(candidate) { try { - return I(t, p); - } catch { - return !1; + return hasOwn(candidate, mark); + } catch (e) { + return false; } } -var z = [], g = /* @__PURE__ */ new WeakMap(); -function m(t, e) { - if (typeof t != "function") - return it(!1, t, e); - if (U(t)) return t; - let r = it(!0), n = function() { - let [o, ...c] = g.get(n); - if (g.set(n, /* @__PURE__ */ new Set([o])), z.push(n), at(r, t()), z.pop(), !c.length) return; - let u = g.get(n); - for (let a of c) - u.has(a) || R(a, n); +var stack_watch = []; +var deps = /* @__PURE__ */ new WeakMap(); +function signal(value, actions) { + if (typeof value !== "function") + return create(false, value, actions); + if (isSignal(value)) return value; + const out = create(true); + const contextReWatch = function() { + const [origin, ...deps_old] = deps.get(contextReWatch); + deps.set(contextReWatch, /* @__PURE__ */ new Set([origin])); + stack_watch.push(contextReWatch); + write(out, value()); + stack_watch.pop(); + if (!deps_old.length) return; + const deps_curr = deps.get(contextReWatch); + for (const dep_signal of deps_old) { + if (deps_curr.has(dep_signal)) continue; + removeSignalListener(dep_signal, contextReWatch); + } }; - return g.set(r[p], n), g.set(n, /* @__PURE__ */ new Set([r])), n(), r; + deps.set(out[mark], contextReWatch); + deps.set(contextReWatch, /* @__PURE__ */ new Set([out])); + contextReWatch(); + return out; } -m.action = function(t, e, ...r) { - let n = t[p], { actions: o } = n; - if (!o || !(e in o)) - throw new Error(`'${t}' has no action with name '${e}'!`); - if (o[e].apply(n, r), n.skip) return delete n.skip; - n.listeners.forEach((c) => c(n.value)); +signal.action = function(s, name, ...a) { + const M = s[mark], { actions } = M; + if (!actions || !(name in actions)) + throw new Error(`'${s}' has no action with name '${name}'!`); + actions[name].apply(M, a); + if (M.skip) return delete M.skip; + M.listeners.forEach((l) => l(M.value)); }; -m.on = function t(e, r, n = {}) { - let { signal: o } = n; - if (!(o && o.aborted)) { - if (Array.isArray(e)) return e.forEach((c) => t(c, r, n)); - Q(e, r), o && o.addEventListener("abort", () => R(e, r)); - } +signal.on = function on2(s, listener, options = {}) { + const { signal: as } = options; + if (as && as.aborted) return; + if (Array.isArray(s)) return s.forEach((s2) => on2(s2, listener, options)); + addSignalListener(s, listener); + if (as) as.addEventListener("abort", () => removeSignalListener(s, listener)); }; -m.symbols = { +signal.symbols = { //signal: mark, onclear: Symbol.for("Signal.onclear") }; -m.clear = function(...t) { - for (let r of t) { - let n = r[p]; - n && (delete r.toJSON, n.onclear.forEach((o) => o.call(n)), e(r, n), delete r[p]); +signal.clear = function(...signals2) { + for (const s of signals2) { + const M = s[mark]; + if (!M) continue; + delete s.toJSON; + M.onclear.forEach((f) => f.call(M)); + clearListDeps(s, M); + delete s[mark]; } - function e(r, n) { - n.listeners.forEach((o) => { - if (n.listeners.delete(o), !g.has(o)) return; - let c = g.get(o); - c.delete(r), !(c.size > 1) && (r.clear(...c), g.delete(o)); + function clearListDeps(s, o) { + o.listeners.forEach((l) => { + o.listeners.delete(l); + if (!deps.has(l)) return; + const ls = deps.get(l); + ls.delete(s); + if (ls.size > 1) return; + s.clear(...ls); + deps.delete(l); }); } }; -var D = "__dde_reactive"; -m.el = function(t, e) { - let r = M.mark({ type: "reactive" }, !0), n = r.end, o = d.D.createDocumentFragment(); - o.append(r, n); - let { current: c } = x, u = {}, a = (h) => { - if (!r.parentNode || !n.parentNode) - return R(t, a); - let v = u; - u = {}, x.push(c); - let l = e(h, function(s, f) { - let b; - return I(v, s) ? (b = v[s], delete v[s]) : b = f(), u[s] = b, b; +var key_reactive = "__dde_reactive"; +signal.el = function(s, map) { + const mark_start = createElement.mark({ type: "reactive" }, true); + const mark_end = mark_start.end; + const out = enviroment.D.createDocumentFragment(); + out.append(mark_start, mark_end); + const { current } = scope; + let cache = {}; + const reRenderReactiveElement = (v) => { + if (!mark_start.parentNode || !mark_end.parentNode) + return removeSignalListener(s, reRenderReactiveElement); + const cache_tmp = cache; + cache = {}; + scope.push(current); + let els = map(v, function useCache(key, fun) { + let value; + if (hasOwn(cache_tmp, key)) { + value = cache_tmp[key]; + delete cache_tmp[key]; + } else + value = fun(); + cache[key] = value; + return value; }); - x.pop(), Array.isArray(l) || (l = [l]); - let E = document.createComment(""); - l.push(E), r.after(...l); - let k; - for (; (k = E.nextSibling) && k !== n; ) - k.remove(); - E.remove(), r.isConnected && yt(c.host()); + scope.pop(); + if (!Array.isArray(els)) + els = [els]; + const el_start_rm = document.createComment(""); + els.push(el_start_rm); + mark_start.after(...els); + let el_r; + while ((el_r = el_start_rm.nextSibling) && el_r !== mark_end) + el_r.remove(); + el_start_rm.remove(); + if (mark_start.isConnected) + requestCleanUpReactives(current.host()); }; - return Q(t, a), ut(t, a, r, e), a(t()), o; + addSignalListener(s, reRenderReactiveElement); + removeSignalsFromElements(s, reRenderReactiveElement, mark_start, map); + reRenderReactiveElement(s()); + return out; }; -function yt(t) { - !t || !t[D] || (requestIdleCallback || setTimeout)(function() { - t[D] = t[D].filter(([e, r]) => r.isConnected ? !0 : (R(...e), !1)); +function requestCleanUpReactives(host) { + if (!host || !host[key_reactive]) return; + (requestIdleCallback || setTimeout)(function() { + host[key_reactive] = host[key_reactive].filter(([s, el]) => el.isConnected ? true : (removeSignalListener(...s), false)); }); } -var At = { - _set(t) { - this.value = t; +var observedAttributeActions = { + _set(value) { + this.value = value; } }; -function Ot(t) { - return function(e, r) { - let n = (...c) => c.length ? e.setAttribute(r, ...c) : K(n), o = ft(n, e.getAttribute(r), At); - return t[r] = o, o; +function observedAttribute(store) { + return function(instance, name) { + const varS = (...args) => !args.length ? read(varS) : instance.setAttribute(name, ...args); + const out = toSignal(varS, instance.getAttribute(name), observedAttributeActions); + store[name] = out; + return out; }; } -var G = "__dde_attributes"; -m.observedAttributes = function(t) { - let e = t[G] = {}, r = W(t, Ot(e)); - return _.attributeChanged(function({ detail: o }) { +var key_attributes = "__dde_attributes"; +signal.observedAttributes = function(element) { + const store = element[key_attributes] = {}; + const attrs = observedAttributes(element, observedAttribute(store)); + on.attributeChanged(function attributeChangeToSignal({ detail }) { /*! This maps attributes to signals (`S.observedAttributes`). * Investigate `__dde_attributes` key of the element.*/ - let [c, u] = o, a = this[G][c]; - if (a) return m.action(a, "_set", u); - })(t), _.disconnected(function() { + const [name, value] = detail; + const curr = this[key_attributes][name]; + if (curr) return signal.action(curr, "_set", value); + })(element); + on.disconnected(function() { /*! This removes all signals mapped to attributes (`S.observedAttributes`). * Investigate `__dde_attributes` key of the element.*/ - m.clear(...Object.values(this[G])); - })(t), r; + signal.clear(...Object.values(this[key_attributes])); + })(element); + return attrs; }; -var st = { - isSignal: U, - processReactiveAttribute(t, e, r, n) { - if (!U(r)) return r; - let o = (c) => { - if (!t.isConnected) - return R(r, o); - n(e, c); +var signals_config = { + isSignal, + processReactiveAttribute(element, key, attrs, set) { + if (!isSignal(attrs)) return attrs; + const l = (attr) => { + if (!element.isConnected) + return removeSignalListener(attrs, l); + set(key, attr); }; - return Q(r, o), ut(r, o, t, e), r(); + addSignalListener(attrs, l); + removeSignalsFromElements(attrs, l, element, key); + return attrs(); } }; -function ut(t, e, ...r) { - let { current: n } = x; - n.prevent || n.host(function(o) { - o[D] || (o[D] = [], _.disconnected( - () => ( - /*! - * Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?). - * You can investigate the `__dde_reactive` key of the element. - * */ - o[D].forEach(([[c, u]]) => R(c, u, c[p] && c[p].host && c[p].host() === o)) - ) - )(o)), o[D].push([[t, e], ...r]); +function removeSignalsFromElements(s, listener, ...notes) { + const { current } = scope; + if (current.prevent) return; + current.host(function(element) { + if (!element[key_reactive]) { + element[key_reactive] = []; + on.disconnected( + () => ( + /*! + * Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?). + * You can investigate the `__dde_reactive` key of the element. + * */ + element[key_reactive].forEach(([[s2, listener2]]) => removeSignalListener(s2, listener2, s2[mark] && s2[mark].host && s2[mark].host() === element)) + ) + )(element); + } + element[key_reactive].push([[s, listener], ...notes]); }); } -function it(t, e, r) { - let n = t ? () => K(n) : (...o) => o.length ? at(n, ...o) : K(n); - return ft(n, e, r, t); +function create(is_readonly, value, actions) { + const varS = is_readonly ? () => read(varS) : (...value2) => value2.length ? write(varS, ...value2) : read(varS); + return toSignal(varS, value, actions, is_readonly); } -var St = Object.assign(/* @__PURE__ */ Object.create(null), { +var protoSigal = Object.assign(/* @__PURE__ */ Object.create(null), { stopPropagation() { - this.skip = !0; + this.skip = true; } -}), V = class extends Error { +}); +var SignalDefined = class extends Error { constructor() { super(); - let [e, ...r] = this.stack.split(` -`), n = e.slice(e.indexOf("@"), e.indexOf(".js:") + 4); - this.stack = r.find((o) => !o.includes(n)); + const [curr, ...rest] = this.stack.split("\n"); + const curr_file = curr.slice(curr.indexOf("@"), curr.indexOf(".js:") + 4); + this.stack = rest.find((l) => !l.includes(curr_file)); } }; -function ft(t, e, r, n = !1) { - let o = []; - X(r) !== "[object Object]" && (r = {}); - let { onclear: c } = m.symbols; - r[c] && (o.push(r[c]), delete r[c]); - let { host: u } = x; - return Reflect.defineProperty(t, p, { - value: { - value: e, - actions: r, - onclear: o, - host: u, - listeners: /* @__PURE__ */ new Set(), - defined: new V().stack, - readonly: n - }, - enumerable: !1, - writable: !1, - configurable: !0 - }), t.toJSON = () => t(), t.valueOf = () => t[p] && t[p].value, Object.setPrototypeOf(t[p], St), t; -} -function Ct() { - return z[z.length - 1]; -} -function K(t) { - if (!t[p]) return; - let { value: e, listeners: r } = t[p], n = Ct(); - return n && r.add(n), g.has(n) && g.get(n).add(t), e; -} -function at(t, e, r) { - if (!t[p]) return; - let n = t[p]; - if (!(!r && n.value === e)) - return n.value = e, n.listeners.forEach((o) => o(e)), e; -} -function Q(t, e) { - if (t[p]) - return t[p].listeners.add(e); -} -function R(t, e, r) { - let n = t[p]; - if (!n) return; - let o = n.listeners.delete(e); - if (r && !n.listeners.size) { - if (m.clear(t), !g.has(n)) return o; - let c = g.get(n); - if (!g.has(c)) return o; - g.get(c).forEach((u) => R(u, c, !0)); +function toSignal(s, value, actions, readonly = false) { + const onclear = []; + if (typeOf(actions) !== "[object Object]") + actions = {}; + const { onclear: ocs } = signal.symbols; + if (actions[ocs]) { + onclear.push(actions[ocs]); + delete actions[ocs]; } - return o; + const { host } = scope; + Reflect.defineProperty(s, mark, { + value: { + value, + actions, + onclear, + host, + listeners: /* @__PURE__ */ new Set(), + defined: new SignalDefined().stack, + readonly + }, + enumerable: false, + writable: false, + configurable: true + }); + s.toJSON = () => s(); + s.valueOf = () => s[mark] && s[mark].value; + Object.setPrototypeOf(s[mark], protoSigal); + return s; +} +function currentContext() { + return stack_watch[stack_watch.length - 1]; +} +function read(s) { + if (!s[mark]) return; + const { value, listeners } = s[mark]; + const context = currentContext(); + if (context) listeners.add(context); + if (deps.has(context)) deps.get(context).add(s); + return value; +} +function write(s, value, force) { + if (!s[mark]) return; + const M = s[mark]; + if (!force && M.value === value) return; + M.value = value; + M.listeners.forEach((l) => l(value)); + return value; +} +function addSignalListener(s, listener) { + if (!s[mark]) return; + return s[mark].listeners.add(listener); +} +function removeSignalListener(s, listener, clear_when_empty) { + const M = s[mark]; + if (!M) return; + const out = M.listeners.delete(listener); + if (clear_when_empty && !M.listeners.size) { + signal.clear(s); + if (!deps.has(M)) return out; + const c = deps.get(M); + if (!deps.has(c)) return out; + deps.get(c).forEach((sig) => removeSignalListener(sig, c, true)); + } + return out; } // signals.js -H(st); +registerReactivity(signals_config); export { - m as S, - q as assign, - nt as assignAttribute, - lt as chainableAppend, - ht as classListDeclarative, - M as createElement, - jt as createElementNS, - It as customElementRender, - xt as customElementWithDDE, - Gt as dispatchEvent, - M as el, - jt as elNS, - bt as elementAttribute, - U as isSignal, - xt as lifecyclesToEvents, - _t as observedAttributes, - _ as on, - Mt as queue, - H as registerReactivity, - x as scope, - m as signal, - Pt as simulateSlots + signal as S, + assign, + assignAttribute, + chainableAppend, + classListDeclarative, + createElement, + createElementNS, + customElementRender, + lifecyclesToEvents as customElementWithDDE, + dispatchEvent, + createElement as el, + createElementNS as elNS, + elementAttribute, + isSignal, + lifecyclesToEvents, + observedAttributes2 as observedAttributes, + on, + queue, + registerReactivity, + scope, + signal, + simulateSlots }; diff --git a/dist/esm.js b/dist/esm.js index d8bf34e..dbbb6fa 100644 --- a/dist/esm.js +++ b/dist/esm.js @@ -1,448 +1,583 @@ // src/signals-common.js -var A = { - isSignal(t) { - return !1; +var signals_global = { + isSignal(attributes) { + return false; }, - processReactiveAttribute(t, e, n, r) { - return n; + processReactiveAttribute(obj, key, attr, set) { + return attr; } }; -function Z(t, e = !0) { - return e ? Object.assign(A, t) : (Object.setPrototypeOf(t, A), t); +function registerReactivity(def, global = true) { + if (global) return Object.assign(signals_global, def); + Object.setPrototypeOf(def, signals_global); + return def; } -function S(t) { - return A.isPrototypeOf(t) && t !== A ? t : A; +function signals(_this) { + return signals_global.isPrototypeOf(_this) && _this !== signals_global ? _this : signals_global; } // src/helpers.js -function m(t) { - return typeof t > "u"; +function isUndef(value) { + return typeof value === "undefined"; } -function L(t, e) { - if (!t || !(t instanceof AbortSignal)) - return !0; - if (!t.aborted) - return t.addEventListener("abort", e), function() { - t.removeEventListener("abort", e); - }; +function onAbort(signal, listener) { + if (!signal || !(signal instanceof AbortSignal)) + return true; + if (signal.aborted) + return; + signal.addEventListener("abort", listener); + return function cleanUp() { + signal.removeEventListener("abort", listener); + }; } -function W(t, e) { - let { observedAttributes: n = [] } = t.constructor; - return n.reduce(function(r, o) { - return r[G(o)] = e(t, o), r; +function observedAttributes(instance, observedAttribute) { + const { observedAttributes: observedAttributes3 = [] } = instance.constructor; + return observedAttributes3.reduce(function(out, name) { + out[kebabToCamel(name)] = observedAttribute(instance, name); + return out; }, {}); } -function G(t) { - return t.replace(/-./g, (e) => e[1].toUpperCase()); +function kebabToCamel(name) { + return name.replace(/-./g, (x) => x[1].toUpperCase()); } // src/dom-common.js -var f = { - setDeleteAttr: V, +var enviroment = { + setDeleteAttr, ssr: "", D: globalThis.document, F: globalThis.DocumentFragment, H: globalThis.HTMLElement, S: globalThis.SVGElement, M: globalThis.MutationObserver, - q: (t) => t || Promise.resolve() + q: (p) => p || Promise.resolve() }; -function V(t, e, n) { - if (Reflect.set(t, e, n), !!m(n)) { - if (Reflect.deleteProperty(t, e), t instanceof f.H && t.getAttribute(e) === "undefined") - return t.removeAttribute(e); - if (Reflect.get(t, e) === "undefined") - return Reflect.set(t, e, ""); - } +function setDeleteAttr(obj, prop, val) { + Reflect.set(obj, prop, val); + if (!isUndef(val)) return; + Reflect.deleteProperty(obj, prop); + if (obj instanceof enviroment.H && obj.getAttribute(prop) === "undefined") + return obj.removeAttribute(prop); + if (Reflect.get(obj, prop) === "undefined") + return Reflect.set(obj, prop, ""); } -var x = "__dde_lifecyclesToEvents", v = "dde:connected", w = "dde:disconnected", C = "dde:attributeChanged"; +var keyLTE = "__dde_lifecyclesToEvents"; +var evc = "dde:connected"; +var evd = "dde:disconnected"; +var eva = "dde:attributeChanged"; // src/dom.js -function dt(t) { - return f.q(t); +function queue(promise) { + return enviroment.q(promise); } -var g = [{ +var scopes = [{ get scope() { - return f.D.body; + return enviroment.D.body; }, - host: (t) => t ? t(f.D.body) : f.D.body, - prevent: !0 -}], O = { + host: (c) => c ? c(enviroment.D.body) : enviroment.D.body, + prevent: true +}]; +var scope = { get current() { - return g[g.length - 1]; + return scopes[scopes.length - 1]; }, get host() { return this.current.host; }, preventDefault() { - let { current: t } = this; - return t.prevent = !0, t; + const { current } = this; + current.prevent = true; + return current; }, get state() { - return [...g]; + return [...scopes]; }, - push(t = {}) { - return g.push(Object.assign({}, this.current, { prevent: !1 }, t)); + push(s = {}) { + return scopes.push(Object.assign({}, this.current, { prevent: false }, s)); }, pushRoot() { - return g.push(g[0]); + return scopes.push(scopes[0]); }, pop() { - if (g.length !== 1) - return g.pop(); + if (scopes.length === 1) return; + return scopes.pop(); } }; -function q(...t) { - return this.appendOriginal(...t), this; +function append(...els) { + this.appendOriginal(...els); + return this; } -function J(t) { - return t.append === q || (t.appendOriginal = t.append, t.append = q), t; +function chainableAppend(el) { + if (el.append === append) return el; + el.appendOriginal = el.append; + el.append = append; + return el; } -var T; -function P(t, e, ...n) { - let r = S(this), o = 0, c, a; - switch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) { - case typeof t == "function": { - o = 1; - let d = (...l) => l.length ? (o === 1 ? n.unshift(...l) : l.forEach((E) => E(a)), void 0) : a; - O.push({ scope: t, host: d }), c = t(e || void 0); - let p = c instanceof f.F; - if (c.nodeName === "#comment") break; - let b = P.mark({ +var namespace; +function createElement(tag, attributes, ...addons) { + const s = signals(this); + let scoped = 0; + let el, el_host; + if (Object(attributes) !== attributes || s.isSignal(attributes)) + attributes = { textContent: attributes }; + switch (true) { + case typeof tag === "function": { + scoped = 1; + const host = (...c) => !c.length ? el_host : (scoped === 1 ? addons.unshift(...c) : c.forEach((c2) => c2(el_host)), void 0); + scope.push({ scope: tag, host }); + el = tag(attributes || void 0); + const is_fragment = el instanceof enviroment.F; + if (el.nodeName === "#comment") break; + const el_mark = createElement.mark({ type: "component", - name: t.name, - host: p ? "this" : "parentElement" + name: tag.name, + host: is_fragment ? "this" : "parentElement" }); - c.prepend(b), p && (a = b); + el.prepend(el_mark); + if (is_fragment) el_host = el_mark; break; } - case t === "#text": - c = R.call(this, f.D.createTextNode(""), e); + case tag === "#text": + el = assign.call(this, enviroment.D.createTextNode(""), attributes); break; - case (t === "<>" || !t): - c = R.call(this, f.D.createDocumentFragment(), e); + case (tag === "<>" || !tag): + el = assign.call(this, enviroment.D.createDocumentFragment(), attributes); break; - case !!T: - c = R.call(this, f.D.createElementNS(T, t), e); + case Boolean(namespace): + el = assign.call(this, enviroment.D.createElementNS(namespace, tag), attributes); break; - case !c: - c = R.call(this, f.D.createElement(t), e); + case !el: + el = assign.call(this, enviroment.D.createElement(tag), attributes); } - return J(c), a || (a = c), n.forEach((d) => d(a)), o && O.pop(), o = 2, c; + chainableAppend(el); + if (!el_host) el_host = el; + addons.forEach((c) => c(el_host)); + if (scoped) scope.pop(); + scoped = 2; + return el; } -P.mark = function(t, e = !1) { - t = Object.entries(t).map(([o, c]) => o + `="${c}"`).join(" "); - let n = e ? "" : "/", r = f.D.createComment(``); - return e && (r.end = f.D.createComment("")), r; +createElement.mark = function(attrs, is_open = false) { + attrs = Object.entries(attrs).map(([n, v]) => n + `="${v}"`).join(" "); + const end = is_open ? "" : "/"; + const out = enviroment.D.createComment(``); + if (is_open) out.end = enviroment.D.createComment(""); + return out; }; -function pt(t) { - let e = this; - return function(...r) { - T = t; - let o = P.call(e, ...r); - return T = void 0, o; +function createElementNS(ns) { + const _this = this; + return function createElementNSCurried(...rest) { + namespace = ns; + const el = createElement.call(_this, ...rest); + namespace = void 0; + return el; }; } -function lt(t, e = t) { - let n = "\xB9\u2070", r = "\u2713", o = Object.fromEntries( - Array.from(e.querySelectorAll("slot")).filter((c) => !c.name.endsWith(n)).map((c) => [c.name += n, c]) +function simulateSlots(element, root = element) { + const mark_e = "\xB9\u2070", mark_s = "\u2713"; + const slots = Object.fromEntries( + Array.from(root.querySelectorAll("slot")).filter((s) => !s.name.endsWith(mark_e)).map((s) => [s.name += mark_e, s]) ); - if (t.append = new Proxy(t.append, { - apply(c, a, d) { - if (d[0] === e) return c.apply(t, d); - for (let p of d) { - let b = (p.slot || "") + n; + element.append = new Proxy(element.append, { + apply(orig, _, els) { + if (els[0] === root) return orig.apply(element, els); + for (const el of els) { + const name = (el.slot || "") + mark_e; try { - Q(p, "remove", "slot"); - } catch { + elementAttribute(el, "remove", "slot"); + } catch (_error) { } - let l = o[b]; - if (!l) return; - l.name.startsWith(r) || (l.childNodes.forEach((E) => E.remove()), l.name = r + b), l.append(p); + const slot = slots[name]; + if (!slot) return; + if (!slot.name.startsWith(mark_s)) { + slot.childNodes.forEach((c) => c.remove()); + slot.name = mark_s + name; + } + slot.append(el); } - return t.append = c, t; + element.append = orig; + return element; } - }), t !== e) { - let c = Array.from(t.childNodes); - t.append(...c); + }); + if (element !== root) { + const els = Array.from(element.childNodes); + element.append(...els); } - return e; + return root; } -var N = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: $ } = f; -function R(t, ...e) { - if (!e.length) return t; - N.set(t, H(t, this)); - for (let [n, r] of Object.entries(Object.assign({}, ...e))) - U.call(this, t, n, r); - return N.delete(t), t; +var assign_context = /* @__PURE__ */ new WeakMap(); +var { setDeleteAttr: setDeleteAttr2 } = enviroment; +function assign(element, ...attributes) { + if (!attributes.length) return element; + assign_context.set(element, assignContext(element, this)); + for (const [key, value] of Object.entries(Object.assign({}, ...attributes))) + assignAttribute.call(this, element, key, value); + assign_context.delete(element); + return element; } -function U(t, e, n) { - let { setRemoveAttr: r, s: o } = H(t, this), c = this; - n = o.processReactiveAttribute( - t, - e, - n, - (d, p) => U.call(c, t, d, p) +function assignAttribute(element, key, value) { + const { setRemoveAttr, s } = assignContext(element, this); + const _this = this; + value = s.processReactiveAttribute( + element, + key, + value, + (key2, value2) => assignAttribute.call(_this, element, key2, value2) ); - let [a] = e; - if (a === "=") return r(e.slice(1), n); - if (a === ".") return F(t, e.slice(1), n); - if (/(aria|data)([A-Z])/.test(e)) - return e = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(), r(e, n); - switch (e === "className" && (e = "class"), e) { + const [k] = key; + if ("=" === k) return setRemoveAttr(key.slice(1), value); + if ("." === k) return setDelete(element, key.slice(1), value); + if (/(aria|data)([A-Z])/.test(key)) { + key = key.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(); + return setRemoveAttr(key, value); + } + if ("className" === key) key = "class"; + switch (key) { case "xlink:href": - return r(e, n, "http://www.w3.org/1999/xlink"); + return setRemoveAttr(key, value, "http://www.w3.org/1999/xlink"); case "textContent": - return $(t, e, n); + return setDeleteAttr2(element, key, value); case "style": - if (typeof n != "object") break; + if (typeof value !== "object") break; /* falls through */ case "dataset": - return M(o, n, F.bind(null, t[e])); + return forEachEntries(s, key, element, value, setDelete.bind(null, element[key])); case "ariaset": - return M(o, n, (d, p) => r("aria-" + d, p)); + return forEachEntries(s, key, element, value, (key2, val) => setRemoveAttr("aria-" + key2, val)); case "classList": - return K.call(c, t, n); + return classListDeclarative.call(_this, element, value); } - return X(t, e) ? $(t, e, n) : r(e, n); + return isPropSetter(element, key) ? setDeleteAttr2(element, key, value) : setRemoveAttr(key, value); } -function H(t, e) { - if (N.has(t)) return N.get(t); - let r = (t instanceof f.S ? tt : Y).bind(null, t, "Attribute"), o = S(e); - return { setRemoveAttr: r, s: o }; +function assignContext(element, _this) { + if (assign_context.has(element)) return assign_context.get(element); + const is_svg = element instanceof enviroment.S; + const setRemoveAttr = (is_svg ? setRemoveNS : setRemove).bind(null, element, "Attribute"); + const s = signals(_this); + return { setRemoveAttr, s }; } -function K(t, e) { - let n = S(this); - return M( - n, - e, - (r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o) - ), t; +function classListDeclarative(element, toggle) { + const s = signals(this); + forEachEntries( + s, + "classList", + element, + toggle, + (class_name, val) => element.classList.toggle(class_name, val === -1 ? void 0 : Boolean(val)) + ); + return element; } -function Q(t, e, n, r) { - return t instanceof f.H ? t[e + "Attribute"](n, r) : t[e + "AttributeNS"](null, n, r); +function elementAttribute(element, op, key, value) { + if (element instanceof enviroment.H) + return element[op + "Attribute"](key, value); + return element[op + "AttributeNS"](null, key, value); } -function X(t, e) { - if (!(e in t)) return !1; - let n = z(t, e); - return !m(n.set); +function isPropSetter(el, key) { + if (!(key in el)) return false; + const des = getPropDescriptor(el, key); + return !isUndef(des.set); } -function z(t, e) { - if (t = Object.getPrototypeOf(t), !t) return {}; - let n = Object.getOwnPropertyDescriptor(t, e); - return n || z(t, e); +function getPropDescriptor(p, key) { + p = Object.getPrototypeOf(p); + if (!p) return {}; + const des = Object.getOwnPropertyDescriptor(p, key); + if (!des) return getPropDescriptor(p, key); + return des; } -function M(t, e, n) { - if (!(typeof e != "object" || e === null)) - return Object.entries(e).forEach(function([o, c]) { - o && (c = t.processReactiveAttribute(e, o, c, n), n(o, c)); - }); +function forEachEntries(s, target, element, obj, cb) { + const S = String; + if (typeof obj !== "object" || obj === null) return; + return Object.entries(obj).forEach(function process([key, val]) { + if (!key) return; + key = new S(key); + key.target = target; + val = s.processReactiveAttribute(element, key, val, cb); + cb(key, val); + }); } -function Y(t, e, n, r) { - return t[(m(r) ? "remove" : "set") + e](n, r); +function setRemove(obj, prop, key, val) { + return obj[(isUndef(val) ? "remove" : "set") + prop](key, val); } -function tt(t, e, n, r, o = null) { - return t[(m(r) ? "remove" : "set") + e + "NS"](o, n, r); +function setRemoveNS(obj, prop, key, val, ns = null) { + return obj[(isUndef(val) ? "remove" : "set") + prop + "NS"](ns, key, val); } -function F(t, e, n) { - if (Reflect.set(t, e, n), !!m(n)) - return Reflect.deleteProperty(t, e); +function setDelete(obj, key, val) { + Reflect.set(obj, key, val); + if (!isUndef(val)) return; + return Reflect.deleteProperty(obj, key); } // src/events-observer.js -var y = f.M ? et() : new Proxy({}, { +var c_ch_o = enviroment.M ? connectionsChangesObserverConstructor() : new Proxy({}, { get() { return () => { }; } }); -function et() { - let t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) { - for (let i of u) - if (i.type === "childList") { - if (l(i.addedNodes, !0)) { - s(); - continue; - } - E(i.removedNodes, !0) && s(); +function connectionsChangesObserverConstructor() { + const store = /* @__PURE__ */ new Map(); + let is_observing = false; + const observerListener = (stop2) => function(mutations) { + for (const mutation of mutations) { + if (mutation.type !== "childList") continue; + if (observerAdded(mutation.addedNodes, true)) { + stop2(); + continue; } - }, r = new f.M(n(d)); - return { - observe(s) { - let u = new f.M(n(() => { - })); - return u.observe(s, { childList: !0, subtree: !0 }), () => u.disconnect(); - }, - onConnected(s, u) { - a(); - let i = c(s); - i.connected.has(u) || (i.connected.add(u), i.length_c += 1); - }, - offConnected(s, u) { - if (!t.has(s)) return; - let i = t.get(s); - i.connected.has(u) && (i.connected.delete(u), i.length_c -= 1, o(s, i)); - }, - onDisconnected(s, u) { - a(); - let i = c(s); - i.disconnected.has(u) || (i.disconnected.add(u), i.length_d += 1); - }, - offDisconnected(s, u) { - if (!t.has(s)) return; - let i = t.get(s); - i.disconnected.has(u) && (i.disconnected.delete(u), i.length_d -= 1, o(s, i)); + if (observerRemoved(mutation.removedNodes, true)) + stop2(); } }; - function o(s, u) { - u.length_c || u.length_d || (t.delete(s), d()); + const observer = new enviroment.M(observerListener(stop)); + return { + observe(element) { + const o = new enviroment.M(observerListener(() => { + })); + o.observe(element, { childList: true, subtree: true }); + return () => o.disconnect(); + }, + onConnected(element, listener) { + start(); + const listeners = getElementStore(element); + if (listeners.connected.has(listener)) return; + listeners.connected.add(listener); + listeners.length_c += 1; + }, + offConnected(element, listener) { + if (!store.has(element)) return; + const ls = store.get(element); + if (!ls.connected.has(listener)) return; + ls.connected.delete(listener); + ls.length_c -= 1; + cleanWhenOff(element, ls); + }, + onDisconnected(element, listener) { + start(); + const listeners = getElementStore(element); + if (listeners.disconnected.has(listener)) return; + listeners.disconnected.add(listener); + listeners.length_d += 1; + }, + offDisconnected(element, listener) { + if (!store.has(element)) return; + const ls = store.get(element); + if (!ls.disconnected.has(listener)) return; + ls.disconnected.delete(listener); + ls.length_d -= 1; + cleanWhenOff(element, ls); + } + }; + function cleanWhenOff(element, ls) { + if (ls.length_c || ls.length_d) + return; + store.delete(element); + stop(); } - function c(s) { - if (t.has(s)) return t.get(s); - let u = { + function getElementStore(element) { + if (store.has(element)) return store.get(element); + const out = { connected: /* @__PURE__ */ new WeakSet(), length_c: 0, disconnected: /* @__PURE__ */ new WeakSet(), length_d: 0 }; - return t.set(s, u), u; + store.set(element, out); + return out; } - function a() { - e || (e = !0, r.observe(f.D.body, { childList: !0, subtree: !0 })); + function start() { + if (is_observing) return; + is_observing = true; + observer.observe(enviroment.D.body, { childList: true, subtree: true }); } - function d() { - !e || t.size || (e = !1, r.disconnect()); + function stop() { + if (!is_observing || store.size) return; + is_observing = false; + observer.disconnect(); } - function p() { - return new Promise(function(s) { - (requestIdleCallback || requestAnimationFrame)(s); + function requestIdle() { + return new Promise(function(resolve) { + (requestIdleCallback || requestAnimationFrame)(resolve); }); } - async function b(s) { - t.size > 30 && await p(); - let u = []; - if (!(s instanceof Node)) return u; - for (let i of t.keys()) - i === s || !(i instanceof Node) || s.contains(i) && u.push(i); - return u; - } - function l(s, u) { - let i = !1; - for (let h of s) { - if (u && b(h).then(l), !t.has(h)) continue; - let _ = t.get(h); - _.length_c && (h.dispatchEvent(new Event(v)), _.connected = /* @__PURE__ */ new WeakSet(), _.length_c = 0, _.length_d || t.delete(h), i = !0); + async function collectChildren(element) { + if (store.size > 30) + await requestIdle(); + const out = []; + if (!(element instanceof Node)) return out; + for (const el of store.keys()) { + if (el === element || !(el instanceof Node)) continue; + if (element.contains(el)) + out.push(el); } - return i; + return out; } - function E(s, u) { - let i = !1; - for (let h of s) - u && b(h).then(E), !(!t.has(h) || !t.get(h).length_d) && ((globalThis.queueMicrotask || setTimeout)(I(h)), i = !0); - return i; + function observerAdded(addedNodes, is_root) { + let out = false; + for (const element of addedNodes) { + if (is_root) collectChildren(element).then(observerAdded); + if (!store.has(element)) continue; + const ls = store.get(element); + if (!ls.length_c) continue; + element.dispatchEvent(new Event(evc)); + ls.connected = /* @__PURE__ */ new WeakSet(); + ls.length_c = 0; + if (!ls.length_d) store.delete(element); + out = true; + } + return out; } - function I(s) { + function observerRemoved(removedNodes, is_root) { + let out = false; + for (const element of removedNodes) { + if (is_root) collectChildren(element).then(observerRemoved); + if (!store.has(element)) continue; + const ls = store.get(element); + if (!ls.length_d) continue; + (globalThis.queueMicrotask || setTimeout)(dispatchRemove(element)); + out = true; + } + return out; + } + function dispatchRemove(element) { return () => { - s.isConnected || (s.dispatchEvent(new Event(w)), t.delete(s)); + if (element.isConnected) return; + element.dispatchEvent(new Event(evd)); + store.delete(element); }; } } // src/customElement.js -function wt(t, e, n = rt) { - let r = t.host || t; - O.push({ - scope: r, - host: (...a) => a.length ? a.forEach((d) => d(r)) : r - }), typeof n == "function" && (n = n.call(r, r)); - let o = r[x]; - o || nt(r); - let c = e.call(r, n); - return o || r.dispatchEvent(new Event(v)), t.nodeType === 11 && typeof t.mode == "string" && r.addEventListener(w, y.observe(t), { once: !0 }), O.pop(), t.append(c); +function customElementRender(target, render, props = observedAttributes2) { + const custom_element = target.host || target; + scope.push({ + scope: custom_element, + host: (...c) => c.length ? c.forEach((c2) => c2(custom_element)) : custom_element + }); + if (typeof props === "function") props = props.call(custom_element, custom_element); + const is_lte = custom_element[keyLTE]; + if (!is_lte) lifecyclesToEvents(custom_element); + const out = render.call(custom_element, props); + if (!is_lte) custom_element.dispatchEvent(new Event(evc)); + if (target.nodeType === 11 && typeof target.mode === "string") + custom_element.addEventListener(evd, c_ch_o.observe(target), { once: true }); + scope.pop(); + return target.append(out); } -function nt(t) { - return k(t.prototype, "connectedCallback", function(e, n, r) { - e.apply(n, r), n.dispatchEvent(new Event(v)); - }), k(t.prototype, "disconnectedCallback", function(e, n, r) { - e.apply(n, r), (globalThis.queueMicrotask || setTimeout)( - () => !n.isConnected && n.dispatchEvent(new Event(w)) +function lifecyclesToEvents(class_declaration) { + wrapMethod(class_declaration.prototype, "connectedCallback", function(target, thisArg, detail) { + target.apply(thisArg, detail); + thisArg.dispatchEvent(new Event(evc)); + }); + wrapMethod(class_declaration.prototype, "disconnectedCallback", function(target, thisArg, detail) { + target.apply(thisArg, detail); + (globalThis.queueMicrotask || setTimeout)( + () => !thisArg.isConnected && thisArg.dispatchEvent(new Event(evd)) ); - }), k(t.prototype, "attributeChangedCallback", function(e, n, r) { - let [o, , c] = r; - n.dispatchEvent(new CustomEvent(C, { - detail: [o, c] - })), e.apply(n, r); - }), t.prototype[x] = !0, t; + }); + wrapMethod(class_declaration.prototype, "attributeChangedCallback", function(target, thisArg, detail) { + const [attribute, , value] = detail; + thisArg.dispatchEvent(new CustomEvent(eva, { + detail: [attribute, value] + })); + target.apply(thisArg, detail); + }); + class_declaration.prototype[keyLTE] = true; + return class_declaration; } -function k(t, e, n) { - t[e] = new Proxy(t[e] || (() => { - }), { apply: n }); +function wrapMethod(obj, method, apply) { + obj[method] = new Proxy(obj[method] || (() => { + }), { apply }); } -function rt(t) { - return W(t, (e, n) => e.getAttribute(n)); +function observedAttributes2(instance) { + return observedAttributes(instance, (i, n) => i.getAttribute(n)); } // src/events.js -function Ct(t, e, n) { - return e || (e = {}), function(o, ...c) { - n && (c.unshift(o), o = typeof n == "function" ? n() : n); - let a = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e); - return o.dispatchEvent(a); +function dispatchEvent(name, options, host) { + if (!options) options = {}; + return function dispatch(element, ...d) { + if (host) { + d.unshift(element); + element = typeof host === "function" ? host() : host; + } + const event = d.length ? new CustomEvent(name, Object.assign({ detail: d[0] }, options)) : new Event(name, options); + return element.dispatchEvent(event); }; } -function D(t, e, n) { - return function(o) { - return o.addEventListener(t, e, n), o; +function on(event, listener, options) { + return function registerElement(element) { + element.addEventListener(event, listener, options); + return element; }; } -var B = (t) => Object.assign({}, typeof t == "object" ? t : null, { once: !0 }); -D.connected = function(t, e) { - return e = B(e), function(r) { - return r.addEventListener(v, t, e), r[x] ? r : r.isConnected ? (r.dispatchEvent(new Event(v)), r) : (L(e.signal, () => y.offConnected(r, t)) && y.onConnected(r, t), r); +var lifeOptions = (obj) => Object.assign({}, typeof obj === "object" ? obj : null, { once: true }); +on.connected = function(listener, options) { + options = lifeOptions(options); + return function registerElement(element) { + element.addEventListener(evc, listener, options); + if (element[keyLTE]) return element; + if (element.isConnected) return element.dispatchEvent(new Event(evc)), element; + const c = onAbort(options.signal, () => c_ch_o.offConnected(element, listener)); + if (c) c_ch_o.onConnected(element, listener); + return element; }; }; -D.disconnected = function(t, e) { - return e = B(e), function(r) { - return r.addEventListener(w, t, e), r[x] || L(e.signal, () => y.offDisconnected(r, t)) && y.onDisconnected(r, t), r; +on.disconnected = function(listener, options) { + options = lifeOptions(options); + return function registerElement(element) { + element.addEventListener(evd, listener, options); + if (element[keyLTE]) return element; + const c = onAbort(options.signal, () => c_ch_o.offDisconnected(element, listener)); + if (c) c_ch_o.onDisconnected(element, listener); + return element; }; }; -var j = /* @__PURE__ */ new WeakMap(); -D.disconnectedAsAbort = function(t) { - if (j.has(t)) return j.get(t); - let e = new AbortController(); - return j.set(t, e), t(D.disconnected(() => e.abort())), e; +var store_abort = /* @__PURE__ */ new WeakMap(); +on.disconnectedAsAbort = function(host) { + if (store_abort.has(host)) return store_abort.get(host); + const a = new AbortController(); + store_abort.set(host, a); + host(on.disconnected(() => a.abort())); + return a; }; -var ot = /* @__PURE__ */ new WeakSet(); -D.attributeChanged = function(t, e) { - return typeof e != "object" && (e = {}), function(r) { - if (r.addEventListener(C, t, e), r[x] || ot.has(r) || !f.M) return r; - let o = new f.M(function(a) { - for (let { attributeName: d, target: p } of a) - p.dispatchEvent( - new CustomEvent(C, { detail: [d, p.getAttribute(d)] }) +var els_attribute_store = /* @__PURE__ */ new WeakSet(); +on.attributeChanged = function(listener, options) { + if (typeof options !== "object") + options = {}; + return function registerElement(element) { + element.addEventListener(eva, listener, options); + if (element[keyLTE] || els_attribute_store.has(element)) + return element; + if (!enviroment.M) return element; + const observer = new enviroment.M(function(mutations) { + for (const { attributeName, target } of mutations) + target.dispatchEvent( + new CustomEvent(eva, { detail: [attributeName, target.getAttribute(attributeName)] }) ); }); - return L(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r; + const c = onAbort(options.signal, () => observer.disconnect()); + if (c) observer.observe(element, { attributes: true }); + return element; }; }; export { - R as assign, - U as assignAttribute, - J as chainableAppend, - K as classListDeclarative, - P as createElement, - pt as createElementNS, - wt as customElementRender, - nt as customElementWithDDE, - Ct as dispatchEvent, - P as el, - pt as elNS, - Q as elementAttribute, - nt as lifecyclesToEvents, - rt as observedAttributes, - D as on, - dt as queue, - Z as registerReactivity, - O as scope, - lt as simulateSlots + assign, + assignAttribute, + chainableAppend, + classListDeclarative, + createElement, + createElementNS, + customElementRender, + lifecyclesToEvents as customElementWithDDE, + dispatchEvent, + createElement as el, + createElementNS as elNS, + elementAttribute, + lifecyclesToEvents, + observedAttributes2 as observedAttributes, + on, + queue, + registerReactivity, + scope, + simulateSlots }; diff --git a/examples/components/fullNameComponent.js b/examples/components/fullNameComponent.js index cae66ab..3ba4816 100644 --- a/examples/components/fullNameComponent.js +++ b/examples/components/fullNameComponent.js @@ -15,10 +15,14 @@ export function fullNameComponent(){ on.disconnected(()=> console.log(fullNameComponent)) ); + const count= S(0); + setInterval(()=> count(count()+1), 5000); const style= { height: "80px", display: "block", fill: "currentColor" }; const elSVG= elNS("http://www.w3.org/2000/svg"); return el("div", { className }).append( el("h2", "Simple form:"), + el("p", { textContent: S(()=> "Count: "+count()), + dataset: { count }, classList: { count: S(() => count()%2 === 0) } }), el("form", { onsubmit: ev=> ev.preventDefault() }).append( ...name.map((v, i)=> el("label", labels[i]).append( diff --git a/src/dom.js b/src/dom.js index 0daccff..9e07785 100644 --- a/src/dom.js +++ b/src/dom.js @@ -162,9 +162,9 @@ export function assignAttribute(element, key, value){ if(typeof value!=="object") break; /* falls through */ case "dataset": - return forEachEntries(s, value, setDelete.bind(null, element[key])); + return forEachEntries(s, key, element, value, setDelete.bind(null, element[key])); case "ariaset": - return forEachEntries(s, value, (key, val)=> setRemoveAttr("aria-"+key, val)); + return forEachEntries(s, key, element, value, (key, val)=> setRemoveAttr("aria-"+key, val)); case "classList": return classListDeclarative.call(_this, element, value); } @@ -179,9 +179,9 @@ function assignContext(element, _this){ } export function classListDeclarative(element, toggle){ const s= signals(this); - forEachEntries(s, toggle, + forEachEntries(s, "classList", element, toggle, (class_name, val)=> - element.classList.toggle(class_name, val===-1 ? undefined : Boolean(val))); + element.classList.toggle(class_name, val===-1 ? undefined : Boolean(val)) ); return element; } export function elementAttribute(element, op, key, value){ @@ -205,13 +205,21 @@ function getPropDescriptor(p, key){ } /** - * @template {Record} T @param {object} s @param {T} obj @param {(param: [ keyof T, T[keyof T] ])=> void} cb + * @template {Record} T + * @param {object} s + * @param {string} target + * @param {Element} element + * @param {T} obj + * @param {(param: [ keyof T, T[keyof T] ])=> void} cb * */ -function forEachEntries(s, obj, cb){ +function forEachEntries(s, target, element, obj, cb){ + const S = String; if(typeof obj !== "object" || obj===null) return; return Object.entries(obj).forEach(function process([ key, val ]){ if(!key) return; - val= s.processReactiveAttribute(obj, key, val, cb); + key = new S(key); + key.target = target; + val= s.processReactiveAttribute(element, key, val, cb); cb(key, val); }); }