elit 2.0.1 → 3.0.0

package/dist/router.js

@@ -1 +1,830 @@
-"use strict";var e=new class{constructor(){this.elementCache=new WeakMap,this.reactiveNodes=new Map}createElement(e,t={},r=[]){return{tagName:e,props:t,children:r}}renderToDOM(e,t){if(null==e||!1===e)return;if("object"!=typeof e)return void t.appendChild(document.createTextNode(String(e)));let{tagName:r,props:n,children:i}=e,l="svg"===r||"s"===r[0]&&"v"===r[1]&&"g"===r[2]||"http://www.w3.org/2000/svg"===t.namespaceURI,o=l?document.createElementNS("http://www.w3.org/2000/svg",r.replace("svg","").toLowerCase()||r):document.createElement(r);for(let e in n){let t=n[e];if(null==t||!1===t)continue;let r=e.charCodeAt(0);if(99===r&&(e.length<6||"N"===e[5])){let e=Array.isArray(t)?t.join(" "):t;l?o.setAttribute("class",e):o.className=e}else if(115===r&&5===e.length)if("string"==typeof t)o.style.cssText=t;else{let e=o.style;for(let r in t)e[r]=t[r]}else 111===r&&110===e.charCodeAt(1)?o[e.toLowerCase()]=t:100===r&&e.length>20?o.innerHTML=t.__html:114===r&&3===e.length?setTimeout(()=>{"function"==typeof t?t(o):t.current=o},0):o.setAttribute(e,!0===t?"":String(t))}let a=i.length;if(!a)return void t.appendChild(o);let s=e=>{for(let t=0;t<a;t++){let r=i[t];if(null!=r&&!1!==r)if(Array.isArray(r))for(let t=0,n=r.length;t<n;t++){let n=r[t];null!=n&&!1!==n&&this.renderToDOM(n,e)}else this.renderToDOM(r,e)}};if(a>30){let e=document.createDocumentFragment();s(e),o.appendChild(e)}else s(o);t.appendChild(o)}render(e,t){let r="string"==typeof e?document.getElementById(e.replace("#","")):e;if(!r)throw new Error(`Element not found: ${e}`);if(t.children&&t.children.length>500){let e=document.createDocumentFragment();this.renderToDOM(t,e),r.appendChild(e)}else this.renderToDOM(t,r);return r}batchRender(e,t){let r="string"==typeof e?document.getElementById(e.replace("#","")):e;if(!r)throw new Error(`Element not found: ${e}`);let n=t.length;if(n>3e3){let e=document.createDocumentFragment(),i=0,l=1500,o=()=>{let a=Math.min(i+l,n);for(let r=i;r<a;r++)this.renderToDOM(t[r],e);i=a,i>=n?r.appendChild(e):requestAnimationFrame(o)};o()}else{let e=document.createDocumentFragment();for(let r=0;r<n;r++)this.renderToDOM(t[r],e);r.appendChild(e)}return r}renderChunked(e,t,r=5e3,n){let i="string"==typeof e?document.getElementById(e.replace("#","")):e;if(!i)throw new Error(`Element not found: ${e}`);let l=t.length,o=0,a=()=>{let e=Math.min(o+r,l),s=document.createDocumentFragment();for(let r=o;r<e;r++)this.renderToDOM(t[r],s);i.appendChild(s),o=e,n&&n(o,l),o<l&&requestAnimationFrame(a)};return requestAnimationFrame(a),i}renderToHead(...e){let t=document.head;if(t)for(let r of e.flat())r&&this.renderToDOM(r,t);return t}addStyle(e){let t=document.createElement("style");return t.textContent=e,document.head.appendChild(t)}addMeta(e){let t=document.createElement("meta");for(let r in e)t.setAttribute(r,e[r]);return document.head.appendChild(t)}addLink(e){let t=document.createElement("link");for(let r in e)t.setAttribute(r,e[r]);return document.head.appendChild(t)}setTitle(e){return document.title=e}createState(e,t={}){let r=e,n=new Set,i=null,{throttle:l=0,deep:o=!1}=t,a=()=>n.forEach(e=>e(r));return{get value(){return r},set value(e){(o?JSON.stringify(r)!==JSON.stringify(e):r!==e)&&(r=e,l>0?i||(i=setTimeout(()=>{i=null,a()},l)):a())},subscribe:e=>(n.add(e),()=>n.delete(e)),destroy(){n.clear(),i&&clearTimeout(i)}}}computed(e,t){let r=e.map(e=>e.value),n=this.createState(t(...r));return e.forEach((e,i)=>{e.subscribe(e=>{r[i]=e,n.value=t(...r)})}),n}effect(e){e()}createVirtualList(e,t,r,n=50,i=5){let l=e.clientHeight,o=t.length*n,a=0,s=()=>{let{start:s,end:u}={start:Math.max(0,Math.floor(a/n)-i),end:Math.min(t.length,Math.ceil((a+l)/n)+i)},d=document.createElement("div");d.style.cssText=`height:${o}px;position:relative`;for(let e=s;e<u;e++){let i=document.createElement("div");i.style.cssText=`position:absolute;top:${e*n}px;height:${n}px;width:100%`,this.renderToDOM(r(t[e],e),i),d.appendChild(i)}e.innerHTML="",e.appendChild(d)},u=()=>{a=e.scrollTop,requestAnimationFrame(s)};return e.addEventListener("scroll",u),s(),{render:s,destroy:()=>{e.removeEventListener("scroll",u),e.innerHTML=""}}}lazy(e){let t=null,r=!1;return async(...n)=>(!t&&!r&&(r=!0,t=await e(),r=!1),t?t(...n):{tagName:"div",props:{class:"loading"},children:["Loading..."]})}cleanupUnusedElements(e){let t=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT),r=[];for(;t.nextNode();){let e=t.currentNode;e.id&&e.id.startsWith("r")&&!this.elementCache.has(e)&&r.push(e)}return r.forEach(e=>e.remove()),r.length}renderToString(e,t={}){let{pretty:r=!1,indent:n=0}=t,i=r?"  ".repeat(n):"",l=r?"\n":"",o=this.resolveStateValue(e);if(o=this.unwrapReactive(o),Array.isArray(o))return o.map(e=>this.renderToString(e,t)).join("");if("object"!=typeof o||null===o)return null==o||!1===o?"":this.escapeHtml(String(o));let{tagName:a,props:s,children:u}=o,d=this.isSelfClosingTag(a),h=`${i}<${a}`,c=this.propsToAttributes(s);if(c&&(h+=` ${c}`),d)return h+=` />${l}`,h;if(h+=">",s.dangerouslySetInnerHTML)return h+=s.dangerouslySetInnerHTML.__html,h+=`</${a}>${l}`,h;if(u&&u.length>0){let e=u.map(e=>{let t=this.resolveStateValue(e);return this.unwrapReactive(t)}),t=e.some(e=>"object"==typeof e&&null!==e&&!Array.isArray(e)&&"tagName"in e);if(r&&t){h+=l;for(let t of e)if(null!=t&&!1!==t)if(Array.isArray(t))for(let e of t)null!=e&&!1!==e&&(h+=this.renderToString(e,{pretty:r,indent:n+1}));else h+=this.renderToString(t,{pretty:r,indent:n+1});h+=i}else for(let t of e)if(null!=t&&!1!==t)if(Array.isArray(t))for(let e of t)null!=e&&!1!==e&&(h+=this.renderToString(e,{pretty:!1,indent:0}));else h+=this.renderToString(t,{pretty:!1,indent:0})}return h+=`</${a}>${l}`,h}resolveStateValue(e){return e&&"object"==typeof e&&"value"in e&&"subscribe"in e?e.value:e}isReactiveWrapper(e){return!(!e||"object"!=typeof e||!e.tagName)&&("span"===e.tagName&&e.props?.id&&"string"==typeof e.props.id&&e.props.id.match(/^r[a-z0-9]{9}$/))}unwrapReactive(e){if(!this.isReactiveWrapper(e))return e;let t=e.children;if(!t||0===t.length)return"";if(1===t.length){let e=t[0];if(e&&"object"==typeof e&&"span"===e.tagName){let t=e.props,r=!t||0===Object.keys(t).length,n=e.children&&1===e.children.length&&"string"==typeof e.children[0];if(r&&n)return e.children[0]}return this.unwrapReactive(e)}return t.map(e=>this.unwrapReactive(e))}escapeHtml(e){let t={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#x27;"};return e.replace(/[&<>"']/g,e=>t[e])}isSelfClosingTag(e){return new Set(["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]).has(e.toLowerCase())}propsToAttributes(e){let t=[];for(let r in e){if("children"===r||"dangerouslySetInnerHTML"===r||"ref"===r)continue;let n=e[r];if(n=this.resolveStateValue(n),null!=n&&!1!==n&&(!r.startsWith("on")||"function"!=typeof n)){if("className"===r||"class"===r){let e=Array.isArray(n)?n.join(" "):n;e&&t.push(`class="${this.escapeHtml(String(e))}"`);continue}if("style"===r){let e=this.styleToString(n);e&&t.push(`style="${this.escapeHtml(e)}"`);continue}if(!0===n){t.push(r);continue}t.push(`${r}="${this.escapeHtml(String(n))}"`)}}return t.join(" ")}styleToString(e){if("string"==typeof e)return e;if("object"==typeof e&&null!==e){let t=[];for(let r in e){let n=r.replace(/([A-Z])/g,"-$1").toLowerCase();t.push(`${n}:${e[r]}`)}return t.join(";")}return""}isState(e){return e&&"object"==typeof e&&"value"in e&&"subscribe"in e&&"function"==typeof e.subscribe}createReactiveChild(e,t){let r=t(e.value);if(typeof window<"u"&&typeof document<"u"){let r={node:null,renderFn:t};this.reactiveNodes.set(e,r),e.subscribe(()=>{if(r.node&&r.node.parentNode){let n=t(e.value);r.node.textContent=String(n??"")}})}return r}jsonToVNode(e){if(this.isState(e))return this.createReactiveChild(e,e=>e);if(null==e||"boolean"==typeof e||"string"==typeof e||"number"==typeof e)return e;let{tag:t,attributes:r={},children:n}=e,i={};for(let e in r){let t=r[e];"class"===e?i.className=this.isState(t)?t.value:t:i[e]=this.isState(t)?t.value:t}let l=[];if(null!=n)if(Array.isArray(n))for(let e of n)if(this.isState(e))l.push(this.createReactiveChild(e,e=>e));else{let t=this.jsonToVNode(e);null!=t&&!1!==t&&l.push(t)}else if(this.isState(n))l.push(this.createReactiveChild(n,e=>e));else if("object"==typeof n&&"tag"in n){let e=this.jsonToVNode(n);null!=e&&!1!==e&&l.push(e)}else l.push(n);return{tagName:t,props:i,children:l}}vNodeJsonToVNode(e){if(this.isState(e))return this.createReactiveChild(e,e=>e);if(null==e||"boolean"==typeof e||"string"==typeof e||"number"==typeof e)return e;let{tagName:t,props:r={},children:n=[]}=e,i={};for(let e in r){let t=r[e];i[e]=this.isState(t)?t.value:t}let l=[];for(let e of n)if(this.isState(e))l.push(this.createReactiveChild(e,e=>e));else{let t=this.vNodeJsonToVNode(e);null!=t&&!1!==t&&l.push(t)}return{tagName:t,props:i,children:l}}renderJson(e,t){let r=this.jsonToVNode(t);if(!r||"object"!=typeof r||!("tagName"in r))throw new Error("Invalid JSON structure");return this.render(e,r)}renderVNode(e,t){let r=this.vNodeJsonToVNode(t);if(!r||"object"!=typeof r||!("tagName"in r))throw new Error("Invalid VNode JSON structure");return this.render(e,r)}renderJsonToString(e,t={}){let r=this.jsonToVNode(e);return this.renderToString(r,t)}renderVNodeToString(e,t={}){let r=this.vNodeJsonToVNode(e);return this.renderToString(r,t)}renderServer(e){if("object"!=typeof e||null===e||!("tagName"in e))throw new Error("renderServer requires a VNode with html tag");if("html"!==e.tagName)throw new Error("renderServer requires a VNode with html tag as root");let t=e,r=null,n=null;for(let e of t.children||[])"object"==typeof e&&null!==e&&"tagName"in e&&("head"===e.tagName&&(r=e),"body"===e.tagName&&(n=e));if(t.props)for(let e in t.props){let r=t.props[e];null!=r&&!1!==r&&document.documentElement.setAttribute(e,String(r))}if(r){document.head.innerHTML="";for(let e of r.children||[])this.renderToDOM(e,document.head)}if(n){if(document.body.innerHTML="",n.props)for(let e in n.props){let t=n.props[e];null!=t&&!1!==t&&document.body.setAttribute(e,String(t))}for(let e of n.children||[])this.renderToDOM(e,document.body)}}renderToHTMLDocument(e,t={}){let{title:r="",meta:n=[],links:i=[],scripts:l=[],styles:o=[],lang:a="en",head:s="",bodyAttrs:u={},pretty:d=!1}=t,h=d?"\n":"",c=d?"  ":"",p=d?"    ":"",f=`<!DOCTYPE html>${h}<html lang="${a}">${h}${c}<head>${h}${p}<meta charset="UTF-8">${h}${p}<meta name="viewport" content="width=device-width, initial-scale=1.0">${h}`;r&&(f+=`${p}<title>${this.escapeHtml(r)}</title>${h}`);for(let e of n){f+=`${p}<meta`;for(let t in e)f+=` ${t}="${this.escapeHtml(e[t])}"`;f+=`>${h}`}for(let e of i){f+=`${p}<link`;for(let t in e)f+=` ${t}="${this.escapeHtml(e[t])}"`;f+=`>${h}`}for(let e of o)e.href?f+=`${p}<link rel="stylesheet" href="${this.escapeHtml(e.href)}">${h}`:e.content&&(f+=`${p}<style>${e.content}</style>${h}`);s&&(f+=s+h),f+=`${c}</head>${h}${c}<body`;for(let e in u)f+=` ${e}="${this.escapeHtml(u[e])}"`;f+=`>${h}`,f+=this.renderToString(e,{pretty:d,indent:2});for(let e of l)f+=`${p}<script`,e.type&&(f+=` type="${this.escapeHtml(e.type)}"`),e.async&&(f+=" async"),e.defer&&(f+=" defer"),e.src?f+=` src="${this.escapeHtml(e.src)}"><\/script>${h}`:e.content?f+=`>${e.content}<\/script>${h}`:f+=`><\/script>${h}`;return f+=`${c}</body>${h}</html>`,f}getElementCache(){return this.elementCache}};function t(e,t){let r=e.split("/").filter(Boolean),n=t.split("/").filter(Boolean);if(e.endsWith("*")){let r=e.slice(0,-1);if(t.startsWith(r)||"/"===r||"*"===e)return{"*":t.slice(r.length)}}if(r.length!==n.length)return null;let i={};for(let e=0;e<r.length;e++){let t=r[e],l=n[e];if(t.startsWith(":"))i[t.slice(1)]=decodeURIComponent(l);else if(t!==l)return null}return i}exports.createRouter=function(r){let{mode:n="history",base:i="",routes:l}=r,o=[],a=e=>{let t={};return new URLSearchParams(e).forEach((e,r)=>{t[r]=e}),t},s=()=>"hash"===n?window.location.hash.slice(1)||"/":window.location.pathname.replace(i,"")||"/",u=e=>{let[t,r=""]=e.split("?"),[n,i=""]=t.split("#");return{path:n||"/",params:{},query:a(r),hash:i?"#"+i:""}},d=e=>{for(let r of l){let n=t(r.path,e);if(null!==n)return{route:r,params:n}}return null},h=e.createState(u(s())),c=(e,t=!1)=>{let r=u(e),l=d(r.path);l&&(r.params=l.params);for(let e of o){let n=e(r,h.value);if(!1===n)return;if("string"==typeof n)return void c(n,t)}if(l?.route.beforeEnter){let e=l.route.beforeEnter(r,h.value);if(!1===e)return;if("string"==typeof e)return void c(e,t)}let a="hash"===n?"#"+e:i+e;t?window.history.replaceState({path:e},"",a):window.history.pushState({path:e},"",a),h.value=r},p=()=>{let e=s(),t=u(e),r=d(t.path);r&&(t.params=r.params),h.value=t};return typeof window<"u"&&window.addEventListener("popstate",p),{currentRoute:h,push:e=>c(e,!1),replace:e=>c(e,!0),back:()=>window.history.back(),forward:()=>window.history.forward(),go:e=>window.history.go(e),beforeEach:e=>{o.push(e)},destroy:()=>{typeof window<"u"&&window.removeEventListener("popstate",p),h.destroy()}}},exports.createRouterView=function(e,r){let{routes:n,notFound:i}=r;return()=>{let r=e.currentRoute.value,l=n.find(e=>null!==t(e.path,r.path));if(l){let e=t(l.path,r.path)||{},n=l.component({...e,...r.query});return"object"==typeof n&&null!==n&&"tagName"in n?n:{tagName:"span",props:{},children:[n]}}if(i){let e=i(r.params);return"object"==typeof e&&null!==e&&"tagName"in e?e:{tagName:"span",props:{},children:[e]}}return{tagName:"div",props:{},children:["404 - Not Found"]}}},exports.routerLink=(e,t,...r)=>({tagName:"a",props:{...t,href:t.to,onclick:r=>{r.preventDefault(),e.push(t.to)}},children:r});
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/router.ts
+var router_exports = {};
+__export(router_exports, {
+  createRouter: () => createRouter,
+  createRouterView: () => createRouterView,
+  routerLink: () => routerLink
+});
+module.exports = __toCommonJS(router_exports);
+
+// src/dom.ts
+function resolveElement(rootElement) {
+  return typeof rootElement === "string" ? document.getElementById(rootElement.replace("#", "")) : rootElement;
+}
+function ensureElement(el, rootElement) {
+  if (!el) {
+    throw new Error(`Element not found: ${rootElement}`);
+  }
+  return el;
+}
+function shouldSkipChild(child) {
+  return child == null || child === false;
+}
+function isPrimitiveJson(json) {
+  return json == null || typeof json === "boolean" || typeof json === "string" || typeof json === "number";
+}
+var DomNode = class {
+  constructor() {
+    this.elementCache = /* @__PURE__ */ new WeakMap();
+    this.reactiveNodes = /* @__PURE__ */ new Map();
+  }
+  createElement(tagName, props = {}, children = []) {
+    return { tagName, props, children };
+  }
+  renderToDOM(vNode, parent) {
+    if (vNode == null || vNode === false) return;
+    if (typeof vNode !== "object") {
+      parent.appendChild(document.createTextNode(String(vNode)));
+      return;
+    }
+    const { tagName, props, children } = vNode;
+    const isSVG = tagName === "svg" || tagName[0] === "s" && tagName[1] === "v" && tagName[2] === "g" || parent.namespaceURI === "http://www.w3.org/2000/svg";
+    const el = isSVG ? document.createElementNS("http://www.w3.org/2000/svg", tagName.replace("svg", "").toLowerCase() || tagName) : document.createElement(tagName);
+    for (const key in props) {
+      const value = props[key];
+      if (value == null || value === false) continue;
+      const c = key.charCodeAt(0);
+      if (c === 99 && (key.length < 6 || key[5] === "N")) {
+        const classValue = Array.isArray(value) ? value.join(" ") : value;
+        isSVG ? el.setAttribute("class", classValue) : el.className = classValue;
+      } else if (c === 115 && key.length === 5) {
+        if (typeof value === "string") {
+          el.style.cssText = value;
+        } else {
+          const s = el.style;
+          for (const k in value) s[k] = value[k];
+        }
+      } else if (c === 111 && key.charCodeAt(1) === 110) {
+        el[key.toLowerCase()] = value;
+      } else if (c === 100 && key.length > 20) {
+        el.innerHTML = value.__html;
+      } else if (c === 114 && key.length === 3) {
+        setTimeout(() => {
+          typeof value === "function" ? value(el) : value.current = el;
+        }, 0);
+      } else {
+        el.setAttribute(key, value === true ? "" : String(value));
+      }
+    }
+    const len = children.length;
+    if (!len) {
+      parent.appendChild(el);
+      return;
+    }
+    const renderChildren = (target) => {
+      for (let i = 0; i < len; i++) {
+        const child = children[i];
+        if (shouldSkipChild(child)) continue;
+        if (Array.isArray(child)) {
+          for (let j = 0, cLen = child.length; j < cLen; j++) {
+            const c = child[j];
+            !shouldSkipChild(c) && this.renderToDOM(c, target);
+          }
+        } else {
+          this.renderToDOM(child, target);
+        }
+      }
+    };
+    if (len > 30) {
+      const fragment = document.createDocumentFragment();
+      renderChildren(fragment);
+      el.appendChild(fragment);
+    } else {
+      renderChildren(el);
+    }
+    parent.appendChild(el);
+  }
+  render(rootElement, vNode) {
+    const el = ensureElement(resolveElement(rootElement), rootElement);
+    el.innerHTML = "";
+    if (vNode.children && vNode.children.length > 500) {
+      const fragment = document.createDocumentFragment();
+      this.renderToDOM(vNode, fragment);
+      el.appendChild(fragment);
+    } else {
+      this.renderToDOM(vNode, el);
+    }
+    return el;
+  }
+  batchRender(rootElement, vNodes) {
+    const el = ensureElement(resolveElement(rootElement), rootElement);
+    const len = vNodes.length;
+    if (len > 3e3) {
+      const fragment = document.createDocumentFragment();
+      let processed = 0;
+      const chunkSize = 1500;
+      const processChunk = () => {
+        const end = Math.min(processed + chunkSize, len);
+        for (let i = processed; i < end; i++) {
+          this.renderToDOM(vNodes[i], fragment);
+        }
+        processed = end;
+        if (processed >= len) {
+          el.appendChild(fragment);
+        } else {
+          requestAnimationFrame(processChunk);
+        }
+      };
+      processChunk();
+    } else {
+      const fragment = document.createDocumentFragment();
+      for (let i = 0; i < len; i++) {
+        this.renderToDOM(vNodes[i], fragment);
+      }
+      el.appendChild(fragment);
+    }
+    return el;
+  }
+  renderChunked(rootElement, vNodes, chunkSize = 5e3, onProgress) {
+    const el = ensureElement(resolveElement(rootElement), rootElement);
+    const len = vNodes.length;
+    let index = 0;
+    const renderChunk = () => {
+      const end = Math.min(index + chunkSize, len);
+      const fragment = document.createDocumentFragment();
+      for (let i = index; i < end; i++) {
+        this.renderToDOM(vNodes[i], fragment);
+      }
+      el.appendChild(fragment);
+      index = end;
+      if (onProgress) onProgress(index, len);
+      if (index < len) {
+        requestAnimationFrame(renderChunk);
+      }
+    };
+    requestAnimationFrame(renderChunk);
+    return el;
+  }
+  renderToHead(...vNodes) {
+    const head = document.head;
+    if (head) {
+      for (const vNode of vNodes.flat()) {
+        vNode && this.renderToDOM(vNode, head);
+      }
+    }
+    return head;
+  }
+  addStyle(cssText) {
+    const el = document.createElement("style");
+    el.textContent = cssText;
+    return document.head.appendChild(el);
+  }
+  addMeta(attrs) {
+    const el = document.createElement("meta");
+    for (const k in attrs) el.setAttribute(k, attrs[k]);
+    return document.head.appendChild(el);
+  }
+  addLink(attrs) {
+    const el = document.createElement("link");
+    for (const k in attrs) el.setAttribute(k, attrs[k]);
+    return document.head.appendChild(el);
+  }
+  setTitle(text) {
+    return document.title = text;
+  }
+  // Reactive State Management
+  createState(initialValue, options = {}) {
+    let value = initialValue;
+    const listeners = /* @__PURE__ */ new Set();
+    let updateTimer = null;
+    const { throttle = 0, deep = false } = options;
+    const notify = () => listeners.forEach((fn) => fn(value));
+    const scheduleUpdate = () => {
+      if (throttle > 0) {
+        if (!updateTimer) {
+          updateTimer = setTimeout(() => {
+            updateTimer = null;
+            notify();
+          }, throttle);
+        }
+      } else {
+        notify();
+      }
+    };
+    return {
+      get value() {
+        return value;
+      },
+      set value(newValue) {
+        const changed = deep ? JSON.stringify(value) !== JSON.stringify(newValue) : value !== newValue;
+        if (changed) {
+          value = newValue;
+          scheduleUpdate();
+        }
+      },
+      subscribe(fn) {
+        listeners.add(fn);
+        return () => listeners.delete(fn);
+      },
+      destroy() {
+        listeners.clear();
+        updateTimer && clearTimeout(updateTimer);
+      }
+    };
+  }
+  computed(states, computeFn) {
+    const values = states.map((s) => s.value);
+    const result = this.createState(computeFn(...values));
+    states.forEach((state, index) => {
+      state.subscribe((newValue) => {
+        values[index] = newValue;
+        result.value = computeFn(...values);
+      });
+    });
+    return result;
+  }
+  effect(stateFn) {
+    stateFn();
+  }
+  // Virtual scrolling helper for large lists
+  createVirtualList(container, items, renderItem, itemHeight = 50, bufferSize = 5) {
+    const viewportHeight = container.clientHeight;
+    const totalHeight = items.length * itemHeight;
+    let scrollTop = 0;
+    const getVisibleRange = () => {
+      const start = Math.max(0, Math.floor(scrollTop / itemHeight) - bufferSize);
+      const end = Math.min(items.length, Math.ceil((scrollTop + viewportHeight) / itemHeight) + bufferSize);
+      return { start, end };
+    };
+    const render2 = () => {
+      const { start, end } = getVisibleRange();
+      const wrapper = document.createElement("div");
+      wrapper.style.cssText = `height:${totalHeight}px;position:relative`;
+      for (let i = start; i < end; i++) {
+        const itemEl = document.createElement("div");
+        itemEl.style.cssText = `position:absolute;top:${i * itemHeight}px;height:${itemHeight}px;width:100%`;
+        this.renderToDOM(renderItem(items[i], i), itemEl);
+        wrapper.appendChild(itemEl);
+      }
+      container.innerHTML = "";
+      container.appendChild(wrapper);
+    };
+    const scrollHandler = () => {
+      scrollTop = container.scrollTop;
+      requestAnimationFrame(render2);
+    };
+    container.addEventListener("scroll", scrollHandler);
+    render2();
+    return {
+      render: render2,
+      destroy: () => {
+        container.removeEventListener("scroll", scrollHandler);
+        container.innerHTML = "";
+      }
+    };
+  }
+  // Lazy load components
+  lazy(loadFn) {
+    let component = null;
+    let loading = false;
+    return async (...args) => {
+      if (!component && !loading) {
+        loading = true;
+        component = await loadFn();
+        loading = false;
+      }
+      return component ? component(...args) : { tagName: "div", props: { class: "loading" }, children: ["Loading..."] };
+    };
+  }
+  // Memory management - cleanup unused elements
+  cleanupUnusedElements(root) {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+    const toRemove = [];
+    while (walker.nextNode()) {
+      const node = walker.currentNode;
+      if (node.id && node.id.startsWith("r") && !this.elementCache.has(node)) {
+        toRemove.push(node);
+      }
+    }
+    toRemove.forEach((el) => el.remove());
+    return toRemove.length;
+  }
+  // Server-Side Rendering - convert VNode to HTML string
+  renderToString(vNode, options = {}) {
+    const { pretty = false, indent = 0 } = options;
+    const indentStr = pretty ? "  ".repeat(indent) : "";
+    const newLine = pretty ? "\n" : "";
+    let resolvedVNode = this.resolveStateValue(vNode);
+    resolvedVNode = this.unwrapReactive(resolvedVNode);
+    if (Array.isArray(resolvedVNode)) {
+      return resolvedVNode.map((child) => this.renderToString(child, options)).join("");
+    }
+    if (typeof resolvedVNode !== "object" || resolvedVNode === null) {
+      if (resolvedVNode === null || resolvedVNode === void 0 || resolvedVNode === false) {
+        return "";
+      }
+      return this.escapeHtml(String(resolvedVNode));
+    }
+    const { tagName, props, children } = resolvedVNode;
+    const isSelfClosing = this.isSelfClosingTag(tagName);
+    let html = `${indentStr}<${tagName}`;
+    const attrs = this.propsToAttributes(props);
+    if (attrs) {
+      html += ` ${attrs}`;
+    }
+    if (isSelfClosing) {
+      html += ` />${newLine}`;
+      return html;
+    }
+    html += ">";
+    if (props.dangerouslySetInnerHTML) {
+      html += props.dangerouslySetInnerHTML.__html;
+      html += `</${tagName}>${newLine}`;
+      return html;
+    }
+    if (children && children.length > 0) {
+      const resolvedChildren = children.map((c) => {
+        const resolved = this.resolveStateValue(c);
+        return this.unwrapReactive(resolved);
+      });
+      const hasComplexChildren = resolvedChildren.some(
+        (c) => typeof c === "object" && c !== null && !Array.isArray(c) && "tagName" in c
+      );
+      if (pretty && hasComplexChildren) {
+        html += newLine;
+        for (const child of resolvedChildren) {
+          if (shouldSkipChild(child)) continue;
+          if (Array.isArray(child)) {
+            for (const c of child) {
+              if (!shouldSkipChild(c)) {
+                html += this.renderToString(c, { pretty, indent: indent + 1 });
+              }
+            }
+          } else {
+            html += this.renderToString(child, { pretty, indent: indent + 1 });
+          }
+        }
+        html += indentStr;
+      } else {
+        for (const child of resolvedChildren) {
+          if (shouldSkipChild(child)) continue;
+          if (Array.isArray(child)) {
+            for (const c of child) {
+              if (!shouldSkipChild(c)) {
+                html += this.renderToString(c, { pretty: false, indent: 0 });
+              }
+            }
+          } else {
+            html += this.renderToString(child, { pretty: false, indent: 0 });
+          }
+        }
+      }
+    }
+    html += `</${tagName}>${newLine}`;
+    return html;
+  }
+  resolveStateValue(value) {
+    if (value && typeof value === "object" && "value" in value && "subscribe" in value) {
+      return value.value;
+    }
+    return value;
+  }
+  isReactiveWrapper(vNode) {
+    if (!vNode || typeof vNode !== "object" || !vNode.tagName) {
+      return false;
+    }
+    return vNode.tagName === "span" && vNode.props?.id && typeof vNode.props.id === "string" && vNode.props.id.match(/^r[a-z0-9]{9}$/);
+  }
+  unwrapReactive(vNode) {
+    if (!this.isReactiveWrapper(vNode)) {
+      return vNode;
+    }
+    const children = vNode.children;
+    if (!children || children.length === 0) {
+      return "";
+    }
+    if (children.length === 1) {
+      const child = children[0];
+      if (child && typeof child === "object" && child.tagName === "span") {
+        const props = child.props;
+        const hasNoProps = !props || Object.keys(props).length === 0;
+        const hasSingleStringChild = child.children && child.children.length === 1 && typeof child.children[0] === "string";
+        if (hasNoProps && hasSingleStringChild) {
+          return child.children[0];
+        }
+      }
+      return this.unwrapReactive(child);
+    }
+    return children.map((c) => this.unwrapReactive(c));
+  }
+  escapeHtml(text) {
+    const htmlEscapes = {
+      "&": "&amp;",
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': "&quot;",
+      "'": "&#x27;"
+    };
+    return text.replace(/[&<>"']/g, (char) => htmlEscapes[char]);
+  }
+  isSelfClosingTag(tagName) {
+    const selfClosingTags = /* @__PURE__ */ new Set([
+      "area",
+      "base",
+      "br",
+      "col",
+      "embed",
+      "hr",
+      "img",
+      "input",
+      "link",
+      "meta",
+      "param",
+      "source",
+      "track",
+      "wbr"
+    ]);
+    return selfClosingTags.has(tagName.toLowerCase());
+  }
+  propsToAttributes(props) {
+    const attrs = [];
+    for (const key in props) {
+      if (key === "children" || key === "dangerouslySetInnerHTML" || key === "ref") {
+        continue;
+      }
+      let value = props[key];
+      value = this.resolveStateValue(value);
+      if (value == null || value === false) continue;
+      if (key.startsWith("on") && typeof value === "function") {
+        continue;
+      }
+      if (key === "className" || key === "class") {
+        const className = Array.isArray(value) ? value.join(" ") : value;
+        if (className) {
+          attrs.push(`class="${this.escapeHtml(String(className))}"`);
+        }
+        continue;
+      }
+      if (key === "style") {
+        const styleStr = this.styleToString(value);
+        if (styleStr) {
+          attrs.push(`style="${this.escapeHtml(styleStr)}"`);
+        }
+        continue;
+      }
+      if (value === true) {
+        attrs.push(key);
+        continue;
+      }
+      attrs.push(`${key}="${this.escapeHtml(String(value))}"`);
+    }
+    return attrs.join(" ");
+  }
+  styleToString(style) {
+    if (typeof style === "string") {
+      return style;
+    }
+    if (typeof style === "object" && style !== null) {
+      const styles = [];
+      for (const key in style) {
+        const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+        styles.push(`${cssKey}:${style[key]}`);
+      }
+      return styles.join(";");
+    }
+    return "";
+  }
+  isState(value) {
+    return value && typeof value === "object" && "value" in value && "subscribe" in value && typeof value.subscribe === "function";
+  }
+  createReactiveChild(state, renderFn) {
+    const currentValue = renderFn(state.value);
+    if (typeof window !== "undefined" && typeof document !== "undefined") {
+      const entry = { node: null, renderFn };
+      this.reactiveNodes.set(state, entry);
+      state.subscribe(() => {
+        if (entry.node && entry.node.parentNode) {
+          const newValue = renderFn(state.value);
+          entry.node.textContent = String(newValue ?? "");
+        }
+      });
+    }
+    return currentValue;
+  }
+  jsonToVNode(json) {
+    if (this.isState(json)) {
+      return this.createReactiveChild(json, (v) => v);
+    }
+    if (isPrimitiveJson(json)) {
+      return json;
+    }
+    const { tag, attributes = {}, children } = json;
+    const props = {};
+    for (const key in attributes) {
+      const value = attributes[key];
+      if (key === "class") {
+        props.className = this.isState(value) ? value.value : value;
+      } else {
+        props[key] = this.isState(value) ? value.value : value;
+      }
+    }
+    const childrenArray = [];
+    if (children != null) {
+      if (Array.isArray(children)) {
+        for (const child of children) {
+          if (this.isState(child)) {
+            childrenArray.push(this.createReactiveChild(child, (v) => v));
+          } else {
+            const converted = this.jsonToVNode(child);
+            if (converted != null && converted !== false) {
+              childrenArray.push(converted);
+            }
+          }
+        }
+      } else if (this.isState(children)) {
+        childrenArray.push(this.createReactiveChild(children, (v) => v));
+      } else if (typeof children === "object" && "tag" in children) {
+        const converted = this.jsonToVNode(children);
+        if (converted != null && converted !== false) {
+          childrenArray.push(converted);
+        }
+      } else {
+        childrenArray.push(children);
+      }
+    }
+    return { tagName: tag, props, children: childrenArray };
+  }
+  vNodeJsonToVNode(json) {
+    if (this.isState(json)) {
+      return this.createReactiveChild(json, (v) => v);
+    }
+    if (isPrimitiveJson(json)) {
+      return json;
+    }
+    const { tagName, props = {}, children = [] } = json;
+    const resolvedProps = {};
+    for (const key in props) {
+      const value = props[key];
+      resolvedProps[key] = this.isState(value) ? value.value : value;
+    }
+    const childrenArray = [];
+    for (const child of children) {
+      if (this.isState(child)) {
+        childrenArray.push(this.createReactiveChild(child, (v) => v));
+      } else {
+        const converted = this.vNodeJsonToVNode(child);
+        if (converted != null && converted !== false) {
+          childrenArray.push(converted);
+        }
+      }
+    }
+    return { tagName, props: resolvedProps, children: childrenArray };
+  }
+  renderJson(rootElement, json) {
+    const vNode = this.jsonToVNode(json);
+    if (!vNode || typeof vNode !== "object" || !("tagName" in vNode)) {
+      throw new Error("Invalid JSON structure");
+    }
+    return this.render(rootElement, vNode);
+  }
+  renderVNode(rootElement, json) {
+    const vNode = this.vNodeJsonToVNode(json);
+    if (!vNode || typeof vNode !== "object" || !("tagName" in vNode)) {
+      throw new Error("Invalid VNode JSON structure");
+    }
+    return this.render(rootElement, vNode);
+  }
+  renderJsonToString(json, options = {}) {
+    const vNode = this.jsonToVNode(json);
+    return this.renderToString(vNode, options);
+  }
+  renderVNodeToString(json, options = {}) {
+    const vNode = this.vNodeJsonToVNode(json);
+    return this.renderToString(vNode, options);
+  }
+  // Generate complete HTML document as string (for SSR)
+  renderToHTMLDocument(vNode, options = {}) {
+    const { title = "", meta = [], links = [], scripts = [], styles = [], lang = "en", head = "", bodyAttrs = {}, pretty = false } = options;
+    const nl = pretty ? "\n" : "";
+    const indent = pretty ? "  " : "";
+    const indent2 = pretty ? "    " : "";
+    let html = `<!DOCTYPE html>${nl}<html lang="${lang}">${nl}${indent}<head>${nl}${indent2}<meta charset="UTF-8">${nl}${indent2}<meta name="viewport" content="width=device-width, initial-scale=1.0">${nl}`;
+    if (title) html += `${indent2}<title>${this.escapeHtml(title)}</title>${nl}`;
+    for (const m of meta) {
+      html += `${indent2}<meta`;
+      for (const k in m) html += ` ${k}="${this.escapeHtml(m[k])}"`;
+      html += `>${nl}`;
+    }
+    for (const l of links) {
+      html += `${indent2}<link`;
+      for (const k in l) html += ` ${k}="${this.escapeHtml(l[k])}"`;
+      html += `>${nl}`;
+    }
+    for (const s of styles) {
+      if (s.href) {
+        html += `${indent2}<link rel="stylesheet" href="${this.escapeHtml(s.href)}">${nl}`;
+      } else if (s.content) {
+        html += `${indent2}<style>${s.content}</style>${nl}`;
+      }
+    }
+    if (head) html += head + nl;
+    html += `${indent}</head>${nl}${indent}<body`;
+    for (const k in bodyAttrs) html += ` ${k}="${this.escapeHtml(bodyAttrs[k])}"`;
+    html += `>${nl}`;
+    html += this.renderToString(vNode, { pretty, indent: 2 });
+    for (const script of scripts) {
+      html += `${indent2}<script`;
+      if (script.type) html += ` type="${this.escapeHtml(script.type)}"`;
+      if (script.async) html += ` async`;
+      if (script.defer) html += ` defer`;
+      if (script.src) {
+        html += ` src="${this.escapeHtml(script.src)}"></script>${nl}`;
+      } else if (script.content) {
+        html += `>${script.content}</script>${nl}`;
+      } else {
+        html += `></script>${nl}`;
+      }
+    }
+    html += `${indent}</body>${nl}</html>`;
+    return html;
+  }
+  // Expose elementCache for reactive updates
+  getElementCache() {
+    return this.elementCache;
+  }
+};
+var dom = new DomNode();
+var render = dom.render.bind(dom);
+var renderToString = dom.renderToString.bind(dom);
+
+// src/router.ts
+function matchRoute(pattern, path) {
+  const patternParts = pattern.split("/").filter(Boolean);
+  const pathParts = path.split("/").filter(Boolean);
+  if (pattern.endsWith("*")) {
+    const basePattern = pattern.slice(0, -1);
+    if (path.startsWith(basePattern) || basePattern === "/" || pattern === "*") {
+      return { "*": path.slice(basePattern.length) };
+    }
+  }
+  if (patternParts.length !== pathParts.length) return null;
+  const params = {};
+  for (let i = 0; i < patternParts.length; i++) {
+    const patternPart = patternParts[i];
+    const pathPart = pathParts[i];
+    if (patternPart.startsWith(":")) {
+      params[patternPart.slice(1)] = decodeURIComponent(pathPart);
+    } else if (patternPart !== pathPart) {
+      return null;
+    }
+  }
+  return params;
+}
+function executeGuard(guard, to, from, navigate, replace = false) {
+  const result = guard(to, from);
+  if (result === false) return false;
+  if (typeof result === "string") {
+    navigate(result, replace);
+    return false;
+  }
+  return true;
+}
+function wrapComponent(component) {
+  if (typeof component === "object" && component !== null && "tagName" in component) {
+    return component;
+  }
+  return { tagName: "span", props: {}, children: [component] };
+}
+function createRouter(options) {
+  const { mode = "history", base = "", routes } = options;
+  const globalGuards = [];
+  const parseQuery = (search) => {
+    const query = {};
+    const params = new URLSearchParams(search);
+    params.forEach((value, key) => {
+      query[key] = value;
+    });
+    return query;
+  };
+  const getCurrentPath = () => {
+    if (mode === "hash") {
+      return window.location.hash.slice(1) || "/";
+    }
+    return window.location.pathname.replace(base, "") || "/";
+  };
+  const parseLocation = (path) => {
+    const [pathPart, queryPart = ""] = path.split("?");
+    const [cleanPath, hash = ""] = pathPart.split("#");
+    return {
+      path: cleanPath || "/",
+      params: {},
+      query: parseQuery(queryPart),
+      hash: hash ? "#" + hash : ""
+    };
+  };
+  const findRoute = (path) => {
+    for (const route of routes) {
+      const params = matchRoute(route.path, path);
+      if (params !== null) {
+        return { route, params };
+      }
+    }
+    return null;
+  };
+  const currentRoute = dom.createState(parseLocation(getCurrentPath()));
+  const navigate = (path, replace = false) => {
+    const location = parseLocation(path);
+    const match = findRoute(location.path);
+    if (match) {
+      location.params = match.params;
+    }
+    for (const guard of globalGuards) {
+      if (!executeGuard(guard, location, currentRoute.value, navigate, replace)) return;
+    }
+    if (match?.route.beforeEnter) {
+      if (!executeGuard(match.route.beforeEnter, location, currentRoute.value, navigate, replace)) return;
+    }
+    const url = mode === "hash" ? "#" + path : base + path;
+    if (replace) {
+      window.history.replaceState({ path }, "", url);
+    } else {
+      window.history.pushState({ path }, "", url);
+    }
+    currentRoute.value = location;
+  };
+  const handlePopState = () => {
+    const path = getCurrentPath();
+    const location = parseLocation(path);
+    const match = findRoute(location.path);
+    if (match) {
+      location.params = match.params;
+    }
+    currentRoute.value = location;
+  };
+  if (typeof window !== "undefined") {
+    window.addEventListener("popstate", handlePopState);
+  }
+  return {
+    currentRoute,
+    push: (path) => navigate(path, false),
+    replace: (path) => navigate(path, true),
+    back: () => window.history.back(),
+    forward: () => window.history.forward(),
+    go: (delta) => window.history.go(delta),
+    beforeEach: (guard) => {
+      globalGuards.push(guard);
+    },
+    destroy: () => {
+      if (typeof window !== "undefined") {
+        window.removeEventListener("popstate", handlePopState);
+      }
+      currentRoute.destroy();
+    }
+  };
+}
+function createRouterView(router, options) {
+  const { routes, notFound } = options;
+  return () => {
+    const location = router.currentRoute.value;
+    const match = routes.find((r) => matchRoute(r.path, location.path) !== null);
+    if (match) {
+      const params = matchRoute(match.path, location.path) || {};
+      const component = match.component({ ...params, ...location.query });
+      return wrapComponent(component);
+    }
+    if (notFound) {
+      const component = notFound(location.params);
+      return wrapComponent(component);
+    }
+    return { tagName: "div", props: {}, children: ["404 - Not Found"] };
+  };
+}
+var routerLink = (router, props, ...children) => {
+  return {
+    tagName: "a",
+    props: {
+      ...props,
+      href: props.to,
+      onclick: (e) => {
+        e.preventDefault();
+        router.push(props.to);
+      }
+    },
+    children
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createRouter,
+  createRouterView,
+  routerLink
+});