@jasonshimmy/custom-elements-runtime 0.0.9 β 0.0.10-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +84 -81
- package/dist/custom-elements-runtime.cjs.js +1 -71
- package/dist/custom-elements-runtime.cjs.js.map +1 -1
- package/dist/custom-elements-runtime.es.js +1225 -1481
- package/dist/custom-elements-runtime.es.js.map +1 -1
- package/dist/custom-elements-runtime.umd.js +1 -71
- package/dist/custom-elements-runtime.umd.js.map +1 -1
- package/dist/directives.d.ts +11 -0
- package/dist/router.d.ts +17 -6
- package/dist/runtime.d.ts +55 -137
- package/dist/store.d.ts +5 -1
- package/dist/style-utils.d.ts +100 -0
- package/dist/template-compiler.d.ts +4 -115
- package/dist/vdom.d.ts +32 -0
- package/package.json +1 -1
- package/dist/build-tools.d.ts +0 -66
- package/dist/computed-state.d.ts +0 -10
- package/dist/data-binding.d.ts +0 -8
- package/dist/dev-tools.d.ts +0 -21
- package/dist/ssr.d.ts +0 -49
- package/dist/template-helpers.d.ts +0 -43
- package/dist/v-dom.d.ts +0 -54
package/README.md
CHANGED
|
@@ -4,6 +4,21 @@
|
|
|
4
4
|
|
|
5
5
|
Build modern components with strict TypeScript, zero dependencies, and a clean functional API. Designed for speed, standards compliance, and productivity.
|
|
6
6
|
|
|
7
|
+
## π§ **Active Development Notice**
|
|
8
|
+
|
|
9
|
+
> β οΈ **This package is in active development and not yet ready for production use.**
|
|
10
|
+
> Features, APIs, and stability may change frequently. Please use for testing, experimentation, or contribution only.
|
|
11
|
+
|
|
12
|
+
## β¨ Why You'll Love It
|
|
13
|
+
|
|
14
|
+
- β‘ **Blazing Fast:** Minimal runtime, instant updates, zero dependencies.
|
|
15
|
+
- π§βπ» **TypeScript First:** Strict types, intellisense, and safety everywhere.
|
|
16
|
+
- π§© **Functional API:** No classes, no boilerplateβjust pure functions.
|
|
17
|
+
- π οΈ **SSR & HMR Ready:** Universal rendering and instant hot reloads.
|
|
18
|
+
- π¨ **Style Utilities:** Scoped CSS, dynamic styles, and theming built-in.
|
|
19
|
+
- π **Extensible:** Directives, event bus, store, and more for advanced use cases.
|
|
20
|
+
- π **Developer Friendly:** Clean docs, examples, and a welcoming community.
|
|
21
|
+
|
|
7
22
|
---
|
|
8
23
|
|
|
9
24
|
## π Quick Start
|
|
@@ -19,102 +34,90 @@ npm install @jasonshimmy/custom-elements-runtime
|
|
|
19
34
|
```ts
|
|
20
35
|
import { component, html } from '@jasonshimmy/custom-elements-runtime';
|
|
21
36
|
|
|
22
|
-
component('my-counter',
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<button data-on-click="increment">Count: ${count}</button>
|
|
26
|
-
`({ count }),
|
|
27
|
-
increment(event, state) { state.count++; }
|
|
28
|
-
});
|
|
37
|
+
component('my-counter', (ctx) => html`
|
|
38
|
+
<button @click="${() => ctx.count++}">Count: ${ctx.count}</button>
|
|
39
|
+
`, { state: { count: 0 } });
|
|
29
40
|
```
|
|
30
41
|
|
|
31
42
|
No config needed β TypeScript support is built-in.
|
|
32
43
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
---
|
|
36
|
-
|
|
37
|
-
## β¨ Why Use It?
|
|
38
|
-
|
|
39
|
-
- **Stateful or Stateless:** Flexible components with or without internal state
|
|
40
|
-
- **Reactive & Declarative:** Auto updates, attribute sync, and data binding
|
|
41
|
-
- **Functional Templates:** Tagged helpers (`html`, `compile`), Promises, and styles
|
|
42
|
-
- **Refs & Computed:** Access elements or create derived state easily
|
|
43
|
-
- **Built-in Store & Events:** Global state and event bus included
|
|
44
|
-
- **SSR & Hydration:** Universal rendering with opt-in hydration
|
|
45
|
-
- **Error Handling & Focus Retention:** Smooth updates without breaking UX
|
|
46
|
-
- **Plugin System:** Hooks like `onInit`, `onRender`, `onError`
|
|
47
|
-
- **Lightweight Router:** SSR-ready with `<router-view>` and programmatic navigation
|
|
48
|
-
- **Tiny & Fast:** Tree-shakable, modular, no dependencies
|
|
49
|
-
|
|
50
|
-
---
|
|
51
|
-
|
|
52
|
-
## β οΈ Things to Know
|
|
53
|
-
|
|
54
|
-
- Templates need a single root node (fragments allowed with keys)
|
|
55
|
-
- One handler per event type per element
|
|
56
|
-
- User input takes priority over programmatic changes
|
|
57
|
-
- SSR hydration is opt-in (`data-hydrate`)
|
|
58
|
-
- Only documented features are officially supported
|
|
59
|
-
- Plugins must be pure and side-effect free
|
|
60
|
-
- Router requires matching templates for SSR hydration
|
|
61
|
-
|
|
62
|
-
---
|
|
63
|
-
|
|
64
|
-
## π§ Use Cases
|
|
44
|
+
## β±οΈ Getting Started in 60 Seconds
|
|
65
45
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
46
|
+
1. **Install:** `npm install @jasonshimmy/custom-elements-runtime`
|
|
47
|
+
2. **Create a Component:**
|
|
48
|
+
```ts
|
|
49
|
+
import { component, html } from '@jasonshimmy/custom-elements-runtime';
|
|
50
|
+
component('hello-world', () => html`<h1>Hello, World!</h1>`);
|
|
51
|
+
```
|
|
52
|
+
3. **Use in HTML:**
|
|
53
|
+
```html
|
|
54
|
+
<hello-world></hello-world>
|
|
55
|
+
```
|
|
56
|
+
4. **Enjoy instant reactivity and type safety!**
|
|
74
57
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
## π₯οΈ SSR Highlights
|
|
58
|
+
# π Documentation Index
|
|
78
59
|
|
|
79
|
-
|
|
80
|
-
- Hydrate only what you need
|
|
81
|
-
- Robust support for fragments, keyed nodes, and error handling
|
|
82
|
-
- Compatible with routing and static site generation
|
|
60
|
+
Explore the full documentation for every runtime feature:
|
|
83
61
|
|
|
84
62
|
---
|
|
85
63
|
|
|
86
|
-
##
|
|
87
|
-
|
|
88
|
-
-
|
|
89
|
-
-
|
|
90
|
-
-
|
|
91
|
-
-
|
|
92
|
-
-
|
|
64
|
+
## ποΈ Core Concepts
|
|
65
|
+
- [Component Config](./docs/component-config.md)
|
|
66
|
+
- [Component](./docs/component.md)
|
|
67
|
+
- [Render](./docs/render.md)
|
|
68
|
+
- [Props](./docs/props.md)
|
|
69
|
+
- [State](./docs/state.md)
|
|
70
|
+
- [Computed](./docs/computed.md)
|
|
71
|
+
- [Watch](./docs/watch.md)
|
|
72
|
+
- [Store](./docs/store.md)
|
|
73
|
+
- [Event Bus](./docs/event-bus.md)
|
|
74
|
+
- [Template](./docs/template.md)
|
|
75
|
+
|
|
76
|
+
## π§© Reactivity & Patterns
|
|
77
|
+
- [Directives](./docs/directives.md)
|
|
78
|
+
- [Bindings](./docs/bindings.md)
|
|
79
|
+
- [Directives & Binding](./docs/directives-and-binding.md)
|
|
80
|
+
- [Slot](./docs/slot.md)
|
|
81
|
+
- [Advanced Usage Patterns](./docs/advanced-usage-patterns.md)
|
|
82
|
+
- [Cross-Component Communication](./docs/cross-component-communication.md)
|
|
83
|
+
|
|
84
|
+
## π¨ Styling
|
|
85
|
+
- [Style](./docs/style.md)
|
|
86
|
+
- [Style Utils](./docs/style-utils.md)
|
|
87
|
+
|
|
88
|
+
## β‘ Performance & Architecture
|
|
89
|
+
- [Virtual DOM](./docs/virtual-dom.md)
|
|
90
|
+
- [HMR](./docs/hmr.md)
|
|
91
|
+
- [SSR](./docs/ssr.md)
|
|
92
|
+
|
|
93
|
+
## π‘οΈ Error Handling & Lifecycle
|
|
94
|
+
- [Error](./docs/error.md)
|
|
95
|
+
- [Hooks](./docs/hooks.md)
|
|
96
|
+
- [Method Injection](./docs/method-injection.md)
|
|
97
|
+
|
|
98
|
+
## π§° Utilities & Troubleshooting
|
|
99
|
+
- [Troubleshooting](./docs/troubleshooting.md)
|
|
100
|
+
|
|
101
|
+
## π Framework Integration
|
|
102
|
+
- [Vue Integration](./docs/vue-integration.md)
|
|
103
|
+
- [React Integration](./docs/react-integration.md)
|
|
104
|
+
- [Svelte Integration](./docs/svelte-integration.md)
|
|
105
|
+
- [Angular Integration](./docs/angular-integration.md)
|
|
93
106
|
|
|
94
107
|
---
|
|
95
108
|
|
|
96
|
-
|
|
109
|
+
For deep dives, see each guide above or browse the source code in `src/lib/`.
|
|
97
110
|
|
|
98
|
-
|
|
99
|
-
-
|
|
100
|
-
-
|
|
101
|
-
-
|
|
102
|
-
-
|
|
103
|
-
|
|
104
|
-
---
|
|
111
|
+
## π§βπ¬ Real-World Examples
|
|
112
|
+
- [Form Input & Validation](./src/components/examples/FormInputValidation.ts)
|
|
113
|
+
- [Minimal Example](./src/components/examples/MinimalExample.ts)
|
|
114
|
+
- [Shopping Cart](./src/components/examples/ShoppingCart.ts)
|
|
115
|
+
- [Todo App](./src/components/examples/TodoApp.ts)
|
|
105
116
|
|
|
106
|
-
##
|
|
107
|
-
|
|
108
|
-
- [
|
|
109
|
-
-
|
|
110
|
-
- [π± Core Concepts](docs/core-concepts.md)
|
|
111
|
-
- [π₯ Data Model vs Data Bind](docs/data-model-vs-data-bind.md)
|
|
112
|
-
- [π¦ Examples](docs/examples.md)
|
|
113
|
-
- [ποΈ Form Input Bindings](docs/form-input-bindings.md)
|
|
114
|
-
- [π― Framework Comparison](docs/framework-comparison.md)
|
|
115
|
-
- [π Framework Integration](docs/framework-integration.md)
|
|
116
|
-
- [π¦ Routing](docs/routing.md)
|
|
117
|
-
- [π SSR Guide](docs/ssr.md)
|
|
117
|
+
## π Showcase & Community
|
|
118
|
+
- **Showcase your components!** Open a PR to add your project to our gallery.
|
|
119
|
+
- **Questions or ideas?** [Start a discussion](https://github.com/jasonshimmy/custom-elements-runtime/discussions) or [open an issue](https://github.com/jasonshimmy/custom-elements-runtime/issues).
|
|
120
|
+
- **Contribute:** We welcome PRs for docs, features, and examples.
|
|
118
121
|
|
|
119
122
|
---
|
|
120
123
|
|
|
@@ -1,72 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var O=typeof document<"u"?document.currentScript:null;function $(e){let t=new Proxy(e,{set:(i,a,c)=>(i[a]=c,s(),!0)});const r=[];function n(i){r.push(i),i(t)}function o(){return t}function s(){r.forEach(i=>i(t))}return{subscribe:n,getState:o}}class g extends EventTarget{handlers={};static instance;eventCounters=new Map;static getInstance(){return g.instance||(g.instance=new g),g.instance}emit(t,r){const n=Date.now(),o=this.eventCounters.get(t);if(!o||n-o.window>1e3)this.eventCounters.set(t,{count:1,window:n});else if(o.count++,o.count>50&&(console.error(`Event storm detected for "${t}": ${o.count} events in 1 second. Throttling...`),o.count>100)){console.warn(`Blocking further "${t}" events to prevent infinite loop`);return}this.dispatchEvent(new CustomEvent(t,{detail:r,bubbles:!1,cancelable:!0}));const s=this.handlers[t];s&&s.forEach(i=>{try{i(r)}catch(a){console.error(`Error in global event handler for "${t}":`,a)}})}on(t,r){return this.handlers[t]||(this.handlers[t]=new Set),this.handlers[t].add(r),()=>this.off(t,r)}off(t,r){const n=this.handlers[t];n&&n.delete(r)}offAll(t){delete this.handlers[t]}listen(t,r,n){return this.addEventListener(t,r,n),()=>this.removeEventListener(t,r)}once(t,r){return new Promise(n=>{const o=this.on(t,s=>{o(),r(s),n(s)})})}getActiveEvents(){return Object.keys(this.handlers).filter(t=>this.handlers[t]&&this.handlers[t].size>0)}clear(){this.handlers={}}getHandlerCount(t){return this.handlers[t]?.size||0}getEventStats(){const t={};for(const[r,n]of this.eventCounters.entries())t[r]={count:n.count,handlersCount:this.getHandlerCount(r)};return t}resetEventCounters(){this.eventCounters.clear()}}const C=g.getInstance(),tt=typeof window>"u"||typeof document>"u";function et(e){return{state:e,emit:()=>{},onGlobal:()=>()=>{},offGlobal:()=>{},emitGlobal:()=>{},render:()=>{}}}function U(e,t={}){tt||console.warn("[SSR] renderToString should only be used on the server");try{const r=e.state,n=et(r),o=e.template(r,n);let s="";t.includeStyles&&e.style&&(s=`<style>${typeof e.style=="function"?e.style(r):e.style}</style>`);const i=t.sanitizeAttributes?t.sanitizeAttributes(e.attrs||{}):e.attrs||{},a=Object.entries(i).map(([u,d])=>`${W(u)}="${W(d)}"`).join(" "),l=`${a?`<${e.tag} ${a}>`:`<${e.tag}>`}${s}${o}</${e.tag}>`;return t.prettyPrint?it(l):l}catch(r){return console.error(`[SSR] Error rendering ${e.tag}:`,r),`<${e.tag}><div style="color: red;">SSR Error: ${st(String(r))}</div></${e.tag}>`}}function rt(e,t={}){const r={components:new Map,styles:new Set},n=[];e.forEach(i=>{if(r.components.set(i.tag,i),i.style){const c=typeof i.style=="function"?i.style(i.state):i.style;r.styles.add(c)}const a=U(i,{...t,includeStyles:!1});n.push(a)});const o=Array.from(r.styles).join(`
|
|
2
|
-
`);return{html:n.join(`
|
|
3
|
-
`),styles:o,context:r}}function nt(e){const t=Array.from(e.components.entries()).map(([r,n])=>({tag:r,state:n.state}));return`
|
|
4
|
-
<script type="module">
|
|
5
|
-
// Hydration data from SSR
|
|
6
|
-
window.__SSR_CONTEXT__ = ${JSON.stringify({components:t})};
|
|
7
|
-
|
|
8
|
-
// Auto-hydrate when DOM is ready
|
|
9
|
-
if (document.readyState === 'loading') {
|
|
10
|
-
document.addEventListener('DOMContentLoaded', hydrate);
|
|
11
|
-
} else {
|
|
12
|
-
hydrate();
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
function hydrate() {
|
|
16
|
-
const context = window.__SSR_CONTEXT__;
|
|
17
|
-
if (!context?.components) return;
|
|
18
|
-
|
|
19
|
-
context.components.forEach(({ tag, state }) => {
|
|
20
|
-
const elements = document.querySelectorAll(tag);
|
|
21
|
-
elements.forEach(el => {
|
|
22
|
-
// Mark as hydrated to prevent re-initialization
|
|
23
|
-
if (!el.hasAttribute('data-hydrated')) {
|
|
24
|
-
el.setAttribute('data-hydrated', 'true');
|
|
25
|
-
// Restore state if component supports it
|
|
26
|
-
if (el._hydrateWithState) {
|
|
27
|
-
el._hydrateWithState(state);
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
});
|
|
31
|
-
});
|
|
32
|
-
|
|
33
|
-
// Clean up
|
|
34
|
-
delete window.__SSR_CONTEXT__;
|
|
35
|
-
}
|
|
36
|
-
<\/script>`.trim()}const st=e=>e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'"),W=e=>e.replace(/&/g,"&").replace(/"/g,""").replace(/'/g,"'").replace(/</g,"<").replace(/>/g,">"),it=e=>e.replace(/></g,`>
|
|
37
|
-
<`).split(`
|
|
38
|
-
`).map(t=>{const r=(t.match(/^<[^\/]/g)||[]).length-(t.match(/<\//g)||[]).length;return" ".repeat(Math.max(0,r))+t.trim()}).join(`
|
|
39
|
-
`);function F(e){return String(e).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function j(e,t){if(typeof e!="string"||!t)return String(e);for(const r in t){if(typeof t[r]=="string"&&e===t[r])return F(e);if(Array.isArray(t[r])){for(const n of t[r])if(n&&typeof n=="object"){for(const o in n)if(typeof n[o]=="string"&&e===n[o])return F(e)}}}return String(e)}function T(e,...t){function r(n,o,s){if(Array.isArray(n)){const i=n.map(a=>r(a,o,s));return i.some(a=>a instanceof Promise)?Promise.all(i).then(a=>a.join("")):i.join("")}if(typeof n=="function"){const i=r(n(o,s),o,s);return i instanceof Promise,i}return n==null?"":n instanceof Promise?n:String(n)}return(n,o)=>{let s="",i=!1;const a=[];for(let c=0;c<e.length;c++)if(s+=e[c],c<t.length){let l=t[c];const u=e[c],d=/data-on-[a-z]+="?$/.test(u);l=r(l,n,o),l instanceof Promise?(i=!0,a.push(l)):/=\s*"?$/.test(u)&&typeof l=="string"&&!d?(l=l.replace(/"/g,""").replace(/'/g,"'"),s+=l):!d&&!/=\s*"?$/.test(u)?s+=j(l,n):s+=l}return i?Promise.all(a).then(c=>{let l="",u=0;for(let d=0;d<e.length;d++)if(l+=e[d],d<t.length){let f=t[d];const h=e[d],m=/data-on-[a-z]+="?$/.test(h);f=r(f,n,o),f instanceof Promise?l+=c[u++]:/=\s*"?$/.test(h)&&typeof f=="string"&&!m?(f=f.replace(/"/g,""").replace(/'/g,"'"),l+=f):!m&&!/=\s*"?$/.test(h)?l+=j(f,n):l+=f}return l}):s}}function ot(e,...t){const r="compiled-"+Math.random().toString(36).slice(2);function n(s,i,a){return Array.isArray(s)?s.map(c=>n(c,i,a)).join(""):typeof s=="function"?n(s(i,a),i,a):s==null?"":String(s)}const o=(s,i)=>{let a="";for(let c=0;c<e.length;c++)if(a+=e[c],c<t.length){let l=t[c];const u=e[c],d=/data-on-[a-z]+="?$/.test(u);l=n(l,s,i),/=\s*"?$/.test(u)&&typeof l=="string"&&!d?(l=l.replace(/"/g,""").replace(/'/g,"'"),a+=l):!d&&!/=\s*"?$/.test(u)?a+=j(l,s):a+=l??""}return a};return o.id=r,o}function K(e,...t){let r="";for(let n=0;n<e.length;n++)r+=e[n],n<t.length&&(r+=t[n]??"");return r}function at(e){return Object.keys(e).filter(t=>e[t]).join(" ")}function ct(e){return Object.entries(e).map(([t,r])=>`${t}: ${r}`).join("; ")}function B(e,t,r){const[n,...o]=r.split("|").map(a=>a.trim());if(!n||n==="__proto__"||n==="constructor"||n==="prototype")return;function s(a,c,l){const u=c.split(".");let d=a;for(let f=0;f<u.length-1;f++)u[f]in d||(d[u[f]]={}),d=d[u[f]];d[u[u.length-1]]=l}const i=a=>{let c;if(e instanceof HTMLInputElement&&e.type==="checkbox"){c=e.value;const l=e.getAttribute("data-true-value"),u=e.getAttribute("data-false-value");let d=Array.isArray(t[n])?t[n]:void 0;if(d){if(e.checked)d.includes(c)||d.push(c);else{const f=d.indexOf(c);f!==-1&&d.splice(f,1)}s(t,n,[...d])}else l!==null||u!==null?e.checked?s(t,n,l):s(t,n,u!==null?u:!1):s(t,n,e.checked)}else e instanceof HTMLInputElement&&e.type==="radio"?(c=e.value,s(t,n,c),((e.form||e.closest("form")||e.getRootNode())instanceof Element?(e.form||e.closest("form")||e.getRootNode()).querySelectorAll(`input[type="radio"][name="${e.name}"][data-model="${r}"]`):[]).forEach(u=>{u.checked=u.value===String(c)})):(c=e.value,e instanceof HTMLInputElement&&e.type==="number"&&(c=Number(c)),o.includes("trim")&&typeof c=="string"&&(c=c.trim()),o.includes("number")&&(c=Number(c)),s(t,n,c));if("_vnode"in e&&typeof e._vnode=="object"&&e._vnode?.props&&(e._vnode.props.value=c),a.type==="input"&&(e._isDirty=!0),a.type==="keydown"&&a.key==="Enter"&&(e._isDirty=!1,e instanceof HTMLElement&&e.isConnected)){let l=e.parentElement;for(;l&&!(l instanceof HTMLElement&&l.shadowRoot);)l=l.parentElement;l&&typeof l=="object"&&l!==null&&"render"in l&&typeof l.render=="function"&&l.render()}a.type==="blur"&&(e._isDirty=!1)};e.addEventListener("input",i),e.addEventListener("change",i),e.addEventListener("keydown",i),e.addEventListener("blur",i)}const z=(()=>{try{if(typeof process<"u"&&process.env)return process.env.NODE_ENV==="development"}catch{}return typeof window<"u"?window.location.hostname==="localhost"||window.location.hostname==="127.0.0.1":!1})();function lt(e,t={}){const{development:r=z,cache:n=!0,optimize:o=!0}=t,s=Z(e);if(n&&L.has(s)){if(r){const i=A.get(s)||{compilationTime:0,renderTime:0,updateTime:0,cacheHits:0,cacheMisses:0};i.cacheHits++,A.set(s,i)}return L.get(s)}if(r){const i=A.get(s)||{compilationTime:0,renderTime:0,updateTime:0,cacheHits:0,cacheMisses:0};i.cacheMisses++,A.set(s,i)}try{const i=dt(e,{development:r,optimize:o});return n&&L.set(s,i),i}catch(i){return r&&(console.error("[Template Compiler] Error compiling template:",i),console.error("[Template Compiler] Template:",e)),{statics:[e],dynamics:[],fragment:null,id:s,hasDynamics:!1,render:()=>e}}}function ut(e,t){if(typeof document>"u")return[0];try{let r=function(a,c=[]){if(a.nodeType===Node.TEXT_NODE){if(a.textContent?.includes(t))return c}else if(a.nodeType===Node.ELEMENT_NODE){let l=0;for(let u=0;u<a.childNodes.length;u++){const d=a.childNodes[u],f=r(d,[...c,l]);if(f)return f;l++}}return null};const s=new DOMParser().parseFromString(`<div>${e}</div>`,"text/html").body.firstElementChild;return r(s)||[0]}catch(r){return z&&console.warn("[Template Compiler] Error finding DOM path for placeholder:",t,r),[0]}}function dt(e,t){return new ft(e,t).compile()}class ft{template;options;dynamics=[];statics=[];constructor(t,r){this.template=t,this.options=r}compile(){this.parseTemplate();const t=this.createStaticFragment(),r=Z(this.template),n=(o,s)=>{let i="";for(let a=0;a<this.statics.length;a++)if(i+=this.statics[a],a<this.dynamics.length){let c=this.dynamics[a].getValue(o,s);if(c instanceof Promise)return Promise.all(this.dynamics.map(l=>{const u=l.getValue(o,s);return u instanceof Promise?u:Promise.resolve(u)})).then(l=>{let u="";for(let d=0;d<this.statics.length;d++)u+=this.statics[d],d<l.length&&(u+=l[d]);return u});i+=c}return i};return{statics:this.statics,dynamics:this.dynamics,fragment:t,id:r,hasDynamics:this.dynamics.length>0,render:n}}parseTemplate(){const t=/\{\{([^}]+)\}\}/g;let r=0,n;for(;(n=t.exec(this.template))!==null;){const s=this.template.slice(r,n.index);this.statics.push(s);let i=s.match(/([a-zA-Z0-9_-]+)\s*=\s*"?$/),a=i?i[1]:void 0,c;if(s.endsWith('style="color:'))a="style",c="color";else if(a==="style"){const u=s.match(/style\s*=\s*"?([^:;]+):\s*$/);u&&(c=u[1].trim())}const l=n[1].trim();this.analyzeDynamicExpression(l,this.dynamics.length,a,c),r=n.index+n[0].length}const o=this.template.slice(r);this.statics.push(o)}analyzeDynamicExpression(t,r,n,o){let s="text",i;n?n==="class"?(s="class",i="class"):n==="style"?(s="style",i=o||"style"):n==="value"?(s="property",i="value"):(s="attribute",i=n):t.includes("class.")?(s="class",i=t.split(".")[1]):t.includes("style.")?(s="style",i=t.split(".")[1]):t.includes("@")?(s="event",i=t.split("@")[1]):t==="class"?(s="class",i="class"):t==="style"?(s="style",i="style"):t==="value"?(s="property",i="value"):t==="title"&&(s="attribute",i="title");const a=`__DYNAMIC_${r}__`,c=this.statics.join(a);let l=ut(c,a);this.statics.length===2&&s!=="text"?l=[0]:this.statics.length===2&&l.length===0&&(l=[0]),this.dynamics.push({path:l,type:s,target:i,getValue:this.createValueGetter(t)})}createValueGetter(t){return(r,n)=>{try{let o;if(t&&typeof t=="function")o=t(r);else if(typeof t=="string"&&t.startsWith("state.")){const s=t.slice(6);o=r[s]}else typeof t=="string"&&/^[a-zA-Z0-9_$]+$/.test(t)?o=r[t]:(typeof t=="string"&&t.includes("("),o="");return o}catch(o){return this.options.development&&console.warn(`[Template Compiler] Error evaluating expression: ${t}`,o),""}}}createStaticFragment(){if(typeof document>"u")return null;try{const t=this.statics.join("");if(!t.trim())return null;const n=new DOMParser().parseFromString(t,"text/html"),o=document.createDocumentFragment();for(;n.body.firstChild;)o.appendChild(n.body.firstChild);return o}catch(t){return this.options.development&&console.warn("[Template Compiler] Could not create static fragment:",t),null}}}function H(e,t){try{if(t.length===1&&t[0]===0&&e instanceof Element)return e;let r=e;for(let n=0;n<t.length;n++){const o=t[n];if(!r.childNodes||r.childNodes.length<=o)return null;r=r.childNodes[o]}return r}catch{return null}}function x(e,t,r){let n;return e.fragment&&!e.hasDynamics?n=e.fragment.cloneNode(!0):n=ht(e,t,r),n}function G(e,t,r,n,o){if(e.hasDynamics)for(const s of e.dynamics)try{const i=s.getValue(r,n);if(o!==void 0&&s.getValue(o,n)===i)continue;V(t,s,i)}catch(i){console.warn("[Template Compiler] Error applying update:",i)}}function ht(e,t,r){let n="";for(let a=0;a<e.statics.length;a++)if(n+=e.statics[a],a<e.dynamics.length){const c=e.dynamics[a];if(c.type==="text"||c.type==="attribute"){const l=c.getValue(t,r);n+=String(l??"")}else(c.type==="property"||c.type==="class"||c.type==="style")&&(n+="")}if(typeof document>"u")return new DocumentFragment;const s=new DOMParser().parseFromString(n,"text/html"),i=document.createDocumentFragment();for(;s.body.firstChild;)i.appendChild(s.body.firstChild);for(const a of e.dynamics){const c=a.getValue(t,r),l=H(i,a.path);V(l,a,c)}return i}function V(e,t,r){try{if(t.type==="text"){const o=document.createTreeWalker(e,NodeFilter.SHOW_TEXT);let s=!1,i;for(;i=o.nextNode();){const c=i.textContent||"";if(c.includes("Count: ")){const l=c.replace(/Count: \d+/,`Count: ${r}`);i.textContent=l,s=!0}}if(s)return;const a=H(e,t.path);a&&a.nodeType===Node.TEXT_NODE&&(a.textContent=r==null?"":String(r));return}const n=H(e,t.path);if(!n)return;switch(t.type){case"attribute":if(n.nodeType===Node.ELEMENT_NODE&&t.target){const o=n;r==null||r===""?o.removeAttribute(t.target):o.setAttribute(t.target,String(r))}break;case"property":n.nodeType===Node.ELEMENT_NODE&&t.target&&(n[t.target]=r??"",n.setAttribute(t.target,r==null?"":String(r)));break;case"class":if(n.nodeType===Node.ELEMENT_NODE&&t.target){const o=n;o.className=r==null?"":String(r),o.setAttribute("class",r==null?"":String(r))}break;case"style":if(n.nodeType===Node.ELEMENT_NODE&&t.target){const o=n;o.style[t.target]=r==null?"":String(r),o.setAttribute("style",r==null?`${t.target}:`:`${t.target}:${r}`)}break;default:throw new Error(`Unknown update type: ${t.type}`)}}catch(n){(typeof globalThis<"u"?globalThis.isDevelopment:z)&&console.warn("[Template Compiler] Error applying update:",t,n)}}const L=new Map,A=new Map;function Z(e){let t=0;for(let r=0;r<e.length;r++){const n=e.charCodeAt(r);t=(t<<5)-t+n,t=t&t}return`tpl_${Math.abs(t).toString(36)}`}function N(e,t,r,n,o){return n&&o?`${t}.${e}[${r}]:${n}:${o}`:n?`${t}.${e}[${r}]:${n}`:`${t}.${e}[${r}]`}function D(e,t,r){if(!(!e||!(e instanceof Element))&&e.contains(r)&&r.parentNode===e)try{e.replaceChild(t,r)}catch(n){console.error("[VDOM] safeReplaceChild: error replacing child",n,{parent:e,newChild:t,oldChild:r,parentHTML:e.outerHTML,newChildHTML:t.outerHTML,oldChildHTML:r.outerHTML})}}function y(e){if(e.type==="#whitespace")return null;if(e.type==="#text"){const r=document.createTextNode(e.props.nodeValue??"");return e.dom=r,r}const t=document.createElement(e.type);for(const[r,n]of Object.entries(e.props))r==="value"&&t instanceof HTMLInputElement?t.type==="radio"?t.setAttribute("value",n):(t.type,t.value=n,t.setAttribute("value",n)):t.setAttribute(r,n);e.dom=t;for(const r of e.children){const n=y(r);n&&t.appendChild(n)}return t}function X(e){const t=document.createElement("template");t.innerHTML=e.trim();const r=Array.from(t.content.childNodes);return r.length===1?w(r[0]):{type:"#fragment",key:void 0,props:{},children:r.map((o,s)=>w(o,"#fragment",s)),dom:void 0}}function w(e,t="",r=0){if(!e)return{type:"#unknown",key:void 0,props:{},children:[],dom:void 0};if(e.nodeType===Node.TEXT_NODE)return!e.nodeValue||/^\s*$/.test(e.nodeValue)?{type:"#whitespace",key:void 0,props:{},children:[],dom:void 0}:{type:"#text",key:N("#text",t,r),props:{nodeValue:e.nodeValue},children:[],dom:e};if(e.nodeType===Node.ELEMENT_NODE){const n=e,o={};Array.from(n.attributes).forEach(l=>{o[l.name]=l.value});const s=n.tagName.toLowerCase();let i;if((s==="input"||s==="select"||s==="textarea")&&n.hasAttribute("data-model")){const l=n.getAttribute("data-model"),u=n.getAttribute("type")??"";i=`${s}:${l}:${u}`,o["data-uid"]=i,n.setAttribute("data-uid",i);let d=n.getAttribute("value"),f=n.getAttribute("checked");d&&(o.value=d),f&&(o.checked=f)}else s==="input"||s==="textarea"||s==="select"||n.hasAttribute("contenteditable")?(i=`${s}:${t}:${r}`,o["data-uid"]=i,n.setAttribute("data-uid",i)):(i=N(s,t,r),s==="li"&&(o["data-uid"]=i,n.setAttribute("data-uid",i)));const a=Array.from(n.childNodes).map((l,u)=>w(l,i,u));return{type:s,key:i,props:o,children:a,dom:n}}return{type:"#unknown",key:void 0,props:{},children:[],dom:void 0}}function R(e,t,r){if(!t||!r)return;function n(c){return!!c&&c.type!=="#whitespace"&&!(c.type==="#text"&&(!c.props?.nodeValue||/^\s*$/.test(c.props.nodeValue)))}const o=Array.isArray(t.children)?t.children.filter(n):[],s=Array.isArray(r.children)?r.children.filter(n):[],i=r.type==="input"||r.type==="select"||r.type==="textarea";if(t.type!==r.type||t.key!==r.key){const c=y(r);if(c instanceof Node&&t.dom instanceof Node&&e.contains(t.dom)){if(D(e,c,t.dom),i&&r.props&&e.firstChild instanceof HTMLInputElement){const l=e.firstChild;l.type==="radio"||l.type,l.value=r.props.value,l.setAttribute("value",r.props.value),"checked"in r.props&&(l.checked=r.props.checked===!0||r.props.checked==="true")}}else if(c instanceof Node)if(c){if(e.appendChild(c),r.dom=c,i&&r.props&&e.firstChild instanceof HTMLInputElement){const l=e.firstChild;l.type==="radio"?l.setAttribute("value",r.props.value):(l.type,l.value=r.props.value,l.setAttribute("value",r.props.value)),"checked"in r.props&&(l.checked=r.props.checked===!0||r.props.checked==="true")}}else r.dom=void 0;else r.dom=void 0;return}if(i&&t.dom instanceof HTMLElement&&r.props){for(const[c,l]of Object.entries(r.props))if(c==="value"&&e.firstChild instanceof HTMLInputElement)e.firstChild.value=l;else if(c==="checked"&&e.firstChild instanceof HTMLInputElement)e.firstChild.checked=l===!0||l==="true";else if(c in t.dom)try{t.dom[c]=l}catch{}else t.dom.setAttribute(c,l);for(let c=r.children.length;c<o.length;c++)o[c]&&o[c].dom&&t.dom&&t.dom.contains(o[c].dom)&&t.dom.removeChild(o[c].dom);return}const a=t.dom;if(a&&a instanceof Element&&r.props){const c=a.tagName.toLowerCase()==="input"?a.getAttribute("type"):void 0,l=a.tagName.includes("-");for(const[u,d]of Object.entries(r.props))if(!(c==="radio"&&u==="value")){if(c==="checkbox"&&u==="value"){a.setAttribute("value",d);continue}a.setAttribute(u,d)}if(l)for(const[u,d]of Object.entries(r.props))a.setAttribute(u,d);for(const u of Array.from(a.attributes).map(d=>d.name))if(!(u in r.props)){if(c==="radio"&&u==="value"||c==="checkbox"&&u==="value")continue;a.removeAttribute(u)}}if(r.type==="#text"){if(a&&a.nodeType===Node.TEXT_NODE)a.nodeValue!==r.props.nodeValue&&(a.nodeValue=r.props.nodeValue),r.dom=a;else{const c=document.createTextNode(r.props.nodeValue??"");a&&e.contains(a)&&a.parentNode===e?D(e,c,a):e.appendChild(c),r.dom=c}return}if(a instanceof Element){const c=new Map;o.forEach(f=>f.key&&c.set(f.key,f));const l=new Set(s.map(f=>f.key));let u=[];for(let f=0;f<s.length;f++){const h=s[f],m=h.key?c.get(h.key):o[f];let p;const k=h.type==="input"||h.type==="select"||h.type==="textarea";if(m&&m.dom&&(!k||m.type===h.type&&m.key===h.key))R(a,m,h),p=m.dom;else{const _=y(h);if(p=_ instanceof Node?_:void 0,p){if((p instanceof Element||p instanceof Node)&&p.contains(a))throw console.error("[VDOM] Attempted to insert a parent into its own child:",{parentTag:a.tagName,childTag:p.tagName,parentUid:a.getAttribute?.("data-uid"),childUid:p.getAttribute?.("data-uid"),parent:a,child:p}),new Error("VDOM patch error: Attempted to insert a parent into its own child");a.insertBefore(p,a.childNodes[f]||null)}}h.dom=p,p&&u.push(p)}for(o.forEach(f=>{!l.has(f.key)&&f.dom&&a.contains(f.dom)&&a.removeChild(f.dom)});a.childNodes.length>s.length;)a.removeChild(a.lastChild);for(let f=0;f<u.length;f++)if(a.childNodes[f]!==u[f]){if((u[f]instanceof Element||u[f]instanceof Node)&&u[f].contains(a))throw new Error("VDOM patch error: Attempted to insert a parent into its own child");a.insertBefore(u[f],a.childNodes[f]||null)}r.dom=a;const d=new Set(s.map(f=>f.key));Array.from(a.childNodes).forEach((f,h)=>{const m=f.getAttribute?.("data-uid");(m&&!d.has(m)||h>=s.length)&&a.removeChild(f)})}}const pt=e=>e?typeof URLSearchParams>"u"?{}:Object.fromEntries(new URLSearchParams(e)):{},b=(e,t)=>{for(const r of e){const n=[],o=r.path.replace(/:[^/]+/g,a=>(n.push(a.slice(1)),"([^/]+)")),s=new RegExp(`^${o}$`),i=t.match(s);if(i){const a={};return n.forEach((c,l)=>{a[c]=i[l+1]}),{route:r,params:a}}}return{route:null,params:{}}},M={};async function Y(e){if(e.component)return e.component;if(e.load){if(M[e.path])return M[e.path];try{const t=await e.load();return M[e.path]=t.default,t.default}catch{throw new Error(`Failed to load component for route: ${e.path}`)}}throw new Error(`No component or loader defined for route: ${e.path}`)}function J(e){const{routes:t,base:r=""}=e;let n,o,s,i,a,c,l;if(typeof window<"u"&&typeof document<"u"){n=()=>{const d=new URL(window.location.href),f=d.pathname.replace(r,"")||"/",h=pt(d.search);return{path:f,query:h}},o=n();const u=b(t,o.path);s=$({path:o.path,params:u.params,query:o.query}),i=()=>{const d=n(),f=b(t,d.path),h=s.getState();h.path=d.path,h.params=f.params,h.query=d.query},window.addEventListener("popstate",i),a=d=>{window.history.pushState({},"",r+d),i()},c=d=>{window.history.replaceState({},"",r+d),i()},l=()=>window.history.back()}else{n=()=>({path:"/",query:{}}),o=n();const u=b(t,o.path);s=$({path:o.path,params:u.params,query:o.query}),i=()=>{},a=()=>{},c=()=>{},l=()=>{}}return{store:s,push:a,replace:c,back:l,subscribe:s.subscribe,matchRoute:u=>b(t,u),getCurrent:()=>s.getState(),resolveRouteComponent:Y}}function mt(e,t){return b(e,t)}function I(e,t){const r=[],n=t?Object.keys(t):[],o={...e};let s=null;function i(u){return r.push(u),()=>{const d=r.indexOf(u);d!==-1&&r.splice(d,1)}}function a(u){Object.assign(s,u),r.forEach(d=>d(s))}const c=new WeakMap;function l(u){if(c.has(u))return c.get(u);const d=new Proxy(u,{get(f,h,m){if(h==="subscribe")return i;if(h==="set")return a;if(t&&n.includes(h))return t[h](s);const p=Reflect.get(f,h,m);return typeof p=="object"&&p!==null?l(p):p},set(f,h,m,p){if(t&&n.includes(h))return!1;const k=f[h],_=Reflect.set(f,h,m,p);return k!==m&&r.forEach(Q=>Q(s)),_},deleteProperty(f,h){if(t&&n.includes(h))return!1;const m=Reflect.deleteProperty(f,h);return r.forEach(p=>p(s)),m}});return c.set(u,d),d}return s=l(o),s}const E=[];function yt(e){E.push(e)}function v(e,t=new WeakSet){if(e===null||typeof e!="object"||t.has(e))return e;if(t.add(e),Array.isArray(e))return e.map(o=>v(o,t));Object.getPrototypeOf(e)!==Object.prototype&&Object.getPrototypeOf(e)!==null&&Object.setPrototypeOf(e,null);const r=["__proto__","constructor","prototype"],n=Object.create(null);for(const o of Object.keys(e))r.includes(o)||(n[o]=v(e[o],t));return n}function S(e){return!!e&&typeof e.then=="function"}let P;typeof HTMLElement<"u"?P=class extends HTMLElement{syncStateToAttributes(){if(!this.stateObj||!this.config?.reflect||!Array.isArray(this.config.reflect))return;const e=["__proto__","constructor","prototype"];this.config.reflect.forEach(t=>{if(e.includes(t)){this.removeAttribute(t);return}const r=this.stateObj[t];["string","number","boolean"].includes(typeof r)?r==null?this.removeAttribute(t):this.setAttribute(t,String(r)):this.removeAttribute(t)})}setTemplate(e){const t=this.config;typeof e=="function"?t.template=e:t.template=()=>e,this.render()}_hasError=!1;_mountedCalled=!1;_unmountedCalled=!1;_autoWiredHandlers={};removeEventListener(e,t,r){super.removeEventListener(e,t,r),this._autoWiredHandlers[e]&&(this._autoWiredHandlers[e]=this._autoWiredHandlers[e].filter(n=>n===t?(super.removeEventListener(e,n,r),!1):!0),this._autoWiredHandlers[e].length===0&&delete this._autoWiredHandlers[e])}static get observedAttributes(){const e=this.stateObj||{};return Object.keys(e).filter(t=>["string","number","boolean"].includes(typeof e[t]))}attributeChangedCallback(e,t,r){if(e==="__proto__"||e==="constructor"||e==="prototype"||!this.stateObj)return;const n=e.replace(/-([a-z])/g,(s,i)=>i.toUpperCase()),o=e in this.stateObj?e:n in this.stateObj?n:null;if(o){const s=typeof this.config?.state?.[o];let i=r;if(r===null)i=void 0;else if(s==="number")if(i===void 0||i==="")i=this.config?.state?.[o];else{const a=Number(i);i=isNaN(a)?this.config?.state?.[o]:a}else s==="boolean"&&(i=i==="true");i=v(i),this.stateObj[o]!==i&&(this.config?.debug&&console.log("[runtime] state update:",{stateKey:o,value:i}),this.stateObj[o]=i,this.render())}}forceSyncControlledInputs(){this.shadowRoot&&(this.shadowRoot.querySelectorAll("input[data-model]").forEach(e=>{const t=e.getAttribute("data-model");if(!t||!this.stateObj||typeof this.stateObj[t]>"u")return;const r=e,n=String(this.stateObj[t]),o=document.activeElement===r;r._hasDirtyListener||(r.addEventListener("input",()=>{r._isDirty=!0}),r.addEventListener("blur",()=>{r._isDirty=!1}),r._hasDirtyListener=!0);const s=!!r._isDirty;o||s||r.type!=="radio"&&r.type!=="checkbox"&&r.value!==n&&(r.value=n)}),this.rebindEventListeners())}syncControlledInputsAndEvents(){this.shadowRoot&&(this.shadowRoot.querySelectorAll('input[type="radio"][data-model]').forEach(e=>{const t=e.getAttribute("data-model");if(!t||!this.stateObj||typeof this.stateObj[t]>"u")return;const r=e,n=String(this.stateObj[t]);r.checked=r.value===n}),this.shadowRoot.querySelectorAll("input[data-model]").forEach(e=>{const t=e.getAttribute("data-model");if(!t||!this.stateObj||typeof this.stateObj[t]>"u")return;const r=e,n=String(this.stateObj[t]);if(r.type==="checkbox"){const o=this.stateObj[t];if(Array.isArray(o))r.checked=o.includes(r.value);else{const s=r.getAttribute("data-true-value"),i=r.getAttribute("data-false-value");s!==null||i!==null?String(o)===s?r.checked=!0:String(o)===i?r.checked=!1:o===!0?r.checked=!0:r.checked=!1:r.checked=o===!0||o==="true"||o===1}}else r.type==="radio"||(r.value=n)}),this.shadowRoot.querySelectorAll("textarea[data-model]").forEach(e=>{const t=e.getAttribute("data-model");!t||!this.stateObj||typeof this.stateObj[t]>"u"||(e.value=String(this.stateObj[t]))}),this.shadowRoot.querySelectorAll("select[data-model]").forEach(e=>{const t=e.getAttribute("data-model");!t||!this.stateObj||typeof this.stateObj[t]>"u"||(e.value=String(this.stateObj[t]))}))}attachListItemModelListeners(){this.shadowRoot&&this.shadowRoot.querySelectorAll("input[data-bind]").forEach(e=>{const t=e.getAttribute("data-bind");if(!t)return;e._listItemModelListener&&(e.removeEventListener("input",e._listItemModelListener),e.removeEventListener("change",e._listItemModelListener),delete e._listItemModelListener);const r=t.match(/^([a-zA-Z0-9_]+)\[(\d+)\]\.([a-zA-Z0-9_]+)$/);if(r){const[,o,s,i]=r,a=parseInt(s,10),c=this.stateObj[o];e instanceof HTMLInputElement&&e.type==="checkbox"&&(e.checked=!!(Array.isArray(c)&&c[a]&&c[a][i]));const l=u=>{!Array.isArray(c)||!c[a]||(e instanceof HTMLInputElement&&e.type==="checkbox"?c[a][i]=e.checked:c[a][i]=e.value)};e.addEventListener("input",l),e.addEventListener("change",l),e._listItemModelListener=l;return}const n=t.match(/^([a-zA-Z0-9_]+)\.([a-zA-Z0-9_]+)((?:\|[a-zA-Z0-9_]+)*)$/);if(n){const[,o,s,i]=n,a=this.stateObj[o],c=i?i.split("|").map(u=>u.trim()).filter(Boolean):[];e instanceof HTMLInputElement&&e.type==="checkbox"?e.checked=!!(a&&a[s]):e instanceof HTMLInputElement&&(e.value=a?String(a[s]??""):"");const l=u=>{if(!a)return;let d;e instanceof HTMLInputElement&&e.type==="checkbox"?d=e.checked:(d=e.value,c.includes("number")&&(d=Number(d)),c.includes("trim")&&typeof d=="string"&&(d=d.trim())),a[s]=d};e.addEventListener("input",l),e.addEventListener("change",l),e._listItemModelListener=l}})}attachControlledInputListeners(){const e=this.shadowRoot;e&&(e.querySelectorAll("[data-model]").forEach(t=>{const r=t.getAttribute("data-model");r&&(t._dataModelBound||(B(t,this.stateObj,r),t._dataModelBound=!0))}),e.querySelectorAll("[data-model]").forEach(t=>{const[r]=t.getAttribute("data-model")?.split("|").map(n=>n.trim())??[];if(!(!r||!(r in this.stateObj)))if(t instanceof HTMLInputElement)if(t.type==="checkbox"){const n=this.stateObj[r],o=t.getAttribute("data-true-value"),s=t.getAttribute("data-false-value");Array.isArray(n)?t.checked=n.includes(t.value):o!==null||s!==null?String(n)===o?t.checked=!0:String(n)===s?t.checked=!1:n===!0?t.checked=!0:t.checked=!1:t.checked=n===!0||n==="true"||n===1}else t.type==="radio"?t.checked=t.value===String(this.stateObj[r]):t.value=String(this.stateObj[r]??"");else(t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement)&&(t.value=String(this.stateObj[r]??""))}))}config;stateObj;api;_globalUnsubscribes=[];unsubscribes=[];lastCompiledTemplate=null;lastState=null;rafId=null;constructor(){super()}initializeConfig(){if(this.config)return;const e=this.tagName.toLowerCase(),r=(window.__componentRegistry||{})[e];if(!r||typeof r!="object")throw new Error("Invalid component config: must be an object");if(!r.state||typeof r.state!="object")throw new Error("Invalid component config: state must be an object");this.config=r;const n=r.computed?I(r.state,r.computed):I(r.state);if(this.stateObj=n,typeof this.stateObj.subscribe=="function"&&this.unsubscribes.push(this.stateObj.subscribe(()=>{this.scheduleRender()})),this.api={state:this.stateObj,emit:(s,i)=>this.dispatchEvent(new CustomEvent(s,{detail:i,bubbles:!0})),onGlobal:(s,i)=>{const a=C.on(s,i);return this._globalUnsubscribes.push(a),a},offGlobal:(s,i)=>C.off(s,i),emitGlobal:(s,i)=>C.emit(s,i),render:()=>this.render()},Object.keys(this.config).forEach(s=>{if(s.startsWith("on")&&s.length>2&&typeof this.config[s]=="function"){const i=s.charAt(2).toLowerCase()+s.slice(3),a=c=>{const l=c.detail??c;this.config[s](l,this.api.state,this.api)};this.addEventListener(i,a),this._autoWiredHandlers[i]||(this._autoWiredHandlers[i]=[]),this._autoWiredHandlers[i].push(a)}}),this.attachShadow({mode:"open"}),r.style){const s=document.createElement("style");s.textContent=typeof r.style=="function"?r.style(this.stateObj):r.style,this.shadowRoot.appendChild(s)}if(typeof this.config.hydrate=="function"){const s=this.shadowRoot?.querySelectorAll("[data-hydrate]");try{s&&s.length>0?s.forEach(i=>{try{this.config.hydrate(i,this.stateObj,this.api)}catch(a){typeof this.config.onError=="function"&&this.config.onError(a instanceof Error?a:new Error(String(a)),this.api.state,this.api),this._handleRenderError(a)}}):this.config.hydrate(this.shadowRoot,this.stateObj,this.api)}catch(i){typeof this.config.onError=="function"&&this.config.onError(i instanceof Error?i:new Error(String(i)),this.api.state,this.api),this._handleRenderError(i)}}if(this.hasAttribute("data-hydrated")?this.processRefs():this.render(),!this._mountedCalled&&typeof this.config.onMounted=="function")try{const s=this.config.onMounted(this.api.state,this.api);S(s)?s.catch(i=>{typeof this.config.onError=="function"&&this.config.onError(i,this.api.state,this.api),this._handleRenderError(i)}).finally(()=>{this._mountedCalled=!0}):this._mountedCalled=!0}catch(s){typeof this.config.onError=="function"&&this.config.onError(s,this.api.state,this.api),this._handleRenderError(s),this._mountedCalled=!0}}connectedCallback(){if(this.initializeConfig(),this.stateObj)for(const e of this.getAttributeNames()){const r=e.replace(/-([a-z])/g,(n,o)=>o.toUpperCase());if(r in this.stateObj){const n=typeof this.config?.state?.[r];let o=this.getAttribute(e);n==="number"?o=Number(o):n==="boolean"&&(o=o==="true"),this.stateObj[r]=o===null?void 0:o}}if(!this._mountedCalled&&typeof this.config.onMounted=="function")try{const e=this.config.onMounted(this.api.state,this.api);S(e)?e.catch(t=>{typeof this.config.onError=="function"&&this.config.onError(t,this.api.state,this.api),this._handleRenderError(t)}).finally(()=>{this._mountedCalled=!0}):this._mountedCalled=!0}catch(e){typeof this.config.onError=="function"&&this.config.onError(e,this.api.state,this.api),this._handleRenderError(e),this._mountedCalled=!0}typeof this.render=="function"&&this.render()}disconnectedCallback(){if(Object.entries(this._autoWiredHandlers).forEach(([e,t])=>{t.forEach(r=>{super.removeEventListener(e,r)})}),this._autoWiredHandlers={},this.unsubscribes.forEach(e=>e()),this.unsubscribes=[],this._globalUnsubscribes.forEach(e=>e()),this._globalUnsubscribes=[],!this._unmountedCalled&&typeof this.config.onUnmounted=="function")try{const e=this.config.onUnmounted(this.api.state,this.api);S(e)?e.catch(t=>{typeof this.config.onError=="function"&&this.config.onError(t,this.api.state,this.api),this._handleRenderError(t)}).finally(()=>{this._unmountedCalled=!0}):this._unmountedCalled=!0}catch(e){typeof this.config.onError=="function"&&this.config.onError(e,this.api.state,this.api),this._handleRenderError(e),this._unmountedCalled=!0}this._mountedCalled=!1,this._unmountedCalled=!1}render(){this._hasError=!1,this.syncControlledInputsAndEvents(),setTimeout(()=>this.attachControlledInputListeners(),0);try{E.forEach(t=>{try{t.onRender?.(this.stateObj,this.api)}catch(r){this._handleRenderError(r)}}),this.config.computed&&Object.values(this.config.computed).forEach(t=>{try{t(this.stateObj)}catch(r){this._handleRenderError(r)}});const e=this.config.template(this.stateObj,this.api);e instanceof Promise?e.then(t=>{this._hasError||(this._renderTemplateResult(t),this.syncStateToAttributes(),setTimeout(()=>this.attachListItemModelListeners(),0))}).catch(t=>{this._handleRenderError(t)}):this._hasError||(this._renderTemplateResult(e),this.syncStateToAttributes(),setTimeout(()=>this.attachListItemModelListeners(),0))}catch(e){this._handleRenderError(e),this.renderError(e instanceof Error?e:new Error(String(e)))}}_prevVNode=null;rebindEventListeners(){if(!this.shadowRoot)return;["data-on-input","data-on-change","data-on-blur","data-on-click"].forEach(t=>{this.shadowRoot.querySelectorAll(`[${t}]`).forEach(r=>{const n=t.replace("data-on-",""),o=r.getAttribute(t);if(!o||typeof this.config[o]!="function")return;r._boundHandlers&&r._boundHandlers[n]&&r.removeEventListener(n,r._boundHandlers[n]);const s=this.config[o],i=a=>s.call(this,a,this.stateObj,this.api);r.addEventListener(n,i),r._boundHandlers||(r._boundHandlers={}),r._boundHandlers[n]=i})}),Array.from(this.shadowRoot.children).forEach(t=>{t instanceof HTMLElement&&typeof t.rebindEventListeners=="function"&&t.rebindEventListeners()})}_renderTemplateResult(e){if(!this._hasError)try{let t=function(r){const n=new WeakSet;function o(s){if(s===null||typeof s!="object"||n.has(s))return s;if(n.add(s),Array.isArray(s))return s.map(o);const i={};for(const a in s)Object.prototype.hasOwnProperty.call(s,a)&&(i[a]=o(s[a]));return i}return o(r)};if(typeof e=="string"){let r=function(c){return c.replace(/<([a-zA-Z0-9]+)([^>]*)>/g,(l,u,d)=>{const f=d.replace(/\s+on[a-zA-Z]+\s*=\s*(['"][^'"]*['"]|[^\s>]*)/gi,"");return`<${u}${f}>`})},n=function(c){c.children.forEach(n)};const o=r(e),s=X(o);n(s);const i=this.shadowRoot;if(!i)return;let a=i.querySelector("style");if(a||(a=document.createElement("style"),i.appendChild(a)),this.config.style?a.textContent=typeof this.config.style=="function"?this.config.style(this.stateObj):this.config.style:a.textContent="",s.type==="#fragment"){const c=Array.from(i.childNodes).find(l=>l.nodeType===1&&l!==a);if(c){Array.from(c.childNodes).forEach(d=>{d.nodeType===1&&d.nodeName==="STYLE"||c.removeChild(d)});const l={type:"#fragment",dom:c,children:s.children,props:{},key:void 0},u=this._prevVNode&&this._prevVNode.type==="#fragment"?{...this._prevVNode,dom:c}:l;R(c,u,l)}else s.children.forEach(l=>{const u=y(l);u&&i.appendChild(u),l.dom=u??void 0})}else{let c=Array.from(this.shadowRoot.childNodes).find(l=>l!==a&&l.nodeType===1);if(c)if(this._prevVNode&&(this._prevVNode.type!==s.type||this._prevVNode.key!==s.key)){const l=y(s);l&&(this.shadowRoot.contains(c)&&this.shadowRoot.replaceChild(l,c),c=l)}else R(c,this._prevVNode,s);else c=y(s),c&&this.shadowRoot.appendChild(c);s.dom=c}this._prevVNode=s,this.forceSyncControlledInputs(),this.lastCompiledTemplate=null}else{const r=!this.shadowRoot.firstElementChild,n=this.lastCompiledTemplate?.id===e.id;if(r){const o=x(e,this.stateObj,this.api);this.shadowRoot.appendChild(o)}else if(n&&this.shadowRoot.firstElementChild){const o=this.lastState;G(e,this.shadowRoot.firstElementChild,this.stateObj,this.api,o||void 0)}else{const o=x(e,this.stateObj,this.api);let s=this.shadowRoot.querySelector("style");s||(s=document.createElement("style"),this.shadowRoot.insertBefore(s,this.shadowRoot.firstChild)),this.config.style?s.textContent=typeof this.config.style=="function"?this.config.style(this.stateObj):this.config.style:s.textContent="";let i=this.shadowRoot.querySelector("[data-root]");for(i||(i=document.createElement("div"),i.setAttribute("data-root",""),this.shadowRoot.appendChild(i));i.firstChild;)i.removeChild(i.firstChild);i.appendChild(o)}this.lastCompiledTemplate=e}this.lastState=t(this.stateObj),this.updateStyle(),this.processRefs(),this.bindEvents(),this.syncControlledInputsAndEvents()}catch(t){this._handleRenderError(t)}}_handleRenderError(e){if(this._hasError=!0,this.config.debug&&console.error(`[runtime] Render error in <${this.tagName.toLowerCase()}>:`,e),E.forEach(t=>t.onError?.(e instanceof Error?e:new Error(String(e)),this.stateObj,this.api)),"onError"in this.config&&typeof this.config.onError=="function")try{this.config.onError(e instanceof Error?e:new Error(String(e)),this.api.state,this.api)}catch(t){this.config.debug&&console.error("[runtime] Error in onError handler:",t)}this.renderError(e instanceof Error?e:new Error(String(e)))}scheduleRender(){this.rafId!==void 0&&this.rafId!==null&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(()=>{this.render(),this.rafId=null})}updateStyle(){const e=this.shadowRoot.querySelector("style");if(!e||!this.config.style)return;const t=typeof this.config.style=="function"?this.config.style(this.api.state):this.config.style;e.textContent=t}processRefs(){if(!this.config.refs)return;const e=new WeakMap;Object.entries(this.config.refs).forEach(([t,r])=>{const n=this.shadowRoot.querySelector(`[data-ref="${t}"]`);if(n){e.has(n)||e.set(n,new Set);const o=e.get(n),s=n.addEventListener;n.addEventListener=function(i,a,c){const l=`${i}`;o.has(l)||(o.add(l),s.call(n,i,a,c))},n.setAttribute("data-refs-processed","true");try{r(n,this.api.state,this.api)}catch(i){this._handleRenderError(i)}}})}bindEvents(){if(!this.shadowRoot)return;const e=document.createTreeWalker(this.shadowRoot,NodeFilter.SHOW_ELEMENT);let t=e.nextNode();for(;t;){const r=t;Array.from(r.attributes).forEach(n=>{if(n.name.startsWith("data-on-")){const o=n.name.slice(8),s=n.value,i=this.config[s];if(typeof i=="function"){r._boundHandlers&&r._boundHandlers[o]&&r.removeEventListener(o,r._boundHandlers[o]);const a=c=>{i.call(this.config,c,this.api.state,this.api),this.syncControlledInputsAndEvents()};r.addEventListener(o,a),r._boundHandlers||(r._boundHandlers={}),r._boundHandlers[o]=a}else this.config.debug&&console.warn(`[runtime] Handler '${s}' not found on config for event '${o}'`,r)}}),t=e.nextNode()}}renderError(e){const t=this.config.style?typeof this.config.style=="function"?this.config.style(this.api.state):this.config.style:"";this.shadowRoot.innerHTML=`
|
|
40
|
-
<style>${t}</style>
|
|
41
|
-
<div style="color: red; border: 1px solid red; padding: 1rem; border-radius: 4px;">
|
|
42
|
-
<h3>Error Boundary</h3>
|
|
43
|
-
<div>Error: ${e.message}</div>
|
|
44
|
-
</div>
|
|
45
|
-
`}}:P=class{constructor(){}};function q(e,t){if(t=v(t),t.debug&&console.log(`[runtime] Debugging component: ${e}`,t),!e||!t.template){t&&typeof t.onError=="function"&&t.onError(new Error("Component requires tag and template"),t.state??{},{state:t.state??{},emit:()=>{},onGlobal:()=>()=>{},offGlobal:()=>{},emitGlobal:()=>{}}),t&&t.debug&&console.error("[runtime] Malformed config:",{tag:e,config:t});return}E.forEach(u=>{try{u.onInit?.(t)}catch(d){t&&typeof t.onError=="function"&&t.onError(d instanceof Error?d:new Error(String(d)),t.state,{state:t.state,emit:()=>{},onGlobal:()=>()=>{},offGlobal:()=>{},emitGlobal:()=>{}}),t&&t.debug&&console.error("[runtime] Plugin onInit error:",d)}});const n=typeof window<"u"&&window.VITE_DEV_HMR,o=typeof{url:typeof document>"u"?require("url").pathToFileURL(__filename).href:O&&O.tagName.toUpperCase()==="SCRIPT"&&O.src||new URL("custom-elements-runtime.cjs.js",document.baseURI).href}<"u"&&void 0;if((n||o)&&typeof customElements<"u"&&customElements.get(e))try{document.querySelectorAll(e).forEach(u=>u.remove()),window.customElements._definitions&&delete window.customElements._definitions[e]}catch{}if(typeof customElements<"u"&&customElements.get(e)){t.debug&&console.warn(`[runtime] Component "${e}" already registered`);return}const s=I(t.state??{},t.computed);t.state=s,t._subscribe=s.subscribe;const i=t.state??{},a=Object.keys(i).filter(u=>["string","number","boolean"].includes(typeof i[u]));class c extends P{static get observedAttributes(){return a}constructor(){super()}}const l=c;typeof customElements<"u"&&!customElements.get(e)&&(window.__componentRegistry=window.__componentRegistry||{},window.__componentRegistry[e]=t,customElements.define(e,l))}function gt(e){const t=J(e);return q("router-view",{template:async()=>{if(!t)return"<div>Router not initialized.</div>";const r=t.getCurrent(),{path:n}=r,o=t.matchRoute(n);return o.route?(o.route.load&&await o.route.load(),`<${o.route.component}></${o.route.component}>`):"<div>Not found</div>"},onMounted(r,n){t&&typeof t.subscribe=="function"&&t.subscribe(()=>{n.render()})}}),q("router-link",{state:{to:"",tag:"a",replace:!1,exact:!1,activeClass:"active",exactActiveClass:"exact-active",ariaCurrentValue:"page",disabled:!1,external:!1,style:K`
|
|
46
|
-
[aria-disabled="true"] {
|
|
47
|
-
pointer-events: none;
|
|
48
|
-
opacity: 0.5;
|
|
49
|
-
}
|
|
50
|
-
`},computed:{current(){return t.getCurrent()},isExactActive(r){return r.current.path===r.to},isActive(r){const n=r.current;return r.exact?r.isExactActive:n&&typeof n.path=="string"?n.path.startsWith(r.to):!1},className(r){return r.isExactActive?r.exactActiveClass:r.isActive?r.activeClass:""},ariaCurrent(r){return r.isExactActive?`aria-current="${r.ariaCurrentValue}"`:""},isButton(r){return r.tag==="button"},disabledAttr(r){return r.disabled?r.isButton?'disabled aria-disabled="true" tabindex="-1"':'aria-disabled="true" tabindex="-1"':""},externalAttr(r){return r.external&&(r.tag==="a"||!r.tag)?'target="_blank" rel="noopener noreferrer"':""}},reflect:["to","tag","replace","exact","activeClass","exactActiveClass","ariaCurrentValue","disabled","external","style"],style:r=>r.style,template:r=>T`
|
|
51
|
-
${r.isButton?T`
|
|
52
|
-
<button
|
|
53
|
-
part="button"
|
|
54
|
-
class="${r.className}"
|
|
55
|
-
${r.ariaCurrent}
|
|
56
|
-
${r.disabledAttr}
|
|
57
|
-
${r.externalAttr}
|
|
58
|
-
data-on-click="navigate"
|
|
59
|
-
><slot></slot></button>
|
|
60
|
-
`(r):T`
|
|
61
|
-
<a
|
|
62
|
-
part="link"
|
|
63
|
-
href="${r.to}"
|
|
64
|
-
class="${r.className}"
|
|
65
|
-
${r.ariaCurrent}
|
|
66
|
-
${r.disabledAttr}
|
|
67
|
-
${r.externalAttr}
|
|
68
|
-
data-on-click="navigate"
|
|
69
|
-
><slot></slot></a>
|
|
70
|
-
`(r)}
|
|
71
|
-
`(r),navigate:(r,n)=>{if(n.disabled){r.preventDefault();return}n.external&&(n.tag==="a"||!n.tag)||(r.preventDefault(),n.replace?t.replace(n.to):t.push(n.to))}}),t}exports.Store=$;exports.classes=at;exports.compile=ot;exports.compileTemplate=lt;exports.component=q;exports.createVNodeFromElement=w;exports.css=K;exports.deepSanitizeObject=v;exports.eventBus=C;exports.generateHydrationScript=nt;exports.getVNodeKey=N;exports.html=T;exports.initRouter=gt;exports.isPromise=S;exports.matchRouteSSR=mt;exports.mountVNode=y;exports.parseVNodeFromHTML=X;exports.patchVNode=R;exports.renderCompiledTemplate=x;exports.renderComponentsToString=rt;exports.renderToString=U;exports.resolveRouteComponent=Y;exports.runtimePlugins=E;exports.safeReplaceChild=D;exports.styles=ct;exports.updateCompiledTemplate=G;exports.useDataModel=B;exports.useRouter=J;exports.useRuntimePlugin=yt;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function Y(n){let e=new Proxy(n,{set:(o,l,f)=>(o[l]=f,i(),!0)});const t=[];function s(o){t.push(o),o(e)}function r(){return e}function i(){t.forEach(o=>o(e))}return{subscribe:s,getState:r}}class j extends EventTarget{handlers={};static instance;eventCounters=new Map;static getInstance(){return j.instance||(j.instance=new j),j.instance}emit(e,t){const s=Date.now(),r=this.eventCounters.get(e);if(!r||s-r.window>1e3)this.eventCounters.set(e,{count:1,window:s});else if(r.count++,r.count>50&&(console.error(`Event storm detected for "${e}": ${r.count} events in 1 second. Throttling...`),r.count>100)){console.warn(`Blocking further "${e}" events to prevent infinite loop`);return}this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!1,cancelable:!0}));const i=this.handlers[e];i&&i.forEach(o=>{try{o(t)}catch(l){console.error(`Error in global event handler for "${e}":`,l)}})}on(e,t){return this.handlers[e]||(this.handlers[e]=new Set),this.handlers[e].add(t),()=>this.off(e,t)}off(e,t){const s=this.handlers[e];s&&s.delete(t)}offAll(e){delete this.handlers[e]}listen(e,t,s){return this.addEventListener(e,t,s),()=>this.removeEventListener(e,t)}once(e,t){return new Promise(s=>{const r=this.on(e,i=>{r(),t(i),s(i)})})}getActiveEvents(){return Object.keys(this.handlers).filter(e=>this.handlers[e]&&this.handlers[e].size>0)}clear(){this.handlers={}}getHandlerCount(e){return this.handlers[e]?.size||0}getEventStats(){const e={};for(const[t,s]of this.eventCounters.entries())e[t]={count:s.count,handlersCount:this.getHandlerCount(t)};return e}resetEventCounters(){this.eventCounters.clear()}}const Q=j.getInstance();function R(n,e={},t,s){const r=s??e.key;return{tag:n,key:r,props:e,children:t}}function z(n){return!!n&&typeof n=="object"&&(n.type==="AnchorBlock"||n.tag==="#anchor")}function M(n){return typeof n=="object"&&n!==null&&"tag"in n&&!z(n)}function G(n,e){return n.key!=null?n:{...n,key:e}}function ee(n,e=[],t={}){const s={},r={},i={},o=/([:@#]?)([a-zA-Z0-9-:\.]+)=("([^"\\]*(\\.[^"\\]*)*)"|'([^'\\]*(\\.[^'\\]*)*)')/g;let l;for(;l=o.exec(n);){const f=l[1],c=l[2],h=(l[4]||l[6])??"",d=h.match(/^{{(\d+)}}$/);let a=d?e[Number(d[1])]??null:h;if(d||(a==="true"?a=!0:a==="false"?a=!1:a==="null"?a=null:isNaN(Number(a))||(a=Number(a))),f===":")typeof a=="boolean"?r[c]=a:a!=null&&(s[c]=a);else if(f==="@"){const _="on"+c.charAt(0).toUpperCase()+c.slice(1);s[_]=typeof a=="function"?a:typeof t[a]=="function"?t[a]:void 0}else if(f==="#"){const[_,...b]=c.split("."),T=[...b];let k=a,u=[...T];if(_==="model"&&typeof k=="string"&&k.includes(".")){const y=["trim","number","lazy"],m=k.split(".");let g=k;const p=[];for(let x=m.length-1;x>0&&y.includes(m[x]);x--)p.unshift(m[x]),g=m.slice(0,x).join(".");k=g,u.push(...p)}i[_]={value:k,modifiers:u}}else r[c]=a}return{props:s,attrs:r,directives:i}}function te(n,e,t){function s(u,y){return R("#text",{},u,y)}let r="";for(let u=0;u<n.length;u++)r+=n[u],u<e.length&&(r+=`{{${u}}}`);const i=/<\/?([a-zA-Z0-9-]+)([^>]*)\/?>|{{(\d+)}}|([^<]+)/g,o=[];let l=null,f,c=[],h=null,d={},a,_=0,b=[];function T(u){!u||typeof u!="object"||z(u)||(u.props||u.attrs?(u.props&&(d.props||(d.props={}),Object.assign(d.props,u.props)),u.attrs&&(d.attrs||(d.attrs={}),Object.keys(u.attrs).forEach(y=>{if(y==="style"&&d.attrs.style){const m=d.attrs.style.replace(/;?\s*$/,""),g=u.attrs.style.replace(/^;?\s*/,"");d.attrs.style=m+"; "+g}else if(y==="class"&&d.attrs.class){const m=d.attrs.class.trim().split(/\s+/).filter(Boolean),g=u.attrs.class.trim().split(/\s+/).filter(Boolean),p=[...new Set([...m,...g])];d.attrs.class=p.join(" ")}else d.attrs[y]=u.attrs[y]}))):(d.props||(d.props={}),Object.assign(d.props,u)))}function k(u,y){const m=h?c:b;if(z(u)){const g=u.key??y;let p=u.children;m.push({...u,key:g,children:p});return}if(M(u)){m.push(G(u,void 0));return}if(Array.isArray(u)){if(u.length===0)return;for(let g=0;g<u.length;g++){const p=u[g];z(p)||M(p)||Array.isArray(p)?k(p,`${y}-${g}`):p!==null&&typeof p=="object"?T(p):m.push(s(String(p),`${y}-${g}`))}return}if(u!==null&&typeof u=="object"){T(u);return}m.push(s(String(u),y))}for(;f=i.exec(r);)if(f[1]){const u=f[1],y=f[0][1]==="/",m=f[0][f[0].length-2]==="/",{props:g,attrs:p,directives:x}=ee(f[2]||"",e,t),S={props:{},attrs:{}};for(const A in g)S.props[A]=g[A];for(const A in p)S.attrs[A]=p[A];for(const[A,E]of Object.entries(x))if(A==="bind")if(typeof E.value=="object"&&E.value!==null)for(const[w,v]of Object.entries(E.value))typeof v=="boolean"?S.attrs[w]=v:v!=null&&(S.attrs[w]=String(v));else E.value!=null&&(S.attrs[A]=String(E.value));else if(A==="show"){const w=!!E.value;S.attrs.style=(S.attrs.style||"")+(w?"":"; display: none !important")}else if(A==="class"){const w=E.value;let v=[];if(typeof w=="string")v=w.split(/\s+/).filter(Boolean);else if(Array.isArray(w)){for(const N of w)if(typeof N=="string")v.push(...N.split(/\s+/).filter(Boolean));else if(N&&typeof N=="object")for(const[O,P]of Object.entries(N))P&&v.push(...O.split(/\s+/).filter(Boolean))}else if(w&&typeof w=="object")for(const[N,O]of Object.entries(w))O&&v.push(...N.split(/\s+/).filter(Boolean));const B=S.attrs.class||"",D=[...new Set([...B.split(/\s+/).filter(Boolean),...v])];S.attrs.class=D.join(" ")}else if(A==="style"){const w=E.value;let v="";if(typeof w=="string")v=w;else if(w&&typeof w=="object"){const D=[];for(const[N,O]of Object.entries(w))if(O!=null&&O!==""){const P=N.replace(/[A-Z]/g,X=>`-${X.toLowerCase()}`),Z=["width","height","top","right","bottom","left","margin","margin-top","margin-right","margin-bottom","margin-left","padding","padding-top","padding-right","padding-bottom","padding-left","font-size","line-height","border-width","border-radius","min-width","max-width","min-height","max-height"];let q=String(O);typeof O=="number"&&Z.includes(P)&&(q=`${O}px`),D.push(`${P}: ${q}`)}v=D.join("; ")+(D.length>0?";":"")}const B=S.attrs.style||"";S.attrs.style=B+(B&&!B.endsWith(";")?"; ":"")+v}const C={};for(const[A,E]of Object.entries(x))["bind","show","class","style"].includes(A)||(C[A]=E);if(Object.keys(C).length>0&&(S.directives=C),y){const A=R(h,d,c.length===1&&M(c[0])&&c[0].tag==="#text"?typeof c[0].children=="string"?c[0].children:"":c.length?c:void 0,a),E=o.pop();E?(h=E.tag,d=E.props,a=E.key,c=E.children,c.push(A)):l=A}else m?(h?c:b).push(R(u,S,void 0,void 0)):(h&&o.push({tag:h,props:d,children:c,key:a}),h=u,d=S,c=[])}else if(typeof f[3]<"u"){const u=Number(f[3]),y=e[u],m=`interp-${u}`;k(y,m)}else if(f[4]){const u=f[4],y=h?c:b,m=u.split(/({{\d+}})/);for(const g of m){if(!g)continue;const p=g.match(/^{{(\d+)}}$/);if(p){const x=Number(p[1]),S=e[x],C=`interp-${x}`;k(S,C)}else{const x=`text-${_++}`;y.push(s(g,x))}}}if(l)return M(l)&&Array.isArray(l.children)&&(l.children=l.children.filter(u=>M(u)?u.tag!=="#text"||typeof u.children=="string"&&u.children.trim()!=="":!0)),l;if(b.length>0){const u=b.filter(y=>M(y)?y.tag!=="#text"||typeof y.children=="string"&&y.children.trim()!=="":!0);return u.length===1?u[0]:u}return R("div",{},"","fallback-root")}function ne(n,...e){const t=e[e.length-1],s=typeof t=="object"&&t&&!Array.isArray(t)?t:void 0;return te(n,e,s)}function se(n,e){return H(n?e:[],"when-block")}function re(n,e){return n.map((t,s)=>{const r=typeof t=="object"?t?.key??t?.id??`idx-${s}`:String(t);return H(e(t,s),`each-${r}`)})}function ie(){const n=[];return{when(e,t){return n.push([e,t]),this},otherwise(e){return n.push([!0,e]),this},done(){return oe(...n)}}}function oe(...n){for(let e=0;e<n.length;e++){const[t,s]=n[e];if(t)return[H(s,`whenChain-branch-${e}`)]}return[H([],"whenChain-empty")]}function H(n,e){const t=n?Array.isArray(n)?n.filter(Boolean):[n].filter(Boolean):[];return{tag:"#anchor",key:e,children:t}}function L(n,e){return e.split(".").reduce((t,s)=>t?.[s],n)}function U(n,e,t){const s=e.split("."),r=s.pop();if(!r)return;const i=s.reduce((o,l)=>(l in o||(o[l]={}),o[l]),n);i[r]=t}function ce(n,e,t,s,r,i,o){if(!i)return;const l=e.includes("lazy"),f=e.includes("trim"),c=e.includes("number"),h=()=>{const k=i._state||i;return L(k,n)},d=h();let a="text";const _=s?.type;if(o instanceof HTMLInputElement?a=_||o.type||"text":o instanceof HTMLSelectElement?a="select":o instanceof HTMLTextAreaElement&&(a="textarea"),a==="checkbox")if(Array.isArray(d)){const k=o?.getAttribute("value")||s?.value||"",u=d.includes(k);o&&o.checked!==u&&(t.checked=u)}else{const k=o?.getAttribute("true-value")||!0,u=d===k;o&&o.checked!==u&&(t.checked=u)}else if(a==="radio"){const k=s?.value||"",u=d===k;o&&o.checked!==u&&(t.checked=u)}else if(a==="select")if(o&&o.hasAttribute("multiple")){const k=o,u=Array.isArray(d)?d:[];setTimeout(()=>{Array.from(k.options).forEach(y=>{const m=u.includes(y.value);y.selected!==m&&(y.selected=m)})},0)}else setTimeout(()=>{o instanceof HTMLSelectElement&&o.value!==String(d)&&(o.value=String(d))},0);else{const k=String(d??"");(!o||o.value!==k)&&(t.value=d)}const b=l||a==="checkbox"||a==="radio"||a==="select"?"change":"input",T=k=>{if(k.isComposing||r._isComposing||k.isTrusted===!1)return;const u=k.target;if(u._modelUpdating)return;const y=h();let m=u.value;if(a==="checkbox")if(Array.isArray(y)){const S=u.getAttribute("value")||"",C=[...y];if(u.checked)C.includes(S)||C.push(S);else{const A=C.indexOf(S);A>-1&&C.splice(A,1)}m=C}else{const S=u.getAttribute("true-value")||!0,C=u.getAttribute("false-value")||!1;m=u.checked?S:C}else if(a==="radio")m=u.getAttribute("value")||u.value;else if(a==="select"&&u.multiple){const S=u;m=Array.from(S.selectedOptions).map(C=>C.value)}else if(f&&(m=m.trim()),c){const S=Number(m);isNaN(S)||(m=S)}const g=i._state||i,p=L(g,n);if(Array.isArray(m)&&Array.isArray(p)?JSON.stringify([...m].sort())!==JSON.stringify([...p].sort()):m!==p){const S=k.target;S._modelUpdating=!0,U(g,n,m),setTimeout(()=>{S._modelUpdating=!1},0),i._requestRender&&i._requestRender()}};if(r[b]=T,a==="text"||a==="textarea"){const k=()=>{r._isComposing=!0},u=y=>{r._isComposing=!1;const m=y.target;setTimeout(()=>{if(m){let g=m.value;if(f&&(g=g.trim()),c){const C=Number(g);isNaN(C)||(g=C)}const p=i._state||i,x=L(p,n);(Array.isArray(g)&&Array.isArray(x)?JSON.stringify([...g].sort())!==JSON.stringify([...x].sort()):g!==x)&&(m&&(m._modelUpdating=!0,setTimeout(()=>{m._modelUpdating=!1},0)),U(p,n,g),i._requestRender&&i._requestRender())}},0)};r.compositionstart=k,r.compositionend=u}}function le(n,e,t,s){if(s)try{const r=JSON.parse(n);if(typeof r=="object")for(const[i,o]of Object.entries(r))e[i]=o}catch{const r=L(s,n);t[n]=r}}function ae(n,e,t){if(!t)return;const s=L(t,n),r=e.style||"",i=s?"":"none";if(r){const o=r.split(";").filter(Boolean),l=o.findIndex(f=>f.trim().startsWith("display:"));l>=0?o[l]=`display: ${i}`:o.push(`display: ${i}`),e.style=o.join("; ")}else e.style=`display: ${i}`}function ue(n,e,t){if(!t)return;const s=L(t,n);let r=[];typeof s=="string"?r=[s]:Array.isArray(s)?r=s.filter(Boolean):typeof s=="object"&&(r=Object.entries(s).filter(([,l])=>!!l).map(([l])=>l));const i=e.class||"",o=i?`${i} ${r.join(" ")}`.trim():r.join(" ");o&&(e.class=o)}function fe(n,e,t){let s;if(typeof n=="string"){if(!t)return;s=L(t,n)}else s=n;let r="";if(typeof s=="string")r=s;else if(s&&typeof s=="object"){const o=[];for(const[l,f]of Object.entries(s))if(f!=null&&f!==""){const c=l.replace(/[A-Z]/g,a=>`-${a.toLowerCase()}`),h=["width","height","top","right","bottom","left","margin","margin-top","margin-right","margin-bottom","margin-left","padding","padding-top","padding-right","padding-bottom","padding-left","font-size","line-height","border-width","border-radius","min-width","max-width","min-height","max-height"];let d=String(f);typeof f=="number"&&h.includes(c)&&(d=`${f}px`),o.push(`${c}: ${d}`)}r=o.join("; ")+(o.length>0?";":"")}const i=e.style||"";e.style=i+(i&&!i.endsWith(";")?"; ":"")+r}function F(n,e,t,s){const r={},i={...s||{}},o={};for(const[l,f]of Object.entries(n)){const{value:c,modifiers:h}=f;switch(l){case"model":ce(typeof c=="string"?c:String(c),h,r,i,o,e,t);break;case"bind":le(c,r,i,e);break;case"show":ae(c,i,e);break;case"class":ue(c,i,e);break;case"style":fe(c,i,e);break}}return{props:r,attrs:i,listeners:o}}function W(n,e){if(Array.isArray(n)){const i=new Set;return n.map(o=>{if(!o||typeof o!="object")return o;let l=o.props?.key??o.key;if(!l){const d=o.tag||"node",a=o.props?.attrs?.id??o.props?.attrs?.name??o.props?.attrs?.["data-key"]??"";l=a?`${e}:${d}:${a}`:`${e}:${d}`}let f=l,c=1;for(;i.has(f);)f=`${l}#${c++}`;i.add(f);let h=o.children;return Array.isArray(h)&&(h=W(h,f)),{...o,key:f,children:h}})}const t=n;let s=t.props?.key??t.key??e,r=t.children;return Array.isArray(r)&&(r=W(r,s)),{...t,key:s,children:r}}function he(n,e,t,s){const r=t.directives??{},i=F(r,s,n,t.attrs),o={...e.props,...t.props,...i.props},l={...e.attrs,...t.attrs,...i.attrs},f=e.props??{},c=o;for(const a in{...f,...c}){const _=f[a],b=c[a];_!==b&&(a==="value"&&(n instanceof HTMLInputElement||n instanceof HTMLTextAreaElement||n instanceof HTMLSelectElement)?n.value!==b&&(n.value=b??""):a==="checked"&&n instanceof HTMLInputElement?n.checked=!!b:a.startsWith("on")&&typeof b=="function"?(typeof _=="function"&&n.removeEventListener(a.slice(2).toLowerCase(),_),n.addEventListener(a.slice(2).toLowerCase(),b)):b==null||b===!1?n.removeAttribute(a):n.setAttribute(a,String(b)))}for(const[a,_]of Object.entries(i.listeners||{}))n.addEventListener(a,_);const h=e.attrs??{},d=l;for(const a in{...h,...d}){const _=h[a],b=d[a];_!==b&&(b==null||b===!1?n.removeAttribute(a):n.setAttribute(a,String(b)))}}function $(n,e){if(typeof n=="string")return document.createTextNode(n);if(n.tag==="#text"){const c=document.createTextNode(typeof n.children=="string"?n.children:"");return n.key!=null&&(c.key=n.key),c}if(n.tag==="#anchor"){const c=n,h=Array.isArray(c.children)?c.children:[],d=document.createTextNode(""),a=document.createTextNode("");c.key!=null&&(d.key=`${c.key}:start`,a.key=`${c.key}:end`),c._startNode=d,c._endNode=a;const _=document.createDocumentFragment();_.appendChild(d);for(const b of h)_.appendChild($(b,e));return _.appendChild(a),_}const t=document.createElement(n.tag);n.key!=null&&(t.key=n.key);const{props:s={},attrs:r={},directives:i={}}=n.props??{},o=F(i,e,t,r),l={...s,...o.props},f={...r,...o.attrs};for(const c in f){const h=f[c];typeof h=="boolean"?h&&t.setAttribute(c,""):h!=null&&t.setAttribute(c,String(h))}for(const c in l){const h=l[c];if(c==="value"&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement))t.value=h??"";else if(c==="checked"&&t instanceof HTMLInputElement)t.checked=!!h;else if(c.startsWith("on")&&typeof h=="function")t.addEventListener(c.slice(2).toLowerCase(),h);else{if(c.startsWith("on")&&h===void 0)continue;h==null||h===!1?t.removeAttribute(c):t.setAttribute(c,String(h))}}for(const[c,h]of Object.entries(o.listeners||{}))t.addEventListener(c,h);if(Array.isArray(n.children))for(const c of n.children)t.appendChild($(c,e));else typeof n.children=="string"&&(t.textContent=n.children);return t}function de(n,e,t,s){if(typeof t=="string"){n.textContent!==t&&(n.textContent=t);return}if(!Array.isArray(t))return;const r=Array.from(n.childNodes),i=Array.isArray(e)?e:[],o=new Map;for(const a of i)a&&a.key!=null&&o.set(a.key,a);const l=new Map;for(const a of r){const _=a.key;_!=null&&l.set(_,a)}const f=new Set;let c=n.firstChild;function h(a,_){let b=a;for(;b&&(f.add(b),b!==_);)b=b.nextSibling}function d(a,_,b,T){const k=[];let u=a.nextSibling;for(;u&&u!==_;)k.push(u),u=u.nextSibling;const y=Array.isArray(b)?b:[];if(T.some(g=>g&&g.key!=null)||y.some(g=>g&&g.key!=null)){const g=new Map,p=new Map;for(const C of y)C&&C.key!=null&&g.set(C.key,C);for(const C of k){const A=C.key;A!=null&&p.set(A,C)}const x=new Set;let S=a.nextSibling;for(const C of T){let A;if(C.key!=null&&p.has(C.key)){const E=g.get(C.key);A=V(p.get(C.key),E,C,s),x.add(A),A!==S&&n.contains(A)&&n.insertBefore(A,S)}else A=$(C,s),n.insertBefore(A,S),x.add(A);S=A.nextSibling}for(const C of k)!x.has(C)&&n.contains(C)&&n.removeChild(C)}else{const g=Math.min(y.length,T.length);for(let p=0;p<g;p++){const x=y[p],S=T[p],C=V(k[p],x,S,s);C!==k[p]&&(n.insertBefore(C,k[p]),n.removeChild(k[p]))}for(let p=g;p<T.length;p++)n.insertBefore($(T[p],s),_);for(let p=g;p<k.length;p++)n.removeChild(k[p])}}for(const a of t){let _;if(a.tag==="#anchor"){const b=a.key,T=`${b}:start`,k=`${b}:end`;let u=l.get(T),y=l.get(k);const m=Array.isArray(a.children)?a.children:[];if(u||(u=document.createTextNode(""),u.key=T),y||(y=document.createTextNode(""),y.key=k),a._startNode=u,a._endNode=y,!n.contains(u)||!n.contains(y)){n.insertBefore(u,c);for(const g of m)n.insertBefore($(g,s),c);n.insertBefore(y,c)}else d(u,y,o.get(b)?.children,m);h(u,y),c=y.nextSibling;continue}if(a.key!=null&&l.has(a.key)){const b=o.get(a.key);_=V(l.get(a.key),b,a,s),f.add(_),_!==c&&n.contains(_)&&(c&&!n.contains(c)&&(c=null),n.insertBefore(_,c))}else _=$(a,s),c&&!n.contains(c)&&(c=null),n.insertBefore(_,c),f.add(_);c=_.nextSibling}for(const a of r)!f.has(a)&&n.contains(a)&&n.removeChild(a)}function V(n,e,t,s){if(e===t)return n;if(typeof t=="string"){if(n.nodeType===Node.TEXT_NODE)return n.textContent!==t&&(n.textContent=t),n;{const i=document.createTextNode(t);return n.parentNode?.replaceChild(i,n),i}}if(t&&typeof t!="string"&&t.tag==="#anchor"){const i=t,o=Array.isArray(i.children)?i.children:[],l=i._startNode??document.createTextNode(""),f=i._endNode??document.createTextNode("");i.key!=null&&(l.key=`${i.key}:start`,f.key=`${i.key}:end`),i._startNode=l,i._endNode=f;const c=document.createDocumentFragment();c.appendChild(l);for(const h of o)c.appendChild($(h,s));return c.appendChild(f),n.parentNode?.replaceChild(c,n),l}if(!t){const i=document.createComment("removed");return n.parentNode?.replaceChild(i,n),i}if(!e||typeof e=="string"){const i=$(t,s);return n.parentNode?.replaceChild(i,n),i}if(t.tag==="#anchor"){const i=Array.isArray(t.children)?t.children:[],o=t._startNode??document.createTextNode(""),l=t._endNode??document.createTextNode("");t.key!=null&&(o.key=`${t.key}:start`,l.key=`${t.key}:end`),t._startNode=o,t._endNode=l;const f=document.createDocumentFragment();f.appendChild(o);for(const c of i)f.appendChild($(c,s));return f.appendChild(l),n.parentNode?.replaceChild(f,n),o}if(typeof e!="string"&&typeof t!="string"&&e.tag===t.tag&&e.key===t.key){const i=n;return he(i,e.props||{},t.props||{},s),de(i,e.children,t.children,s),i}const r=$(t,s);return n.parentNode?.replaceChild(r,n),r}function pe(n,e,t){const s=c=>c.key==null?{...c,key:"__root__"}:c;let r=Array.isArray(e)?{tag:"div",key:"__root__",children:e}:s(e);r=W(r,String(r.key??"root"));const i=n._prevVNode??null,o=n._prevDom??n.firstChild??null;let l;i&&o?typeof i!="string"&&typeof r!="string"&&i.tag===r.tag&&i.key===r.key?l=V(o,i,r,t):(l=$(r,t),n.replaceChild(l,o)):(l=$(r,t),n.firstChild?n.replaceChild(l,n.firstChild):n.appendChild(l));const f=[];for(let c=0;c<n.childNodes.length;c++){const h=n.childNodes[c];h!==l&&h.nodeName!=="STYLE"&&f.push(h)}f.forEach(c=>n.removeChild(c)),n._prevVNode=r,n._prevDom=l}class ye{cache=new Map;maxSize;accessOrder=new Map;accessCounter=0;constructor(e=100){this.maxSize=e}set(e,t,s=[]){this.cache.size>=this.maxSize&&this.evictOldest(),this.cache.set(e,{css:t,timestamp:Date.now(),dependencies:s}),this.accessOrder.set(e,++this.accessCounter)}get(e){const t=this.cache.get(e);return t?(this.accessOrder.set(e,++this.accessCounter),t.css):null}has(e){return this.cache.has(e)}invalidate(e){const t=[];for(const[s,r]of this.cache)r.dependencies.includes(e)&&t.push(s);t.forEach(s=>{this.cache.delete(s),this.accessOrder.delete(s)})}clear(){this.cache.clear(),this.accessOrder.clear(),this.accessCounter=0}evictOldest(){let e="",t=1/0;for(const[s,r]of this.accessOrder)r<t&&(t=r,e=s);e&&(this.cache.delete(e),this.accessOrder.delete(e))}getStats(){return{size:this.cache.size,maxSize:this.maxSize,hitRate:this.accessCounter>0?this.cache.size/this.accessCounter:0}}}function ge(n){return n.replace(/\/\*[\s\S]*?\*\//g,"").replace(/\s+/g," ").replace(/\s*([{}:;,>+~])\s*/g,"$1").replace(/;}/g,"}").trim()}function me(n){try{return JSON.stringify(n,(e,t)=>{if(typeof t=="function")return t.toString();if(typeof t=="object"&&t!==null){if(t.__hashed)return"[Circular]";t.__hashed=!0;const s={...t};return delete s.__hashed,s}return t})}catch{return n.map(e=>String(e)).join("|")}}function _e(n){const e=n.split("}").filter(r=>r.trim()),t=new Set,s=[];for(const r of e){const i=r.trim().replace(/\s+/g," ");i&&!t.has(i)&&(t.add(i),s.push(r+"}"))}return s.join("").replace(/}$/,"")}function be(n,e){let t=null;const s=((...r)=>{t!==null&&clearTimeout(t),t=setTimeout(()=>{n(...r),t=null},e)});return s.cancel=()=>{t!==null&&(clearTimeout(t),t=null)},s}class ke{metrics=new Map;startTimer(e){const t=performance.now();return()=>{const s=performance.now()-t;return this.recordMetric(e,s),s}}recordMetric(e,t){this.metrics.has(e)||this.metrics.set(e,[]);const s=this.metrics.get(e);s.push(t),s.length>100&&s.shift()}getStats(e){if(e){const s=this.metrics.get(e)||[];return s.length===0?null:{operation:e,count:s.length,average:s.reduce((r,i)=>r+i,0)/s.length,min:Math.min(...s),max:Math.max(...s)}}const t={};for(const[s,r]of this.metrics)r.length>0&&(t[s]={count:r.length,average:r.reduce((i,o)=>i+o,0)/r.length,min:Math.min(...r),max:Math.max(...r)});return t}reset(e){e?this.metrics.delete(e):this.metrics.clear()}}const Ce=new ke,Se=new Map;function K(n){return n.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function I(n){return typeof n=="string"?n.replace(/[&<>"']/g,e=>({"&":"&","<":"<",">":">",'"':""","'":"'"})[e]):n}function Ae(n){return n.replace(/url\s*\(\s*['"]?javascript:[^)]*\)/gi,"").replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi,"").replace(/expression\s*\([^)]*\)/gi,"")}function xe(n,...e){let t="";for(let s=0;s<n.length;s++)t+=n[s],s<e.length&&(t+=e[s]);return t}function Ee(n,e,t){let s=K(n);s.includes("-")||(s=`cer-${s}`);let r;typeof e=="function"?r={...t,render:e}:r=e,typeof r.onError!="function"&&(r.onError=(i,o)=>{console.error(`[${s}] Error:`,i,o)}),Se.set(s,r),typeof window<"u"&&!customElements.get(s)&&customElements.define(s,J(r))}function J(n){if(!n.render)throw new Error("Component must have a render function");return typeof window>"u"?class{constructor(){}}:class extends HTMLElement{context;_listeners=[];_watchers=new Map;_renderTimeoutId=null;_mounted=!1;_hasError=!1;_initializing=!0;_styleElement=null;_styleCache=new ye(100);_lastStyleHash="";_styleDependencies=new Set;_styleUpdateDebounced;_cfg;_lastRenderTime=0;_renderCount=0;_templateLoading=!1;_templateError=null;constructor(){super(),this.attachShadow({mode:"open"}),this._cfg=n;const e={debounceMs:16,...n.styleOptimizations};this._styleUpdateDebounced=be(t=>this._applyStyle(t),e.debounceMs),this.context=this._initContext(n),Object.keys(n).forEach(t=>{const s=n[t];typeof s=="function"&&!t.startsWith("on")&&(this.context[t]=(...r)=>s(...r,this.context))}),this._applyProps(n),this._applyComputed(n),this._initializing=!1,this._initWatchers(n),this._render(n)}connectedCallback(){this._runLogicWithinErrorBoundary(n,()=>{n.onConnected&&!this._mounted&&(n.onConnected(this.context),this._mounted=!0)})}disconnectedCallback(){this._runLogicWithinErrorBoundary(n,()=>{n.onDisconnected&&n.onDisconnected(this.context),this._listeners.forEach(e=>e()),this._listeners=[],this._watchers.clear(),this._styleCache.clear(),this._styleDependencies.clear(),this._styleElement=null,this._lastStyleHash="",this._styleUpdateDebounced.cancel(),this._templateLoading=!1,this._templateError=null,this._mounted=!1})}attributeChangedCallback(e,t,s){this._runLogicWithinErrorBoundary(n,()=>{this._applyProps(n),n.onAttributeChanged&&n.onAttributeChanged(e,t,s,this.context)})}static get observedAttributes(){return n.props?Object.keys(n.props).map(K):[]}_applyComputed(e){this._runLogicWithinErrorBoundary(n,()=>{e.computed&&Object.entries(e.computed).forEach(([t,s])=>{Object.defineProperty(this.context,t,{get:()=>{const r=s(this.context);return I(r)},enumerable:!0})})})}_render(e){this._runLogicWithinErrorBoundary(e,()=>{if(!this.shadowRoot)return;if(this._styleDependencies.clear(),this._templateLoading&&e.loadingTemplate){this._renderOutput(e.loadingTemplate(this.context));return}if(this._templateError&&e.errorTemplate){this._renderOutput(e.errorTemplate(this._templateError,this.context));return}const t=e.render(this.context);if(t instanceof Promise){this._templateLoading=!0,t.then(s=>(this._templateLoading=!1,this._templateError=null,this._renderOutput(s),s)).catch(s=>{if(this._templateLoading=!1,this._templateError=s,e.errorTemplate){const r=e.errorTemplate(s,this.context);return this._renderOutput(r),r}throw s}),e.loadingTemplate&&this._renderOutput(e.loadingTemplate(this.context));return}this._renderOutput(t),this._applyStyle(e)})}_renderOutput(e){if(!this.shadowRoot)return;const t=new Proxy(this.context,{get:(s,r)=>r==="_requestRender"?()=>this._requestRender():r==="context"?s:typeof r=="string"&&r.includes(".")?r.split(".").reduce((i,o)=>i?.[o],s):s[r],set:(s,r,i)=>{if(typeof r=="string"&&r.includes(".")){const o=r.split("."),l=o.pop();if(!l)return!1;const f=o.reduce((c,h)=>(h in c||(c[h]={}),c[h]),s);return f[l]=i,!0}return s[r]=i,!0}});pe(this.shadowRoot,Array.isArray(e)?e:[e],t),this._requestStyleUpdate()}_requestRender(){if(this._renderTimeoutId!==null&&clearTimeout(this._renderTimeoutId),Date.now()-this._lastRenderTime<16){if(this._renderCount++,this._renderCount>10){console.warn(`[${this.tagName}] Potential infinite render loop detected. Skipping render.`),this._renderTimeoutId=null;return}}else this._renderCount=0;this._renderTimeoutId=setTimeout(()=>{this._lastRenderTime=Date.now(),this._render(this._cfg),this._renderTimeoutId=null},0)}_requestStyleUpdate(){this._styleUpdateDebounced(this._cfg)}_applyStyle(e){this._runLogicWithinErrorBoundary(e,()=>{if(!this.shadowRoot)return;const t=Ce.startTimer("applyStyle");try{if(this._styleElement||(this._styleElement=this.shadowRoot.querySelector("style"),this._styleElement||typeof document<"u"&&(this._styleElement=document.createElement("style"),this.shadowRoot.prepend(this._styleElement))),!e.style){this._styleElement.textContent="";return}const s={enableCaching:!0,enableMinification:!1,enableDeduplication:!0,cacheSize:100,debounceMs:16,...e.styleOptimizations};let r;typeof e.style=="string"?r={css:e.style,cache:s.enableCaching}:typeof e.style=="function"?r={css:e.style,cache:s.enableCaching}:r={cache:s.enableCaching,...e.style};const i=r.dependencies||[],o=r.cache!==!1&&s.enableCaching;let l="";if(o&&i.length>0){const h=i.map(d=>this.context[d]);if(l=me(h),this._lastStyleHash===l&&this._styleCache.has(l)){const d=this._styleCache.get(l);this._styleElement.textContent!==d&&(this._styleElement.textContent=d);return}}(!o||i.length===0)&&(l="no-deps-"+Date.now());const f=typeof r.css=="function"?r.css(this.context):r.css;let c=Ae(f);s.enableMinification&&(c=ge(c)),s.enableDeduplication&&(c=_e(c)),o&&i.length>0&&(this._styleCache.set(l,c,i.map(String)),this._lastStyleHash=l),this._styleElement.textContent!==c&&(this._styleElement.textContent=c)}finally{t()}})}_runLogicWithinErrorBoundary(e,t){this._hasError&&(this._hasError=!1);try{t()}catch(s){this._hasError=!0,e.onError&&e.onError(s,this.context),e.errorFallback&&this.shadowRoot&&(this.shadowRoot.innerHTML=e.errorFallback(s,this.context))}}_initContext(e){try{let t=function(r,i=""){return Array.isArray(r)?new Proxy(r,{get(o,l,f){const c=Reflect.get(o,l,f);return typeof c=="function"&&typeof l=="string"&&["push","pop","shift","unshift","splice","sort","reverse"].includes(l)?function(...d){const a=c.apply(o,d);if(!s._initializing){const _=i||"root";s._triggerWatchers(_,o),s._render(e)}return a}:c},set(o,l,f){if(o[l]=f,!s._initializing){const c=i?`${i}.${String(l)}`:String(l);s._styleDependencies.add(String(l)),s._styleCache.invalidate(String(l)),s._triggerWatchers(c,f);const h=e.style;let d=!1;if(h&&typeof h=="object"&&"dependencies"in h){const a=h.dependencies||[];d=a.includes(String(l))&&a.every(_=>!s._styleDependencies.has(String(_))||_===l)}d?s._requestStyleUpdate():s._render(e)}return!0},deleteProperty(o,l){if(delete o[l],!s._initializing){const f=i?`${i}.${String(l)}`:String(l);s._styleDependencies.add(String(l)),s._triggerWatchers(f,void 0),s._render(e)}return!0}}):r&&typeof r=="object"?(Object.keys(r).forEach(o=>{const l=i?`${i}.${o}`:o;r[o]=t(r[o],l)}),new Proxy(r,{set(o,l,f){const c=i?`${i}.${String(l)}`:String(l);return o[l]=t(f,c),s._initializing||(s._triggerWatchers(c,o[l]),s._render(e)),!0},get(o,l,f){return Reflect.get(o,l,f)}})):r};const s=this;return t({...e.state})}catch{return{}}}_initWatchers(e){if(e.watch)for(const[t,s]of Object.entries(e.watch)){let r,i={};if(Array.isArray(s)?(r=s[0],i=s[1]||{}):r=s,this._watchers.set(t,{callback:r,options:i,oldValue:this._getNestedValue(t)}),i.immediate)try{const o=this._getNestedValue(t);r(o,void 0,this.context)}catch(o){console.error(`Error in immediate watcher for "${t}":`,o)}}}_getNestedValue(e){return e.split(".").reduce((t,s)=>t?.[s],this.context)}_triggerWatchers(e,t){const s=(i,o)=>{if(i===o)return!0;if(typeof i!=typeof o||typeof i!="object"||i===null||o===null)return!1;if(Array.isArray(i)&&Array.isArray(o))return i.length!==o.length?!1:i.every((c,h)=>s(c,o[h]));const l=Object.keys(i),f=Object.keys(o);return l.length!==f.length?!1:l.every(c=>s(i[c],o[c]))},r=this._watchers.get(e);if(r&&!s(t,r.oldValue))try{r.callback(t,r.oldValue,this.context),r.oldValue=t}catch(i){console.error(`Error in watcher for "${e}":`,i)}for(const[i,o]of this._watchers.entries())if(o.options.deep&&e.startsWith(i+"."))try{const l=this._getNestedValue(i);s(l,o.oldValue)||(o.callback(l,o.oldValue,this.context),o.oldValue=l)}catch(l){console.error(`Error in deep watcher for "${i}":`,l)}}_applyProps(e){try{let t=function(s,r){return r===Boolean?s==="true":r===Number?Number(s):s};if(!e.props)return;Object.entries(e.props).forEach(([s,r])=>{const i=this.getAttribute(K(s));i!==null?this.context[s]=I(t(i,r.type)):"default"in r&&r.default!==void 0&&(this.context[s]=I(r.default))})}catch(t){this._hasError=!0,e.onError&&e.onError(t,this.context),e.errorFallback&&this.shadowRoot&&(this.shadowRoot.innerHTML=e.errorFallback(t,this.context))}}}}exports.component=Ee;exports.createElementClass=J;exports.createStore=Y;exports.css=xe;exports.each=re;exports.eventBus=Q;exports.html=ne;exports.match=ie;exports.when=se;
|
|
72
2
|
//# sourceMappingURL=custom-elements-runtime.cjs.js.map
|