@elurjs/core 3.5.0

package/dist/lib/devtools.js

@@ -0,0 +1,419 @@
+import { _setSignalDebugHooks as e } from "./signals.js";
+import { _setComponentDebugHooks as t } from "./lifecycle.js";
+import { _debugGetRouterInternal as n } from "./router.js";
+//#region src/elur/devtools.ts
+var r = {
+	enabled: !1,
+	activeTab: "signals",
+	renderedTab: null,
+	refreshId: null,
+	root: null,
+	panel: null,
+	content: null,
+	dispose: null,
+	renderKeys: {
+		signals: "",
+		components: "",
+		router: ""
+	},
+	scrollMemo: {
+		signals: {
+			top: 0,
+			left: 0
+		},
+		components: {
+			top: 0,
+			left: 0
+		},
+		router: {
+			top: 0,
+			left: 0
+		}
+	}
+}, i = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new WeakMap(), o = 1, s = 50, c = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new Map(), u = [], d = 1;
+function f(e) {
+	return typeof WeakRef < "u" ? new WeakRef(e) : { deref: () => e };
+}
+function p(e) {
+	return typeof WeakRef < "u" ? new WeakRef(e) : { deref: () => e };
+}
+function m(e) {
+	e.history.length > s && e.history.splice(0, e.history.length - s);
+}
+function h(e, t) {
+	let n = a.get(e);
+	if (n) return m(n), n;
+	let r = Date.now(), s = {
+		id: o++,
+		createdAt: r,
+		lastUpdated: r,
+		history: [{
+			at: r,
+			value: t
+		}]
+	};
+	return a.set(e, s), i.add(f(e)), s;
+}
+function g() {
+	let e = [];
+	for (let t of Array.from(i)) {
+		let n = t.deref();
+		if (!n) {
+			i.delete(t);
+			continue;
+		}
+		let r = a.get(n);
+		if (!r) continue;
+		let o = n._subs?.size ?? 0;
+		e.push({
+			id: r.id,
+			value: n.peek(),
+			subscriberCount: o,
+			createdAt: r.createdAt,
+			lastUpdated: r.lastUpdated,
+			history: r.history.slice()
+		});
+	}
+	return e.sort((e, t) => t.lastUpdated - e.lastUpdated), e;
+}
+function _(e) {
+	let t = e._debugName;
+	if (t && t.trim()) return t;
+	let n = e.constructor;
+	return n?.name && n.name.trim() ? n.name : "AnonymousComponent";
+}
+function v(e) {
+	let t = e._slots;
+	return t instanceof Map ? Array.from(t.keys()).map((e) => String(e)) : [];
+}
+function y(e) {
+	let t = {};
+	for (let n of Object.keys(e)) {
+		if (n === "__isElurComponent" || n === "children" || n === "_debugName" || n.startsWith("_")) continue;
+		let r = e[n];
+		typeof r != "function" && (t[n] = r);
+	}
+	return t;
+}
+function b(e) {
+	if (!e) return [];
+	if (e === "*") return ["*"];
+	let t = e.split("/").filter(Boolean), n = [], r = "";
+	for (let e of t) r += "/" + e, n.push(r);
+	return n.length > 0 ? n : ["/"];
+}
+function x() {
+	let e = [];
+	for (let [t, n] of l) {
+		let r = n.ref.deref();
+		if (!r) {
+			l.delete(t);
+			continue;
+		}
+		n.debugName = _(r), n.hasDefaultSlot = r.children != null, n.slotNames = v(r), n.props = y(r), e.push({
+			id: n.id,
+			parentId: n.parentId,
+			debugName: n.debugName,
+			mountedAt: n.mountedAt,
+			hasDefaultSlot: n.hasDefaultSlot,
+			slotNames: [...n.slotNames],
+			props: { ...n.props }
+		});
+	}
+	return e.sort((e, t) => e.id - t.id), e;
+}
+function S(e) {
+	let t = [e];
+	for (; t.length > 0;) {
+		let e = t.pop();
+		for (let [n, r] of l) r.parentId === e && t.push(n);
+		l.delete(e);
+	}
+}
+function C() {
+	i.clear(), a = /* @__PURE__ */ new WeakMap(), o = 1, c = /* @__PURE__ */ new WeakMap(), l.clear(), u.length = 0, d = 1;
+}
+function w(e) {
+	if (typeof e == "string") return e;
+	if (typeof e == "number" || typeof e == "boolean" || e == null) return String(e);
+	try {
+		return JSON.stringify(e);
+	} catch {
+		return Object.prototype.toString.call(e);
+	}
+}
+function T(e) {
+	return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function E(e, t = 90) {
+	let n = w(e);
+	return n.length <= t ? n : n.slice(0, t - 1) + "…";
+}
+function D(e) {
+	if (!e) return "-";
+	let t = Date.now() - e;
+	return t < 1e3 ? `${t}ms ago` : t < 6e4 ? `${Math.floor(t / 1e3)}s ago` : `${Math.floor(t / 6e4)}m ago`;
+}
+function O(e) {
+	let t = g(), n = `${t.length}:${t.map((e) => `${e.id}-${e.lastUpdated}-${e.subscriberCount}`).join("|")}`;
+	if (r.renderedTab === "signals" && r.renderKeys.signals === n) return;
+	r.renderKeys.signals = n, r.renderedTab = "signals";
+	let i = t.map((e) => {
+		let t = w(e.value), n = E(e.value, 120);
+		return `<tr data-elur-devtools-signal-id="${e.id}">
+                <td style="padding:6px 8px;white-space:nowrap;">${e.id}</td>
+                <td style="padding:6px 8px;max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace, SFMono-Regular, Menlo, monospace;" title="${T(t)}">${T(n)}</td>
+                <td>${e.subscriberCount}</td>
+                <td data-elur-devtools-history-count="${e.history.length}">${e.history.length}</td>
+                <td>${D(e.lastUpdated)}</td>
+            </tr>`;
+	}).join("");
+	e.innerHTML = `
+        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
+            <strong>Signals</strong>
+            <span style="opacity:.8">${t.length} active</span>
+        </div>
+        <div data-elur-devtools-scroll="signals" style="max-height:260px;overflow:auto;overscroll-behavior:contain;border:1px solid #2f2f35;border-radius:8px;">
+            <table style="width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed;">
+                <thead>
+                    <tr style="background:#1f1f24;">
+                        <th style="text-align:left;padding:6px 8px;width:42px;">ID</th>
+                        <th style="text-align:left;padding:6px 8px;">Value</th>
+                        <th style="text-align:left;padding:6px 8px;width:50px;">Subs</th>
+                        <th style="text-align:left;padding:6px 8px;width:50px;">History</th>
+                        <th style="text-align:left;padding:6px 8px;width:84px;">Updated</th>
+                    </tr>
+                </thead>
+                <tbody>${i}</tbody>
+            </table>
+        </div>
+        <p style="margin:8px 0 0 0;font-size:11px;opacity:.75;">Click a row to log full history in console.</p>
+    `;
+	for (let n of e.querySelectorAll("tr[data-elur-devtools-signal-id]")) n.style.cursor = "pointer", n.addEventListener("click", () => {
+		let e = Number(n.dataset.elurDevtoolsSignalId), r = t.find((t) => t.id === e);
+		r && (console.group(`[Elur DevTools] Signal #${r.id}`), console.log("Current value:", r.value), console.log("Subscribers:", r.subscriberCount), console.table(r.history.map((e) => ({
+			at: new Date(e.at).toISOString(),
+			value: e.value
+		}))), console.groupEnd());
+	});
+}
+function k(e) {
+	let t = /* @__PURE__ */ new Map(), n = [];
+	for (let n of e) t.set(n.id, {
+		...n,
+		children: []
+	});
+	for (let e of t.values()) {
+		if (e.parentId == null) {
+			n.push(e);
+			continue;
+		}
+		let r = t.get(e.parentId);
+		if (!r) {
+			n.push(e);
+			continue;
+		}
+		r.children.push(e);
+	}
+	return n;
+}
+function A(e, t) {
+	let n = 10 + t * 14, r = Object.keys(e.props).length > 0 ? w(e.props) : "{}", i = e.slotNames.length > 0 ? e.slotNames.join(", ") : "none";
+	return `<div style="padding:6px 8px 6px ${n}px;border-bottom:1px solid #24242b;">
+        <div><strong>${T(e.debugName)}</strong> <span style="opacity:.7">#${e.id}</span></div>
+        <div style="font-size:11px;opacity:.8;">slots: ${i} | default-slot: ${e.hasDefaultSlot ? "yes" : "no"}</div>
+        <div style="font-size:11px;opacity:.8;">props: ${T(E(r, 180))}</div>
+    </div>` + e.children.map((e) => A(e, t + 1)).join("");
+}
+function j(e) {
+	let t = x(), i = n(), a = `${i ? `${i.currentPath}|${i.matchedPath ?? ""}` : "no-router"}:${t.length}:${t.map((e) => `${e.id}-${e.parentId}-${e.debugName}-${e.hasDefaultSlot}-${e.slotNames.join(",")}-${w(e.props)}`).join("|")}`;
+	if (r.renderedTab === "components" && r.renderKeys.components === a) return;
+	r.renderKeys.components = a, r.renderedTab = "components";
+	let o = k(t);
+	e.innerHTML = `
+        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
+            <strong>Component Tree</strong>
+            <span style="opacity:.8">${t.length} mounted</span>
+        </div>
+        <div style="font-size:11px;opacity:.82;margin-bottom:8px;display:flex;gap:8px;flex-wrap:wrap;">
+            <span><b>current:</b> ${T(i?.currentPath ?? "-")}</span>
+            <span><b>matched:</b> ${T(i?.matchedPath ?? "none")}</span>
+        </div>
+        <div data-elur-devtools-scroll="components" style="max-height:280px;overflow:auto;overscroll-behavior:contain;border:1px solid #2f2f35;border-radius:8px;">
+            ${o.length > 0 ? o.map((e) => A(e, 0)).join("") : "<div style='padding:10px;opacity:.75'>No mounted components tracked. Enable devtools before your first mount() to capture initial tree.</div>"}
+        </div>
+    `;
+}
+function M(e) {
+	let t = n(), i = t ? `${t.mode}|${t.base}|${t.currentPath}|${JSON.stringify(t.params)}|${JSON.stringify(t.query)}|${t.matchedPath}|${t.activeGuards.names.join(",")}` : "none";
+	if (r.renderedTab === "router" && r.renderKeys.router === i) return;
+	if (r.renderKeys.router = i, r.renderedTab = "router", !t) {
+		e.innerHTML = "\n            <strong>Router State</strong>\n            <div style=\"margin-top:8px;opacity:.75\">No active Elur router instance. Ensure your app uses createRouter()/RouterView from elur/router.</div>\n        ";
+		return;
+	}
+	let a = b(t.matchedPath);
+	e.innerHTML = `
+        <strong>Router State</strong>
+        <div data-elur-devtools-scroll="router" style="margin-top:8px;font-size:12px;line-height:1.55;max-height:280px;overflow:auto;overscroll-behavior:contain;border:1px solid #2f2f35;border-radius:8px;padding:8px;">
+            <div><b>mode</b>: ${t.mode}</div>
+            <div><b>base</b>: ${t.base}</div>
+            <div><b>current</b>: ${T(t.currentPath)}</div>
+            <div><b>params</b>: ${T(w(t.params))}</div>
+            <div><b>query</b>: ${T(w(t.query))}</div>
+            <div><b>matched</b>: ${T(t.matchedPath ?? "none")}</div>
+            <div><b>matched chain</b>: ${a.length > 0 ? T(a.join(" -> ")) : "none"}</div>
+            <div><b>guards</b>: ${t.activeGuards.names.length > 0 ? T(t.activeGuards.names.join(", ")) : "none"}</div>
+        </div>
+    `;
+}
+function N(e) {
+	if (!r.content) return;
+	let t = r.content.querySelector(`[data-elur-devtools-scroll='${e}']`);
+	t && (r.scrollMemo[e] = {
+		top: t.scrollTop,
+		left: t.scrollLeft
+	});
+}
+function P(e) {
+	if (!r.content) return;
+	let t = r.content.querySelector(`[data-elur-devtools-scroll='${e}']`);
+	if (!t) return;
+	let n = r.scrollMemo[e];
+	t.scrollTop = n.top, t.scrollLeft = n.left, t.dataset.elurDevtoolsScrollBound !== "1" && (t.addEventListener("scroll", () => {
+		r.scrollMemo[e] = {
+			top: t.scrollTop,
+			left: t.scrollLeft
+		};
+	}, { passive: !0 }), t.dataset.elurDevtoolsScrollBound = "1");
+}
+function F(e = !1) {
+	if (!r.content) return;
+	let t = r.activeTab;
+	if (e || N(t), r.activeTab === "signals") {
+		O(r.content), P("signals");
+		return;
+	}
+	if (r.activeTab === "components") {
+		j(r.content), P("components");
+		return;
+	}
+	M(r.content), P("router");
+}
+function I() {
+	if (r.panel) for (let e of r.panel.querySelectorAll("button[data-elur-devtools-tab]")) {
+		let t = e.dataset.elurDevtoolsTab === r.activeTab;
+		e.style.background = t ? "#2d4c7a" : "#1f1f24";
+	}
+}
+function L(e) {
+	let t = document.createElement("div");
+	t.setAttribute("data-elur-devtools-root", ""), t.style.position = "fixed", t.style.zIndex = "2147483647", t.style.bottom = "16px", t.style.right = e.position === "bottom-right" ? "16px" : "auto", t.style.left = e.position === "bottom-left" ? "16px" : "auto", t.style.fontFamily = "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif";
+	let n = document.createElement("button");
+	n.type = "button", n.textContent = "Elur DevTools", n.setAttribute("data-elur-devtools-button", ""), n.style.background = "#111827", n.style.color = "#f9fafb", n.style.border = "1px solid #374151", n.style.borderRadius = "999px", n.style.padding = "8px 12px", n.style.cursor = "pointer", n.style.boxShadow = "0 6px 18px rgba(0,0,0,.3)";
+	let i = document.createElement("div");
+	i.setAttribute("data-elur-devtools-panel", ""), i.style.marginTop = "8px", i.style.width = "460px", i.style.maxWidth = "min(92vw, 460px)", i.style.background = "#15151b", i.style.color = "#e5e7eb", i.style.border = "1px solid #2f2f35", i.style.borderRadius = "12px", i.style.padding = "10px", i.style.display = "none", i.style.boxShadow = "0 14px 28px rgba(0,0,0,.35)";
+	let a = document.createElement("div");
+	a.style.display = "flex", a.style.gap = "6px", a.style.marginBottom = "10px";
+	let o = document.createElement("div");
+	o.setAttribute("data-elur-devtools-content", "");
+	let s = (e, t) => {
+		let n = document.createElement("button");
+		return n.type = "button", n.textContent = t, n.setAttribute("data-elur-devtools-tab", e), n.style.border = "1px solid #353543", n.style.borderRadius = "8px", n.style.padding = "6px 9px", n.style.background = "#1f1f24", n.style.color = "#d1d5db", n.style.cursor = "pointer", n.addEventListener("click", () => {
+			r.activeTab = e, I(), F(!0);
+		}), n;
+	};
+	a.appendChild(s("signals", "Signals")), a.appendChild(s("components", "Components")), a.appendChild(s("router", "Router")), n.addEventListener("click", () => {
+		i.style.display = i.style.display === "none" ? "block" : "none", i.style.display === "block" && (I(), F(!0));
+	}), i.appendChild(a), i.appendChild(o), t.appendChild(n), t.appendChild(i), document.body.appendChild(t), r.root = t, r.panel = i, r.content = o;
+}
+function R() {
+	r.enabled && (r.enabled = !1, r.refreshId != null && (clearInterval(r.refreshId), r.refreshId = null), e(null), t(null), C(), r.root?.parentNode && r.root.parentNode.removeChild(r.root), r.root = null, r.panel = null, r.content = null, r.dispose = null, r.renderedTab = null, r.renderKeys = {
+		signals: "",
+		components: "",
+		router: ""
+	}, r.scrollMemo = {
+		signals: {
+			top: 0,
+			left: 0
+		},
+		components: {
+			top: 0,
+			left: 0
+		},
+		router: {
+			top: 0,
+			left: 0
+		}
+	});
+}
+function z(n = {}) {
+	if (typeof document > "u") return { disable: () => void 0 };
+	if (r.enabled && r.dispose) return { disable: r.dispose };
+	let o = Math.max(100, n.refreshMs ?? 350);
+	s = Math.max(1, n.historyLimit ?? 50);
+	let f = n.position ?? "bottom-right";
+	r.enabled = !0, r.activeTab = "signals";
+	for (let e of Array.from(i)) {
+		let t = e.deref();
+		if (!t) {
+			i.delete(e);
+			continue;
+		}
+		let n = a.get(t);
+		n && m(n);
+	}
+	e({
+		onCreate(e, t) {
+			h(e, t);
+		},
+		onWrite(e, t) {
+			let n = h(e, t), r = Date.now();
+			n.lastUpdated = r, n.history.push({
+				at: r,
+				value: t
+			}), m(n);
+		}
+	}), t({
+		onMountStart(e) {
+			let t = c.get(e);
+			t ?? (t = d++, c.set(e, t));
+			let n = u.length > 0 ? u[u.length - 1] : null;
+			l.set(t, {
+				id: t,
+				parentId: n,
+				debugName: _(e),
+				mountedAt: Date.now(),
+				hasDefaultSlot: e.children != null,
+				slotNames: v(e),
+				props: y(e),
+				ref: p(e)
+			}), u.push(t);
+		},
+		onMountEnd(e) {
+			let t = c.get(e);
+			if (t == null) return;
+			let n = l.get(t);
+			if (n && (n.debugName = _(e), n.hasDefaultSlot = e.children != null, n.slotNames = v(e), n.props = y(e)), u[u.length - 1] === t) {
+				u.pop();
+				return;
+			}
+			let r = u.lastIndexOf(t);
+			r >= 0 && u.splice(r, 1);
+		},
+		onUnmount(e) {
+			let t = c.get(e);
+			if (t == null) return;
+			S(t);
+			let n = u.lastIndexOf(t);
+			n >= 0 && u.splice(n, 1);
+		}
+	}), L({ position: f }), r.refreshId = setInterval(() => {
+		r.panel?.style.display === "block" && F();
+	}, o), n.initiallyOpen && r.panel && (r.panel.style.display = "block", I(), F(!0));
+	let g = () => R();
+	return r.dispose = g, { disable: g };
+}
+//#endregion
+export { g as _listSignals, R as disableDevTools, z as enableDevTools };
+
+//# sourceMappingURL=devtools.js.map

package/dist/lib/elur/async.cjs

@@ -0,0 +1,16 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./signals.cjs`),t=require(`./elur/template/types.cjs`),n=require(`./lifecycle.cjs`),r=require(`./elur/template/html.cjs`);function i(){return r.html`
+        <span style="color:#52525b;font-size:13px;display:inline-flex;align-items:center;gap:6px">
+            <span class="elur-spinner" style="
+                display:inline-block;width:14px;height:14px;border-radius:50%;
+                border:2px solid #38bdf840;border-top-color:#38bdf8;
+                animation:elur-spin .7s linear infinite
+            "></span>
+            Loading…
+        </span>
+        <style>@keyframes elur-spin{to{transform:rotate(360deg)}}</style>
+    `}function a(e){return r.html`
+        <span style="color:#f87171;font-size:13px">
+            ⚠ ${e instanceof Error?e.message:String(e)}
+        </span>
+    `}var o=new Map,s=300*1e3,c=null,l=s;function u(){c===null&&(c=setInterval(()=>{let e=Date.now();for(let[t,n]of o)n.subscribers<=0&&e-n.fetchedAt>l&&o.delete(t);o.size===0&&c!==null&&(clearInterval(c),c=null)},6e4))}function d(e){let t=o.get(e);if(t&&t.fetchedAt>0)return t}function f(e,t){let n=o.get(e);o.set(e,{data:t,fetchedAt:Date.now(),subscribers:n?.subscribers??0}),u()}function p(e){let t=o.get(e);t?t.subscribers++:o.set(e,{fetchedAt:0,subscribers:1})}function m(e){let t=o.get(e);t&&(t.subscribers=Math.max(0,t.subscribers-1))}function h(e,t){let n=o.get(e);return n?Date.now()-n.fetchedAt<t:!1}function g(t,s,c={}){let{fallback:l,errorFallback:u,resetOnRefresh:g=!1,invalidate:_,cacheKey:v,staleTime:y=0}=c,b=l??i(),x=u??a;class S extends n.ElurComponent{_state;_disposeWatcher;constructor(){super();let t=v?d(v):void 0;this._state=e.signal(t&&t.data!==void 0?{status:`resolved`,data:t.data}:{status:`pending`})}onMount(){v&&p(v);let t=v?d(v):void 0;if(t&&h(v,y)||(t?this._fetch():this._run()),_){let t=!0;this._disposeWatcher=e.effect(()=>{if(_.value,t){t=!1;return}v&&o.delete(v),this._run()})}return()=>{this._disposeWatcher?.(),v&&m(v)}}_run(){(g||this._state.peek().status===`pending`)&&(this._state.value={status:`pending`}),this._fetch()}_fetch(){t().then(e=>{v&&f(v,e),this._state.value={status:`resolved`,data:e}},e=>{this._state.value={status:`error`,error:e}})}render(){return r.html`<div class="elur-suspense" style="display:contents">${()=>{let e=this._state.value;return e.status===`pending`?b:e.status===`error`?x(e.error):s(e.data)}}</div>`}}return new S}function _(e,n){let r=n===void 0||t.isElurTemplate(n)?{fallback:n}:n,i=r.selector??(e=>e.default),a=null;return()=>a?new a:g(async()=>(a=i(await e()),a),e=>new e,{fallback:r.fallback})}exports.lazy=_,exports.suspend=g;
+//# sourceMappingURL=async.cjs.map

package/dist/lib/elur/async.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"async.cjs","names":[],"sources":["../../src/elur/async.ts"],"sourcesContent":["import { signal, effect, Signal } from \"./reactivity.js\";\nimport { ElurComponent } from \"./lifecycle.js\";\nimport { type ElurTemplate, html, isElurTemplate } from \"./template/index.js\";\n\n// --- Types ---\n\ntype AsyncState<T> =\n    | { status: \"pending\" }\n    | { status: \"resolved\"; data: T }\n    | { status: \"error\"; error: unknown };\n\nexport interface SuspenseOptions {\n    fallback?: ElurTemplate;\n    errorFallback?: (err: unknown) => ElurTemplate;\n    resetOnRefresh?: boolean;\n    invalidate?: Signal<unknown>;\n    cacheKey?: string;\n    staleTime?: number;\n}\n\n// --- Default fallbacks ---\n\nfunction defaultLoadingFallback(): ElurTemplate {\n    return html`\n        <span style=\"color:#52525b;font-size:13px;display:inline-flex;align-items:center;gap:6px\">\n            <span class=\"elur-spinner\" style=\"\n                display:inline-block;width:14px;height:14px;border-radius:50%;\n                border:2px solid #38bdf840;border-top-color:#38bdf8;\n                animation:elur-spin .7s linear infinite\n            \"></span>\n            Loading…\n        </span>\n        <style>@keyframes elur-spin{to{transform:rotate(360deg)}}</style>\n    `;\n}\n\nfunction defaultErrorTemplate(err: unknown): ElurTemplate {\n    return html`\n        <span style=\"color:#f87171;font-size:13px\">\n            ⚠ ${err instanceof Error ? err.message : String(err)}\n        </span>\n    `;\n}\n\n// --- Suspense Cache ---\n\ninterface SuspenseCacheEntry<T = unknown> {\n    data?: T;\n    fetchedAt: number;\n    subscribers: number;\n}\n\nconst _suspenseCache = new Map<string, SuspenseCacheEntry>();\n\nconst DEFAULT_CACHE_TIME = 5 * 60 * 1000;\nlet _suspenseGcTimer: ReturnType<typeof setInterval> | null = null;\nlet _suspenseCacheTime = DEFAULT_CACHE_TIME;\n\nfunction _startSuspenseGC(): void {\n    if (_suspenseGcTimer !== null) return;\n    _suspenseGcTimer = setInterval(() => {\n        const now = Date.now();\n        for (const [key, entry] of _suspenseCache) {\n            if (entry.subscribers <= 0 && now - entry.fetchedAt > _suspenseCacheTime) {\n                _suspenseCache.delete(key);\n            }\n        }\n        if (_suspenseCache.size === 0 && _suspenseGcTimer !== null) {\n            clearInterval(_suspenseGcTimer);\n            _suspenseGcTimer = null;\n        }\n    }, 60_000);\n}\n\nfunction _getSuspenseCacheEntry<T>(key: string): SuspenseCacheEntry<T> | undefined {\n    const entry = _suspenseCache.get(key);\n    if (entry && entry.fetchedAt > 0) return entry as SuspenseCacheEntry<T>;\n    return undefined;\n}\n\nfunction _setSuspenseCacheEntry<T>(key: string, data: T): void {\n    const existing = _suspenseCache.get(key);\n    _suspenseCache.set(key, {\n        data,\n        fetchedAt: Date.now(),\n        subscribers: existing?.subscribers ?? 0,\n    });\n    _startSuspenseGC();\n}\n\nfunction _subscribeSuspenseCache(key: string): void {\n    const entry = _suspenseCache.get(key);\n    if (entry) {\n        entry.subscribers++;\n    } else {\n        _suspenseCache.set(key, { fetchedAt: 0, subscribers: 1 } as SuspenseCacheEntry<any>);\n    }\n}\n\nfunction _unsubscribeSuspenseCache(key: string): void {\n    const entry = _suspenseCache.get(key);\n    if (entry) entry.subscribers = Math.max(0, entry.subscribers - 1);\n}\n\nfunction _isSuspenseCacheFresh(key: string, staleTime: number): boolean {\n    const entry = _suspenseCache.get(key);\n    if (!entry) return false;\n    return Date.now() - entry.fetchedAt < staleTime;\n}\n\n// --- suspend() ---\n\n/**\n * Runs an async function and renders based on its state (pending/resolved/error).\n *\n * ```ts\n * const refresh = signal(0);\n * suspend(() => fetchData(), render, { invalidate: refresh });\n * refresh.update(n => n + 1);\n * ```\n */\nexport function suspend<T>(\n    asyncFn: () => Promise<T>,\n    renderFn: (data: T) => ElurTemplate | ElurComponent,\n    options: SuspenseOptions = {}\n): ElurComponent {\n    const {\n        fallback,\n        errorFallback,\n        resetOnRefresh = false,\n        invalidate,\n        cacheKey,\n        staleTime = 0,\n    } = options;\n\n    const resolvedFallback = fallback ?? defaultLoadingFallback();\n    const resolvedErrorFallback = errorFallback ?? defaultErrorTemplate;\n\n    class SuspendComponent extends ElurComponent {\n        private _state: Signal<AsyncState<T>>;\n        private _disposeWatcher: (() => void) | undefined;\n\n        constructor() {\n            super();\n            const cached = cacheKey ? _getSuspenseCacheEntry<T>(cacheKey) : undefined;\n\n            this._state = signal<AsyncState<T>>(\n                cached && cached.data !== undefined\n                    ? { status: \"resolved\", data: cached.data }\n                    : { status: \"pending\" }\n            );\n        }\n\n        onMount(): (() => void) | void {\n            if (cacheKey) _subscribeSuspenseCache(cacheKey);\n\n            const cached = cacheKey ? _getSuspenseCacheEntry<T>(cacheKey) : undefined;\n\n            if (cached && _isSuspenseCacheFresh(cacheKey!, staleTime)) {\n                // fresh — skip\n            } else if (cached) {\n                this._fetch();\n            } else {\n                this._run();\n            }\n\n            if (invalidate) {\n                let first = true;\n                this._disposeWatcher = effect(() => {\n                    invalidate.value;\n                    if (first) { first = false; return; }\n                    if (cacheKey) _suspenseCache.delete(cacheKey);\n                    this._run();\n                });\n            }\n\n            return () => {\n                this._disposeWatcher?.();\n                if (cacheKey) _unsubscribeSuspenseCache(cacheKey);\n            };\n        }\n\n        private _run(): void {\n            if (resetOnRefresh || this._state.peek().status === \"pending\") {\n                this._state.value = { status: \"pending\" };\n            }\n            this._fetch();\n        }\n\n        private _fetch(): void {\n            asyncFn().then(\n                (data) => {\n                    if (cacheKey) _setSuspenseCacheEntry(cacheKey, data);\n                    this._state.value = { status: \"resolved\", data };\n                },\n                (err) => { this._state.value = { status: \"error\", error: err }; }\n            );\n        }\n\n        render(): ElurTemplate {\n            return html`<div class=\"elur-suspense\" style=\"display:contents\">${() => {\n                const s = this._state.value;\n                if (s.status === \"pending\") return resolvedFallback;\n                if (s.status === \"error\") return resolvedErrorFallback(s.error);\n                return renderFn(s.data);\n            }}</div>`;\n        }\n    }\n\n    return new SuspendComponent();\n}\n\n// --- lazy() ---\n\nexport interface LazyOptions {\n    /** Component selector when the module uses a named export. Defaults to `mod.default`. */\n    selector?: (mod: Record<string, unknown>) => new () => ElurComponent;\n    /** Template shown while the component is loading. */\n    fallback?: ElurTemplate;\n}\n\n/**\n * Wraps a dynamic import for lazy-loading route components.\n * The module is loaded once and cached. Supports both default and named exports.\n */\nexport function lazy(\n    importFn: () => Promise<Record<string, unknown>>,\n    options?: ElurTemplate | LazyOptions\n): () => ElurComponent {\n    const opts: LazyOptions =\n        options === undefined || isElurTemplate(options as object)\n            ? { fallback: options as ElurTemplate | undefined }\n            : (options as LazyOptions);\n\n    const selector = opts.selector ?? ((mod) => mod.default as new () => ElurComponent);\n    let Cached: (new () => ElurComponent) | null = null;\n\n    return (): ElurComponent => {\n        if (Cached) return new Cached();\n\n        return suspend(\n            async () => {\n                const mod = await importFn();\n                Cached = selector(mod);\n                return Cached;\n            },\n            (Comp) => new Comp(),\n            { fallback: opts.fallback }\n        );\n    };\n}"],"mappings":"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"}

package/dist/lib/elur/async.d.cts

@@ -0,0 +1,32 @@
+import { Signal } from "./reactivity.js";
+import { ElurComponent } from "./lifecycle.js";
+import { type ElurTemplate } from "./template/index.js";
+export interface SuspenseOptions {
+    fallback?: ElurTemplate;
+    errorFallback?: (err: unknown) => ElurTemplate;
+    resetOnRefresh?: boolean;
+    invalidate?: Signal<unknown>;
+    cacheKey?: string;
+    staleTime?: number;
+}
+/**
+ * Runs an async function and renders based on its state (pending/resolved/error).
+ *
+ * ```ts
+ * const refresh = signal(0);
+ * suspend(() => fetchData(), render, { invalidate: refresh });
+ * refresh.update(n => n + 1);
+ * ```
+ */
+export declare function suspend<T>(asyncFn: () => Promise<T>, renderFn: (data: T) => ElurTemplate | ElurComponent, options?: SuspenseOptions): ElurComponent;
+export interface LazyOptions {
+    /** Component selector when the module uses a named export. Defaults to `mod.default`. */
+    selector?: (mod: Record<string, unknown>) => new () => ElurComponent;
+    /** Template shown while the component is loading. */
+    fallback?: ElurTemplate;
+}
+/**
+ * Wraps a dynamic import for lazy-loading route components.
+ * The module is loaded once and cached. Supports both default and named exports.
+ */
+export declare function lazy(importFn: () => Promise<Record<string, unknown>>, options?: ElurTemplate | LazyOptions): () => ElurComponent;

package/dist/lib/elur/async.d.ts

@@ -0,0 +1,32 @@
+import { Signal } from "./reactivity.js";
+import { ElurComponent } from "./lifecycle.js";
+import { type ElurTemplate } from "./template/index.js";
+export interface SuspenseOptions {
+    fallback?: ElurTemplate;
+    errorFallback?: (err: unknown) => ElurTemplate;
+    resetOnRefresh?: boolean;
+    invalidate?: Signal<unknown>;
+    cacheKey?: string;
+    staleTime?: number;
+}
+/**
+ * Runs an async function and renders based on its state (pending/resolved/error).
+ *
+ * ```ts
+ * const refresh = signal(0);
+ * suspend(() => fetchData(), render, { invalidate: refresh });
+ * refresh.update(n => n + 1);
+ * ```
+ */
+export declare function suspend<T>(asyncFn: () => Promise<T>, renderFn: (data: T) => ElurTemplate | ElurComponent, options?: SuspenseOptions): ElurComponent;
+export interface LazyOptions {
+    /** Component selector when the module uses a named export. Defaults to `mod.default`. */
+    selector?: (mod: Record<string, unknown>) => new () => ElurComponent;
+    /** Template shown while the component is loading. */
+    fallback?: ElurTemplate;
+}
+/**
+ * Wraps a dynamic import for lazy-loading route components.
+ * The module is loaded once and cached. Supports both default and named exports.
+ */
+export declare function lazy(importFn: () => Promise<Record<string, unknown>>, options?: ElurTemplate | LazyOptions): () => ElurComponent;

package/dist/lib/elur/async.js

@@ -0,0 +1,123 @@
+import { effect as e, signal as t } from "./signals.js";
+import { isElurTemplate as n } from "./elur/template/types.js";
+import { ElurComponent as r } from "./lifecycle.js";
+import { html as i } from "./elur/template/html.js";
+//#region src/elur/async.ts
+function a() {
+	return i`
+        <span style="color:#52525b;font-size:13px;display:inline-flex;align-items:center;gap:6px">
+            <span class="elur-spinner" style="
+                display:inline-block;width:14px;height:14px;border-radius:50%;
+                border:2px solid #38bdf840;border-top-color:#38bdf8;
+                animation:elur-spin .7s linear infinite
+            "></span>
+            Loading…
+        </span>
+        <style>@keyframes elur-spin{to{transform:rotate(360deg)}}</style>
+    `;
+}
+function o(e) {
+	return i`
+        <span style="color:#f87171;font-size:13px">
+            ⚠ ${e instanceof Error ? e.message : String(e)}
+        </span>
+    `;
+}
+var s = /* @__PURE__ */ new Map(), c = 300 * 1e3, l = null, u = c;
+function d() {
+	l === null && (l = setInterval(() => {
+		let e = Date.now();
+		for (let [t, n] of s) n.subscribers <= 0 && e - n.fetchedAt > u && s.delete(t);
+		s.size === 0 && l !== null && (clearInterval(l), l = null);
+	}, 6e4));
+}
+function f(e) {
+	let t = s.get(e);
+	if (t && t.fetchedAt > 0) return t;
+}
+function p(e, t) {
+	let n = s.get(e);
+	s.set(e, {
+		data: t,
+		fetchedAt: Date.now(),
+		subscribers: n?.subscribers ?? 0
+	}), d();
+}
+function m(e) {
+	let t = s.get(e);
+	t ? t.subscribers++ : s.set(e, {
+		fetchedAt: 0,
+		subscribers: 1
+	});
+}
+function h(e) {
+	let t = s.get(e);
+	t && (t.subscribers = Math.max(0, t.subscribers - 1));
+}
+function g(e, t) {
+	let n = s.get(e);
+	return n ? Date.now() - n.fetchedAt < t : !1;
+}
+function _(n, c, l = {}) {
+	let { fallback: u, errorFallback: d, resetOnRefresh: _ = !1, invalidate: v, cacheKey: y, staleTime: b = 0 } = l, x = u ?? a(), S = d ?? o;
+	class C extends r {
+		_state;
+		_disposeWatcher;
+		constructor() {
+			super();
+			let e = y ? f(y) : void 0;
+			this._state = t(e && e.data !== void 0 ? {
+				status: "resolved",
+				data: e.data
+			} : { status: "pending" });
+		}
+		onMount() {
+			y && m(y);
+			let t = y ? f(y) : void 0;
+			if (t && g(y, b) || (t ? this._fetch() : this._run()), v) {
+				let t = !0;
+				this._disposeWatcher = e(() => {
+					if (v.value, t) {
+						t = !1;
+						return;
+					}
+					y && s.delete(y), this._run();
+				});
+			}
+			return () => {
+				this._disposeWatcher?.(), y && h(y);
+			};
+		}
+		_run() {
+			(_ || this._state.peek().status === "pending") && (this._state.value = { status: "pending" }), this._fetch();
+		}
+		_fetch() {
+			n().then((e) => {
+				y && p(y, e), this._state.value = {
+					status: "resolved",
+					data: e
+				};
+			}, (e) => {
+				this._state.value = {
+					status: "error",
+					error: e
+				};
+			});
+		}
+		render() {
+			return i`<div class="elur-suspense" style="display:contents">${() => {
+				let e = this._state.value;
+				return e.status === "pending" ? x : e.status === "error" ? S(e.error) : c(e.data);
+			}}</div>`;
+		}
+	}
+	return new C();
+}
+function v(e, t) {
+	let r = t === void 0 || n(t) ? { fallback: t } : t, i = r.selector ?? ((e) => e.default), a = null;
+	return () => a ? new a() : _(async () => (a = i(await e()), a), (e) => new e(), { fallback: r.fallback });
+}
+//#endregion
+export { v as lazy, _ as suspend };
+
+//# sourceMappingURL=async.js.map