@reactive-web-components/rwc 2.61.7 → 2.63.0

package/README.md

@@ -243,7 +243,32 @@ city.set('SPB');   // userData immediately updates to ['Jane', 30, 'SPB']
 - **`forkJoin`** — waits for all signals to update before emitting a new value. Useful when you need all values to be updated together.
 - **`combineLatest`** — emits a new value immediately when any signal changes. Useful for real-time updates and reactive computations.
 
-  ### Function as Child Content (recommended style for dynamic lists and conditional render)
+#### firstUpdate
+
+Executes a callback after the first update of a reactive signal. Useful for performing one-time actions when a signal receives its first non-initial value.
+
+```typescript
+import { firstUpdate, signal } from '@shared/utils';
+
+const userSignal = signal(null);
+
+// This callback will be called only once when userSignal is first updated
+firstUpdate(userSignal, (user) => {
+  console.log('User loaded for the first time:', user);
+  // Perform initialization logic
+});
+
+// Later, when userSignal is updated:
+userSignal.set({ name: 'John', age: 30 }); // Callback executes
+userSignal.set({ name: 'Jane', age: 25 }); // Callback does NOT execute again
+```
+
+**Application:**
+- Performing one-time initialization when data first arrives
+- Triggering side effects only on the first update
+- Handling initial data loading scenarios
+
+### Function as Child Content (recommended style for dynamic lists and conditional render)
 
 Functions passed as child content to `el` or `customEl` are automatically converted to reactive content. This allows convenient creation of dynamic content that will update when dependent signals change. The content function receives context (a reference to its component) as the first argument.
 
@@ -536,6 +561,7 @@ To set properties, attributes, classes, events, and effects for elements and com
 ```typescript
 export type ComponentInitConfig<T extends ExtraHTMLElement> = Partial<{
   classList: ConfigClassList;
+  ref: ReactiveSignal<ComponentConfig<T>>;
   style: ConfigStyle;
   attributes: ConfigAttribute<T>;
   customAttributes: ConfigCustomAttribute;
@@ -558,6 +584,7 @@ export type ComponentInitConfig<T extends ExtraHTMLElement> = Partial<{
 #### Main Features
 
 - **classList** — array of classes (strings or functions/signals)
+- **ref** — reactive signal to get a reference to the component instance
 - **style** — CSS styles object; supports both regular properties and CSS Custom Properties (`--var`), values can be functions/signals
 - **attributes** — object with HTML attributes
 - **customAttributes** — object with custom attributes
@@ -663,6 +690,30 @@ div(
 )
 ```
 
+**7. Getting component reference with ref**
+
+```typescript
+const buttonRef = signal<ComponentConfig<HTMLButtonElement>>(null);
+
+// Later, use the reference
+button({
+  ref: buttonRef,
+  listeners: {
+    click: () => console.log('Button clicked')
+  }
+}, 'Click me');
+
+// Access the component later
+effect(() => {
+  const buttonComponent = buttonRef();
+  if (buttonComponent) {
+    console.log('Button component available:', buttonComponent);
+    // You can call component methods:
+    // buttonComponent.addClass('active');
+  }
+});
+```
+
 ---
 
 **Best practice:**  

package/main.d.ts

@@ -1,8 +1,5 @@
-import { ComponentConfig } from './shared/types';
 import { BaseElement } from './shared/utils';
 export declare class TestComponent extends BaseElement {
-    test: import('./shared/utils').ReactiveSignal<number>;
-    test1: void;
-    connectedCallback(): void;
-    render(): ComponentConfig<HTMLDivElement>;
+    testProperty: import('./shared/utils').ReactiveSignal<boolean>;
+    render(): import('./shared').ComponentConfig<HTMLDivElement>;
 }

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@reactive-web-components/rwc",
-    "version": "2.61.7",
+    "version": "2.63.0",
     "type": "module",
     "types": "./shared/index.d.ts",
     "exports": {
         ".": {
             "types": "./shared/index.d.ts",
-            "import": "./reactive-web-component.BOufSDNu.js",
-            "require": "./reactive-web-component.B1k6LJYO.umd.cjs"
+            "import": "./reactive-web-component.BmD7vrr3.js",
+            "require": "./reactive-web-component.B_uUgR3i.umd.cjs"
         }
     },
     "author": "tamazyanarsen",
@@ -34,6 +34,6 @@
         "ui",
         "frontend"
     ],
-    "module": "./reactive-web-component.BOufSDNu.js",
-    "main": "./reactive-web-component.B1k6LJYO.umd.cjs"
+    "module": "./reactive-web-component.BmD7vrr3.js",
+    "main": "./reactive-web-component.B_uUgR3i.umd.cjs"
 }

package/reactive-web-component.B_uUgR3i.umd.cjs

@@ -0,0 +1,2 @@
+(function(i,A){typeof exports=="object"&&typeof module<"u"?A(exports):typeof define=="function"&&define.amd?define(["exports"],A):(i=typeof globalThis<"u"?globalThis:i||self,A(i.ReactiveComponent={}))})(this,function(i){"use strict";var pn=Object.defineProperty;var En=(i,A,_)=>A in i?pn(i,A,{enumerable:!0,configurable:!0,writable:!0,value:_}):i[A]=_;var u=(i,A,_)=>En(i,typeof A!="symbol"?A+"":A,_);const A=n=>n&&typeof n=="object"&&("classList"in n||"attributes"in n||"customAttributes"in n||"reactiveClassList"in n||"listeners"in n||"customListeners"in n||"children"in n||"effects"in n||"ref"in n||"style"in n||Object.keys(n).some(t=>t.startsWith(".")||t.startsWith("@")||t.startsWith("$")))&&!("hostElement"in n),_=n=>n&&typeof n=="object"&&"hostElement"in n&&"append"in n&&"set"in n&&"addStyle"in n&&"setAttribute"in n&&"addClass"in n&&"addEffect"in n&&"addReactiveContent"in n&&"setReactiveContent"in n&&"clear"in n,D=(n,t,...e)=>{t&&t.apply(n,e)};let G=!0;const b=(...n)=>{G&&console.debug(["[rwc]",...n].join(" | "),...Array.from(n.join("").matchAll(/%c/gm)).map((t,e)=>e%2===0?"color:red":"color:inherit"))},F=n=>n.replace(/([A-Z])/gm,t=>`-${t.toLowerCase()}`),rt=n=>n.replace(/-(\w)/gm,(t,e)=>e.toUpperCase()),B=(n,...t)=>{if(!G)return;const e={r:"color: #ff0000",g:"color: #00ff00",b:"color: #0000ff",y:"color: #ffff00",p:"color: #800080",c:"color: #00ffff",o:"color: #ffa500",w:"color: #808080"},s=n.match(/@[rgbpycow]/g)||[],o=s.map(c=>{const a=c.slice(1);return e[a]||"color: inherit"});let r=n;s.forEach(c=>{const a=new RegExp(`\\${c}([^\\s,]+)`,"g");r=r.replace(a,"%c$1")}),console.log(r,...o,...t)},Ot=()=>{G=!0},it=()=>{G=!1};it();const Mt=(n,t)=>{n.every(Boolean)&&t(n)},V=new Set;let Q=!1,x=!1;const $t=()=>{if(!x){x=!0;try{if(Q=!1,V.size===0)return;const n=Array.from(V);V.clear(),n.forEach(t=>{if(t.status==="active"){K(t),O.push(t);try{t()}catch(e){console.error("Error in effect:",e)}finally{O.pop()}}}),V.size>0&&ct()}finally{x=!1}}};function _t(){queueMicrotask($t)}const ct=()=>{Q||(Q=!0,_t())},Ht=n=>{V.add(n),ct()},O=[],K=n=>{var t,e,s,o;(t=n.children)==null||t.forEach(r=>{var c;return(c=r.destroy)==null?void 0:c.call(r)}),(e=n.children)==null||e.clear(),(s=n.cleanupSet)==null||s.forEach(r=>r()),(o=n.cleanupSet)==null||o.clear()};function T(n,t){let e=(t==null?void 0:t.signalCompareFn)||(()=>!0);const s=new Set;function o(){var c;const r=O[O.length-1];return r&&!r.fake&&!s.has(r)&&r.status==="active"&&(s.add(r),(c=r.cleanupSet)==null||c.add(()=>s.delete(r))),!(t!=null&&t.name)&&(r!=null&&r.effectId)&&o.setName(r.effectId),n}return o.signalId=`${(t==null?void 0:t.name)||""}_${Math.random().toString(36).substring(2,15)}`,o.setName=function(r){return o.signalId=`${r}_${Math.random().toString(36).substring(2,15)}`,o},o.setCompareFn=function(r){return e=r,o},o.clearSubscribers=function(){s.clear()},o.getSubscribers=function(){return s},o.peek=function(){return Object.freeze(n)},o.initValue=Object.freeze(n),o.forceSet=function(r){n=r,s.forEach(c=>{Ht(c)})},o.set=function(r,c=e){n!==r&&c(n,r)&&o.forceSet(r)},o.update=function(r){o.set(r(n))},o.pipe=(r,c)=>{c!=null&&c.name&&o.setName(c.name);const a=T(null);return v(()=>{const d=o();v(()=>{const h=r(d);h instanceof Promise?h.then(E=>a.set(E)):R(h)?v(()=>a.set(h()),{name:"pipe_effect_inner"}):a.set(h)},{name:"pipe_effect"})},{name:(c==null?void 0:c.name)||`pipe_${o.signalId}`}),a},o}function v(n,t){var r;const e=`${(t==null?void 0:t.name)||""}_${Math.random().toString(36).substring(2,15)}`;b("current effect",`%c${e}%c`);const s=n;s.status="active",s.children=new Set,s.effectId=e;const o=O[O.length-1];return o&&((r=o.children)==null||r.add(s),s.parent=new WeakRef(o),s.destroy=()=>{var c;K(s),(c=o.children)==null||c.delete(s),s.destroy=void 0,s.status="inactive"}),s.cleanupSet=new Set,O.push(s),s(),O.pop(),s}const R=n=>!!n&&["object","function"].includes(typeof n)&&"set"in n&&"update"in n&&"forceSet"in n&&"signalId"in n;function kt(n,...t){const e=T("");return v(()=>{const s=t.map(r=>R(r)?String(r()):String(r)),o=[n[0]];s.forEach((r,c)=>{o.push(r,n[c+1])}),e.set(o.join(""))}),e}function Wt(n,t){const e=T(t??null),s=o=>e.set(o);return n instanceof Promise?n.then(s):typeof n=="function"&&v(()=>{const o=n();o instanceof Promise?o.then(s):R(o)?v(()=>s(o())):s(o)}),e}function Pt(n,t){let e=n(),s=t();v(()=>{const o=n(),r=t();o!==r&&(o!==e?t.set(o):r!==s&&n.set(r)),e=o,s=r})}function Ft(...n){let t=n.map(s=>s());const e=T(t);return n.forEach((s,o)=>{v(()=>{const r=()=>t.filter(c=>c!==void 0).length;r()===n.length&&(t=Array.from(t).fill(void 0)),t[o]=s(),r()===n.length&&e.set([...t])})}),e}const Bt=(...n)=>{const t=T([]);return v(()=>{t.set(n.map(e=>e()))}),t},Vt=(n,t)=>{let e=!0;const s=v(()=>{var o;e&&(e=!1,t(n()),(o=s.destroy)==null||o.call(s))})},U="eventProps",Y="EVENT_CONFIG",J="observedAttributes",Jt=()=>(n,t)=>{Reflect.get(n,J)||Reflect.defineProperty(n,J,{value:[]}),Reflect.get(n,J).push(F(t))},Nt=n=>(t,e)=>{Reflect.get(t,U)||Reflect.defineProperty(t,U,{value:[]}),Reflect.get(t,Y)||Reflect.defineProperty(t,Y,{value:{}}),Reflect.get(t,Y)[e]={bubbles:(n==null?void 0:n.bubbles)??!1,composed:(n==null?void 0:n.composed)??!1},Reflect.get(t,U).push(e)},tt=(n,t=!1)=>e=>{b(n,"start register static attr",e.prototype[J]);const s=[];if(e.styles){const r=e.styles,c=[];Array.isArray(r)?c.push(...r):c.push(r),c.forEach(a=>{const d=new CSSStyleSheet;d.replaceSync(a),s.push(d);const S=new CSSStyleSheet;S.replaceSync(a.slice(a.indexOf("@property"))),document.adoptedStyleSheets.push(S)})}class o extends e{constructor(...c){b("constructor",`%c${n}%c`),super(t,...c),s.length>0&&this.shadow.adoptedStyleSheets.push(...s)}render(){return b("rwc: render from new class"),e.prototype.render.call(this)}attributeChangedCallback(c,a,d){b("%cAttribute has changed.%c",`%c${c}%c`,`oldValue: ${a}, newValue: ${d}`,`%c${n}%c`);try{d=JSON.parse(d)}catch{}const S=rt(c);if(S in this&&R(this[S])){const h=this[S];h.setName(c),d===null?(h.set(h.initValue),this.removeAttribute(c)):h.set(d)}D(this,e.prototype.attributeChangedCallback,c,a,d)}connectedCallback(){const c=()=>{var d,S;b("rwc: connectedCallback"),b("connectedCallback",`%c${n}%c`,this),(d=this.init)==null||d.call(this),this.providers&&Object.keys(this.providers).length>0&&(b("WRAPPER for providers",n),Object.entries(this.providers).forEach(([h,f])=>{b("register provider",h,f()),this.addEventListener(h,E=>{var m;b("send provider",h,f());const p=E;((m=p.detail)==null?void 0:m.context)===h&&(p.stopPropagation(),p.detail.callback(f))})})),this.checkInjects(),(S=e.prototype[U])==null||S.forEach(h=>{this[h]=f=>{const E=e.prototype[Y][h],{bubbles:p,composed:m}=E;R(f)?v(()=>{B("@oemit reactive value",f()),this.dispatchEvent(new CustomEvent(h,{detail:f(),bubbles:p,composed:m}))}):(B("@oemit value",f),this.dispatchEvent(new CustomEvent(h,{detail:f,bubbles:p,composed:m})))}}),b("start render",`%c${n}%c`,n);const a=()=>{b("rwc: insertRenderTemplate");const f=this.render().hostElement;f&&this.shadow.appendChild(f),D(this,e.prototype.connectedCallback),this.appendSlotContent()};if(this.rootStyle&&!e.styles){const h=p=>p instanceof Promise||Array.isArray(p)&&p.every(m=>m instanceof Promise),f=this.rootStyle,E=p=>{const m=new CSSStyleSheet;m.replaceSync(p),this.shadow.adoptedStyleSheets.push(m);const w=new CSSStyleSheet;w.replaceSync(p.slice(p.indexOf("@property"))),document.adoptedStyleSheets.push(w)};if(h(f)){const p=[];Array.isArray(f)?p.push(...f):p.push(f),Promise.all(p).then(m=>m.forEach(w=>E(w.default))).then(()=>a())}else{const p=[];Array.isArray(f)?p.push(...f):p.push(f),p.forEach(m=>E(m)),a()}}else a();this.slotContext&&Object.keys(this.slotContext).length>0&&this.shadow.querySelectorAll("slot").forEach(h=>{b(this.slotContext,this.slotContext&&this.slotContext[h.name]),B("@bslot element",h,`name:${h.name};`,h.assignedElements()),h.assignedElements().forEach(f=>{const E=this.slotContext[h.name];this.slotContext&&R(E)&&(B("@oslot element",h,`name:${h.name};`,h.assignedElements()),v(()=>{f.dispatchEvent(new CustomEvent("handleSlotContext",{detail:E()}))}))})})};c.fake=!0,c.component=new WeakRef(this),this.effectSet.add(new WeakRef(c)),v(c,{name:"FAKE_wrapperEffect"})}disconnectedCallback(){this.allSlotContent=[],this.slotContent={},this.htmlSlotContent={},this.effectSet.forEach(c=>{var a,d;return(d=(a=c.deref())==null?void 0:a.destroy)==null?void 0:d.call(a)}),this.effectSet.clear(),this.shadow.replaceChildren(),this.replaceChildren(),D(this,e.prototype.disconnectedCallback)}}return u(o,"observedAttributes",e.prototype[J]??[]),u(o,"renderTagName",n),o.toString=()=>n,customElements.get(n)?console.error(`название тега ${n} повторяется, компонент ${e.name} не зарегистрирован`):customElements.define(n,o),e.renderTagName=n,e};class H extends HTMLElement{constructor(e=!1){super();u(this,"init");u(this,"isSlotLazyLoading",!1);u(this,"slotTemplate");u(this,"slotContext");u(this,"rootStyle");u(this,"modelValue");u(this,"providers");u(this,"effectSet",new Set);u(this,"appendAllSlotContent");u(this,"allSlotContent",[]);u(this,"slotContent",{});u(this,"htmlSlotContent",{});u(this,"shadow");u(this,"injects",{});this.shadow=this.attachShadow({mode:e?"closed":"open"})}appendChild(e,s=!0){var o;if(this.isSlotLazyLoading&&s){if(e instanceof HTMLElement){const r=e.slot||"default";this.htmlSlotContent[r]||(this.htmlSlotContent[r]=[]),(o=this.htmlSlotContent[r])==null||o.push(e)}}else return super.appendChild(e)}appendSlotContent(){var e;(e=this.appendAllSlotContent)==null||e.call(this)}inject(e){return b("%cinject%c",e),this.injects[e]||(this.injects[e]=T(null)),this.injects[e]}checkInjects(){Object.entries(this.injects).forEach(([e,s])=>{b("%cinject%c",`%c${e}%c`,"from BaseElement (dispatch event)"),this.shadow.dispatchEvent(new CustomEvent(e,{detail:{context:e,callback:o=>v(()=>{s.set(o())},{name:e})},bubbles:!0,composed:!0}))})}setReactiveValue(e){this.modelValue=e}}u(H,"observedAttributes",[]),u(H,"renderTagName",""),u(H,"styles");const qt=n=>"render"in n&&"setReactiveValue"in n,zt="handleSlotContext",lt="onConnected",at=n=>typeof n=="string"?n:JSON.stringify(n),Dt=n=>{const t=document.createElement("span");return t.textContent=at(n),t},dt=(n,t)=>(n.appendChild(Dt(t)),n),Gt=(n,t)=>(n.replaceChildren(),dt(n,t)),ft=n=>{const t=document.createElement("span");return v(()=>{const e=n();t.textContent=at(e)}),t};class ht{constructor(t){u(this,"wrapper");u(this,"keyedEffects",new Map);u(this,"append",(...t)=>(t.forEach(e=>{var o;const s=e.hostElement;s&&((o=this.hostElement)==null||o.appendChild(s),lt in s&&setTimeout(()=>{var r;(r=s.onConnected)==null||r.call(s,e,s)}))}),this));u(this,"set",(...t)=>{var s;this.clear();const e=document.createDocumentFragment();return t.forEach(o=>{const r=o.hostElement;r&&e.appendChild(r)}),(s=this.hostElement)==null||s.appendChild(e),this});u(this,"removeChild",(...t)=>(t.forEach(e=>{var s,o;if(Array.from(((s=this.hostElement)==null?void 0:s.childNodes.values())||[]).some(r=>r===e.hostElement)){const r=e.hostElement;r&&((o=this.hostElement)==null||o.removeChild(r))}}),this));u(this,"addHtmlContent",t=>{const e=this.hostElement;return e?(dt(e,t),this):this});u(this,"setHtmlContent",t=>{const e=this.hostElement;return e?(Gt(e,t),this):this});u(this,"setAttribute",(t,e)=>{var r;b("setAttribute",t,e);const s=this.hostElement;if(!s)return this;let o;if((typeof e=="boolean"||e===null)&&!(s instanceof H))if(e)o="";else{this.removeAttribute(t);const c=t.toLowerCase();return c in s&&(s[c]=null),this}else typeof e!="string"?o=JSON.stringify(e):o=e;if((r=this.hostElement)==null||r.setAttribute(F(t),o),!(s instanceof H)){const c=t.toLowerCase();c in s&&(s[c]=e)}return this});u(this,"setCustomAttribute",(t,e)=>{var o;let s;return typeof e!="string"?s=JSON.stringify(e):s=e,(o=this.hostElement)==null||o.setAttribute(F(t),s),this});u(this,"setReactiveAttribute",(t,e)=>(this.addEffect(s=>{b("setReactiveAttribute effect",t,e),s.setAttribute(t,e())},t),this));u(this,"setReactiveCustomAttribute",(t,e)=>(this.addEffect(s=>{s.setCustomAttribute(t,e())}),this));u(this,"removeAttribute",t=>{var e;return(e=this.hostElement)==null||e.removeAttribute(F(t)),this});u(this,"addStyle",t=>{const e=this.hostElement;return e?(Object.entries(t).forEach(([s,o])=>{const r=s.startsWith("--");typeof o=="function"?this.addEffect(()=>{if(r){const c=String(o()||"");e.style.setProperty(s,c)}else e.style[s]=o()}):typeof o=="string"&&(r?e.style.setProperty(s,o):e.style[s]=o)}),this):this});u(this,"onConnected",t=>this.hostElement?(Reflect.defineProperty(this.hostElement,lt,{get(){return t}}),this):this);u(this,"addClass",(...t)=>(t.forEach(e=>{var s;typeof e=="string"?(s=this.hostElement)==null||s.classList.add(...e.split(" ").flatMap(o=>o.split(`
+`)).map(o=>o.trim()).filter(Boolean)):(()=>{let o=null;this.addEffect(()=>{const r=e();r.length>0&&(o?this.replaceClass(o,r):this.addClass(r),o=r)})})()}),this));u(this,"setClass",(...t)=>{var e,s,o;return(s=this.hostElement)==null||s.classList.remove(...((e=this.hostElement)==null?void 0:e.classList)||[]),(o=this.hostElement)==null||o.classList.add(...t),this});u(this,"addReactiveClass",t=>(Object.keys(t).forEach(e=>{this.addEffect(s=>{t[e]()?s.addClass(e):s.removeClass(e)})}),this));u(this,"removeClass",(...t)=>{var e;return(e=this.hostElement)==null||e.classList.remove(...t),this});u(this,"replaceClass",(t,e)=>{var s;return(s=this.hostElement)==null||s.classList.replace(t,e),this});u(this,"addEffect",(t,e)=>{var r,c;const s=this.hostElement;if(!s)return this;const o=()=>t(this,s);if(e){const a=(r=this.keyedEffects.get(e))==null?void 0:r.deref();a&&K(a)}return(c=s.effectSet)==null||c.add(new WeakRef(o)),o.component=this.wrapper,v(o,{name:(e==null?void 0:e.toString())||s.tagName}),this});u(this,"addReactiveContent",t=>{var e;return(e=this.hostElement)==null||e.appendChild(ft(t)),this});u(this,"setReactiveContent",t=>{var e;return this.clear(),(e=this.hostElement)==null||e.appendChild(ft(t)),this});u(this,"clear",()=>{var t;return(t=this.hostElement)==null||t.replaceChildren(),this});this.wrapper=t;const e=t.deref();e&&(e.effectSet=new Set)}get hostElement(){return this.wrapper.deref()}addEventlistener(t,e,s=!1){var o;return(o=this.hostElement)==null||o.addEventListener(t,r=>e(r,this,this.hostElement),s),this}}class Kt extends ht{constructor(){super(...arguments);u(this,"setReactiveValue",e=>(this.hostElement instanceof H&&this.hostElement.setReactiveValue(e),this));u(this,"setSlotTemplate",e=>{var o;const s=(o=this.hostElement)==null?void 0:o.slotTemplate;return s&&Object.entries(e).forEach(([r,c])=>{s[r]=c}),this})}}const Ut=()=>()=>{},ut=n=>new Kt(new WeakRef(n)),mt=n=>new ht(new WeakRef(n)),pt=(n,...t)=>({classList:[...n.map(e=>e.trim()).filter(Boolean),...t]}),Yt=(n,...t)=>pt(n,...t),et=(n,t)=>{var o;if(!t||!n.deref())return;const e=Object.keys(t||{}).filter(r=>r.startsWith(".")||r.startsWith("@")||r.startsWith("$"));e.filter(r=>r.startsWith(".")).forEach(r=>{t!=null&&t.attributes||(t.attributes={}),t.attributes[r.slice(1)]=t[r]}),e.filter(r=>r.startsWith("@")).forEach(r=>{t!=null&&t.listeners||(t.listeners={});const c=r.slice(1);t.listeners[c]=t[r]}),e.filter(r=>r.startsWith("$")).forEach(r=>{t!=null&&t.effects||(t.effects=[]),t.effects.push(t[r])});const s=n.deref();if(s)return St(s,t.classList),vt(s,t.style),wt(s,t.attributes),yt(s,t.reactiveClassList),bt(s,t.customAttributes),Ct(s,t.children),Et(s,t.effects),nt(s,t.listeners),nt(s,t.customListeners),(o=t.ref)==null||o.set(s),s},nt=(n,t)=>{t&&Object.entries(t).forEach(([e,s])=>{typeof s=="function"&&n.addEventlistener(e,s)})},Et=(n,t)=>t==null?void 0:t.forEach(e=>n.addEffect(e)),Ct=(n,t)=>N(new WeakRef(n),...t||[])??n,bt=(n,t)=>{const e=t;e&&Object.keys(e).forEach(s=>{R(e[s])?n.setReactiveCustomAttribute(s,e[s]):typeof e[s]=="function"?n.addEffect(()=>{n.setCustomAttribute(s,e[s]())}):n.setCustomAttribute(s,e[s])})},St=(n,t)=>n.addClass(...t||[]),yt=(n,t)=>n.addReactiveClass(t||{}),vt=(n,t)=>n.addStyle(t||{}),wt=(n,t)=>{const e=t,s=(o,r)=>{r!==void 0&&(b("addAttribute",o,r),R(r)?n.setReactiveAttribute(o,r):typeof r=="function"?n.addEffect(()=>{n.setAttribute(o,r())}):n.setAttribute(o,r))};e&&Object.keys(e).forEach(o=>{s(o,e[o])})},N=(n,...t)=>{const e=n.deref();if(e)return t.forEach(s=>{typeof s=="string"?s.trim().length>0&&e.addHtmlContent(s):R(s)?e.addReactiveContent(s):e.append(s)}),e},k=(n,t)=>{const e=document.createElement(n),s=mt(e);return et(new WeakRef(s),t)??s},Z=(n,t)=>{const[e,...s]=n.split(" ").map(r=>r.trim()),o=k(e,t);return s.length>0&&o.addClass(...s),(...r)=>N(new WeakRef(o),...r.filter(Boolean).flat().flatMap(c=>typeof c=="function"&&!R(c)?j(()=>c(o)):c))??o},j=n=>{const t=`getSignalContent_${Math.random().toString(36).substring(2,15)}`;return k("div").addStyle({display:"contents"}).addEffect(e=>{e.clear(),N(new WeakRef(e),...[n()].flat())},t)},Zt=(n,t,e)=>{const s=k("div").addStyle({display:"contents"}),o=new Map,r=new Map,c=new Map,a=new Map;let d=[];const S=new Set;let h=n.peek();const f=m=>{S.delete(m),o.delete(m),r.delete(m),c.delete(m),a.delete(m)},E=m=>{if(!a.has(m)){const w=d.indexOf(m);return a.set(m,w),w}return a.get(m)},p=(m,w,q)=>Array.from(q.children).indexOf(m)!==w;return v(()=>{const m=n(),w=m.map(t).map(C=>typeof C=="string"?C:C.toString()),q=new Set(w);a.clear(),w.forEach((C,y)=>{a.set(C,y)}),d=w;const M=s.hostElement;if(!M)return;b("containerChildren",Array.from(M.children),d);const z=[];Array.from(M.children).forEach(C=>{const y=C.dataset.key;y&&!q.has(y)&&z.push(C)}),z.forEach(C=>{const y=C.dataset.key;b("remove element",y,C),C.remove(),f(y)}),w.forEach((C,y)=>{var g;const L=m[y],P=h[y];if(!o.has(C))b("create new element",C,L),o.set(C,T(Math.random().toString(36).substring(2,15))),r.set(C,()=>e(L,y,m).setCustomAttribute("data-key",C));else if(P&&JSON.stringify(L)!==JSON.stringify(P)){const I=c.get(C);(g=o.get(C))==null||g.set(Math.random().toString(36).substring(2,15)),r.set(C,()=>e(L,y,m).setCustomAttribute("data-key",C)),I&&I.parentNode&&b("mark element for update",C)}}),h=[...m.map(C=>({...C}))];const X=()=>{o.forEach((C,y)=>{b("key from setTimeout foreach currItemSignalMap",y),S.has(y)||(S.add(y),v(()=>{var jt;C();const L=E(y),P=(jt=r.get(y))==null?void 0:jt();if(!P||!P.hostElement)return;const g=s.hostElement,I=P.hostElement;if(!g)return;b("call effect from setTimeout",y,I);const $=c.get(y);if($&&$.parentNode===g){if(p($,L,g)){const W=g.children[L];W&&W!==$?g.insertBefore($,W):W||g.appendChild($)}I!==$&&($.replaceWith(I),c.set(y,I))}else if(c.set(y,I),L<g.children.length){const W=g.children[L];W?g.insertBefore(I,W):g.appendChild(I)}else g.appendChild(I)}))})};Promise.resolve().then(()=>X())}),s},Xt=n=>{let t=[k("div")],e=!1;return v(()=>{var r,c;const s=n();e=Array.isArray(s);const o=[];o.push(...[s].flat()),o.length===0&&o.push(k("div").addStyle({display:"none"}).setAttribute("id","empty_template"));try{b("newReactiveComponent.map",o.map(a=>{var d;return b("newReactiveComponent hostElement",a.hostElement),(d=a.hostElement)==null?void 0:d.id})),b("currComponent[0].hostElement?.id",(r=t[0].hostElement)==null?void 0:r.id,t),(c=t[0].hostElement)==null||c.replaceWith(...o.map(a=>a.hostElement).filter(Boolean)),t.slice(1).forEach(a=>{var d;return(d=a.hostElement)==null?void 0:d.remove()}),t=o}catch(a){console.error(a)}}),e?t:t[0]},Qt=n=>zt in n,xt=n=>{const t=Z("div")().addStyle({display:"contents"}),e=s=>{const o=t.hostElement;return o&&(o.innerHTML=s),t};return typeof n=="string"?e(n):t.addEffect(()=>{e(n())}),t},st=(n,t,e)=>n?j(t):e?j(e):Z("div")().setAttribute("id","empty_div_renderIf").addStyle({display:"none"}),At=(n,t,e)=>j(()=>st(!!n(),t,e)),te=(n,t,e)=>typeof n=="boolean"?st(n,t,e):At(n,t,e),ot=(n,t)=>j(t).addEffect((e,s)=>{if(typeof n=="boolean")s.style.display=n?"block":"none";else{const o=n()?"block":"none";s.style.display=o}}),ee=(n,t,e)=>{const s=[ot(n,t)].flat();return e&&s.push(...[ot(()=>typeof n=="boolean"?!n:!n(),e)].flat()),j(()=>s)},gt=(n,t)=>{b("createCustomElement",n);const e=document.createElement(n),s=ut(e);return e.init=()=>{et(new WeakRef(s),t)},s},Rt=(n,t)=>{const e=n.split(" ").slice(1).map(o=>o.trim()),s=gt(n.split(" ")[0],t);return Array.isArray(e)&&e.length>0&&s.addClass(...e),(...o)=>{const r=o.filter(Boolean).flat().flatMap(a=>typeof a=="function"&&!R(a)?j(()=>a(s)):a),c=s.hostElement;return c&&(c.allSlotContent=r,c.slotContent=r.filter(_).reduce((a,d)=>{var h;const S=((h=d.hostElement)==null?void 0:h.getAttribute("slot"))||"default";return a[S]||(a[S]=[]),a[S].push(d),a},{}),c.appendAllSlotContent=()=>{N(new WeakRef(s),...r)}),s}},Lt=(n,t,e)=>Rt(`${n.renderTagName}${t&&typeof t=="string"?" "+t:""}`,A(t)?t:t&&typeof t=="string"?e:void 0),ne=()=>{const n=()=>{};return n.oldValue=null,n},se=()=>({}),It=(n,t,e)=>{const s=t?tt(t,e)(n):n;return(o,...r)=>{const c=[...r];return o&&!A(o)&&c.unshift(o),Lt(s,A(o)?o:{})(...c)}},oe=n=>[It(n),(t,e)=>{tt(t,e)(n)}],l={};["div","span","section","input","button","table","tr","td","th","ul","li","ol","form","label","select","option","textarea","img","a","p","h1","h2","h3","h4","h5","h6","br","hr","pre","code","nav","header","footer","main","aside","article","figure","figcaption","blockquote","cite","small","strong","em","b","i","u","s","sub","sup","mark","del","ins","details","summary","progress","meter","audio","video","canvas","slot"].forEach(n=>{l[n]=(t,...e)=>{let s=[...e];return t&&!A(t)&&(s=[t].concat(s)),Z(n,A(t)?t:{})(...s)}});const Tt=l.div,re=l.span,ie=l.section,ce=l.input,le=l.button,ae=l.table,de=l.tr,fe=l.td,he=l.th,ue=l.ul,me=l.li,pe=l.ol,Ee=l.form,Ce=l.label,be=l.select,Se=l.option,ye=l.textarea,ve=l.img,we=l.a,Ae=l.p,ge=l.h1,Re=l.h2,Le=l.h3,Ie=l.h4,Te=l.h5,je=l.h6,Oe=l.br,Me=l.hr,$e=l.pre,_e=l.code,He=l.nav,ke=l.header,We=l.footer,Pe=l.main,Fe=l.aside,Be=l.article,Ve=l.figure,Je=l.figcaption,Ne=l.blockquote,qe=l.cite,ze=l.small,De=l.strong,Ge=l.em,Ke=l.b,Ue=l.i,Ye=l.u,Ze=l.s,Xe=l.sub,Qe=l.sup,xe=l.mark,tn=l.del,en=l.ins,nn=l.details,sn=l.summary,on=l.progress,rn=l.meter,cn=l.audio,ln=l.video,an=l.canvas,dn=l.slot,fn=n=>t=>n(t).addClass(...t.classList??[]).addReactiveClass(t.reactiveClassList??{});function hn(n,t){let e=0;return(...s)=>{const o=Date.now();o-e>=t&&(n(...s),e=o)}}const un=(n,t)=>j(()=>{const e=n();let s=null;return e.map((o,r)=>Tt({"@dragstart":(c,a,d)=>{s=d},"@dragend":(c,a,d)=>{d.style.transform="",d.removeAttribute("draggable")},"@mousedown":(c,a,d)=>{d.style.transform="translateZ(0)",d.setAttribute("draggable","true")},"@dragover":c=>{c.preventDefault()},"@dragenter":hn((c,a,d)=>{var S,h,f;if(c.preventDefault(),s){let E=s,p=d;const m=((S=s.getClientRects().item(0))==null?void 0:S.y)??0,w=((h=d.getClientRects().item(0))==null?void 0:h.y)??0;m<w&&([E,p]=[d,s]),(f=d.parentElement)==null||f.insertBefore(E,p)}},200)},t(o,r,[...n.peek()])))}),mn=(n,t,e)=>{let s=[],o=[];const r=k("div").addStyle({display:"contents"}),c=new Map,a=new Map;return v(()=>{const d=n(),S=d.map(t);o.filter(f=>!S.includes(f)).forEach(f=>{var E,p;c.delete(f),(p=(E=r.hostElement)==null?void 0:E.querySelector(`[data-key="${f}"]`))==null||p.remove()}),S.forEach((f,E)=>{o.includes(f)||c.set(f,()=>e(d[E],E,d).setCustomAttribute("data-key",f))}),S.forEach((f,E)=>{var p;if(o.includes(f)){JSON.stringify(s[o.indexOf(f)])!==JSON.stringify(d[E])&&((p=a.get(f))==null||p.set({templateFunc:()=>e(d[E],E,d),items:d,itemsKey:S,index:E}));return}a.set(f,T({templateFunc:()=>e(d[E],E,d),items:d,itemsKey:S,index:E})),queueMicrotask(()=>{v(()=>{var z,X,C;const{templateFunc:m,index:w}=((z=a.get(f))==null?void 0:z())??{},q=(X=r.hostElement)==null?void 0:X.querySelector(`[data-key="${f}"]`),M=(m==null?void 0:m().setCustomAttribute("data-key",f).hostElement)??document.createElement("div");q?(C=r.hostElement)==null||C.childNodes.forEach((y,L)=>{y instanceof HTMLElement&&y.getAttribute("data-key")===f&&(w===L?(h(w??0,r.hostElement,M),y.remove()):h(w??0,r.hostElement,M))}):h(w??0,r.hostElement,M)})})});const h=(f,E,p)=>{p&&E&&(f<E.children.length?E.insertBefore(p,E.children[f]):E.appendChild(p))};o=S,s=[...d]}),r};i.BaseElement=H,i.a=we,i.addAttributeList=wt,i.addClassList=St,i.addCustomAttributes=bt,i.addReactiveClassList=yt,i.addStyleList=vt,i.appendContentItem=N,i.article=Be,i.aside=Fe,i.audio=cn,i.b=Ke,i.bindReactiveSignals=Pt,i.blockquote=Ne,i.br=Oe,i.button=le,i.camelToKebab=F,i.canvas=an,i.checkCall=D,i.checkRef=Mt,i.cite=qe,i.classList=pt,i.cls=Yt,i.code=_e,i.colorLog=B,i.combineLatest=Bt,i.component=tt,i.configCustomComponent=oe,i.createComponent=fn,i.createCustom=Lt,i.createCustomEl=Rt,i.createCustomElement=gt,i.createEl=Z,i.createElement=k,i.createSignal=Wt,i.customElementHelpers=ut,i.ddList=un,i.defineSlotTemplate=se,i.del=tn,i.details=nn,i.disableLogs=it,i.div=Tt,i.effect=v,i.elementHelpers=mt,i.em=Ge,i.enableLogs=Ot,i.event=Nt,i.eventEmitter=Ut,i.figcaption=Je,i.figure=Ve,i.firstUpdate=Vt,i.footer=We,i.forkJoin=Ft,i.form=Ee,i.getList=mn,i.getSignalContent=j,i.h1=ge,i.h2=Re,i.h3=Le,i.h4=Ie,i.h5=Te,i.h6=je,i.header=ke,i.hr=Me,i.i=Ue,i.img=ve,i.initComponent=et,i.input=ce,i.ins=en,i.isBaseElement=qt,i.isComponentConfig=_,i.isComponentInitConfig=A,i.isReactiveSignal=R,i.isSlotTemplate=Qt,i.kebabToCamel=rt,i.label=Ce,i.li=me,i.main=Pe,i.mark=xe,i.meter=rn,i.nav=He,i.newEventEmitter=ne,i.ol=pe,i.oldGetList=Zt,i.option=Se,i.p=Ae,i.pre=$e,i.progress=on,i.projectLog=b,i.property=Jt,i.removeEffect=K,i.renderIf=st,i.rs=kt,i.rxRenderIf=At,i.s=Ze,i.section=ie,i.select=be,i.setChildren=Ct,i.setEffects=Et,i.setListeners=nt,i.show=ee,i.showIf=ot,i.signal=T,i.signalComponent=Xt,i.slot=dn,i.small=ze,i.span=re,i.strong=De,i.sub=Xe,i.summary=sn,i.sup=Qe,i.table=ae,i.td=fe,i.textarea=ye,i.th=he,i.tr=de,i.u=Ye,i.ul=ue,i.unsafeHtml=xt,i.useCustomComponent=It,i.video=ln,i.when=te,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});