@symbiotejs/symbiote 1.5.1 → 1.6.0

package/README.md

@@ -1,16 +1,26 @@
 # Symbi<span style="color:#f0f">ఠ</span>te.js
 
-Ultralight and ultrapowerful library to create widgets, organize micro-frontends, build reusable embeddable components and libraries. 
-Everything you need for your modern web application!
+Simple, light and very powerful library to create embedded components and data channels between them.
 
-Symbiote.js is designed to give the level of freedom, as you got with Vanilla JS and to give the convenience level, as you got from modern frameworks at the same time.
+## ⚖️ What for?
+Symbiote.js - is for symbiosis. That means, you can create complex applications, above another complex applications, built with any modern stack. 
+
+Best for:
+* Complex widgets
+* Micro-frontends
+* Reusable component libraries
+* Fast and reliable web applications
+* Framework agnostic solutions
+* JamStack solutions
+
+> Symbiote.js is designed to give the level of freedom, you got with Vanilla JS and to give the convenience level, as you got from the modern frameworks at the same time.
 
 ## 🔥 Core benefits
-* Minimalistic but reach.
-* No additional dependencies.
-* Ultralight (~3kb br/gzip for the all BaseComponent features, including data flow).
+* Minimal but rich.
+* No extra dependencies.
+* Ultralight (~3kb br/gzip for the all BaseComponent features, including data management).
 * Blazing fast.
-* Memory friendly (no any redux-like immutables).
+* Memory friendly (no immutables).
 * CSP friendly - good for enterprise usage.
 * Highly extensible - you can add new custom features with ease.
 * Easy to learn - nothing completely new for experienced developers, nothing complicated for newbies.
@@ -24,10 +34,10 @@ Symbiote.js is designed to give the level of freedom, as you got with Vanilla JS
 * Open source (MIT license).
 
 ## 💎 Tech concept keypoints
-* Native `DocumentFragment` instead of expensive Virtual DOM sync.
+* Native modern APIs instead of expensive libraries.
 * Shadow DOM is optional. Use it when you need it only.
-* Styling approach: total freedom, from the old classics to the cutting edge platform abilities.
-* Native HTML and DOM API instead of expensive custom template syntax processing.
+* Total styling freedom: from the old classics to the cutting edge platform abilities.
+* Native HTML instead of custom template syntax processing.
 * Templates are out of the component or render function context. It’s just a simple JavaScript template literals. So you can keep or process them wherever you want.
 * No logical operators in templates. Logic and presentation are strictly separated.
 * Fast synchronous UI updates.
@@ -35,7 +45,6 @@ Symbiote.js is designed to give the level of freedom, as you got with Vanilla JS
 * Full data context availability for template bindings.
 * DOM API friendly approach for the most performant solutions.
 * Convenient object model access instead of opaque abstractions.
-* Custom Elements work strange sometimes. Don’t worry about that, we do (construction flow).
 
 ## 🍏 Quick start
 The easiest way to try Symbiote.js is to create a simple `html` file in your text editor and connect the Symbiote base class from web:
@@ -68,8 +77,8 @@ The easiest way to try Symbiote.js is to create a simple `html` file in your tex
 
 ## 🧜‍♀️ Dive deeper
 Check the project documentation for details:
-* [Docs on GitHub](https://github.com/symbiotejs/docsite/tree/main/md)
 * [symbiotejs.org](https://symbiotejs.org/)
+* [Docs on GitHub](https://github.com/symbiotejs/docsite/tree/main/md)
 
 ## 🤖 Live examples
 Browser: https://symbiotejs.github.io/examples/ 

package/build/BaseComponent.min.js

@@ -1 +1 @@
-var E=Object.defineProperty;var X=(n,t,e)=>t in n?E(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var P=(n,t,e)=>(X(n,typeof t!="symbol"?t+"":t,e),e);function D(n){let t=e=>{var s;for(let i in e)((s=e[i])==null?void 0:s.constructor)===Object&&(e[i]=t(e[i]));return{...e}};return t(n)}var l=class{constructor(t){this.uid=Symbol(),this.name=t.name||null,t.schema.constructor===Object?this.store=D(t.schema):(this._storeIsProxy=!0,this.store=t.schema),this.callbackMap=Object.create(null)}static warn(t,e){console.warn(`Symbiote Data: cannot ${t}. Prop name: `+e)}read(t){return!this._storeIsProxy&&!this.store.hasOwnProperty(t)?(l.warn("read",t),null):this.store[t]}has(t){return this._storeIsProxy?this.store[t]!==void 0:this.store.hasOwnProperty(t)}add(t,e,s=!0){!s&&Object.keys(this.store).includes(t)||(this.store[t]=e,this.callbackMap[t]&&this.callbackMap[t].forEach(i=>{i(this.store[t])}))}pub(t,e){if(!this._storeIsProxy&&!this.store.hasOwnProperty(t)){l.warn("publish",t);return}this.add(t,e)}multiPub(t){for(let e in t)this.pub(e,t[e])}notify(t){this.callbackMap[t]&&this.callbackMap[t].forEach(e=>{e(this.store[t])})}sub(t,e,s=!0){return!this._storeIsProxy&&!this.store.hasOwnProperty(t)?(l.warn("subscribe",t),null):(this.callbackMap[t]||(this.callbackMap[t]=new Set),this.callbackMap[t].add(e),s&&e(this.store[t]),{remove:()=>{this.callbackMap[t].delete(e),this.callbackMap[t].size||delete this.callbackMap[t]},callback:e})}remove(){delete l.globalStore[this.uid]}static registerLocalCtx(t){let e=new l({schema:t});return l.globalStore[e.uid]=e,e}static registerNamedCtx(t,e){let s=l.globalStore[t];return s?console.warn('State: context name "'+t+'" already in use'):(s=new l({name:t,schema:e}),l.globalStore[t]=s),s}static clearNamedCtx(t){delete l.globalStore[t]}static getNamedCtx(t,e=!0){return l.globalStore[t]||(e&&console.warn('State: wrong context name - "'+t+'"'),null)}};l.globalStore=Object.create(null);var o=Object.freeze({BIND_ATTR:"set",ATTR_BIND_PRFX:"@",EXT_DATA_CTX_PRFX:"*",NAMED_DATA_CTX_SPLTR:"/",CTX_NAME_ATTR:"ctx-name",CSS_CTX_PROP:"--ctx-name",EL_REF_ATTR:"ref",AUTO_TAG_PRFX:"sym"});var x="1234567890QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm",O=x.length-1,A=class{static generate(t="XXXXXXXXX-XXX"){let e="";for(let s=0;s<t.length;s++)e+=t[s]==="-"?t[s]:x.charAt(Math.random()*O);return e}};function N(n,t){if(t.renderShadow)return;let e=[...n.querySelectorAll("slot")];if(t.initChildren.length&&e.length){let s={};e.forEach(i=>{let r=i.getAttribute("name");r?s[r]={slot:i,fr:document.createDocumentFragment()}:s.__default__={slot:i,fr:document.createDocumentFragment()}}),t.initChildren.forEach(i=>{var a;let r=(a=i.getAttribute)==null?void 0:a.call(i,"slot");r?(i.removeAttribute("slot"),s[r].fr.appendChild(i)):s.__default__&&s.__default__.fr.appendChild(i)}),Object.values(s).forEach(i=>{i.slot.parentNode.insertBefore(i.fr,i.slot),i.slot.remove()})}else!t.processInnerHtml&&(t.innerHTML="")}function k(n,t){[...n.querySelectorAll(`[${o.EL_REF_ATTR}]`)].forEach(e=>{let s=e.getAttribute(o.EL_REF_ATTR);t.ref[s]=e,e.removeAttribute(o.EL_REF_ATTR)})}function M(n,t){[...n.querySelectorAll(`[${o.BIND_ATTR}]`)].forEach(e=>{e.getAttribute(o.BIND_ATTR).split(";").forEach(r=>{if(!r)return;let a=r.split(":").map(u=>u.trim()),c=a[0],T;c.indexOf(o.ATTR_BIND_PRFX)===0&&(T=!0,c=c.replace(o.ATTR_BIND_PRFX,""));let R=a[1].split(",").map(u=>u.trim()),p,d,m,b;if(c.includes(".")){p=!0;let u=c.split(".");b=()=>{d=e,u.forEach((h,w)=>{w<u.length-1?d=d[h]:m=h})},b()}for(let u of R)t.sub(u,h=>{T?(h==null?void 0:h.constructor)===Boolean?h?e.setAttribute(c,""):e.removeAttribute(c):e.setAttribute(c,h):p?d?d[m]=h:window.setTimeout(()=>{b(),d[m]=h}):e[c]=h})}),e.removeAttribute(o.BIND_ATTR)})}var C="{{",f="}}",I="skip-text";function $(n){let t,e=[],s=document.createTreeWalker(n,NodeFilter.SHOW_TEXT,{acceptNode:i=>{var r;return!((r=i.parentElement)==null?void 0:r.hasAttribute(I))&&i.textContent.includes(C)&&i.textContent.includes(f)&&1}});for(;t=s.nextNode();)e.push(t);return e}var F=function(n,t){$(n).forEach(s=>{let i=[],r;for(;s.textContent.includes(f);)s.textContent.startsWith(C)?(r=s.textContent.indexOf(f)+f.length,s.splitText(r),i.push(s)):(r=s.textContent.indexOf(C),s.splitText(r)),s=s.nextSibling;i.forEach(a=>{let c=a.textContent.replace(C,"").replace(f,"");t.sub(c,T=>{a.textContent=T})})})},S=[N,k,M,F];var y=0,_=class extends HTMLElement{initCallback(){}__initCallback(){var t;this.__initialized||(this.__initialized=!0,(t=this.initCallback)==null||t.call(this))}render(t,e=this.renderShadow){let s;if((e||this.constructor.__shadowStylesUrl)&&!this.shadowRoot&&this.attachShadow({mode:"open"}),this.processInnerHtml)for(let r of this.tplProcessors)r(this,this);if(t||this.constructor.template){for(this.constructor.template&&!this.constructor.__tpl&&(this.constructor.__tpl=document.createElement("template"),this.constructor.__tpl.innerHTML=this.constructor.template);!this.processInnerHtml&&this.firstChild;)this.firstChild.remove();if((t==null?void 0:t.constructor)===DocumentFragment)s=t;else if((t==null?void 0:t.constructor)===String){let r=document.createElement("template");r.innerHTML=t,s=r.content.cloneNode(!0)}else this.constructor.__tpl&&(s=this.constructor.__tpl.content.cloneNode(!0));for(let r of this.tplProcessors)r(s,this)}let i=()=>{s&&(e&&this.shadowRoot.appendChild(s)||this.appendChild(s)),this.__initCallback()};if(this.constructor.__shadowStylesUrl){e=!0;let r=document.createElement("link");r.rel="stylesheet",r.href=this.constructor.__shadowStylesUrl,r.onload=i,this.shadowRoot.prepend(r)}else i()}addTemplateProcessor(t){this.tplProcessors.add(t)}constructor(){super();this.init$=Object.create(null),this.tplProcessors=new Set,this.ref=Object.create(null),this.allSubs=new Set,this.pauseRender=!1,this.renderShadow=!1,this.readyToDestroy=!0,this.processInnerHtml=!1}get autoCtxName(){return this.__autoCtxName||(this.__autoCtxName=A.generate(),this.style.setProperty(o.CSS_CTX_PROP,`'${this.__autoCtxName}'`)),this.__autoCtxName}get cssCtxName(){return this.getCssData(o.CSS_CTX_PROP,!0)}get ctxName(){var t;return((t=this.getAttribute(o.CTX_NAME_ATTR))==null?void 0:t.trim())||this.cssCtxName||this.autoCtxName}get localCtx(){return this.__localCtx||(this.__localCtx=l.registerLocalCtx({})),this.__localCtx}get nodeCtx(){return l.getNamedCtx(this.ctxName,!1)||l.registerNamedCtx(this.ctxName,{})}static __parseProp(t,e){let s,i;if(t.startsWith(o.EXT_DATA_CTX_PRFX))s=e.nodeCtx,i=t.replace(o.EXT_DATA_CTX_PRFX,"");else if(t.includes(o.NAMED_DATA_CTX_SPLTR)){let r=t.split(o.NAMED_DATA_CTX_SPLTR);s=l.getNamedCtx(r[0]),i=r[1]}else s=e.localCtx,i=t;return{ctx:s,name:i}}sub(t,e){let s=_.__parseProp(t,this);this.allSubs.add(s.ctx.sub(s.name,e))}notify(t){let e=_.__parseProp(t,this);e.ctx.notify(e.name)}has(t){let e=_.__parseProp(t,this);return e.ctx.has(e.name)}add(t,e){let s=_.__parseProp(t,this);s.ctx.add(s.name,e,!1)}add$(t){for(let e in t)this.add(e,t[e])}get $(){if(!this.__stateProxy){let t=Object.create(null);this.__stateProxy=new Proxy(t,{set:(e,s,i)=>{let r=_.__parseProp(s,this);return r.ctx.pub(r.name,i),!0},get:(e,s)=>{let i=_.__parseProp(s,this);return i.ctx.read(i.name)}})}return this.__stateProxy}set$(t){for(let e in t)this.$[e]=t[e]}__initDataCtx(){let t=this.constructor.__attrDesc;if(t)for(let e of Object.values(t))Object.keys(this.init$).includes(e)||(this.init$[e]="");for(let e in this.init$)if(e.startsWith(o.EXT_DATA_CTX_PRFX))this.nodeCtx.add(e.replace(o.EXT_DATA_CTX_PRFX,""),this.init$[e]);else if(e.includes(o.NAMED_DATA_CTX_SPLTR)){let s=e.split(o.NAMED_DATA_CTX_SPLTR),i=s[0].trim(),r=s[1].trim();if(i&&r){let a=l.getNamedCtx(i,!1);a||(a=l.registerNamedCtx(i,{})),a.add(r,this.init$[e])}}else this.localCtx.add(e,this.init$[e]);this.__dataCtxInitialized=!0}connectedCallback(){var t;if(this.__disconnectTimeout&&window.clearTimeout(this.__disconnectTimeout),!this.connectedOnce){let e=(t=this.getAttribute(o.CTX_NAME_ATTR))==null?void 0:t.trim();e&&this.style.setProperty(o.CSS_CTX_PROP,`'${e}'`),this.__initDataCtx(),this.initChildren=[...this.childNodes];for(let s of S)this.addTemplateProcessor(s);this.pauseRender||this.render()}this.connectedOnce=!0}destroyCallback(){}disconnectedCallback(){this.dropCssDataCache(),!!this.readyToDestroy&&(this.__disconnectTimeout&&window.clearTimeout(this.__disconnectTimeout),this.__disconnectTimeout=window.setTimeout(()=>{this.destroyCallback();for(let t of this.allSubs)t.remove(),this.allSubs.delete(t);for(let t of this.tplProcessors)this.tplProcessors.delete(t)},100))}static reg(t,e=!1){if(t||(y++,t=`${o.AUTO_TAG_PRFX}-${y}`),this.__tag=t,window.customElements.get(t)){console.warn(`${t} - is already in "customElements" registry`);return}window.customElements.define(t,e?class extends this{}:this)}static get is(){return this.__tag||this.reg(),this.__tag}static bindAttributes(t){this.observedAttributes=Object.keys(t),this.__attrDesc=t}attributeChangedCallback(t,e,s){if(e===s)return;let i=this.constructor.__attrDesc[t];i?this.__dataCtxInitialized?this.$[i]=s:this.init$[i]=s:this[t]=s}getCssData(t,e=!1){if(this.__cssDataCache||(this.__cssDataCache=Object.create(null)),!Object.keys(this.__cssDataCache).includes(t)){this.__computedStyle||(this.__computedStyle=window.getComputedStyle(this));let s=this.__computedStyle.getPropertyValue(t).trim();s.startsWith("'")&&s.endsWith("'")&&(s=s.replace(/\'/g,'"'));try{this.__cssDataCache[t]=JSON.parse(s)}catch{!e&&console.warn(`CSS Data error: ${t}`),this.__cssDataCache[t]=null}}return this.__cssDataCache[t]}bindCssData(t,e=!0){let s=(e?o.EXT_DATA_CTX_PRFX:"")+t;return this.add(s,this.getCssData(t,!0)),s}dropCssDataCache(){this.__cssDataCache=null,this.__computedStyle=null}defineAccessor(t,e,s){let i="__"+t;this[i]=this[t],Object.defineProperty(this,t,{set:r=>{this[i]=r,s?window.setTimeout(()=>{e==null||e(r)}):e==null||e(r)},get:()=>this[i]}),this[t]=this[i]}static set shadowStyles(t){let e=new Blob([t],{type:"text/css"});this.__shadowStylesUrl=URL.createObjectURL(e)}},g=_;P(g,"template");export{g as BaseComponent};
+var X=Object.defineProperty;var w=(n,t,e)=>t in n?X(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var P=(n,t,e)=>(w(n,typeof t!="symbol"?t+"":t,e),e);function D(n){let t=e=>{var s;for(let i in e)((s=e[i])==null?void 0:s.constructor)===Object&&(e[i]=t(e[i]));return{...e}};return t(n)}var l=class{constructor(t){this.uid=Symbol(),this.name=t.name||null,t.schema.constructor===Object?this.store=D(t.schema):(this._storeIsProxy=!0,this.store=t.schema),this.callbackMap=Object.create(null)}static warn(t,e){console.warn(`Symbiote Data: cannot ${t}. Prop name: `+e)}read(t){return!this._storeIsProxy&&!this.store.hasOwnProperty(t)?(l.warn("read",t),null):this.store[t]}has(t){return this._storeIsProxy?this.store[t]!==void 0:this.store.hasOwnProperty(t)}add(t,e,s=!0){!s&&Object.keys(this.store).includes(t)||(this.store[t]=e,this.callbackMap[t]&&this.callbackMap[t].forEach(i=>{i(this.store[t])}))}pub(t,e){if(!this._storeIsProxy&&!this.store.hasOwnProperty(t)){l.warn("publish",t);return}this.add(t,e)}multiPub(t){for(let e in t)this.pub(e,t[e])}notify(t){this.callbackMap[t]&&this.callbackMap[t].forEach(e=>{e(this.store[t])})}sub(t,e,s=!0){return!this._storeIsProxy&&!this.store.hasOwnProperty(t)?(l.warn("subscribe",t),null):(this.callbackMap[t]||(this.callbackMap[t]=new Set),this.callbackMap[t].add(e),s&&e(this.store[t]),{remove:()=>{this.callbackMap[t].delete(e),this.callbackMap[t].size||delete this.callbackMap[t]},callback:e})}remove(){delete l.globalStore[this.uid]}static registerLocalCtx(t){let e=new l({schema:t});return l.globalStore[e.uid]=e,e}static registerNamedCtx(t,e){let s=l.globalStore[t];return s?console.warn('State: context name "'+t+'" already in use'):(s=new l({name:t,schema:e}),l.globalStore[t]=s),s}static clearNamedCtx(t){delete l.globalStore[t]}static getNamedCtx(t,e=!0){return l.globalStore[t]||(e&&console.warn('State: wrong context name - "'+t+'"'),null)}};l.globalStore=Object.create(null);var o=Object.freeze({BIND_ATTR:"set",ATTR_BIND_PRFX:"@",EXT_DATA_CTX_PRFX:"*",NAMED_DATA_CTX_SPLTR:"/",CTX_NAME_ATTR:"ctx-name",CSS_CTX_PROP:"--ctx-name",EL_REF_ATTR:"ref",AUTO_TAG_PRFX:"sym"});var S="1234567890QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm",O=S.length-1,p=class{static generate(t="XXXXXXXXX-XXX"){let e="";for(let s=0;s<t.length;s++)e+=t[s]==="-"?t[s]:S.charAt(Math.random()*O);return e}};function N(n,t){if(t.shadowRoot)return;let e=[...n.querySelectorAll("slot")];if(t.initChildren.length&&e.length){let s={};e.forEach(i=>{let r=i.getAttribute("name");r?s[r]={slot:i,fr:document.createDocumentFragment()}:s.__default__={slot:i,fr:document.createDocumentFragment()}}),t.initChildren.forEach(i=>{var h;let r=(h=i.getAttribute)==null?void 0:h.call(i,"slot");r?(i.removeAttribute("slot"),s[r].fr.appendChild(i)):s.__default__&&s.__default__.fr.appendChild(i)}),Object.values(s).forEach(i=>{i.slot.parentNode.insertBefore(i.fr,i.slot),i.slot.remove()})}}function k(n,t){[...n.querySelectorAll(`[${o.EL_REF_ATTR}]`)].forEach(e=>{let s=e.getAttribute(o.EL_REF_ATTR);t.ref[s]=e,e.removeAttribute(o.EL_REF_ATTR)})}function M(n,t){[...n.querySelectorAll(`[${o.BIND_ATTR}]`)].forEach(e=>{e.getAttribute(o.BIND_ATTR).split(";").forEach(r=>{if(!r)return;let h=r.split(":").map(a=>a.trim()),u=h[0],C;u.indexOf(o.ATTR_BIND_PRFX)===0&&(C=!0,u=u.replace(o.ATTR_BIND_PRFX,""));let E=h[1].split(",").map(a=>a.trim()),x,f,b,A;if(u.includes(".")){x=!0;let a=u.split(".");A=()=>{f=e,a.forEach((d,c)=>{c<a.length-1?f=f[d]:b=d})},A()}for(let a of E){let d;a.startsWith("!!")?(d="double",a=a.replace("!!","")):a.startsWith("!")&&(d="single",a=a.replace("!","")),t.sub(a,c=>{d==="double"?c=!!c:d==="single"&&(c=!c),C?(c==null?void 0:c.constructor)===Boolean?c?e.setAttribute(u,""):e.removeAttribute(u):e.setAttribute(u,c):x?f?f[b]=c:window.setTimeout(()=>{A(),f[b]=c}):e[u]=c})}}),e.removeAttribute(o.BIND_ATTR)})}var m="{{",T="}}",$="skip-text";function I(n){let t,e=[],s=document.createTreeWalker(n,NodeFilter.SHOW_TEXT,{acceptNode:i=>{var r;return!((r=i.parentElement)==null?void 0:r.hasAttribute($))&&i.textContent.includes(m)&&i.textContent.includes(T)&&1}});for(;t=s.nextNode();)e.push(t);return e}var F=function(n,t){I(n).forEach(s=>{let i=[],r;for(;s.textContent.includes(T);)s.textContent.startsWith(m)?(r=s.textContent.indexOf(T)+T.length,s.splitText(r),i.push(s)):(r=s.textContent.indexOf(m),s.splitText(r)),s=s.nextSibling;i.forEach(h=>{let u=h.textContent.replace(m,"").replace(T,"");t.sub(u,C=>{h.textContent=C})})})},y=[N,k,M,F];var g=0,_=class extends HTMLElement{initCallback(){}__initCallback(){var t;this.__initialized||(this.__initialized=!0,(t=this.initCallback)==null||t.call(this))}render(t,e=this.renderShadow){let s;if((e||this.constructor.__shadowStylesUrl)&&!this.shadowRoot&&this.attachShadow({mode:"open"}),this.processInnerHtml)for(let r of this.tplProcessors)r(this,this);if(t||this.constructor.template){if(this.constructor.template&&!this.constructor.__tpl&&(this.constructor.__tpl=document.createElement("template"),this.constructor.__tpl.innerHTML=this.constructor.template),(t==null?void 0:t.constructor)===DocumentFragment)s=t;else if((t==null?void 0:t.constructor)===String){let r=document.createElement("template");r.innerHTML=t,s=r.content.cloneNode(!0)}else this.constructor.__tpl&&(s=this.constructor.__tpl.content.cloneNode(!0));for(let r of this.tplProcessors)r(s,this)}let i=()=>{s&&(e&&this.shadowRoot.appendChild(s)||this.appendChild(s)),this.__initCallback()};if(this.constructor.__shadowStylesUrl){e=!0;let r=document.createElement("link");r.rel="stylesheet",r.href=this.constructor.__shadowStylesUrl,r.onload=i,this.shadowRoot.prepend(r)}else i()}addTemplateProcessor(t){this.tplProcessors.add(t)}constructor(){super();this.init$=Object.create(null),this.tplProcessors=new Set,this.ref=Object.create(null),this.allSubs=new Set,this.pauseRender=!1,this.renderShadow=!1,this.readyToDestroy=!0,this.processInnerHtml=!1}get autoCtxName(){return this.__autoCtxName||(this.__autoCtxName=p.generate(),this.style.setProperty(o.CSS_CTX_PROP,`'${this.__autoCtxName}'`)),this.__autoCtxName}get cssCtxName(){return this.getCssData(o.CSS_CTX_PROP,!0)}get ctxName(){var t;return((t=this.getAttribute(o.CTX_NAME_ATTR))==null?void 0:t.trim())||this.cssCtxName||this.autoCtxName}get localCtx(){return this.__localCtx||(this.__localCtx=l.registerLocalCtx({})),this.__localCtx}get nodeCtx(){return l.getNamedCtx(this.ctxName,!1)||l.registerNamedCtx(this.ctxName,{})}static __parseProp(t,e){let s,i;if(t.startsWith(o.EXT_DATA_CTX_PRFX))s=e.nodeCtx,i=t.replace(o.EXT_DATA_CTX_PRFX,"");else if(t.includes(o.NAMED_DATA_CTX_SPLTR)){let r=t.split(o.NAMED_DATA_CTX_SPLTR);s=l.getNamedCtx(r[0]),i=r[1]}else s=e.localCtx,i=t;return{ctx:s,name:i}}sub(t,e){let s=_.__parseProp(t,this);this.allSubs.add(s.ctx.sub(s.name,e))}notify(t){let e=_.__parseProp(t,this);e.ctx.notify(e.name)}has(t){let e=_.__parseProp(t,this);return e.ctx.has(e.name)}add(t,e){let s=_.__parseProp(t,this);s.ctx.add(s.name,e,!1)}add$(t){for(let e in t)this.add(e,t[e])}get $(){if(!this.__stateProxy){let t=Object.create(null);this.__stateProxy=new Proxy(t,{set:(e,s,i)=>{let r=_.__parseProp(s,this);return r.ctx.pub(r.name,i),!0},get:(e,s)=>{let i=_.__parseProp(s,this);return i.ctx.read(i.name)}})}return this.__stateProxy}set$(t){for(let e in t)this.$[e]=t[e]}__initDataCtx(){let t=this.constructor.__attrDesc;if(t)for(let e of Object.values(t))Object.keys(this.init$).includes(e)||(this.init$[e]="");for(let e in this.init$)if(e.startsWith(o.EXT_DATA_CTX_PRFX))this.nodeCtx.add(e.replace(o.EXT_DATA_CTX_PRFX,""),this.init$[e]);else if(e.includes(o.NAMED_DATA_CTX_SPLTR)){let s=e.split(o.NAMED_DATA_CTX_SPLTR),i=s[0].trim(),r=s[1].trim();if(i&&r){let h=l.getNamedCtx(i,!1);h||(h=l.registerNamedCtx(i,{})),h.add(r,this.init$[e])}}else this.localCtx.add(e,this.init$[e]);this.__dataCtxInitialized=!0}connectedCallback(){var t;if(this.__disconnectTimeout&&window.clearTimeout(this.__disconnectTimeout),!this.connectedOnce){let e=(t=this.getAttribute(o.CTX_NAME_ATTR))==null?void 0:t.trim();e&&this.style.setProperty(o.CSS_CTX_PROP,`'${e}'`),this.__initDataCtx(),this.initChildren=[...this.childNodes];for(let s of y)this.addTemplateProcessor(s);this.pauseRender?this.__initCallback():this.render()}this.connectedOnce=!0}destroyCallback(){}disconnectedCallback(){this.dropCssDataCache(),!!this.readyToDestroy&&(this.__disconnectTimeout&&window.clearTimeout(this.__disconnectTimeout),this.__disconnectTimeout=window.setTimeout(()=>{this.destroyCallback();for(let t of this.allSubs)t.remove(),this.allSubs.delete(t);for(let t of this.tplProcessors)this.tplProcessors.delete(t)},100))}static reg(t,e=!1){if(t||(g++,t=`${o.AUTO_TAG_PRFX}-${g}`),this.__tag=t,window.customElements.get(t)){console.warn(`${t} - is already in "customElements" registry`);return}window.customElements.define(t,e?class extends this{}:this)}static get is(){return this.__tag||this.reg(),this.__tag}static bindAttributes(t){this.observedAttributes=Object.keys(t),this.__attrDesc=t}attributeChangedCallback(t,e,s){if(e===s)return;let i=this.constructor.__attrDesc[t];i?this.__dataCtxInitialized?this.$[i]=s:this.init$[i]=s:this[t]=s}getCssData(t,e=!1){if(this.__cssDataCache||(this.__cssDataCache=Object.create(null)),!Object.keys(this.__cssDataCache).includes(t)){this.__computedStyle||(this.__computedStyle=window.getComputedStyle(this));let s=this.__computedStyle.getPropertyValue(t).trim();s.startsWith("'")&&s.endsWith("'")&&(s=s.replace(/\'/g,'"'));try{this.__cssDataCache[t]=JSON.parse(s)}catch{!e&&console.warn(`CSS Data error: ${t}`),this.__cssDataCache[t]=null}}return this.__cssDataCache[t]}bindCssData(t,e=!0){let s=(e?o.EXT_DATA_CTX_PRFX:"")+t;return this.add(s,this.getCssData(t,!0)),s}dropCssDataCache(){this.__cssDataCache=null,this.__computedStyle=null}defineAccessor(t,e,s){let i="__"+t;this[i]=this[t],Object.defineProperty(this,t,{set:r=>{this[i]=r,s?window.setTimeout(()=>{e==null||e(r)}):e==null||e(r)},get:()=>this[i]}),this[t]=this[i]}static set shadowStyles(t){let e=new Blob([t],{type:"text/css"});this.__shadowStylesUrl=URL.createObjectURL(e)}},R=_;P(R,"template");export{R as BaseComponent};

package/build/symbiote.d.ts

@@ -161,6 +161,7 @@ export class TypedCollection {
 	unobserve(handler: Function): void;
 	findItems(checkFn: (item: TypedData) => boolean): string[];
 	items(): string[];
+	get size(): number;
 	destroy(): void;
 }
 export class AppRouter {

package/build/symbiote.js

@@ -154,7 +154,7 @@ var UID = class {
 
 // core/tpl-processors.js
 function slotProcessor(fr, fnCtx) {
-  if (fnCtx.renderShadow) {
+  if (fnCtx.shadowRoot) {
     return;
   }
   let slots = [...fr.querySelectorAll("slot")];
@@ -188,8 +188,6 @@ function slotProcessor(fr, fnCtx) {
       mapObj.slot.parentNode.insertBefore(mapObj.fr, mapObj.slot);
       mapObj.slot.remove();
     });
-  } else {
-    !fnCtx.processInnerHtml && (fnCtx.innerHTML = "");
   }
 }
 function refProcessor(fr, fnCtx) {
@@ -234,7 +232,20 @@ function domSetProcessor(fr, fnCtx) {
         dive();
       }
       for (let valKey of valKeysArr) {
+        let castType;
+        if (valKey.startsWith("!!")) {
+          castType = "double";
+          valKey = valKey.replace("!!", "");
+        } else if (valKey.startsWith("!")) {
+          castType = "single";
+          valKey = valKey.replace("!", "");
+        }
         fnCtx.sub(valKey, (val) => {
+          if (castType === "double") {
+            val = !!val;
+          } else if (castType === "single") {
+            val = !val;
+          }
           if (isAttr) {
             if ((val == null ? void 0 : val.constructor) === Boolean) {
               val ? el.setAttribute(prop, "") : el.removeAttribute(prop);
@@ -332,9 +343,6 @@ var _BaseComponent = class extends HTMLElement {
         this.constructor["__tpl"] = document.createElement("template");
         this.constructor["__tpl"].innerHTML = this.constructor["template"];
       }
-      while (!this.processInnerHtml && this.firstChild) {
-        this.firstChild.remove();
-      }
       if ((template == null ? void 0 : template.constructor) === DocumentFragment) {
         fr = template;
       } else if ((template == null ? void 0 : template.constructor) === String) {
@@ -506,7 +514,9 @@ var _BaseComponent = class extends HTMLElement {
       for (let proc of tpl_processors_default) {
         this.addTemplateProcessor(proc);
       }
-      if (!this.pauseRender) {
+      if (this.pauseRender) {
+        this.__initCallback();
+      } else {
         this.render();
       }
     }
@@ -775,6 +785,9 @@ var TypedCollection = class {
   items() {
     return [...this.__items];
   }
+  get size() {
+    return this.__items.size;
+  }
   destroy() {
     this.__data.remove();
     this.__observers = null;

package/build/symbiote.min.js

@@ -1 +1 @@
-var L=Object.defineProperty;var $=(o,t,e)=>t in o?L(o,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[t]=e;var y=(o,t,e)=>($(o,typeof t!="symbol"?t+"":t,e),e);function F(o){let t=e=>{var s;for(let i in e)((s=e[i])==null?void 0:s.constructor)===Object&&(e[i]=t(e[i]));return{...e}};return t(o)}var n=class{constructor(t){this.uid=Symbol(),this.name=t.name||null,t.schema.constructor===Object?this.store=F(t.schema):(this._storeIsProxy=!0,this.store=t.schema),this.callbackMap=Object.create(null)}static warn(t,e){console.warn(`Symbiote Data: cannot ${t}. Prop name: `+e)}read(t){return!this._storeIsProxy&&!this.store.hasOwnProperty(t)?(n.warn("read",t),null):this.store[t]}has(t){return this._storeIsProxy?this.store[t]!==void 0:this.store.hasOwnProperty(t)}add(t,e,s=!0){!s&&Object.keys(this.store).includes(t)||(this.store[t]=e,this.callbackMap[t]&&this.callbackMap[t].forEach(i=>{i(this.store[t])}))}pub(t,e){if(!this._storeIsProxy&&!this.store.hasOwnProperty(t)){n.warn("publish",t);return}this.add(t,e)}multiPub(t){for(let e in t)this.pub(e,t[e])}notify(t){this.callbackMap[t]&&this.callbackMap[t].forEach(e=>{e(this.store[t])})}sub(t,e,s=!0){return!this._storeIsProxy&&!this.store.hasOwnProperty(t)?(n.warn("subscribe",t),null):(this.callbackMap[t]||(this.callbackMap[t]=new Set),this.callbackMap[t].add(e),s&&e(this.store[t]),{remove:()=>{this.callbackMap[t].delete(e),this.callbackMap[t].size||delete this.callbackMap[t]},callback:e})}remove(){delete n.globalStore[this.uid]}static registerLocalCtx(t){let e=new n({schema:t});return n.globalStore[e.uid]=e,e}static registerNamedCtx(t,e){let s=n.globalStore[t];return s?console.warn('State: context name "'+t+'" already in use'):(s=new n({name:t,schema:e}),n.globalStore[t]=s),s}static clearNamedCtx(t){delete n.globalStore[t]}static getNamedCtx(t,e=!0){return n.globalStore[t]||(e&&console.warn('State: wrong context name - "'+t+'"'),null)}};n.globalStore=Object.create(null);var l=Object.freeze({BIND_ATTR:"set",ATTR_BIND_PRFX:"@",EXT_DATA_CTX_PRFX:"*",NAMED_DATA_CTX_SPLTR:"/",CTX_NAME_ATTR:"ctx-name",CSS_CTX_PROP:"--ctx-name",EL_REF_ATTR:"ref",AUTO_TAG_PRFX:"sym"});var P="1234567890QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm",B=P.length-1,_=class{static generate(t="XXXXXXXXX-XXX"){let e="";for(let s=0;s<t.length;s++)e+=t[s]==="-"?t[s]:P.charAt(Math.random()*B);return e}};function U(o,t){if(t.renderShadow)return;let e=[...o.querySelectorAll("slot")];if(t.initChildren.length&&e.length){let s={};e.forEach(i=>{let r=i.getAttribute("name");r?s[r]={slot:i,fr:document.createDocumentFragment()}:s.__default__={slot:i,fr:document.createDocumentFragment()}}),t.initChildren.forEach(i=>{var a;let r=(a=i.getAttribute)==null?void 0:a.call(i,"slot");r?(i.removeAttribute("slot"),s[r].fr.appendChild(i)):s.__default__&&s.__default__.fr.appendChild(i)}),Object.values(s).forEach(i=>{i.slot.parentNode.insertBefore(i.fr,i.slot),i.slot.remove()})}else!t.processInnerHtml&&(t.innerHTML="")}function H(o,t){[...o.querySelectorAll(`[${l.EL_REF_ATTR}]`)].forEach(e=>{let s=e.getAttribute(l.EL_REF_ATTR);t.ref[s]=e,e.removeAttribute(l.EL_REF_ATTR)})}function W(o,t){[...o.querySelectorAll(`[${l.BIND_ATTR}]`)].forEach(e=>{e.getAttribute(l.BIND_ATTR).split(";").forEach(r=>{if(!r)return;let a=r.split(":").map(c=>c.trim()),h=a[0],p;h.indexOf(l.ATTR_BIND_PRFX)===0&&(p=!0,h=h.replace(l.ATTR_BIND_PRFX,""));let b=a[1].split(",").map(c=>c.trim()),E,m,x,S;if(h.includes(".")){E=!0;let c=h.split(".");S=()=>{m=e,c.forEach((u,j)=>{j<c.length-1?m=m[u]:x=u})},S()}for(let c of b)t.sub(c,u=>{p?(u==null?void 0:u.constructor)===Boolean?u?e.setAttribute(h,""):e.removeAttribute(h):e.setAttribute(h,u):E?m?m[x]=u:window.setTimeout(()=>{S(),m[x]=u}):e[h]=u})}),e.removeAttribute(l.BIND_ATTR)})}var w="{{",T="}}",V="skip-text";function q(o){let t,e=[],s=document.createTreeWalker(o,NodeFilter.SHOW_TEXT,{acceptNode:i=>{var r;return!((r=i.parentElement)==null?void 0:r.hasAttribute(V))&&i.textContent.includes(w)&&i.textContent.includes(T)&&1}});for(;t=s.nextNode();)e.push(t);return e}var z=function(o,t){q(o).forEach(s=>{let i=[],r;for(;s.textContent.includes(T);)s.textContent.startsWith(w)?(r=s.textContent.indexOf(T)+T.length,s.splitText(r),i.push(s)):(r=s.textContent.indexOf(w),s.splitText(r)),s=s.nextSibling;i.forEach(a=>{let h=a.textContent.replace(w,"").replace(T,"");t.sub(h,p=>{a.textContent=p})})})},R=[U,H,W,z];var D=0,d=class extends HTMLElement{initCallback(){}__initCallback(){var t;this.__initialized||(this.__initialized=!0,(t=this.initCallback)==null||t.call(this))}render(t,e=this.renderShadow){let s;if((e||this.constructor.__shadowStylesUrl)&&!this.shadowRoot&&this.attachShadow({mode:"open"}),this.processInnerHtml)for(let r of this.tplProcessors)r(this,this);if(t||this.constructor.template){for(this.constructor.template&&!this.constructor.__tpl&&(this.constructor.__tpl=document.createElement("template"),this.constructor.__tpl.innerHTML=this.constructor.template);!this.processInnerHtml&&this.firstChild;)this.firstChild.remove();if((t==null?void 0:t.constructor)===DocumentFragment)s=t;else if((t==null?void 0:t.constructor)===String){let r=document.createElement("template");r.innerHTML=t,s=r.content.cloneNode(!0)}else this.constructor.__tpl&&(s=this.constructor.__tpl.content.cloneNode(!0));for(let r of this.tplProcessors)r(s,this)}let i=()=>{s&&(e&&this.shadowRoot.appendChild(s)||this.appendChild(s)),this.__initCallback()};if(this.constructor.__shadowStylesUrl){e=!0;let r=document.createElement("link");r.rel="stylesheet",r.href=this.constructor.__shadowStylesUrl,r.onload=i,this.shadowRoot.prepend(r)}else i()}addTemplateProcessor(t){this.tplProcessors.add(t)}constructor(){super();this.init$=Object.create(null),this.tplProcessors=new Set,this.ref=Object.create(null),this.allSubs=new Set,this.pauseRender=!1,this.renderShadow=!1,this.readyToDestroy=!0,this.processInnerHtml=!1}get autoCtxName(){return this.__autoCtxName||(this.__autoCtxName=_.generate(),this.style.setProperty(l.CSS_CTX_PROP,`'${this.__autoCtxName}'`)),this.__autoCtxName}get cssCtxName(){return this.getCssData(l.CSS_CTX_PROP,!0)}get ctxName(){var t;return((t=this.getAttribute(l.CTX_NAME_ATTR))==null?void 0:t.trim())||this.cssCtxName||this.autoCtxName}get localCtx(){return this.__localCtx||(this.__localCtx=n.registerLocalCtx({})),this.__localCtx}get nodeCtx(){return n.getNamedCtx(this.ctxName,!1)||n.registerNamedCtx(this.ctxName,{})}static __parseProp(t,e){let s,i;if(t.startsWith(l.EXT_DATA_CTX_PRFX))s=e.nodeCtx,i=t.replace(l.EXT_DATA_CTX_PRFX,"");else if(t.includes(l.NAMED_DATA_CTX_SPLTR)){let r=t.split(l.NAMED_DATA_CTX_SPLTR);s=n.getNamedCtx(r[0]),i=r[1]}else s=e.localCtx,i=t;return{ctx:s,name:i}}sub(t,e){let s=d.__parseProp(t,this);this.allSubs.add(s.ctx.sub(s.name,e))}notify(t){let e=d.__parseProp(t,this);e.ctx.notify(e.name)}has(t){let e=d.__parseProp(t,this);return e.ctx.has(e.name)}add(t,e){let s=d.__parseProp(t,this);s.ctx.add(s.name,e,!1)}add$(t){for(let e in t)this.add(e,t[e])}get $(){if(!this.__stateProxy){let t=Object.create(null);this.__stateProxy=new Proxy(t,{set:(e,s,i)=>{let r=d.__parseProp(s,this);return r.ctx.pub(r.name,i),!0},get:(e,s)=>{let i=d.__parseProp(s,this);return i.ctx.read(i.name)}})}return this.__stateProxy}set$(t){for(let e in t)this.$[e]=t[e]}__initDataCtx(){let t=this.constructor.__attrDesc;if(t)for(let e of Object.values(t))Object.keys(this.init$).includes(e)||(this.init$[e]="");for(let e in this.init$)if(e.startsWith(l.EXT_DATA_CTX_PRFX))this.nodeCtx.add(e.replace(l.EXT_DATA_CTX_PRFX,""),this.init$[e]);else if(e.includes(l.NAMED_DATA_CTX_SPLTR)){let s=e.split(l.NAMED_DATA_CTX_SPLTR),i=s[0].trim(),r=s[1].trim();if(i&&r){let a=n.getNamedCtx(i,!1);a||(a=n.registerNamedCtx(i,{})),a.add(r,this.init$[e])}}else this.localCtx.add(e,this.init$[e]);this.__dataCtxInitialized=!0}connectedCallback(){var t;if(this.__disconnectTimeout&&window.clearTimeout(this.__disconnectTimeout),!this.connectedOnce){let e=(t=this.getAttribute(l.CTX_NAME_ATTR))==null?void 0:t.trim();e&&this.style.setProperty(l.CSS_CTX_PROP,`'${e}'`),this.__initDataCtx(),this.initChildren=[...this.childNodes];for(let s of R)this.addTemplateProcessor(s);this.pauseRender||this.render()}this.connectedOnce=!0}destroyCallback(){}disconnectedCallback(){this.dropCssDataCache(),!!this.readyToDestroy&&(this.__disconnectTimeout&&window.clearTimeout(this.__disconnectTimeout),this.__disconnectTimeout=window.setTimeout(()=>{this.destroyCallback();for(let t of this.allSubs)t.remove(),this.allSubs.delete(t);for(let t of this.tplProcessors)this.tplProcessors.delete(t)},100))}static reg(t,e=!1){if(t||(D++,t=`${l.AUTO_TAG_PRFX}-${D}`),this.__tag=t,window.customElements.get(t)){console.warn(`${t} - is already in "customElements" registry`);return}window.customElements.define(t,e?class extends this{}:this)}static get is(){return this.__tag||this.reg(),this.__tag}static bindAttributes(t){this.observedAttributes=Object.keys(t),this.__attrDesc=t}attributeChangedCallback(t,e,s){if(e===s)return;let i=this.constructor.__attrDesc[t];i?this.__dataCtxInitialized?this.$[i]=s:this.init$[i]=s:this[t]=s}getCssData(t,e=!1){if(this.__cssDataCache||(this.__cssDataCache=Object.create(null)),!Object.keys(this.__cssDataCache).includes(t)){this.__computedStyle||(this.__computedStyle=window.getComputedStyle(this));let s=this.__computedStyle.getPropertyValue(t).trim();s.startsWith("'")&&s.endsWith("'")&&(s=s.replace(/\'/g,'"'));try{this.__cssDataCache[t]=JSON.parse(s)}catch{!e&&console.warn(`CSS Data error: ${t}`),this.__cssDataCache[t]=null}}return this.__cssDataCache[t]}bindCssData(t,e=!0){let s=(e?l.EXT_DATA_CTX_PRFX:"")+t;return this.add(s,this.getCssData(t,!0)),s}dropCssDataCache(){this.__cssDataCache=null,this.__computedStyle=null}defineAccessor(t,e,s){let i="__"+t;this[i]=this[t],Object.defineProperty(this,t,{set:r=>{this[i]=r,s?window.setTimeout(()=>{e==null||e(r)}):e==null||e(r)},get:()=>this[i]}),this[t]=this[i]}static set shadowStyles(t){let e=new Blob([t],{type:"text/css"});this.__shadowStylesUrl=URL.createObjectURL(e)}},A=d;y(A,"template");var N="[Typed State] Wrong property name: ",G="[Typed State] Wrong property type: ",C=class{constructor(t,e){this.__typedSchema=t,this.__ctxId=e||_.generate(),this.__schema=Object.keys(t).reduce((s,i)=>(s[i]=t[i].value,s),{}),this.__data=n.registerNamedCtx(this.__ctxId,this.__schema)}get uid(){return this.__ctxId}setValue(t,e){if(!this.__typedSchema.hasOwnProperty(t)){console.warn(N+t);return}let s=this.__typedSchema[t];if((e==null?void 0:e.constructor)===s.type||s.nullable&&e===null){this.__data.pub(t,e);return}console.warn(G+t)}setMultipleValues(t){for(let e in t)this.setValue(e,t[e])}getValue(t){if(!this.__typedSchema.hasOwnProperty(t)){console.warn(N+t);return}return this.__data.read(t)}subscribe(t,e){return this.__data.sub(t,e)}remove(){this.__data.remove()}};var M=class{constructor(t){this.__typedSchema=t.typedSchema,this.__ctxId=t.ctxName||_.generate(),this.__data=n.registerNamedCtx(this.__ctxId,{}),this.__watchList=t.watchList||[],this.__handler=t.handler||null,this.__subsMap=Object.create(null),this.__observers=new Set,this.__items=new Set;let e=Object.create(null);this.__notifyObservers=(s,i)=>{this.__observeTimeout&&window.clearTimeout(this.__observeTimeout),e[s]||(e[s]=new Set),e[s].add(i),this.__observeTimeout=window.setTimeout(()=>{this.__observers.forEach(r=>{r({...e})}),e=Object.create(null)})}}notify(){this.__notifyTimeout&&window.clearTimeout(this.__notifyTimeout),this.__notifyTimeout=window.setTimeout(()=>{var t;(t=this.__handler)==null||t.call(this,[...this.__items])})}add(t){let e=new C(this.__typedSchema);for(let s in t)e.setValue(s,t[s]);return this.__data.add(e.uid,e),this.__watchList.forEach(s=>{this.__subsMap[e.uid]||(this.__subsMap[e.uid]=[]),this.__subsMap[e.uid].push(e.subscribe(s,()=>{this.__notifyObservers(s,e.uid)}))}),this.__items.add(e.uid),this.notify(),e}read(t){return this.__data.read(t)}readProp(t,e){return this.read(t).getValue(e)}publishProp(t,e,s){this.read(t).setValue(e,s)}remove(t){this.__items.delete(t),this.notify(),this.__data.pub(t,null),delete this.__subsMap[t]}clearAll(){this.__items.forEach(t=>{this.remove(t)})}observe(t){this.__observers.add(t)}unobserve(t){this.__observers.delete(t)}findItems(t){let e=[];return this.__items.forEach(s=>{let i=this.read(s);t(i)&&e.push(s)}),e}items(){return[...this.__items]}destroy(){this.__data.remove(),this.__observers=null;for(let t in this.__subsMap)this.__subsMap[t].forEach(e=>{e.remove()}),delete this.__subsMap[t]}};var f=class{static _print(t){console.warn(t)}static setDefaultTitle(t){this.defaultTitle=t}static setRoutingMap(t){Object.assign(this.appMap,t);for(let e in this.appMap)!this.defaultRoute&&this.appMap[e].default===!0?this.defaultRoute=e:!this.errorRoute&&this.appMap[e].error===!0&&(this.errorRoute=e)}static set routingEventName(t){this.__routingEventName=t}static get routingEventName(){return this.__routingEventName||"sym-on-route"}static readAddressBar(){let t={route:null,options:{}};return window.location.search.split(this.separator).forEach(s=>{if(s.includes("?"))t.route=s.replace("?","");else if(s.includes("=")){let i=s.split("=");t.options[i[0]]=decodeURI(i[1])}else t.options[s]=!0}),t}static notify(){let t=this.readAddressBar(),e=this.appMap[t.route];if(e&&e.title&&(document.title=e.title),t.route===null&&this.defaultRoute){this.applyRoute(this.defaultRoute);return}else if(!e&&this.errorRoute){this.applyRoute(this.errorRoute);return}else if(!e&&this.defaultRoute){this.applyRoute(this.defaultRoute);return}else if(!e){this._print(`Route "${t.route}" not found...`);return}let s=new CustomEvent(f.routingEventName,{detail:{route:t.route,options:Object.assign(e||{},t.options)}});window.dispatchEvent(s)}static reflect(t,e={}){let s=this.appMap[t];if(!s){this._print("Wrong route: "+t);return}let i="?"+t;for(let a in e)e[a]===!0?i+=this.separator+a:i+=this.separator+a+`=${e[a]}`;let r=s.title||this.defaultTitle||"";window.history.pushState(null,r,i),document.title=r}static applyRoute(t,e={}){this.reflect(t,e),this.notify()}static setSeparator(t){this._separator=t}static get separator(){return this._separator||"&"}static createRouterData(t,e){this.setRoutingMap(e);let s=n.registerNamedCtx(t,{route:null,options:null,title:null});return window.addEventListener(this.routingEventName,i=>{var r;s.multiPub({route:i.detail.route,options:i.detail.options,title:((r=i.detail.options)==null?void 0:r.title)||this.defaultTitle||""})}),f.notify(),s}};f.appMap=Object.create(null);window.onpopstate=()=>{f.notify()};function v(o,t){for(let e in t)e.includes("-")?o.style.setProperty(e,t[e]):o.style[e]=t[e]}function X(o,t){for(let e in t)t[e].constructor===Boolean?t[e]?o.setAttribute(e,""):o.removeAttribute(e):o.setAttribute(e,t[e])}function O(o={tag:"div"}){let t=document.createElement(o.tag);if(o.attributes&&X(t,o.attributes),o.styles&&v(t,o.styles),o.properties)for(let e in o.properties)t[e]=o.properties[e];return o.processors&&o.processors.forEach(e=>{e(t)}),o.children&&o.children.forEach(e=>{let s=O(e);t.appendChild(s)}),t}var I="idb-store-ready",K="symbiote-db",Y="symbiote-idb-update_",k=class{_notifyWhenReady(t=null){window.dispatchEvent(new CustomEvent(I,{detail:{dbName:this.name,storeName:this.storeName,event:t}}))}get _updEventName(){return Y+this.name}_getUpdateEvent(t){return new CustomEvent(this._updEventName,{detail:{key:this.name,newValue:t}})}_notifySubscribers(t){window.localStorage.removeItem(this.name),window.localStorage.setItem(this.name,t),window.dispatchEvent(this._getUpdateEvent(t))}constructor(t,e){this.name=t,this.storeName=e,this.version=1,this.request=window.indexedDB.open(this.name,this.version),this.request.onupgradeneeded=s=>{this.db=s.target.result,this.objStore=this.db.createObjectStore(e,{keyPath:"_key"}),this.objStore.transaction.oncomplete=i=>{this._notifyWhenReady(i)}},this.request.onsuccess=s=>{this.db=s.target.result,this._notifyWhenReady(s)},this.request.onerror=s=>{console.error(s)},this._subscriptionsMap={},this._updateHandler=s=>{s.key===this.name&&this._subscriptionsMap[s.newValue]&&this._subscriptionsMap[s.newValue].forEach(async r=>{r(await this.read(s.newValue))})},this._localUpdateHandler=s=>{this._updateHandler(s.detail)},window.addEventListener("storage",this._updateHandler),window.addEventListener(this._updEventName,this._localUpdateHandler)}read(t){let s=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).get(t);return new Promise((i,r)=>{s.onsuccess=a=>{var h;((h=a.target.result)==null?void 0:h._value)?i(a.target.result._value):(i(null),console.warn(`IDB: cannot read "${t}"`))},s.onerror=a=>{r(a)}})}write(t,e,s=!1){let i={_key:t,_value:e},a=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).put(i);return new Promise((h,p)=>{a.onsuccess=b=>{s||this._notifySubscribers(t),h(b.target.result)},a.onerror=b=>{p(b)}})}delete(t,e=!1){let i=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).delete(t);return new Promise((r,a)=>{i.onsuccess=h=>{e||this._notifySubscribers(t),r(h)},i.onerror=h=>{a(h)}})}getAll(){let e=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).getAll();return new Promise((s,i)=>{e.onsuccess=r=>{let a=r.target.result;s(a.map(h=>h._value))},e.onerror=r=>{i(r)}})}subscribe(t,e){this._subscriptionsMap[t]||(this._subscriptionsMap[t]=new Set);let s=this._subscriptionsMap[t];return s.add(e),{remove:()=>{s.delete(e),s.size||delete this._subscriptionsMap[t]}}}stop(){window.removeEventListener("storage",this._updateHandler),this._subscriptionsMap=null,g.clear(this.name)}},g=class{static get readyEventName(){return I}static open(t=K,e="store"){let s=t+"/"+e;return this._reg[s]||(this._reg[s]=new k(t,e)),this._reg[s]}static clear(t){window.indexedDB.deleteDatabase(t);for(let e in this._reg)e.split("/")[0]===t&&delete this._reg[e]}};y(g,"_reg",Object.create(null));export{f as AppRouter,A as BaseComponent,n as Data,g as IDB,M as TypedCollection,C as TypedData,_ as UID,X as applyAttributes,v as applyStyles,O as create};
+var L=Object.defineProperty;var $=(o,t,e)=>t in o?L(o,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[t]=e;var w=(o,t,e)=>($(o,typeof t!="symbol"?t+"":t,e),e);function F(o){let t=e=>{var s;for(let i in e)((s=e[i])==null?void 0:s.constructor)===Object&&(e[i]=t(e[i]));return{...e}};return t(o)}var n=class{constructor(t){this.uid=Symbol(),this.name=t.name||null,t.schema.constructor===Object?this.store=F(t.schema):(this._storeIsProxy=!0,this.store=t.schema),this.callbackMap=Object.create(null)}static warn(t,e){console.warn(`Symbiote Data: cannot ${t}. Prop name: `+e)}read(t){return!this._storeIsProxy&&!this.store.hasOwnProperty(t)?(n.warn("read",t),null):this.store[t]}has(t){return this._storeIsProxy?this.store[t]!==void 0:this.store.hasOwnProperty(t)}add(t,e,s=!0){!s&&Object.keys(this.store).includes(t)||(this.store[t]=e,this.callbackMap[t]&&this.callbackMap[t].forEach(i=>{i(this.store[t])}))}pub(t,e){if(!this._storeIsProxy&&!this.store.hasOwnProperty(t)){n.warn("publish",t);return}this.add(t,e)}multiPub(t){for(let e in t)this.pub(e,t[e])}notify(t){this.callbackMap[t]&&this.callbackMap[t].forEach(e=>{e(this.store[t])})}sub(t,e,s=!0){return!this._storeIsProxy&&!this.store.hasOwnProperty(t)?(n.warn("subscribe",t),null):(this.callbackMap[t]||(this.callbackMap[t]=new Set),this.callbackMap[t].add(e),s&&e(this.store[t]),{remove:()=>{this.callbackMap[t].delete(e),this.callbackMap[t].size||delete this.callbackMap[t]},callback:e})}remove(){delete n.globalStore[this.uid]}static registerLocalCtx(t){let e=new n({schema:t});return n.globalStore[e.uid]=e,e}static registerNamedCtx(t,e){let s=n.globalStore[t];return s?console.warn('State: context name "'+t+'" already in use'):(s=new n({name:t,schema:e}),n.globalStore[t]=s),s}static clearNamedCtx(t){delete n.globalStore[t]}static getNamedCtx(t,e=!0){return n.globalStore[t]||(e&&console.warn('State: wrong context name - "'+t+'"'),null)}};n.globalStore=Object.create(null);var l=Object.freeze({BIND_ATTR:"set",ATTR_BIND_PRFX:"@",EXT_DATA_CTX_PRFX:"*",NAMED_DATA_CTX_SPLTR:"/",CTX_NAME_ATTR:"ctx-name",CSS_CTX_PROP:"--ctx-name",EL_REF_ATTR:"ref",AUTO_TAG_PRFX:"sym"});var R="1234567890QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm",B=R.length-1,_=class{static generate(t="XXXXXXXXX-XXX"){let e="";for(let s=0;s<t.length;s++)e+=t[s]==="-"?t[s]:R.charAt(Math.random()*B);return e}};function U(o,t){if(t.shadowRoot)return;let e=[...o.querySelectorAll("slot")];if(t.initChildren.length&&e.length){let s={};e.forEach(i=>{let r=i.getAttribute("name");r?s[r]={slot:i,fr:document.createDocumentFragment()}:s.__default__={slot:i,fr:document.createDocumentFragment()}}),t.initChildren.forEach(i=>{var a;let r=(a=i.getAttribute)==null?void 0:a.call(i,"slot");r?(i.removeAttribute("slot"),s[r].fr.appendChild(i)):s.__default__&&s.__default__.fr.appendChild(i)}),Object.values(s).forEach(i=>{i.slot.parentNode.insertBefore(i.fr,i.slot),i.slot.remove()})}}function W(o,t){[...o.querySelectorAll(`[${l.EL_REF_ATTR}]`)].forEach(e=>{let s=e.getAttribute(l.EL_REF_ATTR);t.ref[s]=e,e.removeAttribute(l.EL_REF_ATTR)})}function H(o,t){[...o.querySelectorAll(`[${l.BIND_ATTR}]`)].forEach(e=>{e.getAttribute(l.BIND_ATTR).split(";").forEach(r=>{if(!r)return;let a=r.split(":").map(u=>u.trim()),h=a[0],m;h.indexOf(l.ATTR_BIND_PRFX)===0&&(m=!0,h=h.replace(l.ATTR_BIND_PRFX,""));let T=a[1].split(",").map(u=>u.trim()),P,b,S,A;if(h.includes(".")){P=!0;let u=h.split(".");A=()=>{b=e,u.forEach((f,c)=>{c<u.length-1?b=b[f]:S=f})},A()}for(let u of T){let f;u.startsWith("!!")?(f="double",u=u.replace("!!","")):u.startsWith("!")&&(f="single",u=u.replace("!","")),t.sub(u,c=>{f==="double"?c=!!c:f==="single"&&(c=!c),m?(c==null?void 0:c.constructor)===Boolean?c?e.setAttribute(h,""):e.removeAttribute(h):e.setAttribute(h,c):P?b?b[S]=c:window.setTimeout(()=>{A(),b[S]=c}):e[h]=c})}}),e.removeAttribute(l.BIND_ATTR)})}var C="{{",y="}}",V="skip-text";function q(o){let t,e=[],s=document.createTreeWalker(o,NodeFilter.SHOW_TEXT,{acceptNode:i=>{var r;return!((r=i.parentElement)==null?void 0:r.hasAttribute(V))&&i.textContent.includes(C)&&i.textContent.includes(y)&&1}});for(;t=s.nextNode();)e.push(t);return e}var z=function(o,t){q(o).forEach(s=>{let i=[],r;for(;s.textContent.includes(y);)s.textContent.startsWith(C)?(r=s.textContent.indexOf(y)+y.length,s.splitText(r),i.push(s)):(r=s.textContent.indexOf(C),s.splitText(r)),s=s.nextSibling;i.forEach(a=>{let h=a.textContent.replace(C,"").replace(y,"");t.sub(h,m=>{a.textContent=m})})})},D=[U,W,H,z];var N=0,d=class extends HTMLElement{initCallback(){}__initCallback(){var t;this.__initialized||(this.__initialized=!0,(t=this.initCallback)==null||t.call(this))}render(t,e=this.renderShadow){let s;if((e||this.constructor.__shadowStylesUrl)&&!this.shadowRoot&&this.attachShadow({mode:"open"}),this.processInnerHtml)for(let r of this.tplProcessors)r(this,this);if(t||this.constructor.template){if(this.constructor.template&&!this.constructor.__tpl&&(this.constructor.__tpl=document.createElement("template"),this.constructor.__tpl.innerHTML=this.constructor.template),(t==null?void 0:t.constructor)===DocumentFragment)s=t;else if((t==null?void 0:t.constructor)===String){let r=document.createElement("template");r.innerHTML=t,s=r.content.cloneNode(!0)}else this.constructor.__tpl&&(s=this.constructor.__tpl.content.cloneNode(!0));for(let r of this.tplProcessors)r(s,this)}let i=()=>{s&&(e&&this.shadowRoot.appendChild(s)||this.appendChild(s)),this.__initCallback()};if(this.constructor.__shadowStylesUrl){e=!0;let r=document.createElement("link");r.rel="stylesheet",r.href=this.constructor.__shadowStylesUrl,r.onload=i,this.shadowRoot.prepend(r)}else i()}addTemplateProcessor(t){this.tplProcessors.add(t)}constructor(){super();this.init$=Object.create(null),this.tplProcessors=new Set,this.ref=Object.create(null),this.allSubs=new Set,this.pauseRender=!1,this.renderShadow=!1,this.readyToDestroy=!0,this.processInnerHtml=!1}get autoCtxName(){return this.__autoCtxName||(this.__autoCtxName=_.generate(),this.style.setProperty(l.CSS_CTX_PROP,`'${this.__autoCtxName}'`)),this.__autoCtxName}get cssCtxName(){return this.getCssData(l.CSS_CTX_PROP,!0)}get ctxName(){var t;return((t=this.getAttribute(l.CTX_NAME_ATTR))==null?void 0:t.trim())||this.cssCtxName||this.autoCtxName}get localCtx(){return this.__localCtx||(this.__localCtx=n.registerLocalCtx({})),this.__localCtx}get nodeCtx(){return n.getNamedCtx(this.ctxName,!1)||n.registerNamedCtx(this.ctxName,{})}static __parseProp(t,e){let s,i;if(t.startsWith(l.EXT_DATA_CTX_PRFX))s=e.nodeCtx,i=t.replace(l.EXT_DATA_CTX_PRFX,"");else if(t.includes(l.NAMED_DATA_CTX_SPLTR)){let r=t.split(l.NAMED_DATA_CTX_SPLTR);s=n.getNamedCtx(r[0]),i=r[1]}else s=e.localCtx,i=t;return{ctx:s,name:i}}sub(t,e){let s=d.__parseProp(t,this);this.allSubs.add(s.ctx.sub(s.name,e))}notify(t){let e=d.__parseProp(t,this);e.ctx.notify(e.name)}has(t){let e=d.__parseProp(t,this);return e.ctx.has(e.name)}add(t,e){let s=d.__parseProp(t,this);s.ctx.add(s.name,e,!1)}add$(t){for(let e in t)this.add(e,t[e])}get $(){if(!this.__stateProxy){let t=Object.create(null);this.__stateProxy=new Proxy(t,{set:(e,s,i)=>{let r=d.__parseProp(s,this);return r.ctx.pub(r.name,i),!0},get:(e,s)=>{let i=d.__parseProp(s,this);return i.ctx.read(i.name)}})}return this.__stateProxy}set$(t){for(let e in t)this.$[e]=t[e]}__initDataCtx(){let t=this.constructor.__attrDesc;if(t)for(let e of Object.values(t))Object.keys(this.init$).includes(e)||(this.init$[e]="");for(let e in this.init$)if(e.startsWith(l.EXT_DATA_CTX_PRFX))this.nodeCtx.add(e.replace(l.EXT_DATA_CTX_PRFX,""),this.init$[e]);else if(e.includes(l.NAMED_DATA_CTX_SPLTR)){let s=e.split(l.NAMED_DATA_CTX_SPLTR),i=s[0].trim(),r=s[1].trim();if(i&&r){let a=n.getNamedCtx(i,!1);a||(a=n.registerNamedCtx(i,{})),a.add(r,this.init$[e])}}else this.localCtx.add(e,this.init$[e]);this.__dataCtxInitialized=!0}connectedCallback(){var t;if(this.__disconnectTimeout&&window.clearTimeout(this.__disconnectTimeout),!this.connectedOnce){let e=(t=this.getAttribute(l.CTX_NAME_ATTR))==null?void 0:t.trim();e&&this.style.setProperty(l.CSS_CTX_PROP,`'${e}'`),this.__initDataCtx(),this.initChildren=[...this.childNodes];for(let s of D)this.addTemplateProcessor(s);this.pauseRender?this.__initCallback():this.render()}this.connectedOnce=!0}destroyCallback(){}disconnectedCallback(){this.dropCssDataCache(),!!this.readyToDestroy&&(this.__disconnectTimeout&&window.clearTimeout(this.__disconnectTimeout),this.__disconnectTimeout=window.setTimeout(()=>{this.destroyCallback();for(let t of this.allSubs)t.remove(),this.allSubs.delete(t);for(let t of this.tplProcessors)this.tplProcessors.delete(t)},100))}static reg(t,e=!1){if(t||(N++,t=`${l.AUTO_TAG_PRFX}-${N}`),this.__tag=t,window.customElements.get(t)){console.warn(`${t} - is already in "customElements" registry`);return}window.customElements.define(t,e?class extends this{}:this)}static get is(){return this.__tag||this.reg(),this.__tag}static bindAttributes(t){this.observedAttributes=Object.keys(t),this.__attrDesc=t}attributeChangedCallback(t,e,s){if(e===s)return;let i=this.constructor.__attrDesc[t];i?this.__dataCtxInitialized?this.$[i]=s:this.init$[i]=s:this[t]=s}getCssData(t,e=!1){if(this.__cssDataCache||(this.__cssDataCache=Object.create(null)),!Object.keys(this.__cssDataCache).includes(t)){this.__computedStyle||(this.__computedStyle=window.getComputedStyle(this));let s=this.__computedStyle.getPropertyValue(t).trim();s.startsWith("'")&&s.endsWith("'")&&(s=s.replace(/\'/g,'"'));try{this.__cssDataCache[t]=JSON.parse(s)}catch{!e&&console.warn(`CSS Data error: ${t}`),this.__cssDataCache[t]=null}}return this.__cssDataCache[t]}bindCssData(t,e=!0){let s=(e?l.EXT_DATA_CTX_PRFX:"")+t;return this.add(s,this.getCssData(t,!0)),s}dropCssDataCache(){this.__cssDataCache=null,this.__computedStyle=null}defineAccessor(t,e,s){let i="__"+t;this[i]=this[t],Object.defineProperty(this,t,{set:r=>{this[i]=r,s?window.setTimeout(()=>{e==null||e(r)}):e==null||e(r)},get:()=>this[i]}),this[t]=this[i]}static set shadowStyles(t){let e=new Blob([t],{type:"text/css"});this.__shadowStylesUrl=URL.createObjectURL(e)}},E=d;w(E,"template");var M="[Typed State] Wrong property name: ",G="[Typed State] Wrong property type: ",g=class{constructor(t,e){this.__typedSchema=t,this.__ctxId=e||_.generate(),this.__schema=Object.keys(t).reduce((s,i)=>(s[i]=t[i].value,s),{}),this.__data=n.registerNamedCtx(this.__ctxId,this.__schema)}get uid(){return this.__ctxId}setValue(t,e){if(!this.__typedSchema.hasOwnProperty(t)){console.warn(M+t);return}let s=this.__typedSchema[t];if((e==null?void 0:e.constructor)===s.type||s.nullable&&e===null){this.__data.pub(t,e);return}console.warn(G+t)}setMultipleValues(t){for(let e in t)this.setValue(e,t[e])}getValue(t){if(!this.__typedSchema.hasOwnProperty(t)){console.warn(M+t);return}return this.__data.read(t)}subscribe(t,e){return this.__data.sub(t,e)}remove(){this.__data.remove()}};var X=class{constructor(t){this.__typedSchema=t.typedSchema,this.__ctxId=t.ctxName||_.generate(),this.__data=n.registerNamedCtx(this.__ctxId,{}),this.__watchList=t.watchList||[],this.__handler=t.handler||null,this.__subsMap=Object.create(null),this.__observers=new Set,this.__items=new Set;let e=Object.create(null);this.__notifyObservers=(s,i)=>{this.__observeTimeout&&window.clearTimeout(this.__observeTimeout),e[s]||(e[s]=new Set),e[s].add(i),this.__observeTimeout=window.setTimeout(()=>{this.__observers.forEach(r=>{r({...e})}),e=Object.create(null)})}}notify(){this.__notifyTimeout&&window.clearTimeout(this.__notifyTimeout),this.__notifyTimeout=window.setTimeout(()=>{var t;(t=this.__handler)==null||t.call(this,[...this.__items])})}add(t){let e=new g(this.__typedSchema);for(let s in t)e.setValue(s,t[s]);return this.__data.add(e.uid,e),this.__watchList.forEach(s=>{this.__subsMap[e.uid]||(this.__subsMap[e.uid]=[]),this.__subsMap[e.uid].push(e.subscribe(s,()=>{this.__notifyObservers(s,e.uid)}))}),this.__items.add(e.uid),this.notify(),e}read(t){return this.__data.read(t)}readProp(t,e){return this.read(t).getValue(e)}publishProp(t,e,s){this.read(t).setValue(e,s)}remove(t){this.__items.delete(t),this.notify(),this.__data.pub(t,null),delete this.__subsMap[t]}clearAll(){this.__items.forEach(t=>{this.remove(t)})}observe(t){this.__observers.add(t)}unobserve(t){this.__observers.delete(t)}findItems(t){let e=[];return this.__items.forEach(s=>{let i=this.read(s);t(i)&&e.push(s)}),e}items(){return[...this.__items]}get size(){return this.__items.size}destroy(){this.__data.remove(),this.__observers=null;for(let t in this.__subsMap)this.__subsMap[t].forEach(e=>{e.remove()}),delete this.__subsMap[t]}};var p=class{static _print(t){console.warn(t)}static setDefaultTitle(t){this.defaultTitle=t}static setRoutingMap(t){Object.assign(this.appMap,t);for(let e in this.appMap)!this.defaultRoute&&this.appMap[e].default===!0?this.defaultRoute=e:!this.errorRoute&&this.appMap[e].error===!0&&(this.errorRoute=e)}static set routingEventName(t){this.__routingEventName=t}static get routingEventName(){return this.__routingEventName||"sym-on-route"}static readAddressBar(){let t={route:null,options:{}};return window.location.search.split(this.separator).forEach(s=>{if(s.includes("?"))t.route=s.replace("?","");else if(s.includes("=")){let i=s.split("=");t.options[i[0]]=decodeURI(i[1])}else t.options[s]=!0}),t}static notify(){let t=this.readAddressBar(),e=this.appMap[t.route];if(e&&e.title&&(document.title=e.title),t.route===null&&this.defaultRoute){this.applyRoute(this.defaultRoute);return}else if(!e&&this.errorRoute){this.applyRoute(this.errorRoute);return}else if(!e&&this.defaultRoute){this.applyRoute(this.defaultRoute);return}else if(!e){this._print(`Route "${t.route}" not found...`);return}let s=new CustomEvent(p.routingEventName,{detail:{route:t.route,options:Object.assign(e||{},t.options)}});window.dispatchEvent(s)}static reflect(t,e={}){let s=this.appMap[t];if(!s){this._print("Wrong route: "+t);return}let i="?"+t;for(let a in e)e[a]===!0?i+=this.separator+a:i+=this.separator+a+`=${e[a]}`;let r=s.title||this.defaultTitle||"";window.history.pushState(null,r,i),document.title=r}static applyRoute(t,e={}){this.reflect(t,e),this.notify()}static setSeparator(t){this._separator=t}static get separator(){return this._separator||"&"}static createRouterData(t,e){this.setRoutingMap(e);let s=n.registerNamedCtx(t,{route:null,options:null,title:null});return window.addEventListener(this.routingEventName,i=>{var r;s.multiPub({route:i.detail.route,options:i.detail.options,title:((r=i.detail.options)==null?void 0:r.title)||this.defaultTitle||""})}),p.notify(),s}};p.appMap=Object.create(null);window.onpopstate=()=>{p.notify()};function O(o,t){for(let e in t)e.includes("-")?o.style.setProperty(e,t[e]):o.style[e]=t[e]}function v(o,t){for(let e in t)t[e].constructor===Boolean?t[e]?o.setAttribute(e,""):o.removeAttribute(e):o.setAttribute(e,t[e])}function I(o={tag:"div"}){let t=document.createElement(o.tag);if(o.attributes&&v(t,o.attributes),o.styles&&O(t,o.styles),o.properties)for(let e in o.properties)t[e]=o.properties[e];return o.processors&&o.processors.forEach(e=>{e(t)}),o.children&&o.children.forEach(e=>{let s=I(e);t.appendChild(s)}),t}var k="idb-store-ready",K="symbiote-db",Y="symbiote-idb-update_",j=class{_notifyWhenReady(t=null){window.dispatchEvent(new CustomEvent(k,{detail:{dbName:this.name,storeName:this.storeName,event:t}}))}get _updEventName(){return Y+this.name}_getUpdateEvent(t){return new CustomEvent(this._updEventName,{detail:{key:this.name,newValue:t}})}_notifySubscribers(t){window.localStorage.removeItem(this.name),window.localStorage.setItem(this.name,t),window.dispatchEvent(this._getUpdateEvent(t))}constructor(t,e){this.name=t,this.storeName=e,this.version=1,this.request=window.indexedDB.open(this.name,this.version),this.request.onupgradeneeded=s=>{this.db=s.target.result,this.objStore=this.db.createObjectStore(e,{keyPath:"_key"}),this.objStore.transaction.oncomplete=i=>{this._notifyWhenReady(i)}},this.request.onsuccess=s=>{this.db=s.target.result,this._notifyWhenReady(s)},this.request.onerror=s=>{console.error(s)},this._subscriptionsMap={},this._updateHandler=s=>{s.key===this.name&&this._subscriptionsMap[s.newValue]&&this._subscriptionsMap[s.newValue].forEach(async r=>{r(await this.read(s.newValue))})},this._localUpdateHandler=s=>{this._updateHandler(s.detail)},window.addEventListener("storage",this._updateHandler),window.addEventListener(this._updEventName,this._localUpdateHandler)}read(t){let s=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).get(t);return new Promise((i,r)=>{s.onsuccess=a=>{var h;((h=a.target.result)==null?void 0:h._value)?i(a.target.result._value):(i(null),console.warn(`IDB: cannot read "${t}"`))},s.onerror=a=>{r(a)}})}write(t,e,s=!1){let i={_key:t,_value:e},a=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).put(i);return new Promise((h,m)=>{a.onsuccess=T=>{s||this._notifySubscribers(t),h(T.target.result)},a.onerror=T=>{m(T)}})}delete(t,e=!1){let i=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).delete(t);return new Promise((r,a)=>{i.onsuccess=h=>{e||this._notifySubscribers(t),r(h)},i.onerror=h=>{a(h)}})}getAll(){let e=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).getAll();return new Promise((s,i)=>{e.onsuccess=r=>{let a=r.target.result;s(a.map(h=>h._value))},e.onerror=r=>{i(r)}})}subscribe(t,e){this._subscriptionsMap[t]||(this._subscriptionsMap[t]=new Set);let s=this._subscriptionsMap[t];return s.add(e),{remove:()=>{s.delete(e),s.size||delete this._subscriptionsMap[t]}}}stop(){window.removeEventListener("storage",this._updateHandler),this._subscriptionsMap=null,x.clear(this.name)}},x=class{static get readyEventName(){return k}static open(t=K,e="store"){let s=t+"/"+e;return this._reg[s]||(this._reg[s]=new j(t,e)),this._reg[s]}static clear(t){window.indexedDB.deleteDatabase(t);for(let e in this._reg)e.split("/")[0]===t&&delete this._reg[e]}};w(x,"_reg",Object.create(null));export{p as AppRouter,E as BaseComponent,n as Data,x as IDB,X as TypedCollection,g as TypedData,_ as UID,v as applyAttributes,O as applyStyles,I as create};

package/core/BaseComponent.js

@@ -44,9 +44,6 @@ export class BaseComponent extends HTMLElement {
         this.constructor['__tpl'] = document.createElement('template');
         this.constructor['__tpl'].innerHTML = this.constructor['template'];
       }
-      while (!this.processInnerHtml && this.firstChild) {
-        this.firstChild.remove();
-      }
       if (template?.constructor === DocumentFragment) {
         fr = template;
       } else if (template?.constructor === String) {
@@ -281,7 +278,9 @@ export class BaseComponent extends HTMLElement {
       for (let proc of PROCESSORS) {
         this.addTemplateProcessor(proc);
       }
-      if (!this.pauseRender) {
+      if (this.pauseRender) {
+        this.__initCallback();
+      } else {
         this.render();
       }
     }

package/core/TypedCollection.js

@@ -184,6 +184,10 @@ export class TypedCollection {
     return [...this.__items];
   }
 
+  get size() {
+    return this.__items.size;
+  }
+
   destroy() {
     this.__data.remove();
     this.__observers = null;

package/core/tpl-processors.js

@@ -6,7 +6,7 @@ import { DICT } from './dictionary.js';
  * @param {T} fnCtx
  */
 function slotProcessor(fr, fnCtx) {
-  if (fnCtx.renderShadow) {
+  if (fnCtx.shadowRoot) {
     return;
   }
   let slots = [...fr.querySelectorAll('slot')];
@@ -39,8 +39,6 @@ function slotProcessor(fr, fnCtx) {
       mapObj.slot.parentNode.insertBefore(mapObj.fr, mapObj.slot);
       mapObj.slot.remove();
     });
-  } else {
-    !fnCtx.processInnerHtml && (fnCtx.innerHTML = '');
   }
 }
 
@@ -100,7 +98,21 @@ function domSetProcessor(fr, fnCtx) {
         dive();
       }
       for (let valKey of valKeysArr) {
+        /** @type {'single' | 'double'} */
+        let castType;
+        if (valKey.startsWith('!!')) {
+          castType = 'double';
+          valKey = valKey.replace('!!', '');
+        } else if (valKey.startsWith('!')) {
+          castType = 'single';
+          valKey = valKey.replace('!', '');
+        }
         fnCtx.sub(valKey, (val) => {
+          if (castType === 'double') {
+            val = !!val;
+          } else if (castType === 'single') {
+            val = !val;
+          }
           if (isAttr) {
             if (val?.constructor === Boolean) {
               val ? el.setAttribute(prop, '') : el.removeAttribute(prop);

package/package.json

@@ -25,7 +25,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "Symbiote.js",
   "author": "hello@symbiotejs.org",
   "license": "MIT",