@symbiotejs/symbiote 1.8.7 → 1.10.1

package/build/BaseComponent.min.js

@@ -1 +1 @@
-var X=Object.defineProperty;var O=(l,t,e)=>t in l?X(l,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):l[t]=e;var S=(l,t,e)=>(O(l,typeof t!="symbol"?t+"":t,e),e);function N(l){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(l)}var c=class{constructor(t){this.uid=Symbol(),this.name=t.name||null,t.schema.constructor===Object?this.store=N(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)?(c.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=!1){if(!s&&Object.keys(this.store).includes(t)){e!==this.store[t]&&this.notify(t);return}this.store[t]=e,this.notify(t)}pub(t,e){if(!this._storeIsProxy&&!this.store.hasOwnProperty(t)){c.warn("publish",t);return}this.store[t]=e,this.notify(t)}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)?(c.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 c.globalStore[this.uid]}static registerLocalCtx(t){let e=new c({schema:t});return c.globalStore[e.uid]=e,e}static registerNamedCtx(t,e){let s=c.globalStore[t];return s?console.warn('State: context name "'+t+'" already in use'):(s=new c({name:t,schema:e}),c.globalStore[t]=s),s}static clearNamedCtx(t){delete c.globalStore[t]}static getNamedCtx(t,e=!0){return c.globalStore[t]||(e&&console.warn('State: wrong context name - "'+t+'"'),null)}};c.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",REPEAT_ATTR:"repeat",REPEAT_ITEM_TAG_ATTR:"repeat-item-tag",SET_LATER_KEY:"__toSetLater__"});var y="1234567890QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm",$=y.length-1,g=class{static generate(t="XXXXXXXXX-XXX"){let e="";for(let s=0;s<t.length;s++)e+=t[s]==="-"?t[s]:y.charAt(Math.random()*$);return e}};function E(l,t,e){let s=!0,i,r=t.split(".");return r.forEach((n,h)=>{h<r.length-1?l=l[n]:i=n}),l?l[i]=e:s=!1,s}function x(l,t){[...l.querySelectorAll(`[${o.REPEAT_ATTR}]`)].forEach(e=>{let s=e.getAttribute(o.REPEAT_ITEM_TAG_ATTR),i;if(s&&(i=window.customElements.get(s)),!i){i=class extends t.BaseComponent{constructor(){super();s||(this.style.display="contents")}};let n=e.innerHTML;i.template=n,i.reg(s)}for(;e.firstChild;)e.firstChild.remove();let r=e.getAttribute(o.REPEAT_ATTR);t.sub(r,n=>{if(!n){for(;e.firstChild;)e.firstChild.remove();return}let h=[...e.children],f,b=u=>{u.forEach((a,p)=>{if(h[p])if(h[p].set$)h[p].set$(a);else for(let C in a)h[p][C]=a[C];else{f||(f=new DocumentFragment);let C=new i;Object.assign(C.init$,a),f.appendChild(C)}}),f&&e.appendChild(f);let d=h.slice(u.length,h.length);for(let a of d)a.remove()};if(n.constructor===Array)b(n);else if(n.constructor===Object){let u=[];for(let d in n){let a=n[d];Object.defineProperty(a,"_KEY_",{value:d,enumerable:!0}),u.push(a)}b(u)}else console.warn("Symbiote repeat data type error:"),console.log(n)}),e.removeAttribute(o.REPEAT_ATTR),e.removeAttribute(o.REPEAT_ITEM_TAG_ATTR)})}function I(l,t){if(t.shadowRoot)return;let e=[...l.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 n;let r=(n=i.getAttribute)==null?void 0:n.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(l,t){[...l.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 L(l,t){[...l.querySelectorAll(`[${o.BIND_ATTR}]`)].forEach(e=>{e.getAttribute(o.BIND_ATTR).split(";").forEach(r=>{if(!r)return;let n=r.split(":").map(u=>u.trim()),h=n[0],f;h.indexOf(o.ATTR_BIND_PRFX)===0&&(f=!0,h=h.replace(o.ATTR_BIND_PRFX,""));let b=n[1].split(",").map(u=>u.trim());for(let u of b){let d;u.startsWith("!!")?(d="double",u=u.replace("!!","")):u.startsWith("!")&&(d="single",u=u.replace("!","")),t.sub(u,a=>{d==="double"?a=!!a:d==="single"&&(a=!a),f?(a==null?void 0:a.constructor)===Boolean?a?e.setAttribute(h,""):e.removeAttribute(h):e.setAttribute(h,a):E(e,h,a)||(e[o.SET_LATER_KEY]||(e[o.SET_LATER_KEY]=Object.create(null)),e[o.SET_LATER_KEY][h]=a)})}}),e.removeAttribute(o.BIND_ATTR)})}var P="{{",A="}}",M="skip-text";function F(l){let t,e=[],s=document.createTreeWalker(l,NodeFilter.SHOW_TEXT,{acceptNode:i=>{var r;return!((r=i.parentElement)==null?void 0:r.hasAttribute(M))&&i.textContent.includes(P)&&i.textContent.includes(A)&&1}});for(;t=s.nextNode();)e.push(t);return e}var j=function(l,t){F(l).forEach(s=>{let i=[],r;for(;s.textContent.includes(A);)s.textContent.startsWith(P)?(r=s.textContent.indexOf(A)+A.length,s.splitText(r),i.push(s)):(r=s.textContent.indexOf(P),s.splitText(r)),s=s.nextSibling;i.forEach(n=>{let h=n.textContent.replace(P,"").replace(A,"");t.sub(h,f=>{n.textContent=f})})})},R=[x,I,k,L,j];var w=0,m=null,_=null,T=class extends HTMLElement{constructor(){super();S(this,"updateCssData",()=>{var t;this.dropCssDataCache(),(t=this.__boundCssProps)==null||t.forEach(e=>{let s=this.getCssData(this.__extractCssName(e),!0);this.$[e]!==s&&(this.$[e]=s)})});this.init$=Object.create(null),this.cssInit$=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 BaseComponent(){return T}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)}get autoCtxName(){return this.__autoCtxName||(this.__autoCtxName=g.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=c.registerLocalCtx({})),this.__localCtx}get nodeCtx(){return c.getNamedCtx(this.ctxName,!1)||c.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=c.getNamedCtx(r[0]),i=r[1]}else s=e.localCtx,i=t;return{ctx:s,name:i}}sub(t,e){let s=T.__parseProp(t,this);s.ctx.has(t)?this.allSubs.add(s.ctx.sub(s.name,e)):window.setTimeout(()=>{this.allSubs.add(s.ctx.sub(s.name,e))})}notify(t){let e=T.__parseProp(t,this);e.ctx.notify(e.name)}has(t){let e=T.__parseProp(t,this);return e.ctx.has(e.name)}add(t,e){let s=T.__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=T.__parseProp(s,this);return r.ctx.pub(r.name,i),!0},get:(e,s)=>{let i=T.__parseProp(s,this);return i.ctx.read(i.name)}})}return this.__stateProxy}set$(t,e=!1){for(let s in t){let i=t[s];e||![String,Number,Boolean].includes(i==null?void 0:i.constructor)?this.$[s]=i:this.$[s]!==i&&(this.$[s]=i)}}__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 n=c.getNamedCtx(i,!1);n||(n=c.registerNamedCtx(i,{})),n.add(r,this.init$[e])}}else this.localCtx.add(e,this.init$[e]);for(let e in this.cssInit$)this.bindCssData(e,this.cssInit$[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();if(e&&this.style.setProperty(o.CSS_CTX_PROP,`'${e}'`),this.__initDataCtx(),this[o.SET_LATER_KEY]){for(let s in this[o.SET_LATER_KEY])E(this,s,this[o.SET_LATER_KEY][s]);delete this[o.SET_LATER_KEY]}this.initChildren=[...this.childNodes];for(let s of R)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);_==null||_.delete(this.updateCssData),(_==null?void 0:_.size)||(m==null||m.disconnect(),m=null,_=null)},100))}static reg(t,e=!1){if(t||(w++,t=`${o.AUTO_TAG_PRFX}-${w}`),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]}__extractCssName(t){return t.split("--").map((e,s)=>s===0?"":e).join("--")}__initStyleAttrObserver(){_||(_=new Set),_.add(this.updateCssData),m||(m=new MutationObserver(t=>{t[0].type==="attributes"&&_.forEach(e=>{e()})}),m.observe(document,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]}))}bindCssData(t,e=""){this.__boundCssProps||(this.__boundCssProps=new Set),this.__boundCssProps.add(t);let s=this.getCssData(this.__extractCssName(t),!0);s===null&&(s=e),this.add(t,s),this.__initStyleAttrObserver()}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)}},D=T;S(D,"template");export{D as BaseComponent};
+var O=Object.defineProperty;var N=(n,t,e)=>t in n?O(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var P=(n,t,e)=>(N(n,typeof t!="symbol"?t+"":t,e),e);function $(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 h=class{constructor(t){this.uid=Symbol(),this.name=t.name||null,t.schema.constructor===Object?this.store=$(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)?(h.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=!1){if(!s&&Object.keys(this.store).includes(t)){e!==this.store[t]&&this.notify(t);return}this.store[t]=e,this.notify(t)}pub(t,e){if(!this._storeIsProxy&&!this.store.hasOwnProperty(t)){h.warn("publish",t);return}this.store[t]=e,this.notify(t)}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)?(h.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 h.globalStore[this.uid]}static registerLocalCtx(t){let e=new h({schema:t});return h.globalStore[e.uid]=e,e}static registerNamedCtx(t,e){let s=h.globalStore[t];return s?console.warn('State: context name "'+t+'" already in use'):(s=new h({name:t,schema:e}),h.globalStore[t]=s),s}static clearNamedCtx(t){delete h.globalStore[t]}static getNamedCtx(t,e=!0){return h.globalStore[t]||(e&&console.warn('State: wrong context name - "'+t+'"'),null)}};h.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",REPEAT_ATTR:"repeat",REPEAT_ITEM_TAG_ATTR:"repeat-item-tag",SET_LATER_KEY:"__toSetLater__",USE_TPL:"use-template"});var g="1234567890QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm",k=g.length-1,y=class{static generate(t="XXXXXXXXX-XXX"){let e="";for(let s=0;s<t.length;s++)e+=t[s]==="-"?t[s]:g.charAt(Math.random()*k);return e}};function E(n,t,e){let s=!0,i,r=t.split(".");return r.forEach((l,a)=>{a<r.length-1?n=n[l]:i=l}),n?n[i]=e:s=!1,s}function x(n){return n.split("-").map((t,e)=>t&&e?t[0].toUpperCase()+t.slice(1):t).join("").split("_").map((t,e)=>t&&e?t.toUpperCase():t).join("")}function R(n,t){[...n.querySelectorAll(`[${o.REPEAT_ATTR}]`)].forEach(e=>{let s=e.getAttribute(o.REPEAT_ITEM_TAG_ATTR),i;if(s&&(i=window.customElements.get(s)),!i){i=class extends t.BaseComponent{constructor(){super();s||(this.style.display="contents")}};let l=e.innerHTML;i.template=l,i.reg(s)}for(;e.firstChild;)e.firstChild.remove();let r=e.getAttribute(o.REPEAT_ATTR);t.sub(r,l=>{if(!l){for(;e.firstChild;)e.firstChild.remove();return}let a=[...e.children],f,b=u=>{u.forEach((c,A)=>{if(a[A])if(a[A].set$)a[A].set$(c);else for(let C in c)a[A][C]=c[C];else{f||(f=new DocumentFragment);let C=new i;Object.assign(C.init$,c),f.appendChild(C)}}),f&&e.appendChild(f);let d=a.slice(u.length,a.length);for(let c of d)c.remove()};if(l.constructor===Array)b(l);else if(l.constructor===Object){let u=[];for(let d in l){let c=l[d];Object.defineProperty(c,"_KEY_",{value:d,enumerable:!0}),u.push(c)}b(u)}else console.warn("Symbiote repeat data type error:"),console.log(l)}),e.removeAttribute(o.REPEAT_ATTR),e.removeAttribute(o.REPEAT_ITEM_TAG_ATTR)})}function I(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 l;let r=(l=i.getAttribute)==null?void 0:l.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 L(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=>{let i=e.getAttribute(o.BIND_ATTR).split(";");[...e.attributes].forEach(r=>{if(r.name.startsWith("-")&&r.value){let l=x(r.name.replace("-",""));i.push(l+":"+r.value),e.removeAttribute(r.name)}}),i.forEach(r=>{if(!r)return;let l=r.split(":").map(u=>u.trim()),a=l[0],f;a.indexOf(o.ATTR_BIND_PRFX)===0&&(f=!0,a=a.replace(o.ATTR_BIND_PRFX,""));let b=l[1].split(",").map(u=>u.trim());for(let u of b){let d;u.startsWith("!!")?(d="double",u=u.replace("!!","")):u.startsWith("!")&&(d="single",u=u.replace("!","")),t.sub(u,c=>{d==="double"?c=!!c:d==="single"&&(c=!c),f?(c==null?void 0:c.constructor)===Boolean?c?e.setAttribute(a,""):e.removeAttribute(a):e.setAttribute(a,c):E(e,a,c)||(e[o.SET_LATER_KEY]||(e[o.SET_LATER_KEY]=Object.create(null)),e[o.SET_LATER_KEY][a]=c)})}}),e.removeAttribute(o.BIND_ATTR)})}var S="{{",p="}}",j="skip-text";function F(n){let t,e=[],s=document.createTreeWalker(n,NodeFilter.SHOW_TEXT,{acceptNode:i=>{var r;return!((r=i.parentElement)==null?void 0:r.hasAttribute(j))&&i.textContent.includes(S)&&i.textContent.includes(p)&&1}});for(;t=s.nextNode();)e.push(t);return e}var K=function(n,t){F(n).forEach(s=>{let i=[],r;for(;s.textContent.includes(p);)s.textContent.startsWith(S)?(r=s.textContent.indexOf(p)+p.length,s.splitText(r),i.push(s)):(r=s.textContent.indexOf(S),s.splitText(r)),s=s.nextSibling;i.forEach(l=>{let a=l.textContent.replace(S,"").replace(p,"");l.textContent="",t.sub(a,f=>{l.textContent=f})})})},w=[R,I,L,M,K];var D=0,m=null,_=null,T=class extends HTMLElement{constructor(){super();P(this,"updateCssData",()=>{var t;this.dropCssDataCache(),(t=this.__boundCssProps)==null||t.forEach(e=>{let s=this.getCssData(this.__extractCssName(e),!0);this.$[e]!==s&&(this.$[e]=s)})});this.init$=Object.create(null),this.cssInit$=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,this.allowCustomTemplate=!1}get BaseComponent(){return T}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.allowCustomTemplate){let r=this.getAttribute(o.USE_TPL);if(r){let l=this.getRootNode(),a=(l==null?void 0:l.querySelector(r))||document.querySelector(r);a?t=a.content.cloneNode(!0):console.warn(`Symbiote template "${r}" is not found...`)}}if(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)}get autoCtxName(){return this.__autoCtxName||(this.__autoCtxName=y.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=h.registerLocalCtx({})),this.__localCtx}get nodeCtx(){return h.getNamedCtx(this.ctxName,!1)||h.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=h.getNamedCtx(r[0]),i=r[1]}else s=e.localCtx,i=t;return{ctx:s,name:i}}sub(t,e){let s=T.__parseProp(t,this);s.ctx.has(t)?this.allSubs.add(s.ctx.sub(s.name,e)):window.setTimeout(()=>{this.allSubs.add(s.ctx.sub(s.name,e))})}notify(t){let e=T.__parseProp(t,this);e.ctx.notify(e.name)}has(t){let e=T.__parseProp(t,this);return e.ctx.has(e.name)}add(t,e){let s=T.__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=T.__parseProp(s,this);return r.ctx.pub(r.name,i),!0},get:(e,s)=>{let i=T.__parseProp(s,this);return i.ctx.read(i.name)}})}return this.__stateProxy}set$(t,e=!1){for(let s in t){let i=t[s];e||![String,Number,Boolean].includes(i==null?void 0:i.constructor)?this.$[s]=i:this.$[s]!==i&&(this.$[s]=i)}}__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 l=h.getNamedCtx(i,!1);l||(l=h.registerNamedCtx(i,{})),l.add(r,this.init$[e])}}else this.localCtx.add(e,this.init$[e]);for(let e in this.cssInit$)this.bindCssData(e,this.cssInit$[e]);this.__dataCtxInitialized=!0}connectedCallback(){var t;if(!!this.isConnected){if(this.__disconnectTimeout&&window.clearTimeout(this.__disconnectTimeout),!this.connectedOnce){let e=(t=this.getAttribute(o.CTX_NAME_ATTR))==null?void 0:t.trim();if(e&&this.style.setProperty(o.CSS_CTX_PROP,`'${e}'`),this.__initDataCtx(),this[o.SET_LATER_KEY]){for(let s in this[o.SET_LATER_KEY])E(this,s,this[o.SET_LATER_KEY][s]);delete this[o.SET_LATER_KEY]}this.initChildren=[...this.childNodes];for(let s of w)this.addTemplateProcessor(s);this.pauseRender?this.__initCallback():this.render()}this.connectedOnce=!0}}destroyCallback(){}disconnectedCallback(){!this.connectedOnce||(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);_==null||_.delete(this.updateCssData),(_==null?void 0:_.size)||(m==null||m.disconnect(),m=null,_=null)},100)))}static reg(t,e=!1){if(t||(D++,t=`${o.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){var r;if(e===s)return;let i=(r=this.constructor.__attrDesc)==null?void 0:r[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]}__extractCssName(t){return t.split("--").map((e,s)=>s===0?"":e).join("--")}__initStyleAttrObserver(){_||(_=new Set),_.add(this.updateCssData),m||(m=new MutationObserver(t=>{t[0].type==="attributes"&&_.forEach(e=>{e()})}),m.observe(document,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]}))}bindCssData(t,e=""){this.__boundCssProps||(this.__boundCssProps=new Set),this.__boundCssProps.add(t);let s=this.getCssData(this.__extractCssName(t),!0);s===null&&(s=e),this.add(t,s),this.__initStyleAttrObserver()}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)}},X=T;P(X,"template");export{X as BaseComponent};

package/build/symbiote.d.ts

@@ -67,6 +67,7 @@ export class BaseComponent<S> extends HTMLElement {
 	renderShadow: boolean;
 	readyToDestroy: boolean;
 	processInnerHtml: boolean;
+	allowCustomTemplate: boolean;
 	get autoCtxName(): string;
 	private __autoCtxName;
 	get cssCtxName(): string;
@@ -102,69 +103,6 @@ export class BaseComponent<S> extends HTMLElement {
 	dropCssDataCache(): void;
 	defineAccessor(propName: string, handler?: Function, isAsync?: boolean): void;
 }
-export class TypedData {
-	constructor(typedSchema: {
-		[x: string]: {
-			type: any;
-			value: any;
-			nullable?: boolean;
-		};
-	}, ctxName?: string);
-	private __typedSchema;
-	private __ctxId;
-	private __schema;
-	private __data;
-	get uid(): string;
-	setValue(prop: string, value: any): void;
-	setMultipleValues(updObj: {
-		[x: string]: any;
-	}): void;
-	getValue(prop: string): any;
-	subscribe(prop: string, handler: (newVal: any) => void): {
-		remove: () => void;
-		callback: Function;
-	};
-	remove(): void;
-}
-export class TypedCollection {
-	constructor(options: {
-		typedSchema: {
-			[x: string]: {
-				type: any;
-				value: any;
-			};
-		};
-		watchList?: string[];
-		handler?: (list: string[]) => void;
-		ctxName?: string;
-	});
-	private __typedSchema;
-	private __ctxId;
-	private __data;
-	private __watchList;
-	private __handler;
-	private __subsMap;
-	private __observers;
-	private __items;
-	private __notifyObservers;
-	private __observeTimeout;
-	notify(): void;
-	private __notifyTimeout;
-	add(init: {
-		[x: string]: any;
-	}): any;
-	read(id: string): TypedData;
-	readProp(id: string, propName: string): any;
-	publishProp<T>(id: string, propName: string, value: T): void;
-	remove(id: string): void;
-	clearAll(): void;
-	observe(handler: Function): void;
-	unobserve(handler: Function): void;
-	findItems(checkFn: (item: TypedData) => boolean): string[];
-	items(): string[];
-	get size(): number;
-	destroy(): void;
-}
 export class AppRouter {
 	private static _print;
 	static setDefaultTitle(title: string): void;
@@ -189,6 +127,8 @@ export class AppRouter {
 	static createRouterData(ctxName: string, routingMap: {
 		[x: string]: {};
 	}): Data;
+	static initPopstateListener(): void;
+	static removePopstateListener(): void;
 }
 export namespace AppRouter {
 	const defaultTitle: string;
@@ -196,6 +136,7 @@ export namespace AppRouter {
 	const errorRoute: string;
 	const __routingEventName: string;
 	const _separator: string;
+	function __onPopstate(): void;
 	const appMap: any;
 }
 export class UID {
@@ -232,6 +173,7 @@ declare class DbInstance {
 	};
 	stop(): void;
 }
+export function kebabToCamel(string: string): string;
 export function applyStyles<T extends HTMLElement | SVGElement>(el: T, styleMap: StyleMap): void;
 export function applyAttributes<T extends HTMLElement | SVGElement>(el: T, attrMap: AttrMap): void;
 export function create(desc?: ElementDescriptor): any;

package/build/symbiote.js

@@ -139,7 +139,8 @@ var DICT = Object.freeze({
   AUTO_TAG_PRFX: "sym",
   REPEAT_ATTR: "repeat",
   REPEAT_ITEM_TAG_ATTR: "repeat-item-tag",
-  SET_LATER_KEY: "__toSetLater__"
+  SET_LATER_KEY: "__toSetLater__",
+  USE_TPL: "use-template"
 });
 
 // utils/UID.js
@@ -175,6 +176,15 @@ function setNestedProp(parent, path, value) {
   return success;
 }
 
+// utils/kebabToCamel.js
+function kebabToCamel(string) {
+  return string.split("-").map((p, i) => {
+    return p && i ? p[0].toUpperCase() + p.slice(1) : p;
+  }).join("").split("_").map((p, i) => {
+    return p && i ? p.toUpperCase() : p;
+  }).join("");
+}
+
 // core/repeatProcessor.js
 function repeatProcessor(fr, fnCtx) {
   [...fr.querySelectorAll(`[${DICT.REPEAT_ATTR}]`)].forEach((el) => {
@@ -306,6 +316,13 @@ function domSetProcessor(fr, fnCtx) {
   [...fr.querySelectorAll(`[${DICT.BIND_ATTR}]`)].forEach((el) => {
     let subStr = el.getAttribute(DICT.BIND_ATTR);
     let keyValArr = subStr.split(";");
+    [...el.attributes].forEach((attr) => {
+      if (attr.name.startsWith("-") && attr.value) {
+        let key = kebabToCamel(attr.name.replace("-", ""));
+        keyValArr.push(key + ":" + attr.value);
+        el.removeAttribute(attr.name);
+      }
+    });
     keyValArr.forEach((keyValStr) => {
       if (!keyValStr) {
         return;
@@ -390,6 +407,7 @@ var txtNodesProcessor = function(fr, fnCtx) {
     }
     tokenNodes.forEach((tNode) => {
       let prop = tNode.textContent.replace(OPEN_TOKEN, "").replace(CLOSE_TOKEN, "");
+      tNode.textContent = "";
       fnCtx.sub(prop, (val) => {
         tNode.textContent = val;
       });
@@ -422,6 +440,7 @@ var _BaseComponent = class extends HTMLElement {
     this.renderShadow = false;
     this.readyToDestroy = true;
     this.processInnerHtml = false;
+    this.allowCustomTemplate = false;
   }
   get BaseComponent() {
     return _BaseComponent;
@@ -443,6 +462,18 @@ var _BaseComponent = class extends HTMLElement {
         mode: "open"
       });
     }
+    if (this.allowCustomTemplate) {
+      let customTplSelector = this.getAttribute(DICT.USE_TPL);
+      if (customTplSelector) {
+        let root = this.getRootNode();
+        let customTpl = (root == null ? void 0 : root.querySelector(customTplSelector)) || document.querySelector(customTplSelector);
+        if (customTpl) {
+          template = customTpl.content.cloneNode(true);
+        } else {
+          console.warn(`Symbiote template "${customTplSelector}" is not found...`);
+        }
+      }
+    }
     if (this.processInnerHtml) {
       for (let fn of this.tplProcessors) {
         fn(this, this);
@@ -615,6 +646,9 @@ var _BaseComponent = class extends HTMLElement {
   }
   connectedCallback() {
     var _a;
+    if (!this.isConnected) {
+      return;
+    }
     if (this.__disconnectTimeout) {
       window.clearTimeout(this.__disconnectTimeout);
     }
@@ -645,6 +679,9 @@ var _BaseComponent = class extends HTMLElement {
   destroyCallback() {
   }
   disconnectedCallback() {
+    if (!this.connectedOnce) {
+      return;
+    }
     this.dropCssDataCache();
     if (!this.readyToDestroy) {
       return;
@@ -693,10 +730,11 @@ var _BaseComponent = class extends HTMLElement {
     this.__attrDesc = desc;
   }
   attributeChangedCallback(name, oldVal, newVal) {
+    var _a;
     if (oldVal === newVal) {
       return;
     }
-    let $prop = this.constructor["__attrDesc"][name];
+    let $prop = (_a = this.constructor["__attrDesc"]) == null ? void 0 : _a[name];
     if ($prop) {
       if (this.__dataCtxInitialized) {
         this.$[$prop] = newVal;
@@ -796,165 +834,6 @@ var _BaseComponent = class extends HTMLElement {
 var BaseComponent = _BaseComponent;
 __publicField(BaseComponent, "template");
 
-// core/TypedData.js
-var MSG_NAME = "[Typed State] Wrong property name: ";
-var MSG_TYPE = "[Typed State] Wrong property type: ";
-var TypedData = class {
-  constructor(typedSchema, ctxName) {
-    this.__typedSchema = typedSchema;
-    this.__ctxId = ctxName || UID.generate();
-    this.__schema = Object.keys(typedSchema).reduce((acc, key) => {
-      acc[key] = typedSchema[key].value;
-      return acc;
-    }, {});
-    this.__data = Data.registerNamedCtx(this.__ctxId, this.__schema);
-  }
-  get uid() {
-    return this.__ctxId;
-  }
-  setValue(prop, value) {
-    if (!this.__typedSchema.hasOwnProperty(prop)) {
-      console.warn(MSG_NAME + prop);
-      return;
-    }
-    let pDesc = this.__typedSchema[prop];
-    if ((value == null ? void 0 : value.constructor) === pDesc.type || pDesc.nullable && value === null) {
-      this.__data.pub(prop, value);
-      return;
-    }
-    console.warn(MSG_TYPE + prop);
-  }
-  setMultipleValues(updObj) {
-    for (let prop in updObj) {
-      this.setValue(prop, updObj[prop]);
-    }
-  }
-  getValue(prop) {
-    if (!this.__typedSchema.hasOwnProperty(prop)) {
-      console.warn(MSG_NAME + prop);
-      return void 0;
-    }
-    return this.__data.read(prop);
-  }
-  subscribe(prop, handler) {
-    return this.__data.sub(prop, handler);
-  }
-  remove() {
-    this.__data.remove();
-  }
-};
-
-// core/TypedCollection.js
-var TypedCollection = class {
-  constructor(options) {
-    this.__typedSchema = options.typedSchema;
-    this.__ctxId = options.ctxName || UID.generate();
-    this.__data = Data.registerNamedCtx(this.__ctxId, {});
-    this.__watchList = options.watchList || [];
-    this.__handler = options.handler || null;
-    this.__subsMap = Object.create(null);
-    this.__observers = /* @__PURE__ */ new Set();
-    this.__items = /* @__PURE__ */ new Set();
-    let changeMap = Object.create(null);
-    this.__notifyObservers = (propName, ctxId) => {
-      if (this.__observeTimeout) {
-        window.clearTimeout(this.__observeTimeout);
-      }
-      if (!changeMap[propName]) {
-        changeMap[propName] = /* @__PURE__ */ new Set();
-      }
-      changeMap[propName].add(ctxId);
-      this.__observeTimeout = window.setTimeout(() => {
-        this.__observers.forEach((handler) => {
-          handler({ ...changeMap });
-        });
-        changeMap = Object.create(null);
-      });
-    };
-  }
-  notify() {
-    if (this.__notifyTimeout) {
-      window.clearTimeout(this.__notifyTimeout);
-    }
-    this.__notifyTimeout = window.setTimeout(() => {
-      var _a;
-      (_a = this.__handler) == null ? void 0 : _a.call(this, [...this.__items]);
-    });
-  }
-  add(init) {
-    let item = new TypedData(this.__typedSchema);
-    for (let prop in init) {
-      item.setValue(prop, init[prop]);
-    }
-    this.__data.add(item.uid, item);
-    this.__watchList.forEach((propName) => {
-      if (!this.__subsMap[item.uid]) {
-        this.__subsMap[item.uid] = [];
-      }
-      this.__subsMap[item.uid].push(item.subscribe(propName, () => {
-        this.__notifyObservers(propName, item.uid);
-      }));
-    });
-    this.__items.add(item.uid);
-    this.notify();
-    return item;
-  }
-  read(id) {
-    return this.__data.read(id);
-  }
-  readProp(id, propName) {
-    let item = this.read(id);
-    return item.getValue(propName);
-  }
-  publishProp(id, propName, value) {
-    let item = this.read(id);
-    item.setValue(propName, value);
-  }
-  remove(id) {
-    this.__items.delete(id);
-    this.notify();
-    this.__data.pub(id, null);
-    delete this.__subsMap[id];
-  }
-  clearAll() {
-    this.__items.forEach((id) => {
-      this.remove(id);
-    });
-  }
-  observe(handler) {
-    this.__observers.add(handler);
-  }
-  unobserve(handler) {
-    this.__observers.delete(handler);
-  }
-  findItems(checkFn) {
-    let result = [];
-    this.__items.forEach((id) => {
-      let item = this.read(id);
-      if (checkFn(item)) {
-        result.push(id);
-      }
-    });
-    return result;
-  }
-  items() {
-    return [...this.__items];
-  }
-  get size() {
-    return this.__items.size;
-  }
-  destroy() {
-    this.__data.remove();
-    this.__observers = null;
-    for (let id in this.__subsMap) {
-      this.__subsMap[id].forEach((sub) => {
-        sub.remove();
-      });
-      delete this.__subsMap[id];
-    }
-  }
-};
-
 // core/AppRouter.js
 var AppRouter = class {
   static _print(msg) {
@@ -1068,13 +947,24 @@ var AppRouter = class {
       });
     });
     AppRouter.notify();
+    this.initPopstateListener();
     return routeData;
   }
+  static initPopstateListener() {
+    if (this.__onPopstate) {
+      return;
+    }
+    this.__onPopstate = () => {
+      this.notify();
+    };
+    window.addEventListener("popstate", this.__onPopstate);
+  }
+  static removePopstateListener() {
+    window.removeEventListener("popstate", this.__onPopstate);
+    this.__onPopstate = null;
+  }
 };
 AppRouter.appMap = Object.create(null);
-window.onpopstate = () => {
-  AppRouter.notify();
-};
 
 // utils/dom-helpers.js
 function applyStyles(el, styleMap) {
@@ -1306,11 +1196,10 @@ export {
   BaseComponent,
   Data,
   IDB,
-  TypedCollection,
-  TypedData,
   UID,
   applyAttributes,
   applyStyles,
   create,
+  kebabToCamel,
   setNestedProp
 };

package/build/symbiote.min.js

@@ -1 +1 @@
-var F=Object.defineProperty;var B=(o,t,e)=>t in o?F(o,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[t]=e;var C=(o,t,e)=>(B(o,typeof t!="symbol"?t+"":t,e),e);function U(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 h=class{constructor(t){this.uid=Symbol(),this.name=t.name||null,t.schema.constructor===Object?this.store=U(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)?(h.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=!1){if(!s&&Object.keys(this.store).includes(t)){e!==this.store[t]&&this.notify(t);return}this.store[t]=e,this.notify(t)}pub(t,e){if(!this._storeIsProxy&&!this.store.hasOwnProperty(t)){h.warn("publish",t);return}this.store[t]=e,this.notify(t)}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)?(h.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 h.globalStore[this.uid]}static registerLocalCtx(t){let e=new h({schema:t});return h.globalStore[e.uid]=e,e}static registerNamedCtx(t,e){let s=h.globalStore[t];return s?console.warn('State: context name "'+t+'" already in use'):(s=new h({name:t,schema:e}),h.globalStore[t]=s),s}static clearNamedCtx(t){delete h.globalStore[t]}static getNamedCtx(t,e=!0){return h.globalStore[t]||(e&&console.warn('State: wrong context name - "'+t+'"'),null)}};h.globalStore=Object.create(null);var a=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",REPEAT_ATTR:"repeat",REPEAT_ITEM_TAG_ATTR:"repeat-item-tag",SET_LATER_KEY:"__toSetLater__"});var D="1234567890QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm",H=D.length-1,b=class{static generate(t="XXXXXXXXX-XXX"){let e="";for(let s=0;s<t.length;s++)e+=t[s]==="-"?t[s]:D.charAt(Math.random()*H);return e}};function w(o,t,e){let s=!0,i,r=t.split(".");return r.forEach((n,l)=>{l<r.length-1?o=o[n]:i=n}),o?o[i]=e:s=!1,s}function N(o,t){[...o.querySelectorAll(`[${a.REPEAT_ATTR}]`)].forEach(e=>{let s=e.getAttribute(a.REPEAT_ITEM_TAG_ATTR),i;if(s&&(i=window.customElements.get(s)),!i){i=class extends t.BaseComponent{constructor(){super();s||(this.style.display="contents")}};let n=e.innerHTML;i.template=n,i.reg(s)}for(;e.firstChild;)e.firstChild.remove();let r=e.getAttribute(a.REPEAT_ATTR);t.sub(r,n=>{if(!n){for(;e.firstChild;)e.firstChild.remove();return}let l=[...e.children],_,m=c=>{c.forEach((u,g)=>{if(l[g])if(l[g].set$)l[g].set$(u);else for(let y in u)l[g][y]=u[y];else{_||(_=new DocumentFragment);let y=new i;Object.assign(y.init$,u),_.appendChild(y)}}),_&&e.appendChild(_);let f=l.slice(c.length,l.length);for(let u of f)u.remove()};if(n.constructor===Array)m(n);else if(n.constructor===Object){let c=[];for(let f in n){let u=n[f];Object.defineProperty(u,"_KEY_",{value:f,enumerable:!0}),c.push(u)}m(c)}else console.warn("Symbiote repeat data type error:"),console.log(n)}),e.removeAttribute(a.REPEAT_ATTR),e.removeAttribute(a.REPEAT_ITEM_TAG_ATTR)})}function K(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 n;let r=(n=i.getAttribute)==null?void 0:n.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(`[${a.EL_REF_ATTR}]`)].forEach(e=>{let s=e.getAttribute(a.EL_REF_ATTR);t.ref[s]=e,e.removeAttribute(a.EL_REF_ATTR)})}function V(o,t){[...o.querySelectorAll(`[${a.BIND_ATTR}]`)].forEach(e=>{e.getAttribute(a.BIND_ATTR).split(";").forEach(r=>{if(!r)return;let n=r.split(":").map(c=>c.trim()),l=n[0],_;l.indexOf(a.ATTR_BIND_PRFX)===0&&(_=!0,l=l.replace(a.ATTR_BIND_PRFX,""));let m=n[1].split(",").map(c=>c.trim());for(let c of m){let f;c.startsWith("!!")?(f="double",c=c.replace("!!","")):c.startsWith("!")&&(f="single",c=c.replace("!","")),t.sub(c,u=>{f==="double"?u=!!u:f==="single"&&(u=!u),_?(u==null?void 0:u.constructor)===Boolean?u?e.setAttribute(l,""):e.removeAttribute(l):e.setAttribute(l,u):w(e,l,u)||(e[a.SET_LATER_KEY]||(e[a.SET_LATER_KEY]=Object.create(null)),e[a.SET_LATER_KEY][l]=u)})}}),e.removeAttribute(a.BIND_ATTR)})}var S="{{",A="}}",q="skip-text";function z(o){let t,e=[],s=document.createTreeWalker(o,NodeFilter.SHOW_TEXT,{acceptNode:i=>{var r;return!((r=i.parentElement)==null?void 0:r.hasAttribute(q))&&i.textContent.includes(S)&&i.textContent.includes(A)&&1}});for(;t=s.nextNode();)e.push(t);return e}var Y=function(o,t){z(o).forEach(s=>{let i=[],r;for(;s.textContent.includes(A);)s.textContent.startsWith(S)?(r=s.textContent.indexOf(A)+A.length,s.splitText(r),i.push(s)):(r=s.textContent.indexOf(S),s.splitText(r)),s=s.nextSibling;i.forEach(n=>{let l=n.textContent.replace(S,"").replace(A,"");t.sub(l,_=>{n.textContent=_})})})},v=[N,K,W,V,Y];var O=0,T=null,d=null,p=class extends HTMLElement{constructor(){super();C(this,"updateCssData",()=>{var t;this.dropCssDataCache(),(t=this.__boundCssProps)==null||t.forEach(e=>{let s=this.getCssData(this.__extractCssName(e),!0);this.$[e]!==s&&(this.$[e]=s)})});this.init$=Object.create(null),this.cssInit$=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 BaseComponent(){return p}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)}get autoCtxName(){return this.__autoCtxName||(this.__autoCtxName=b.generate(),this.style.setProperty(a.CSS_CTX_PROP,`'${this.__autoCtxName}'`)),this.__autoCtxName}get cssCtxName(){return this.getCssData(a.CSS_CTX_PROP,!0)}get ctxName(){var t;return((t=this.getAttribute(a.CTX_NAME_ATTR))==null?void 0:t.trim())||this.cssCtxName||this.autoCtxName}get localCtx(){return this.__localCtx||(this.__localCtx=h.registerLocalCtx({})),this.__localCtx}get nodeCtx(){return h.getNamedCtx(this.ctxName,!1)||h.registerNamedCtx(this.ctxName,{})}static __parseProp(t,e){let s,i;if(t.startsWith(a.EXT_DATA_CTX_PRFX))s=e.nodeCtx,i=t.replace(a.EXT_DATA_CTX_PRFX,"");else if(t.includes(a.NAMED_DATA_CTX_SPLTR)){let r=t.split(a.NAMED_DATA_CTX_SPLTR);s=h.getNamedCtx(r[0]),i=r[1]}else s=e.localCtx,i=t;return{ctx:s,name:i}}sub(t,e){let s=p.__parseProp(t,this);s.ctx.has(t)?this.allSubs.add(s.ctx.sub(s.name,e)):window.setTimeout(()=>{this.allSubs.add(s.ctx.sub(s.name,e))})}notify(t){let e=p.__parseProp(t,this);e.ctx.notify(e.name)}has(t){let e=p.__parseProp(t,this);return e.ctx.has(e.name)}add(t,e){let s=p.__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=p.__parseProp(s,this);return r.ctx.pub(r.name,i),!0},get:(e,s)=>{let i=p.__parseProp(s,this);return i.ctx.read(i.name)}})}return this.__stateProxy}set$(t,e=!1){for(let s in t){let i=t[s];e||![String,Number,Boolean].includes(i==null?void 0:i.constructor)?this.$[s]=i:this.$[s]!==i&&(this.$[s]=i)}}__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(a.EXT_DATA_CTX_PRFX))this.nodeCtx.add(e.replace(a.EXT_DATA_CTX_PRFX,""),this.init$[e]);else if(e.includes(a.NAMED_DATA_CTX_SPLTR)){let s=e.split(a.NAMED_DATA_CTX_SPLTR),i=s[0].trim(),r=s[1].trim();if(i&&r){let n=h.getNamedCtx(i,!1);n||(n=h.registerNamedCtx(i,{})),n.add(r,this.init$[e])}}else this.localCtx.add(e,this.init$[e]);for(let e in this.cssInit$)this.bindCssData(e,this.cssInit$[e]);this.__dataCtxInitialized=!0}connectedCallback(){var t;if(this.__disconnectTimeout&&window.clearTimeout(this.__disconnectTimeout),!this.connectedOnce){let e=(t=this.getAttribute(a.CTX_NAME_ATTR))==null?void 0:t.trim();if(e&&this.style.setProperty(a.CSS_CTX_PROP,`'${e}'`),this.__initDataCtx(),this[a.SET_LATER_KEY]){for(let s in this[a.SET_LATER_KEY])w(this,s,this[a.SET_LATER_KEY][s]);delete this[a.SET_LATER_KEY]}this.initChildren=[...this.childNodes];for(let s of v)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);d==null||d.delete(this.updateCssData),(d==null?void 0:d.size)||(T==null||T.disconnect(),T=null,d=null)},100))}static reg(t,e=!1){if(t||(O++,t=`${a.AUTO_TAG_PRFX}-${O}`),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]}__extractCssName(t){return t.split("--").map((e,s)=>s===0?"":e).join("--")}__initStyleAttrObserver(){d||(d=new Set),d.add(this.updateCssData),T||(T=new MutationObserver(t=>{t[0].type==="attributes"&&d.forEach(e=>{e()})}),T.observe(document,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]}))}bindCssData(t,e=""){this.__boundCssProps||(this.__boundCssProps=new Set),this.__boundCssProps.add(t);let s=this.getCssData(this.__extractCssName(t),!0);s===null&&(s=e),this.add(t,s),this.__initStyleAttrObserver()}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;C(R,"template");var M="[Typed State] Wrong property name: ",G="[Typed State] Wrong property type: ",x=class{constructor(t,e){this.__typedSchema=t,this.__ctxId=e||b.generate(),this.__schema=Object.keys(t).reduce((s,i)=>(s[i]=t[i].value,s),{}),this.__data=h.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||b.generate(),this.__data=h.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 x(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 E=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(E.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 n in e)e[n]===!0?i+=this.separator+n:i+=this.separator+n+`=${e[n]}`;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=h.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||""})}),E.notify(),s}};E.appMap=Object.create(null);window.onpopstate=()=>{E.notify()};function I(o,t){for(let e in t)e.includes("-")?o.style.setProperty(e,t[e]):o.style[e]=t[e]}function L(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={tag:"div"}){let t=document.createElement(o.tag);if(o.attributes&&L(t,o.attributes),o.styles&&I(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=$(e);t.appendChild(s)}),t}var j="idb-store-ready",J="symbiote-db",Q="symbiote-idb-update_",k=class{_notifyWhenReady(t=null){window.dispatchEvent(new CustomEvent(j,{detail:{dbName:this.name,storeName:this.storeName,event:t}}))}get _updEventName(){return Q+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=n=>{var l;((l=n.target.result)==null?void 0:l._value)?i(n.target.result._value):(i(null),console.warn(`IDB: cannot read "${t}"`))},s.onerror=n=>{r(n)}})}write(t,e,s=!1){let i={_key:t,_value:e},n=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).put(i);return new Promise((l,_)=>{n.onsuccess=m=>{s||this._notifySubscribers(t),l(m.target.result)},n.onerror=m=>{_(m)}})}delete(t,e=!1){let i=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).delete(t);return new Promise((r,n)=>{i.onsuccess=l=>{e||this._notifySubscribers(t),r(l)},i.onerror=l=>{n(l)}})}getAll(){let e=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).getAll();return new Promise((s,i)=>{e.onsuccess=r=>{let n=r.target.result;s(n.map(l=>l._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,P.clear(this.name)}},P=class{static get readyEventName(){return j}static open(t=J,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]}};C(P,"_reg",Object.create(null));export{E as AppRouter,R as BaseComponent,h as Data,P as IDB,X as TypedCollection,x as TypedData,b as UID,L as applyAttributes,I as applyStyles,$ as create,w as setNestedProp};
+var j=Object.defineProperty;var k=(o,t,e)=>t in o?j(o,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[t]=e;var E=(o,t,e)=>(k(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 c=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)?(c.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=!1){if(!s&&Object.keys(this.store).includes(t)){e!==this.store[t]&&this.notify(t);return}this.store[t]=e,this.notify(t)}pub(t,e){if(!this._storeIsProxy&&!this.store.hasOwnProperty(t)){c.warn("publish",t);return}this.store[t]=e,this.notify(t)}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)?(c.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 c.globalStore[this.uid]}static registerLocalCtx(t){let e=new c({schema:t});return c.globalStore[e.uid]=e,e}static registerNamedCtx(t,e){let s=c.globalStore[t];return s?console.warn('State: context name "'+t+'" already in use'):(s=new c({name:t,schema:e}),c.globalStore[t]=s),s}static clearNamedCtx(t){delete c.globalStore[t]}static getNamedCtx(t,e=!0){return c.globalStore[t]||(e&&console.warn('State: wrong context name - "'+t+'"'),null)}};c.globalStore=Object.create(null);var a=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",REPEAT_ATTR:"repeat",REPEAT_ITEM_TAG_ATTR:"repeat-item-tag",SET_LATER_KEY:"__toSetLater__",USE_TPL:"use-template"});var D="1234567890QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm",B=D.length-1,y=class{static generate(t="XXXXXXXXX-XXX"){let e="";for(let s=0;s<t.length;s++)e+=t[s]==="-"?t[s]:D.charAt(Math.random()*B);return e}};function A(o,t,e){let s=!0,i,r=t.split(".");return r.forEach((n,l)=>{l<r.length-1?o=o[n]:i=n}),o?o[i]=e:s=!1,s}function x(o){return o.split("-").map((t,e)=>t&&e?t[0].toUpperCase()+t.slice(1):t).join("").split("_").map((t,e)=>t&&e?t.toUpperCase():t).join("")}function N(o,t){[...o.querySelectorAll(`[${a.REPEAT_ATTR}]`)].forEach(e=>{let s=e.getAttribute(a.REPEAT_ITEM_TAG_ATTR),i;if(s&&(i=window.customElements.get(s)),!i){i=class extends t.BaseComponent{constructor(){super();s||(this.style.display="contents")}};let n=e.innerHTML;i.template=n,i.reg(s)}for(;e.firstChild;)e.firstChild.remove();let r=e.getAttribute(a.REPEAT_ATTR);t.sub(r,n=>{if(!n){for(;e.firstChild;)e.firstChild.remove();return}let l=[...e.children],_,m=h=>{h.forEach((u,w)=>{if(l[w])if(l[w].set$)l[w].set$(u);else for(let C in u)l[w][C]=u[C];else{_||(_=new DocumentFragment);let C=new i;Object.assign(C.init$,u),_.appendChild(C)}}),_&&e.appendChild(_);let f=l.slice(h.length,l.length);for(let u of f)u.remove()};if(n.constructor===Array)m(n);else if(n.constructor===Object){let h=[];for(let f in n){let u=n[f];Object.defineProperty(u,"_KEY_",{value:f,enumerable:!0}),h.push(u)}m(h)}else console.warn("Symbiote repeat data type error:"),console.log(n)}),e.removeAttribute(a.REPEAT_ATTR),e.removeAttribute(a.REPEAT_ITEM_TAG_ATTR)})}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 n;let r=(n=i.getAttribute)==null?void 0:n.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 H(o,t){[...o.querySelectorAll(`[${a.EL_REF_ATTR}]`)].forEach(e=>{let s=e.getAttribute(a.EL_REF_ATTR);t.ref[s]=e,e.removeAttribute(a.EL_REF_ATTR)})}function K(o,t){[...o.querySelectorAll(`[${a.BIND_ATTR}]`)].forEach(e=>{let i=e.getAttribute(a.BIND_ATTR).split(";");[...e.attributes].forEach(r=>{if(r.name.startsWith("-")&&r.value){let n=x(r.name.replace("-",""));i.push(n+":"+r.value),e.removeAttribute(r.name)}}),i.forEach(r=>{if(!r)return;let n=r.split(":").map(h=>h.trim()),l=n[0],_;l.indexOf(a.ATTR_BIND_PRFX)===0&&(_=!0,l=l.replace(a.ATTR_BIND_PRFX,""));let m=n[1].split(",").map(h=>h.trim());for(let h of m){let f;h.startsWith("!!")?(f="double",h=h.replace("!!","")):h.startsWith("!")&&(f="single",h=h.replace("!","")),t.sub(h,u=>{f==="double"?u=!!u:f==="single"&&(u=!u),_?(u==null?void 0:u.constructor)===Boolean?u?e.setAttribute(l,""):e.removeAttribute(l):e.setAttribute(l,u):A(e,l,u)||(e[a.SET_LATER_KEY]||(e[a.SET_LATER_KEY]=Object.create(null)),e[a.SET_LATER_KEY][l]=u)})}}),e.removeAttribute(a.BIND_ATTR)})}var S="{{",g="}}",W="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(W))&&i.textContent.includes(S)&&i.textContent.includes(g)&&1}});for(;t=s.nextNode();)e.push(t);return e}var Y=function(o,t){q(o).forEach(s=>{let i=[],r;for(;s.textContent.includes(g);)s.textContent.startsWith(S)?(r=s.textContent.indexOf(g)+g.length,s.splitText(r),i.push(s)):(r=s.textContent.indexOf(S),s.splitText(r)),s=s.nextSibling;i.forEach(n=>{let l=n.textContent.replace(S,"").replace(g,"");n.textContent="",t.sub(l,_=>{n.textContent=_})})})},v=[N,U,H,K,Y];var O=0,T=null,d=null,p=class extends HTMLElement{constructor(){super();E(this,"updateCssData",()=>{var t;this.dropCssDataCache(),(t=this.__boundCssProps)==null||t.forEach(e=>{let s=this.getCssData(this.__extractCssName(e),!0);this.$[e]!==s&&(this.$[e]=s)})});this.init$=Object.create(null),this.cssInit$=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,this.allowCustomTemplate=!1}get BaseComponent(){return p}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.allowCustomTemplate){let r=this.getAttribute(a.USE_TPL);if(r){let n=this.getRootNode(),l=(n==null?void 0:n.querySelector(r))||document.querySelector(r);l?t=l.content.cloneNode(!0):console.warn(`Symbiote template "${r}" is not found...`)}}if(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)}get autoCtxName(){return this.__autoCtxName||(this.__autoCtxName=y.generate(),this.style.setProperty(a.CSS_CTX_PROP,`'${this.__autoCtxName}'`)),this.__autoCtxName}get cssCtxName(){return this.getCssData(a.CSS_CTX_PROP,!0)}get ctxName(){var t;return((t=this.getAttribute(a.CTX_NAME_ATTR))==null?void 0:t.trim())||this.cssCtxName||this.autoCtxName}get localCtx(){return this.__localCtx||(this.__localCtx=c.registerLocalCtx({})),this.__localCtx}get nodeCtx(){return c.getNamedCtx(this.ctxName,!1)||c.registerNamedCtx(this.ctxName,{})}static __parseProp(t,e){let s,i;if(t.startsWith(a.EXT_DATA_CTX_PRFX))s=e.nodeCtx,i=t.replace(a.EXT_DATA_CTX_PRFX,"");else if(t.includes(a.NAMED_DATA_CTX_SPLTR)){let r=t.split(a.NAMED_DATA_CTX_SPLTR);s=c.getNamedCtx(r[0]),i=r[1]}else s=e.localCtx,i=t;return{ctx:s,name:i}}sub(t,e){let s=p.__parseProp(t,this);s.ctx.has(t)?this.allSubs.add(s.ctx.sub(s.name,e)):window.setTimeout(()=>{this.allSubs.add(s.ctx.sub(s.name,e))})}notify(t){let e=p.__parseProp(t,this);e.ctx.notify(e.name)}has(t){let e=p.__parseProp(t,this);return e.ctx.has(e.name)}add(t,e){let s=p.__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=p.__parseProp(s,this);return r.ctx.pub(r.name,i),!0},get:(e,s)=>{let i=p.__parseProp(s,this);return i.ctx.read(i.name)}})}return this.__stateProxy}set$(t,e=!1){for(let s in t){let i=t[s];e||![String,Number,Boolean].includes(i==null?void 0:i.constructor)?this.$[s]=i:this.$[s]!==i&&(this.$[s]=i)}}__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(a.EXT_DATA_CTX_PRFX))this.nodeCtx.add(e.replace(a.EXT_DATA_CTX_PRFX,""),this.init$[e]);else if(e.includes(a.NAMED_DATA_CTX_SPLTR)){let s=e.split(a.NAMED_DATA_CTX_SPLTR),i=s[0].trim(),r=s[1].trim();if(i&&r){let n=c.getNamedCtx(i,!1);n||(n=c.registerNamedCtx(i,{})),n.add(r,this.init$[e])}}else this.localCtx.add(e,this.init$[e]);for(let e in this.cssInit$)this.bindCssData(e,this.cssInit$[e]);this.__dataCtxInitialized=!0}connectedCallback(){var t;if(!!this.isConnected){if(this.__disconnectTimeout&&window.clearTimeout(this.__disconnectTimeout),!this.connectedOnce){let e=(t=this.getAttribute(a.CTX_NAME_ATTR))==null?void 0:t.trim();if(e&&this.style.setProperty(a.CSS_CTX_PROP,`'${e}'`),this.__initDataCtx(),this[a.SET_LATER_KEY]){for(let s in this[a.SET_LATER_KEY])A(this,s,this[a.SET_LATER_KEY][s]);delete this[a.SET_LATER_KEY]}this.initChildren=[...this.childNodes];for(let s of v)this.addTemplateProcessor(s);this.pauseRender?this.__initCallback():this.render()}this.connectedOnce=!0}}destroyCallback(){}disconnectedCallback(){!this.connectedOnce||(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);d==null||d.delete(this.updateCssData),(d==null?void 0:d.size)||(T==null||T.disconnect(),T=null,d=null)},100)))}static reg(t,e=!1){if(t||(O++,t=`${a.AUTO_TAG_PRFX}-${O}`),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){var r;if(e===s)return;let i=(r=this.constructor.__attrDesc)==null?void 0:r[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]}__extractCssName(t){return t.split("--").map((e,s)=>s===0?"":e).join("--")}__initStyleAttrObserver(){d||(d=new Set),d.add(this.updateCssData),T||(T=new MutationObserver(t=>{t[0].type==="attributes"&&d.forEach(e=>{e()})}),T.observe(document,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]}))}bindCssData(t,e=""){this.__boundCssProps||(this.__boundCssProps=new Set),this.__boundCssProps.add(t);let s=this.getCssData(this.__extractCssName(t),!0);s===null&&(s=e),this.add(t,s),this.__initStyleAttrObserver()}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;E(R,"template");var b=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(b.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 n in e)e[n]===!0?i+=this.separator+n:i+=this.separator+n+`=${e[n]}`;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=c.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||""})}),b.notify(),this.initPopstateListener(),s}static initPopstateListener(){this.__onPopstate||(this.__onPopstate=()=>{this.notify()},window.addEventListener("popstate",this.__onPopstate))}static removePopstateListener(){window.removeEventListener("popstate",this.__onPopstate),this.__onPopstate=null}};b.appMap=Object.create(null);function X(o,t){for(let e in t)e.includes("-")?o.style.setProperty(e,t[e]):o.style[e]=t[e]}function L(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&&L(t,o.attributes),o.styles&&X(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 M="idb-store-ready",z="symbiote-db",G="symbiote-idb-update_",$=class{_notifyWhenReady(t=null){window.dispatchEvent(new CustomEvent(M,{detail:{dbName:this.name,storeName:this.storeName,event:t}}))}get _updEventName(){return G+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=n=>{var l;((l=n.target.result)==null?void 0:l._value)?i(n.target.result._value):(i(null),console.warn(`IDB: cannot read "${t}"`))},s.onerror=n=>{r(n)}})}write(t,e,s=!1){let i={_key:t,_value:e},n=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).put(i);return new Promise((l,_)=>{n.onsuccess=m=>{s||this._notifySubscribers(t),l(m.target.result)},n.onerror=m=>{_(m)}})}delete(t,e=!1){let i=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).delete(t);return new Promise((r,n)=>{i.onsuccess=l=>{e||this._notifySubscribers(t),r(l)},i.onerror=l=>{n(l)}})}getAll(){let e=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).getAll();return new Promise((s,i)=>{e.onsuccess=r=>{let n=r.target.result;s(n.map(l=>l._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,P.clear(this.name)}},P=class{static get readyEventName(){return M}static open(t=z,e="store"){let s=t+"/"+e;return this._reg[s]||(this._reg[s]=new $(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]}};E(P,"_reg",Object.create(null));export{b as AppRouter,R as BaseComponent,c as Data,P as IDB,y as UID,L as applyAttributes,X as applyStyles,I as create,x as kebabToCamel,A as setNestedProp};

package/core/AppRouter.js

@@ -144,12 +144,25 @@ export class AppRouter {
       });
     });
     AppRouter.notify();
+    this.initPopstateListener();
     return routeData;
   }
+
+  static initPopstateListener() {
+    if (this.__onPopstate) {
+      return;
+    }
+    /** @private */
+    this.__onPopstate = () => {
+      this.notify();
+    };
+    window.addEventListener('popstate', this.__onPopstate);
+  }
+
+  static removePopstateListener() {
+    window.removeEventListener('popstate', this.__onPopstate);
+    this.__onPopstate = null;
+  }
 }
 
 AppRouter.appMap = Object.create(null);
-
-window.onpopstate = () => {
-  AppRouter.notify();
-};

package/core/BaseComponent.js

@@ -46,6 +46,21 @@ export class BaseComponent extends HTMLElement {
         mode: 'open',
       });
     }
+    if (this.allowCustomTemplate) {
+      let customTplSelector = this.getAttribute(DICT.USE_TPL);
+      if (customTplSelector) {
+        let root = this.getRootNode();
+        /** @type {HTMLTemplateElement} */
+        // @ts-ignore
+        let customTpl = root?.querySelector(customTplSelector) || document.querySelector(customTplSelector);
+        if (customTpl) {
+          // @ts-ignore
+          template = customTpl.content.cloneNode(true);
+        } else {
+          console.warn(`Symbiote template "${customTplSelector}" is not found...`);
+        }
+      }
+    }
     if (this.processInnerHtml) {
       for (let fn of this.tplProcessors) {
         fn(this, this);
@@ -116,6 +131,8 @@ export class BaseComponent extends HTMLElement {
     this.readyToDestroy = true;
     /** @type {Boolean} */
     this.processInnerHtml = false;
+    /** @type {Boolean} */
+    this.allowCustomTemplate = false;
   }
 
   /** @returns {String} */
@@ -301,6 +318,11 @@ export class BaseComponent extends HTMLElement {
   }
 
   connectedCallback() {
+    // As `connectedCallback` calls are queued, it could be called after element being detached from DOM
+    // See example at https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-conformance
+    if (!this.isConnected) {
+      return;
+    }
     if (this.__disconnectTimeout) {
       window.clearTimeout(this.__disconnectTimeout);
     }
@@ -332,6 +354,10 @@ export class BaseComponent extends HTMLElement {
   destroyCallback() {}
 
   disconnectedCallback() {
+    // if element wasn't connected, there is no need to disconnect it
+    if (!this.connectedOnce) {
+      return;
+    }
     this.dropCssDataCache();
     if (!this.readyToDestroy) {
       return;
@@ -395,7 +421,7 @@ export class BaseComponent extends HTMLElement {
       return;
     }
     /** @type {String} */
-    let $prop = this.constructor['__attrDesc'][name];
+    let $prop = this.constructor['__attrDesc']?.[name];
     if ($prop) {
       if (this.__dataCtxInitialized) {
         this.$[$prop] = newVal;

package/core/dictionary.js

@@ -22,4 +22,6 @@ export const DICT = Object.freeze({
   REPEAT_ITEM_TAG_ATTR: 'repeat-item-tag',
   // Key to restore nested properties was set before component construction
   SET_LATER_KEY: '__toSetLater__',
+  // Attribute to provide selector of custom template
+  USE_TPL: 'use-template',
 });

package/core/symbiote.js

@@ -1,8 +1,6 @@
 // Core modules:
 export { BaseComponent } from './BaseComponent.js';
 export { Data } from './Data.js';
-export { TypedData } from './TypedData.js';
-export { TypedCollection } from './TypedCollection.js';
 export { AppRouter } from './AppRouter.js';
 
 // Utils:
@@ -12,3 +10,4 @@ export { applyStyles } from '../utils/dom-helpers.js';
 export { applyAttributes } from '../utils/dom-helpers.js';
 export { create } from '../utils/dom-helpers.js';
 export { IDB } from '../utils/IDB.js';
+export { kebabToCamel } from '../utils/kebabToCamel.js';

package/core/tpl-processors.js

@@ -1,5 +1,6 @@
 import { DICT } from './dictionary.js';
 import { setNestedProp } from '../utils/setNestedProp.js';
+import { kebabToCamel } from '../utils/kebabToCamel.js';
 // Should go first among other processors:
 import { repeatProcessor } from './repeatProcessor.js';
 
@@ -67,6 +68,13 @@ function domSetProcessor(fr, fnCtx) {
   [...fr.querySelectorAll(`[${DICT.BIND_ATTR}]`)].forEach((el) => {
     let subStr = el.getAttribute(DICT.BIND_ATTR);
     let keyValArr = subStr.split(';');
+    [...el.attributes].forEach((attr) => {
+      if (attr.name.startsWith('-') && attr.value) {
+        let key = kebabToCamel(attr.name.replace('-', ''));
+        keyValArr.push(key + ':' + attr.value);
+        el.removeAttribute(attr.name);
+      }
+    });
     keyValArr.forEach((keyValStr) => {
       if (!keyValStr) {
         return;
@@ -164,6 +172,7 @@ const txtNodesProcessor = function (fr, fnCtx) {
     }
     tokenNodes.forEach((tNode) => {
       let prop = tNode.textContent.replace(OPEN_TOKEN, '').replace(CLOSE_TOKEN, '');
+      tNode.textContent = '';
       fnCtx.sub(prop, (val) => {
         tNode.textContent = val;
       });

package/package.json

@@ -21,11 +21,12 @@
     "LICENSE"
   ],
   "module": "./build/symbiote.js",
+  "exports": "./build/symbiote.js",
   "types": "./build/symbiote.d.ts",
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.8.7",
+  "version": "1.10.1",
   "description": "Symbiote.js",
   "author": "hello@symbiotejs.org",
   "license": "MIT",

package/utils/kebabToCamel.js

@@ -0,0 +1,14 @@
+/** @param {String} string */
+export function kebabToCamel(string) {
+  return string
+    .split('-')
+    .map((p, i) => {
+      return p && i ? p[0].toUpperCase() + p.slice(1) : p;
+    })
+    .join('')
+    .split('_')
+    .map((p, i) => {
+      return p && i ? p.toUpperCase() : p;
+    })
+    .join('');
+}

package/build/s.js

@@ -1 +0,0 @@
-var __defProp=Object.defineProperty,__defNormalProp=(t,e,s)=>e in t?__defProp(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s,__publicField=(t,e,s)=>(__defNormalProp(t,"symbol"!=typeof e?e+"":e,s),s);function cloneObj(t){let e=t=>{var s;for(let r in t)(null==(s=t[r])?void 0:s.constructor)===Object&&(t[r]=e(t[r]));return{...t}};return e(t)}var Data=class{constructor(t){this.uid=Symbol(),this.name=t.name||null,t.schema.constructor===Object?this.store=cloneObj(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)?this.store[t]:(Data.warn("read",t),null)}has(t){return this._storeIsProxy?void 0!==this.store[t]: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((e=>{e(this.store[t])})))}pub(t,e){this._storeIsProxy||this.store.hasOwnProperty(t)?this.add(t,e):Data.warn("publish",t)}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)?(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}):(Data.warn("subscribe",t),null)}remove(){delete Data.globalStore[this.uid]}static registerLocalCtx(t){let e=new Data({schema:t});return Data.globalStore[e.uid]=e,e}static registerNamedCtx(t,e){let s=Data.globalStore[t];return s?console.warn('State: context name "'+t+'" already in use'):(s=new Data({name:t,schema:e}),Data.globalStore[t]=s),s}static clearNamedCtx(t){delete Data.globalStore[t]}static getNamedCtx(t,e=!0){return Data.globalStore[t]||(e&&console.warn('State: wrong context name - "'+t+'"'),null)}};Data.globalStore=Object.create(null);var DICT=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",REPEAT_ATTR:"repeat",REPEAT_ITEM_TAG_ATTR:"repeat-item-tag"}),CHARS="1234567890QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm",CHLENGTH=CHARS.length-1,UID=class{static generate(t="XXXXXXXXX-XXX"){let e="";for(let s=0;s<t.length;s++)e+="-"===t[s]?t[s]:CHARS.charAt(Math.random()*CHLENGTH);return e}};function repeatProcessor(t,e){[...t.querySelectorAll(`[${DICT.REPEAT_ATTR}]`)].forEach((t=>{let s,r=t.getAttribute(DICT.REPEAT_ITEM_TAG_ATTR);if(r&&(s=window.customElements.get(r)),!s){s=class extends e.BaseComponent{constructor(){super(),r||(this.style.display="contents")}};let i=t.innerHTML;s.template=i,s.reg(r)}for(;t.firstChild;)t.firstChild.remove();let i=t.getAttribute(DICT.REPEAT_ATTR);e.sub(i,(e=>{if(!e){for(;t.firstChild;)t.firstChild.remove();return}let r,i=[...t.children],a=e=>{e.forEach(((t,e)=>{if(i[e])if(i[e].set$)i[e].set$(t);else for(let s in t)i[e][s]=t[s];else{r||(r=new DocumentFragment);let e=new s;Object.assign(e.init$,t),r.appendChild(e)}})),r&&t.appendChild(r);let a=i.slice(e.length,i.length);for(let t of a)t.remove()};if(e.constructor===Array)a(e);else if(e.constructor===Object){let t=[];for(let s in e){let r=e[s];Object.defineProperty(r,"_KEY_",{value:s,enumerable:!0}),t.push(r)}a(t)}else console.warn("Symbiote repeat data type error:"),console.log(e)})),t.removeAttribute(DICT.REPEAT_ATTR),t.removeAttribute(DICT.REPEAT_ITEM_TAG_ATTR)}))}function slotProcessor(t,e){if(e.shadowRoot)return;let s=[...t.querySelectorAll("slot")];if(e.initChildren.length&&s.length){let t={};s.forEach((e=>{let s=e.getAttribute("name");s?t[s]={slot:e,fr:document.createDocumentFragment()}:t.__default__={slot:e,fr:document.createDocumentFragment()}})),e.initChildren.forEach((e=>{var s;let r=null==(s=e.getAttribute)?void 0:s.call(e,"slot");r?(e.removeAttribute("slot"),t[r].fr.appendChild(e)):t.__default__&&t.__default__.fr.appendChild(e)})),Object.values(t).forEach((t=>{t.slot.parentNode.insertBefore(t.fr,t.slot),t.slot.remove()}))}}function refProcessor(t,e){[...t.querySelectorAll(`[${DICT.EL_REF_ATTR}]`)].forEach((t=>{let s=t.getAttribute(DICT.EL_REF_ATTR);e.ref[s]=t,t.removeAttribute(DICT.EL_REF_ATTR)}))}function domSetProcessor(t,e){[...t.querySelectorAll(`[${DICT.BIND_ATTR}]`)].forEach((t=>{t.getAttribute(DICT.BIND_ATTR).split(";").forEach((s=>{if(!s)return;let r,i=s.split(":").map((t=>t.trim())),a=i[0];0===a.indexOf(DICT.ATTR_BIND_PRFX)&&(r=!0,a=a.replace(DICT.ATTR_BIND_PRFX,""));let o,n,l,c,h=i[1].split(",").map((t=>t.trim()));if(a.includes(".")){o=!0;let e=a.split(".");c=()=>{n=t,e.forEach(((t,s)=>{s<e.length-1?n=n[t]:l=t}))},c()}for(let s of h){let i;s.startsWith("!!")?(i="double",s=s.replace("!!","")):s.startsWith("!")&&(i="single",s=s.replace("!","")),e.sub(s,(e=>{"double"===i?e=!!e:"single"===i&&(e=!e),r?(null==e?void 0:e.constructor)===Boolean?e?t.setAttribute(a,""):t.removeAttribute(a):t.setAttribute(a,e):o?n?n[l]=e:window.setTimeout((()=>{c(),n[l]=e})):t[a]=e}))}})),t.removeAttribute(DICT.BIND_ATTR)}))}var OPEN_TOKEN="{{",CLOSE_TOKEN="}}",SKIP_ATTR="skip-text";function getTextNodesWithTokens(t){let e,s=[],r=document.createTreeWalker(t,NodeFilter.SHOW_TEXT,{acceptNode:t=>{var e;return!(null==(e=t.parentElement)?void 0:e.hasAttribute(SKIP_ATTR))&&t.textContent.includes(OPEN_TOKEN)&&t.textContent.includes(CLOSE_TOKEN)&&1}});for(;e=r.nextNode();)s.push(e);return s}var txtNodesProcessor=function(t,e){getTextNodesWithTokens(t).forEach((t=>{let s,r=[];for(;t.textContent.includes(CLOSE_TOKEN);)t.textContent.startsWith(OPEN_TOKEN)?(s=t.textContent.indexOf(CLOSE_TOKEN)+CLOSE_TOKEN.length,t.splitText(s),r.push(t)):(s=t.textContent.indexOf(OPEN_TOKEN),t.splitText(s)),t=t.nextSibling;r.forEach((t=>{let s=t.textContent.replace(OPEN_TOKEN,"").replace(CLOSE_TOKEN,"");e.sub(s,(e=>{t.textContent=e}))}))}))},tpl_processors_default=[repeatProcessor,slotProcessor,refProcessor,domSetProcessor,txtNodesProcessor],autoTagsCount=0,styleMutationObserver=null,styleMutationObserverCbList=null,_BaseComponent=class extends HTMLElement{constructor(){super(),__publicField(this,"updateCssData",(()=>{var t;this.dropCssDataCache(),null==(t=this.__boundCssProps)||t.forEach((t=>{let e=this.getCssData(this.__extractCssName(t),!0);this.$[t]!==e&&(this.$[t]=e)}))})),this.init$=Object.create(null),this.cssInit$=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 BaseComponent(){return _BaseComponent}initCallback(){}__initCallback(){var t;this.__initialized||(this.__initialized=!0,null==(t=this.initCallback)||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 t of this.tplProcessors)t(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),(null==t?void 0:t.constructor)===DocumentFragment)s=t;else if((null==t?void 0:t.constructor)===String){let e=document.createElement("template");e.innerHTML=t,s=e.content.cloneNode(!0)}else this.constructor.__tpl&&(s=this.constructor.__tpl.content.cloneNode(!0));for(let t of this.tplProcessors)t(s,this)}let r=()=>{s&&(e&&this.shadowRoot.appendChild(s)||this.appendChild(s)),this.__initCallback()};if(this.constructor.__shadowStylesUrl){e=!0;let t=document.createElement("link");t.rel="stylesheet",t.href=this.constructor.__shadowStylesUrl,t.onload=r,this.shadowRoot.prepend(t)}else r()}addTemplateProcessor(t){this.tplProcessors.add(t)}get autoCtxName(){return this.__autoCtxName||(this.__autoCtxName=UID.generate(),this.style.setProperty(DICT.CSS_CTX_PROP,`'${this.__autoCtxName}'`)),this.__autoCtxName}get cssCtxName(){return this.getCssData(DICT.CSS_CTX_PROP,!0)}get ctxName(){var t;return(null==(t=this.getAttribute(DICT.CTX_NAME_ATTR))?void 0:t.trim())||this.cssCtxName||this.autoCtxName}get localCtx(){return this.__localCtx||(this.__localCtx=Data.registerLocalCtx({})),this.__localCtx}get nodeCtx(){return Data.getNamedCtx(this.ctxName,!1)||Data.registerNamedCtx(this.ctxName,{})}static __parseProp(t,e){let s,r;if(t.startsWith(DICT.EXT_DATA_CTX_PRFX))s=e.nodeCtx,r=t.replace(DICT.EXT_DATA_CTX_PRFX,"");else if(t.includes(DICT.NAMED_DATA_CTX_SPLTR)){let e=t.split(DICT.NAMED_DATA_CTX_SPLTR);s=Data.getNamedCtx(e[0]),r=e[1]}else s=e.localCtx,r=t;return{ctx:s,name:r}}sub(t,e){let s=_BaseComponent.__parseProp(t,this);this.allSubs.add(s.ctx.sub(s.name,e))}notify(t){let e=_BaseComponent.__parseProp(t,this);e.ctx.notify(e.name)}has(t){let e=_BaseComponent.__parseProp(t,this);return e.ctx.has(e.name)}add(t,e){let s=_BaseComponent.__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:(t,e,s)=>{let r=_BaseComponent.__parseProp(e,this);return r.ctx.pub(r.name,s),!0},get:(t,e)=>{let s=_BaseComponent.__parseProp(e,this);return s.ctx.read(s.name)}})}return this.__stateProxy}set$(t,e=!1){for(let s in t){let r=t[s],i=[String,Number,Boolean];(e||!i.includes(null==r?void 0:r.constructor)||this.$[s]!==r)&&(this.$[s]=r)}}__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 t in this.init$)if(t.startsWith(DICT.EXT_DATA_CTX_PRFX))this.nodeCtx.add(t.replace(DICT.EXT_DATA_CTX_PRFX,""),this.init$[t]);else if(t.includes(DICT.NAMED_DATA_CTX_SPLTR)){let e=t.split(DICT.NAMED_DATA_CTX_SPLTR),s=e[0].trim(),r=e[1].trim();if(s&&r){let e=Data.getNamedCtx(s,!1);e||(e=Data.registerNamedCtx(s,{})),e.add(r,this.init$[t])}}else this.localCtx.add(t,this.init$[t]);for(let t in this.cssInit$)this.bindCssData(t,this.cssInit$[t]);this.__dataCtxInitialized=!0}connectedCallback(){var t;if(this.__disconnectTimeout&&window.clearTimeout(this.__disconnectTimeout),!this.connectedOnce){let e=null==(t=this.getAttribute(DICT.CTX_NAME_ATTR))?void 0:t.trim();e&&this.style.setProperty(DICT.CSS_CTX_PROP,`'${e}'`),this.__initDataCtx(),this.initChildren=[...this.childNodes];for(let t of tpl_processors_default)this.addTemplateProcessor(t);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);null==styleMutationObserverCbList||styleMutationObserverCbList.delete(this.updateCssData),(null==styleMutationObserverCbList?void 0:styleMutationObserverCbList.size)||(null==styleMutationObserver||styleMutationObserver.disconnect(),styleMutationObserver=null,styleMutationObserverCbList=null)}),100))}static reg(t,e=!1){t||(autoTagsCount++,t=`${DICT.AUTO_TAG_PRFX}-${autoTagsCount}`),this.__tag=t,window.customElements.get(t)?console.warn(`${t} - is already in "customElements" registry`):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 r=this.constructor.__attrDesc[t];r?this.__dataCtxInitialized?this.$[r]=s:this.init$[r]=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(s){!e&&console.warn(`CSS Data error: ${t}`),this.__cssDataCache[t]=null}}return this.__cssDataCache[t]}__extractCssName(t){return t.split("--").map(((t,e)=>0===e?"":t)).join("--")}__initStyleAttrObserver(){styleMutationObserverCbList||(styleMutationObserverCbList=new Set),styleMutationObserverCbList.add(this.updateCssData),styleMutationObserver||(styleMutationObserver=new MutationObserver((t=>{"attributes"===t[0].type&&styleMutationObserverCbList.forEach((t=>{t()}))}))).observe(document,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style"]})}bindCssData(t,e=""){this.__boundCssProps||(this.__boundCssProps=new Set),this.__boundCssProps.add(t);let s=this.getCssData(this.__extractCssName(t),!0);null===s&&(s=e),this.add(t,s),this.__initStyleAttrObserver()}dropCssDataCache(){this.__cssDataCache=null,this.__computedStyle=null}defineAccessor(t,e,s){let r="__"+t;this[r]=this[t],Object.defineProperty(this,t,{set:t=>{this[r]=t,s?window.setTimeout((()=>{null==e||e(t)})):null==e||e(t)},get:()=>this[r]}),this[t]=this[r]}static set shadowStyles(t){let e=new Blob([t],{type:"text/css"});this.__shadowStylesUrl=URL.createObjectURL(e)}},BaseComponent=_BaseComponent;__publicField(BaseComponent,"template");var MSG_NAME="[Typed State] Wrong property name: ",MSG_TYPE="[Typed State] Wrong property type: ",TypedData=class{constructor(t,e){this.__typedSchema=t,this.__ctxId=e||UID.generate(),this.__schema=Object.keys(t).reduce(((e,s)=>(e[s]=t[s].value,e)),{}),this.__data=Data.registerNamedCtx(this.__ctxId,this.__schema)}get uid(){return this.__ctxId}setValue(t,e){if(!this.__typedSchema.hasOwnProperty(t))return void console.warn(MSG_NAME+t);let s=this.__typedSchema[t];(null==e?void 0:e.constructor)===s.type||s.nullable&&null===e?this.__data.pub(t,e):console.warn(MSG_TYPE+t)}setMultipleValues(t){for(let e in t)this.setValue(e,t[e])}getValue(t){if(this.__typedSchema.hasOwnProperty(t))return this.__data.read(t);console.warn(MSG_NAME+t)}subscribe(t,e){return this.__data.sub(t,e)}remove(){this.__data.remove()}},TypedCollection=class{constructor(t){this.__typedSchema=t.typedSchema,this.__ctxId=t.ctxName||UID.generate(),this.__data=Data.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=(t,s)=>{this.__observeTimeout&&window.clearTimeout(this.__observeTimeout),e[t]||(e[t]=new Set),e[t].add(s),this.__observeTimeout=window.setTimeout((()=>{this.__observers.forEach((t=>{t({...e})})),e=Object.create(null)}))}}notify(){this.__notifyTimeout&&window.clearTimeout(this.__notifyTimeout),this.__notifyTimeout=window.setTimeout((()=>{var t;null==(t=this.__handler)||t.call(this,[...this.__items])}))}add(t){let e=new TypedData(this.__typedSchema);for(let s in t)e.setValue(s,t[s]);return this.__data.add(e.uid,e),this.__watchList.forEach((t=>{this.__subsMap[e.uid]||(this.__subsMap[e.uid]=[]),this.__subsMap[e.uid].push(e.subscribe(t,(()=>{this.__notifyObservers(t,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 r=this.read(s);t(r)&&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((t=>{t.remove()})),delete this.__subsMap[t]}},AppRouter=class{static _print(t){console.warn(t)}static setDefaultTitle(t){this.defaultTitle=t}static setRoutingMap(t){Object.assign(this.appMap,t);for(let t in this.appMap)this.defaultRoute||!0!==this.appMap[t].default?this.errorRoute||!0!==this.appMap[t].error||(this.errorRoute=t):this.defaultRoute=t}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((e=>{if(e.includes("?"))t.route=e.replace("?","");else if(e.includes("=")){let s=e.split("=");t.options[s[0]]=decodeURI(s[1])}else t.options[e]=!0})),t}static notify(){let t=this.readAddressBar(),e=this.appMap[t.route];if(e&&e.title&&(document.title=e.title),null===t.route&&this.defaultRoute)return void this.applyRoute(this.defaultRoute);if(!e&&this.errorRoute)return void this.applyRoute(this.errorRoute);if(!e&&this.defaultRoute)return void this.applyRoute(this.defaultRoute);if(!e)return void this._print(`Route "${t.route}" not found...`);let s=new CustomEvent(AppRouter.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)return void this._print("Wrong route: "+t);let r="?"+t;for(let t in e)!0===e[t]?r+=this.separator+t:r+=this.separator+t+`=${e[t]}`;let i=s.title||this.defaultTitle||"";window.history.pushState(null,i,r),document.title=i}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=Data.registerNamedCtx(t,{route:null,options:null,title:null});return window.addEventListener(this.routingEventName,(t=>{var e;s.multiPub({route:t.detail.route,options:t.detail.options,title:(null==(e=t.detail.options)?void 0:e.title)||this.defaultTitle||""})})),AppRouter.notify(),s}};function applyStyles(t,e){for(let s in e)s.includes("-")?t.style.setProperty(s,e[s]):t.style[s]=e[s]}function applyAttributes(t,e){for(let s in e)e[s].constructor===Boolean?e[s]?t.setAttribute(s,""):t.removeAttribute(s):t.setAttribute(s,e[s])}function create(t={tag:"div"}){let e=document.createElement(t.tag);if(t.attributes&&applyAttributes(e,t.attributes),t.styles&&applyStyles(e,t.styles),t.properties)for(let s in t.properties)e[s]=t.properties[s];return t.processors&&t.processors.forEach((t=>{t(e)})),t.children&&t.children.forEach((t=>{let s=create(t);e.appendChild(s)})),e}AppRouter.appMap=Object.create(null),window.onpopstate=()=>{AppRouter.notify()};var READY_EVENT_NAME="idb-store-ready",DEFAULT_DB_NAME="symbiote-db",UPD_EVENT_PREFIX="symbiote-idb-update_",DbInstance=class{_notifyWhenReady(t=null){window.dispatchEvent(new CustomEvent(READY_EVENT_NAME,{detail:{dbName:this.name,storeName:this.storeName,event:t}}))}get _updEventName(){return UPD_EVENT_PREFIX+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=t=>{this.db=t.target.result,this.objStore=this.db.createObjectStore(e,{keyPath:"_key"}),this.objStore.transaction.oncomplete=t=>{this._notifyWhenReady(t)}},this.request.onsuccess=t=>{this.db=t.target.result,this._notifyWhenReady(t)},this.request.onerror=t=>{console.error(t)},this._subscriptionsMap={},this._updateHandler=t=>{if(t.key===this.name&&this._subscriptionsMap[t.newValue]){this._subscriptionsMap[t.newValue].forEach((async e=>{e(await this.read(t.newValue))}))}},this._localUpdateHandler=t=>{this._updateHandler(t.detail)},window.addEventListener("storage",this._updateHandler),window.addEventListener(this._updEventName,this._localUpdateHandler)}read(t){let e=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).get(t);return new Promise(((s,r)=>{e.onsuccess=e=>{var r;(null==(r=e.target.result)?void 0:r._value)?s(e.target.result._value):(s(null),console.warn(`IDB: cannot read "${t}"`))},e.onerror=t=>{r(t)}}))}write(t,e,s=!1){let r={_key:t,_value:e},i=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).put(r);return new Promise(((e,r)=>{i.onsuccess=r=>{s||this._notifySubscribers(t),e(r.target.result)},i.onerror=t=>{r(t)}}))}delete(t,e=!1){let s=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).delete(t);return new Promise(((r,i)=>{s.onsuccess=s=>{e||this._notifySubscribers(t),r(s)},s.onerror=t=>{i(t)}}))}getAll(){let t=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).getAll();return new Promise(((e,s)=>{t.onsuccess=t=>{let s=t.target.result;e(s.map((t=>t._value)))},t.onerror=t=>{s(t)}}))}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,IDB.clear(this.name)}},IDB=class{static get readyEventName(){return READY_EVENT_NAME}static open(t=DEFAULT_DB_NAME,e="store"){let s=t+"/"+e;return this._reg[s]||(this._reg[s]=new DbInstance(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]}};__publicField(IDB,"_reg",Object.create(null));export{AppRouter,BaseComponent,Data,IDB,TypedCollection,TypedData,UID,applyAttributes,applyStyles,create};

package/core/TypedCollection.js

@@ -1,201 +0,0 @@
-import { UID } from '../utils/UID.js';
-import { Data } from './Data.js';
-import { TypedData } from './TypedData.js';
-
-export class TypedCollection {
-  /**
-   * @param {Object} options
-   * @param {Object<string, { type: any; value: any }>} options.typedSchema
-   * @param {String[]} [options.watchList]
-   * @param {(list: string[]) => void} [options.handler]
-   * @param {String} [options.ctxName]
-   */
-  constructor(options) {
-    /**
-     * @private
-     * @type {Object<string, { type: any; value: any }>}
-     */
-    this.__typedSchema = options.typedSchema;
-    /**
-     * @private
-     * @type {String}
-     */
-    this.__ctxId = options.ctxName || UID.generate();
-    /**
-     * @private
-     * @type {Data}
-     */
-    this.__data = Data.registerNamedCtx(this.__ctxId, {});
-    /**
-     * @private
-     * @type {string[]}
-     */
-    this.__watchList = options.watchList || [];
-    /**
-     * @private
-     * @type {(list: string[]) => void}
-     */
-    this.__handler = options.handler || null;
-    /**
-     * @private
-     * @type {Object<string, any>}
-     */
-    this.__subsMap = Object.create(null);
-    /**
-     * @private
-     * @type {Set}
-     */
-    this.__observers = new Set();
-    /**
-     * @private
-     * @type {Set<string>}
-     */
-    this.__items = new Set();
-
-    let changeMap = Object.create(null);
-
-    /**
-     * @private
-     * @param {String} propName
-     * @param {String} ctxId
-     */
-    this.__notifyObservers = (propName, ctxId) => {
-      if (this.__observeTimeout) {
-        window.clearTimeout(this.__observeTimeout);
-      }
-      if (!changeMap[propName]) {
-        changeMap[propName] = new Set();
-      }
-      changeMap[propName].add(ctxId);
-      /** @private */
-      this.__observeTimeout = window.setTimeout(() => {
-        this.__observers.forEach((handler) => {
-          handler({ ...changeMap });
-        });
-        changeMap = Object.create(null);
-      });
-    };
-  }
-
-  notify() {
-    if (this.__notifyTimeout) {
-      window.clearTimeout(this.__notifyTimeout);
-    }
-    /** @private */
-    this.__notifyTimeout = window.setTimeout(() => {
-      this.__handler?.([...this.__items]);
-    });
-  }
-
-  /**
-   * @param {Object<string, any>} init
-   * @returns {any}
-   */
-  add(init) {
-    let item = new TypedData(this.__typedSchema);
-    for (let prop in init) {
-      item.setValue(prop, init[prop]);
-    }
-    this.__data.add(item.uid, item);
-    this.__watchList.forEach((propName) => {
-      if (!this.__subsMap[item.uid]) {
-        this.__subsMap[item.uid] = [];
-      }
-      this.__subsMap[item.uid].push(
-        item.subscribe(propName, () => {
-          this.__notifyObservers(propName, item.uid);
-        })
-      );
-    });
-    this.__items.add(item.uid);
-    this.notify();
-    return item;
-  }
-
-  /**
-   * @param {String} id
-   * @returns {TypedData}
-   */
-  read(id) {
-    return this.__data.read(id);
-  }
-
-  /**
-   * @param {String} id
-   * @param {String} propName
-   * @returns {any}
-   */
-  readProp(id, propName) {
-    let item = this.read(id);
-    return item.getValue(propName);
-  }
-
-  /**
-   * @template T
-   * @param {String} id
-   * @param {String} propName
-   * @param {T} value
-   */
-  publishProp(id, propName, value) {
-    let item = this.read(id);
-    item.setValue(propName, value);
-  }
-
-  /** @param {String} id */
-  remove(id) {
-    this.__items.delete(id);
-    this.notify();
-    this.__data.pub(id, null);
-    delete this.__subsMap[id];
-  }
-
-  clearAll() {
-    this.__items.forEach((id) => {
-      this.remove(id);
-    });
-  }
-
-  /** @param {Function} handler */
-  observe(handler) {
-    this.__observers.add(handler);
-  }
-
-  /** @param {Function} handler */
-  unobserve(handler) {
-    this.__observers.delete(handler);
-  }
-
-  /**
-   * @param {(item: TypedData) => Boolean} checkFn
-   * @returns {String[]}
-   */
-  findItems(checkFn) {
-    let result = [];
-    this.__items.forEach((id) => {
-      let item = this.read(id);
-      if (checkFn(item)) {
-        result.push(id);
-      }
-    });
-    return result;
-  }
-
-  items() {
-    return [...this.__items];
-  }
-
-  get size() {
-    return this.__items.size;
-  }
-
-  destroy() {
-    this.__data.remove();
-    this.__observers = null;
-    for (let id in this.__subsMap) {
-      this.__subsMap[id].forEach((sub) => {
-        sub.remove();
-      });
-      delete this.__subsMap[id];
-    }
-  }
-}

package/core/TypedData.js

@@ -1,78 +0,0 @@
-import { UID } from '../utils/UID.js';
-import { Data } from './Data.js';
-
-const MSG_NAME = '[Typed State] Wrong property name: ';
-const MSG_TYPE = '[Typed State] Wrong property type: ';
-
-export class TypedData {
-  /**
-   * @param {Object<string, { type: any; value: any; nullable?: Boolean }>} typedSchema
-   * @param {String} [ctxName]
-   */
-  constructor(typedSchema, ctxName) {
-    /** @private */
-    this.__typedSchema = typedSchema;
-    /** @private */
-    this.__ctxId = ctxName || UID.generate();
-    /** @private */
-    this.__schema = Object.keys(typedSchema).reduce((acc, key) => {
-      acc[key] = typedSchema[key].value;
-      return acc;
-    }, {});
-    /**
-     * @private
-     * @type {Data}
-     */
-    this.__data = Data.registerNamedCtx(this.__ctxId, this.__schema);
-  }
-
-  /** @returns {String} */
-  get uid() {
-    return this.__ctxId;
-  }
-
-  /**
-   * @param {String} prop
-   * @param {any} value
-   */
-  setValue(prop, value) {
-    if (!this.__typedSchema.hasOwnProperty(prop)) {
-      console.warn(MSG_NAME + prop);
-      return;
-    }
-    let pDesc = this.__typedSchema[prop];
-    if (value?.constructor === pDesc.type || (pDesc.nullable && value === null)) {
-      this.__data.pub(prop, value);
-      return;
-    }
-    console.warn(MSG_TYPE + prop);
-  }
-
-  /** @param {Object<string, any>} updObj */
-  setMultipleValues(updObj) {
-    for (let prop in updObj) {
-      this.setValue(prop, updObj[prop]);
-    }
-  }
-
-  /** @param {String} prop */
-  getValue(prop) {
-    if (!this.__typedSchema.hasOwnProperty(prop)) {
-      console.warn(MSG_NAME + prop);
-      return undefined;
-    }
-    return this.__data.read(prop);
-  }
-
-  /**
-   * @param {String} prop
-   * @param {(newVal: any) => void} handler
-   */
-  subscribe(prop, handler) {
-    return this.__data.sub(prop, handler);
-  }
-
-  remove() {
-    this.__data.remove();
-  }
-}