@symbiotejs/symbiote 1.10.3 → 1.10.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/BaseComponent.min.js +1 -1
- package/build/symbiote.d.ts +9 -15
- package/build/symbiote.js +42 -44
- package/build/symbiote.min.js +1 -1
- package/core/AppRouter.js +8 -5
- package/core/BaseComponent.js +29 -10
- package/core/Data.js +20 -42
- package/core/repeatProcessor.js +5 -2
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
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",CTX_OWNER_ATTR:"ctx-owner",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,R=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 y(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 x(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,p)=>{if(a[p])if(a[p].set$)a[p].set$(c);else for(let C in c)a[p][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=y(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="{{",A="}}",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(A)&&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(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(l=>{let a=l.textContent.replace(S,"").replace(A,"");l.textContent="",t.sub(a,f=>{l.textContent=f})})})},w=[x,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=R.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,s=!0){let i=T.__parseProp(t,this);i.ctx.has(t)?this.allSubs.add(i.ctx.sub(i.name,e,s)):window.setTimeout(()=>{this.allSubs.add(i.ctx.sub(i.name,e,s))})}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,s=!1){let i=T.__parseProp(t,this);i.ctx.add(i.name,e,s)}add$(t,e=!1){for(let s in t)this.add(s,t[s],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 s of Object.values(t))Object.keys(this.init$).includes(s)||(this.init$[s]="");let e=this.hasAttribute(o.CTX_OWNER_ATTR)&&this.getAttribute(o.CTX_OWNER_ATTR)!=="false";for(let s in this.init$)if(s.startsWith(o.EXT_DATA_CTX_PRFX))this.nodeCtx.add(s.replace(o.EXT_DATA_CTX_PRFX,""),this.init$[s],e);else if(s.includes(o.NAMED_DATA_CTX_SPLTR)){let i=s.split(o.NAMED_DATA_CTX_SPLTR),r=i[0].trim(),l=i[1].trim();if(r&&l){let a=h.getNamedCtx(r,!1);a||(a=h.registerNamedCtx(r,{})),a.add(l,this.init$[s])}}else this.localCtx.add(s,this.init$[s]);for(let s in this.cssInit$)this.bindCssData(s,this.cssInit$[s]);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};
|
|
1
|
+
var O=Object.defineProperty;var N=(l,t,e)=>t in l?O(l,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):l[t]=e;var P=(l,t,e)=>(N(l,typeof t!="symbol"?t+"":t,e),e);function $(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 h=class{constructor(t){t.constructor===Object?this.store=$(t):(this._storeIsProxy=!0,this.store=t),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})}static registerCtx(t,e=Symbol()){let s=h.globalStore.get(e);return s?console.warn('State: context UID "'+e+'" already in use'):(s=new h(t),h.globalStore.set(e,s)),s}static deleteCtx(t){h.globalStore.delete(t)}static getCtx(t,e=!0){return h.globalStore.get(t)||(e&&console.warn('State: wrong context UID - "'+t+'"'),null)}};h.globalStore=new Map;var o=Object.freeze({BIND_ATTR:"set",ATTR_BIND_PRFX:"@",EXT_DATA_CTX_PRFX:"*",NAMED_DATA_CTX_SPLTR:"/",CTX_NAME_ATTR:"ctx-name",CTX_OWNER_ATTR:"ctx-owner",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 R="1234567890QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm",I=R.length-1,S=class{static generate(t="XXXXXXXXX-XXX"){let e="";for(let s=0;s<t.length;s++)e+=t[s]==="-"?t[s]:R.charAt(Math.random()*I);return e}};function E(l,t,e){let s=!0,i,r=t.split(".");return r.forEach((n,a)=>{a<r.length-1?l=l[n]:i=n}),l?l[i]=e:s=!1,s}function g(l){return l.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 y(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 a=[...e.children],f,p=u=>{u.forEach((c,b)=>{if(a[b])if(a[b].set$)setTimeout(()=>{a[b].set$(c)});else for(let C in c)a[b][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(n.constructor===Array)p(n);else if(n.constructor===Object){let u=[];for(let d in n){let c=n[d];Object.defineProperty(c,"_KEY_",{value:d,enumerable:!0}),u.push(c)}p(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 k(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 L(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 M(l,t){[...l.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 n=g(r.name.replace("-",""));i.push(n+":"+r.value),e.removeAttribute(r.name)}}),i.forEach(r=>{if(!r)return;let n=r.split(":").map(u=>u.trim()),a=n[0],f;a.indexOf(o.ATTR_BIND_PRFX)===0&&(f=!0,a=a.replace(o.ATTR_BIND_PRFX,""));let p=n[1].split(",").map(u=>u.trim());for(let u of p){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 x="{{",A="}}",j="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(j))&&i.textContent.includes(x)&&i.textContent.includes(A)&&1}});for(;t=s.nextNode();)e.push(t);return e}var K=function(l,t){F(l).forEach(s=>{let i=[],r;for(;s.textContent.includes(A);)s.textContent.startsWith(x)?(r=s.textContent.indexOf(A)+A.length,s.splitText(r),i.push(s)):(r=s.textContent.indexOf(x),s.splitText(r)),s=s.nextSibling;i.forEach(n=>{let a=n.textContent.replace(x,"").replace(A,"");n.textContent="",t.sub(a,f=>{n.textContent=f})})})},w=[y,k,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,this.ctxOwner=!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 n=this.getRootNode(),a=(n==null?void 0:n.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=S.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 e;let t=((e=this.getAttribute(o.CTX_NAME_ATTR))==null?void 0:e.trim())||this.cssCtxName||this._cachedCtxName||this.autoCtxName;return this._cachedCtxName=t,t}get localCtx(){return this.__localCtx||(this.__localCtx=h.registerCtx({},this)),this.__localCtx}get nodeCtx(){return h.getCtx(this.ctxName,!1)||h.registerCtx({},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.getCtx(r[0]),i=r[1]}else s=e.localCtx,i=t;return{ctx:s,name:i}}sub(t,e,s=!0){let i=n=>{!this.isConnected||e(n)},r=T.__parseProp(t,this);r.ctx.has(t)?this.allSubs.add(r.ctx.sub(r.name,i,s)):window.setTimeout(()=>{this.allSubs.add(r.ctx.sub(r.name,i,s))})}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,s=!1){let i=T.__parseProp(t,this);i.ctx.add(i.name,e,s)}add$(t,e=!1){for(let s in t)this.add(s,t[s],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)}}get __ctxOwner(){return this.ctxOwner||this.hasAttribute(o.CTX_OWNER_ATTR)&&this.getAttribute(o.CTX_OWNER_ATTR)!=="false"}__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],this.__ctxOwner);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=h.getCtx(i,!1);n||(n=h.registerCtx({},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(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
CHANGED
|
@@ -1,21 +1,13 @@
|
|
|
1
1
|
export class Data {
|
|
2
2
|
static warn(actionName: string, prop: string): void;
|
|
3
|
-
static
|
|
3
|
+
static registerCtx(schema: {
|
|
4
4
|
[x: string]: any;
|
|
5
|
-
}): Data;
|
|
6
|
-
static
|
|
5
|
+
}, uid?: any): Data;
|
|
6
|
+
static deleteCtx(uid: any): void;
|
|
7
|
+
static getCtx(uid: any, notify?: boolean): Data;
|
|
8
|
+
constructor(schema: {
|
|
7
9
|
[x: string]: any;
|
|
8
|
-
}): Data;
|
|
9
|
-
static clearNamedCtx(ctxName: string): void;
|
|
10
|
-
static getNamedCtx(ctxName: string, notify?: boolean): Data;
|
|
11
|
-
constructor(src: {
|
|
12
|
-
name?: string;
|
|
13
|
-
schema: {
|
|
14
|
-
[x: string]: any;
|
|
15
|
-
};
|
|
16
10
|
});
|
|
17
|
-
uid: symbol;
|
|
18
|
-
name: string;
|
|
19
11
|
store: {
|
|
20
12
|
[x: string]: any;
|
|
21
13
|
};
|
|
@@ -33,10 +25,9 @@ export class Data {
|
|
|
33
25
|
remove: () => void;
|
|
34
26
|
callback: Function;
|
|
35
27
|
};
|
|
36
|
-
remove(): void;
|
|
37
28
|
}
|
|
38
29
|
export namespace Data {
|
|
39
|
-
const globalStore: any
|
|
30
|
+
const globalStore: Map<any, any>;
|
|
40
31
|
}
|
|
41
32
|
export class BaseComponent<S> extends HTMLElement {
|
|
42
33
|
static template: string;
|
|
@@ -68,10 +59,12 @@ export class BaseComponent<S> extends HTMLElement {
|
|
|
68
59
|
readyToDestroy: boolean;
|
|
69
60
|
processInnerHtml: boolean;
|
|
70
61
|
allowCustomTemplate: boolean;
|
|
62
|
+
ctxOwner: boolean;
|
|
71
63
|
get autoCtxName(): string;
|
|
72
64
|
private __autoCtxName;
|
|
73
65
|
get cssCtxName(): string;
|
|
74
66
|
get ctxName(): string;
|
|
67
|
+
_cachedCtxName: string;
|
|
75
68
|
get localCtx(): Data;
|
|
76
69
|
private __localCtx;
|
|
77
70
|
get nodeCtx(): Data;
|
|
@@ -83,6 +76,7 @@ export class BaseComponent<S> extends HTMLElement {
|
|
|
83
76
|
get $(): S;
|
|
84
77
|
private __stateProxy;
|
|
85
78
|
set$(kvObj: Partial<S>, forcePrimitives?: boolean): void;
|
|
79
|
+
private get __ctxOwner();
|
|
86
80
|
private __initDataCtx;
|
|
87
81
|
private __dataCtxInitialized;
|
|
88
82
|
connectedCallback(): void;
|
package/build/symbiote.js
CHANGED
|
@@ -19,14 +19,12 @@ function cloneObj(obj) {
|
|
|
19
19
|
return clone(obj);
|
|
20
20
|
}
|
|
21
21
|
var Data = class {
|
|
22
|
-
constructor(
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
if (src.schema.constructor === Object) {
|
|
26
|
-
this.store = cloneObj(src.schema);
|
|
22
|
+
constructor(schema) {
|
|
23
|
+
if (schema.constructor === Object) {
|
|
24
|
+
this.store = cloneObj(schema);
|
|
27
25
|
} else {
|
|
28
26
|
this._storeIsProxy = true;
|
|
29
|
-
this.store =
|
|
27
|
+
this.store = schema;
|
|
30
28
|
}
|
|
31
29
|
this.callbackMap = Object.create(null);
|
|
32
30
|
}
|
|
@@ -95,37 +93,24 @@ var Data = class {
|
|
|
95
93
|
callback
|
|
96
94
|
};
|
|
97
95
|
}
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
let state = new Data({
|
|
103
|
-
schema
|
|
104
|
-
});
|
|
105
|
-
Data.globalStore[state.uid] = state;
|
|
106
|
-
return state;
|
|
107
|
-
}
|
|
108
|
-
static registerNamedCtx(ctxName, schema) {
|
|
109
|
-
let state = Data.globalStore[ctxName];
|
|
110
|
-
if (state) {
|
|
111
|
-
console.warn('State: context name "' + ctxName + '" already in use');
|
|
96
|
+
static registerCtx(schema, uid = Symbol()) {
|
|
97
|
+
let data = Data.globalStore.get(uid);
|
|
98
|
+
if (data) {
|
|
99
|
+
console.warn('State: context UID "' + uid + '" already in use');
|
|
112
100
|
} else {
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
schema
|
|
116
|
-
});
|
|
117
|
-
Data.globalStore[ctxName] = state;
|
|
101
|
+
data = new Data(schema);
|
|
102
|
+
Data.globalStore.set(uid, data);
|
|
118
103
|
}
|
|
119
|
-
return
|
|
104
|
+
return data;
|
|
120
105
|
}
|
|
121
|
-
static
|
|
122
|
-
|
|
106
|
+
static deleteCtx(uid) {
|
|
107
|
+
Data.globalStore.delete(uid);
|
|
123
108
|
}
|
|
124
|
-
static
|
|
125
|
-
return Data.globalStore
|
|
109
|
+
static getCtx(uid, notify = true) {
|
|
110
|
+
return Data.globalStore.get(uid) || (notify && console.warn('State: wrong context UID - "' + uid + '"'), null);
|
|
126
111
|
}
|
|
127
112
|
};
|
|
128
|
-
Data.globalStore =
|
|
113
|
+
Data.globalStore = /* @__PURE__ */ new Map();
|
|
129
114
|
|
|
130
115
|
// core/dictionary.js
|
|
131
116
|
var DICT = Object.freeze({
|
|
@@ -224,7 +209,9 @@ function repeatProcessor(fr, fnCtx) {
|
|
|
224
209
|
items.forEach((item, idx) => {
|
|
225
210
|
if (currentList[idx]) {
|
|
226
211
|
if (currentList[idx].set$) {
|
|
227
|
-
|
|
212
|
+
setTimeout(() => {
|
|
213
|
+
currentList[idx].set$(item);
|
|
214
|
+
});
|
|
228
215
|
} else {
|
|
229
216
|
for (let k in item) {
|
|
230
217
|
currentList[idx][k] = item[k];
|
|
@@ -442,6 +429,7 @@ var _BaseComponent = class extends HTMLElement {
|
|
|
442
429
|
this.readyToDestroy = true;
|
|
443
430
|
this.processInnerHtml = false;
|
|
444
431
|
this.allowCustomTemplate = false;
|
|
432
|
+
this.ctxOwner = false;
|
|
445
433
|
}
|
|
446
434
|
get BaseComponent() {
|
|
447
435
|
return _BaseComponent;
|
|
@@ -528,16 +516,18 @@ var _BaseComponent = class extends HTMLElement {
|
|
|
528
516
|
}
|
|
529
517
|
get ctxName() {
|
|
530
518
|
var _a;
|
|
531
|
-
|
|
519
|
+
let ctxName = ((_a = this.getAttribute(DICT.CTX_NAME_ATTR)) == null ? void 0 : _a.trim()) || this.cssCtxName || this._cachedCtxName || this.autoCtxName;
|
|
520
|
+
this._cachedCtxName = ctxName;
|
|
521
|
+
return ctxName;
|
|
532
522
|
}
|
|
533
523
|
get localCtx() {
|
|
534
524
|
if (!this.__localCtx) {
|
|
535
|
-
this.__localCtx = Data.
|
|
525
|
+
this.__localCtx = Data.registerCtx({}, this);
|
|
536
526
|
}
|
|
537
527
|
return this.__localCtx;
|
|
538
528
|
}
|
|
539
529
|
get nodeCtx() {
|
|
540
|
-
return Data.
|
|
530
|
+
return Data.getCtx(this.ctxName, false) || Data.registerCtx({}, this.ctxName);
|
|
541
531
|
}
|
|
542
532
|
static __parseProp(prop, fnCtx) {
|
|
543
533
|
let ctx;
|
|
@@ -547,7 +537,7 @@ var _BaseComponent = class extends HTMLElement {
|
|
|
547
537
|
name = prop.replace(DICT.EXT_DATA_CTX_PRFX, "");
|
|
548
538
|
} else if (prop.includes(DICT.NAMED_DATA_CTX_SPLTR)) {
|
|
549
539
|
let pArr = prop.split(DICT.NAMED_DATA_CTX_SPLTR);
|
|
550
|
-
ctx = Data.
|
|
540
|
+
ctx = Data.getCtx(pArr[0]);
|
|
551
541
|
name = pArr[1];
|
|
552
542
|
} else {
|
|
553
543
|
ctx = fnCtx.localCtx;
|
|
@@ -559,13 +549,19 @@ var _BaseComponent = class extends HTMLElement {
|
|
|
559
549
|
};
|
|
560
550
|
}
|
|
561
551
|
sub(prop, handler, init = true) {
|
|
552
|
+
let subCb = (val) => {
|
|
553
|
+
if (!this.isConnected) {
|
|
554
|
+
return;
|
|
555
|
+
}
|
|
556
|
+
handler(val);
|
|
557
|
+
};
|
|
562
558
|
let parsed = _BaseComponent.__parseProp(prop, this);
|
|
563
559
|
if (!parsed.ctx.has(prop)) {
|
|
564
560
|
window.setTimeout(() => {
|
|
565
|
-
this.allSubs.add(parsed.ctx.sub(parsed.name,
|
|
561
|
+
this.allSubs.add(parsed.ctx.sub(parsed.name, subCb, init));
|
|
566
562
|
});
|
|
567
563
|
} else {
|
|
568
|
-
this.allSubs.add(parsed.ctx.sub(parsed.name,
|
|
564
|
+
this.allSubs.add(parsed.ctx.sub(parsed.name, subCb, init));
|
|
569
565
|
}
|
|
570
566
|
}
|
|
571
567
|
notify(prop) {
|
|
@@ -613,6 +609,9 @@ var _BaseComponent = class extends HTMLElement {
|
|
|
613
609
|
}
|
|
614
610
|
}
|
|
615
611
|
}
|
|
612
|
+
get __ctxOwner() {
|
|
613
|
+
return this.ctxOwner || this.hasAttribute(DICT.CTX_OWNER_ATTR) && this.getAttribute(DICT.CTX_OWNER_ATTR) !== "false";
|
|
614
|
+
}
|
|
616
615
|
__initDataCtx() {
|
|
617
616
|
let attrDesc = this.constructor["__attrDesc"];
|
|
618
617
|
if (attrDesc) {
|
|
@@ -622,18 +621,17 @@ var _BaseComponent = class extends HTMLElement {
|
|
|
622
621
|
}
|
|
623
622
|
}
|
|
624
623
|
}
|
|
625
|
-
let rewrite = this.hasAttribute(DICT.CTX_OWNER_ATTR) && this.getAttribute(DICT.CTX_OWNER_ATTR) !== "false";
|
|
626
624
|
for (let prop in this.init$) {
|
|
627
625
|
if (prop.startsWith(DICT.EXT_DATA_CTX_PRFX)) {
|
|
628
|
-
this.nodeCtx.add(prop.replace(DICT.EXT_DATA_CTX_PRFX, ""), this.init$[prop],
|
|
626
|
+
this.nodeCtx.add(prop.replace(DICT.EXT_DATA_CTX_PRFX, ""), this.init$[prop], this.__ctxOwner);
|
|
629
627
|
} else if (prop.includes(DICT.NAMED_DATA_CTX_SPLTR)) {
|
|
630
628
|
let propArr = prop.split(DICT.NAMED_DATA_CTX_SPLTR);
|
|
631
629
|
let ctxName = propArr[0].trim();
|
|
632
630
|
let propName = propArr[1].trim();
|
|
633
631
|
if (ctxName && propName) {
|
|
634
|
-
let namedCtx = Data.
|
|
632
|
+
let namedCtx = Data.getCtx(ctxName, false);
|
|
635
633
|
if (!namedCtx) {
|
|
636
|
-
namedCtx = Data.
|
|
634
|
+
namedCtx = Data.registerCtx({}, ctxName);
|
|
637
635
|
}
|
|
638
636
|
namedCtx.add(propName, this.init$[prop]);
|
|
639
637
|
}
|
|
@@ -935,11 +933,11 @@ var AppRouter = class {
|
|
|
935
933
|
}
|
|
936
934
|
static createRouterData(ctxName, routingMap) {
|
|
937
935
|
this.setRoutingMap(routingMap);
|
|
938
|
-
let routeData = Data.
|
|
936
|
+
let routeData = Data.registerCtx({
|
|
939
937
|
route: null,
|
|
940
938
|
options: null,
|
|
941
939
|
title: null
|
|
942
|
-
});
|
|
940
|
+
}, ctxName);
|
|
943
941
|
window.addEventListener(this.routingEventName, (e) => {
|
|
944
942
|
var _a;
|
|
945
943
|
routeData.multiPub({
|
package/build/symbiote.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
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",CTX_OWNER_ATTR:"ctx-owner",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 N="1234567890QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm",B=N.length-1,y=class{static generate(t="XXXXXXXXX-XXX"){let e="";for(let s=0;s<t.length;s++)e+=t[s]==="-"?t[s]:N.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 D(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 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 H(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="}}",K="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(K))&&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=_})})})},O=[D,U,W,H,Y];var X=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,s=!0){let i=p.__parseProp(t,this);i.ctx.has(t)?this.allSubs.add(i.ctx.sub(i.name,e,s)):window.setTimeout(()=>{this.allSubs.add(i.ctx.sub(i.name,e,s))})}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,s=!1){let i=p.__parseProp(t,this);i.ctx.add(i.name,e,s)}add$(t,e=!1){for(let s in t)this.add(s,t[s],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 s of Object.values(t))Object.keys(this.init$).includes(s)||(this.init$[s]="");let e=this.hasAttribute(a.CTX_OWNER_ATTR)&&this.getAttribute(a.CTX_OWNER_ATTR)!=="false";for(let s in this.init$)if(s.startsWith(a.EXT_DATA_CTX_PRFX))this.nodeCtx.add(s.replace(a.EXT_DATA_CTX_PRFX,""),this.init$[s],e);else if(s.includes(a.NAMED_DATA_CTX_SPLTR)){let i=s.split(a.NAMED_DATA_CTX_SPLTR),r=i[0].trim(),n=i[1].trim();if(r&&n){let l=c.getNamedCtx(r,!1);l||(l=c.registerNamedCtx(r,{})),l.add(n,this.init$[s])}}else this.localCtx.add(s,this.init$[s]);for(let s in this.cssInit$)this.bindCssData(s,this.cssInit$[s]);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 O)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||(X++,t=`${a.AUTO_TAG_PRFX}-${X}`),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 v(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&&v(t,o.styles),o.properties)for(let e in o.properties)t[e]=o.properties[e];return o.processors&&o.processors.forEach(e=>{e(t)}),o.children&&o.children.forEach(e=>{let s=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,v as applyStyles,I as create,x as kebabToCamel,A as setNestedProp};
|
|
1
|
+
var j=Object.defineProperty;var k=(n,t,e)=>t in n?j(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var E=(n,t,e)=>(k(n,typeof t!="symbol"?t+"":t,e),e);function F(n){let t=e=>{var s;for(let r in e)((s=e[r])==null?void 0:s.constructor)===Object&&(e[r]=t(e[r]));return{...e}};return t(n)}var u=class{constructor(t){t.constructor===Object?this.store=F(t):(this._storeIsProxy=!0,this.store=t),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)?(u.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)){u.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)?(u.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})}static registerCtx(t,e=Symbol()){let s=u.globalStore.get(e);return s?console.warn('State: context UID "'+e+'" already in use'):(s=new u(t),u.globalStore.set(e,s)),s}static deleteCtx(t){u.globalStore.delete(t)}static getCtx(t,e=!0){return u.globalStore.get(t)||(e&&console.warn('State: wrong context UID - "'+t+'"'),null)}};u.globalStore=new Map;var a=Object.freeze({BIND_ATTR:"set",ATTR_BIND_PRFX:"@",EXT_DATA_CTX_PRFX:"*",NAMED_DATA_CTX_SPLTR:"/",CTX_NAME_ATTR:"ctx-name",CTX_OWNER_ATTR:"ctx-owner",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",U=D.length-1,x=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()*U);return e}};function A(n,t,e){let s=!0,r,i=t.split(".");return i.forEach((o,l)=>{l<i.length-1?n=n[o]:r=o}),n?n[r]=e:s=!1,s}function P(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 N(n,t){[...n.querySelectorAll(`[${a.REPEAT_ATTR}]`)].forEach(e=>{let s=e.getAttribute(a.REPEAT_ITEM_TAG_ATTR),r;if(s&&(r=window.customElements.get(s)),!r){r=class extends t.BaseComponent{constructor(){super();s||(this.style.display="contents")}};let o=e.innerHTML;r.template=o,r.reg(s)}for(;e.firstChild;)e.firstChild.remove();let i=e.getAttribute(a.REPEAT_ATTR);t.sub(i,o=>{if(!o){for(;e.firstChild;)e.firstChild.remove();return}let l=[...e.children],_,m=h=>{h.forEach((c,w)=>{if(l[w])if(l[w].set$)setTimeout(()=>{l[w].set$(c)});else for(let C in c)l[w][C]=c[C];else{_||(_=new DocumentFragment);let C=new r;Object.assign(C.init$,c),_.appendChild(C)}}),_&&e.appendChild(_);let f=l.slice(h.length,l.length);for(let c of f)c.remove()};if(o.constructor===Array)m(o);else if(o.constructor===Object){let h=[];for(let f in o){let c=o[f];Object.defineProperty(c,"_KEY_",{value:f,enumerable:!0}),h.push(c)}m(h)}else console.warn("Symbiote repeat data type error:"),console.log(o)}),e.removeAttribute(a.REPEAT_ATTR),e.removeAttribute(a.REPEAT_ITEM_TAG_ATTR)})}function B(n,t){if(t.shadowRoot)return;let e=[...n.querySelectorAll("slot")];if(t.initChildren.length&&e.length){let s={};e.forEach(r=>{let i=r.getAttribute("name");i?s[i]={slot:r,fr:document.createDocumentFragment()}:s.__default__={slot:r,fr:document.createDocumentFragment()}}),t.initChildren.forEach(r=>{var o;let i=(o=r.getAttribute)==null?void 0:o.call(r,"slot");i?(r.removeAttribute("slot"),s[i].fr.appendChild(r)):s.__default__&&s.__default__.fr.appendChild(r)}),Object.values(s).forEach(r=>{r.slot.parentNode.insertBefore(r.fr,r.slot),r.slot.remove()})}}function W(n,t){[...n.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 H(n,t){[...n.querySelectorAll(`[${a.BIND_ATTR}]`)].forEach(e=>{let r=e.getAttribute(a.BIND_ATTR).split(";");[...e.attributes].forEach(i=>{if(i.name.startsWith("-")&&i.value){let o=P(i.name.replace("-",""));r.push(o+":"+i.value),e.removeAttribute(i.name)}}),r.forEach(i=>{if(!i)return;let o=i.split(":").map(h=>h.trim()),l=o[0],_;l.indexOf(a.ATTR_BIND_PRFX)===0&&(_=!0,l=l.replace(a.ATTR_BIND_PRFX,""));let m=o[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,c=>{f==="double"?c=!!c:f==="single"&&(c=!c),_?(c==null?void 0:c.constructor)===Boolean?c?e.setAttribute(l,""):e.removeAttribute(l):e.setAttribute(l,c):A(e,l,c)||(e[a.SET_LATER_KEY]||(e[a.SET_LATER_KEY]=Object.create(null)),e[a.SET_LATER_KEY][l]=c)})}}),e.removeAttribute(a.BIND_ATTR)})}var y="{{",g="}}",K="skip-text";function q(n){let t,e=[],s=document.createTreeWalker(n,NodeFilter.SHOW_TEXT,{acceptNode:r=>{var i;return!((i=r.parentElement)==null?void 0:i.hasAttribute(K))&&r.textContent.includes(y)&&r.textContent.includes(g)&&1}});for(;t=s.nextNode();)e.push(t);return e}var Y=function(n,t){q(n).forEach(s=>{let r=[],i;for(;s.textContent.includes(g);)s.textContent.startsWith(y)?(i=s.textContent.indexOf(g)+g.length,s.splitText(i),r.push(s)):(i=s.textContent.indexOf(y),s.splitText(i)),s=s.nextSibling;r.forEach(o=>{let l=o.textContent.replace(y,"").replace(g,"");o.textContent="",t.sub(l,_=>{o.textContent=_})})})},O=[N,B,W,H,Y];var X=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,this.ctxOwner=!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 i=this.getAttribute(a.USE_TPL);if(i){let o=this.getRootNode(),l=(o==null?void 0:o.querySelector(i))||document.querySelector(i);l?t=l.content.cloneNode(!0):console.warn(`Symbiote template "${i}" is not found...`)}}if(this.processInnerHtml)for(let i of this.tplProcessors)i(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 i=document.createElement("template");i.innerHTML=t,s=i.content.cloneNode(!0)}else this.constructor.__tpl&&(s=this.constructor.__tpl.content.cloneNode(!0));for(let i of this.tplProcessors)i(s,this)}let r=()=>{s&&(e&&this.shadowRoot.appendChild(s)||this.appendChild(s)),this.__initCallback()};if(this.constructor.__shadowStylesUrl){e=!0;let i=document.createElement("link");i.rel="stylesheet",i.href=this.constructor.__shadowStylesUrl,i.onload=r,this.shadowRoot.prepend(i)}else r()}addTemplateProcessor(t){this.tplProcessors.add(t)}get autoCtxName(){return this.__autoCtxName||(this.__autoCtxName=x.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 e;let t=((e=this.getAttribute(a.CTX_NAME_ATTR))==null?void 0:e.trim())||this.cssCtxName||this._cachedCtxName||this.autoCtxName;return this._cachedCtxName=t,t}get localCtx(){return this.__localCtx||(this.__localCtx=u.registerCtx({},this)),this.__localCtx}get nodeCtx(){return u.getCtx(this.ctxName,!1)||u.registerCtx({},this.ctxName)}static __parseProp(t,e){let s,r;if(t.startsWith(a.EXT_DATA_CTX_PRFX))s=e.nodeCtx,r=t.replace(a.EXT_DATA_CTX_PRFX,"");else if(t.includes(a.NAMED_DATA_CTX_SPLTR)){let i=t.split(a.NAMED_DATA_CTX_SPLTR);s=u.getCtx(i[0]),r=i[1]}else s=e.localCtx,r=t;return{ctx:s,name:r}}sub(t,e,s=!0){let r=o=>{!this.isConnected||e(o)},i=p.__parseProp(t,this);i.ctx.has(t)?this.allSubs.add(i.ctx.sub(i.name,r,s)):window.setTimeout(()=>{this.allSubs.add(i.ctx.sub(i.name,r,s))})}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,s=!1){let r=p.__parseProp(t,this);r.ctx.add(r.name,e,s)}add$(t,e=!1){for(let s in t)this.add(s,t[s],e)}get $(){if(!this.__stateProxy){let t=Object.create(null);this.__stateProxy=new Proxy(t,{set:(e,s,r)=>{let i=p.__parseProp(s,this);return i.ctx.pub(i.name,r),!0},get:(e,s)=>{let r=p.__parseProp(s,this);return r.ctx.read(r.name)}})}return this.__stateProxy}set$(t,e=!1){for(let s in t){let r=t[s];e||![String,Number,Boolean].includes(r==null?void 0:r.constructor)?this.$[s]=r:this.$[s]!==r&&(this.$[s]=r)}}get __ctxOwner(){return this.ctxOwner||this.hasAttribute(a.CTX_OWNER_ATTR)&&this.getAttribute(a.CTX_OWNER_ATTR)!=="false"}__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],this.__ctxOwner);else if(e.includes(a.NAMED_DATA_CTX_SPLTR)){let s=e.split(a.NAMED_DATA_CTX_SPLTR),r=s[0].trim(),i=s[1].trim();if(r&&i){let o=u.getCtx(r,!1);o||(o=u.registerCtx({},r)),o.add(i,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 O)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||(X++,t=`${a.AUTO_TAG_PRFX}-${X}`),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 i;if(e===s)return;let r=(i=this.constructor.__attrDesc)==null?void 0:i[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{!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 r="__"+t;this[r]=this[t],Object.defineProperty(this,t,{set:i=>{this[r]=i,s?window.setTimeout(()=>{e==null||e(i)}):e==null||e(i)},get:()=>this[r]}),this[t]=this[r]}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 r=s.split("=");t.options[r[0]]=decodeURI(r[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 r="?"+t;for(let o in e)e[o]===!0?r+=this.separator+o:r+=this.separator+o+`=${e[o]}`;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=u.registerCtx({route:null,options:null,title:null},t);return window.addEventListener(this.routingEventName,r=>{var i;s.multiPub({route:r.detail.route,options:r.detail.options,title:((i=r.detail.options)==null?void 0:i.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 v(n,t){for(let e in t)e.includes("-")?n.style.setProperty(e,t[e]):n.style[e]=t[e]}function I(n,t){for(let e in t)t[e].constructor===Boolean?t[e]?n.setAttribute(e,""):n.removeAttribute(e):n.setAttribute(e,t[e])}function L(n={tag:"div"}){let t=document.createElement(n.tag);if(n.attributes&&I(t,n.attributes),n.styles&&v(t,n.styles),n.properties)for(let e in n.properties)t[e]=n.properties[e];return n.processors&&n.processors.forEach(e=>{e(t)}),n.children&&n.children.forEach(e=>{let s=L(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=r=>{this._notifyWhenReady(r)}},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 i=>{i(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((r,i)=>{s.onsuccess=o=>{var l;((l=o.target.result)==null?void 0:l._value)?r(o.target.result._value):(r(null),console.warn(`IDB: cannot read "${t}"`))},s.onerror=o=>{i(o)}})}write(t,e,s=!1){let r={_key:t,_value:e},o=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).put(r);return new Promise((l,_)=>{o.onsuccess=m=>{s||this._notifySubscribers(t),l(m.target.result)},o.onerror=m=>{_(m)}})}delete(t,e=!1){let r=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).delete(t);return new Promise((i,o)=>{r.onsuccess=l=>{e||this._notifySubscribers(t),i(l)},r.onerror=l=>{o(l)}})}getAll(){let e=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).getAll();return new Promise((s,r)=>{e.onsuccess=i=>{let o=i.target.result;s(o.map(l=>l._value))},e.onerror=i=>{r(i)}})}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,S.clear(this.name)}},S=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(S,"_reg",Object.create(null));export{b as AppRouter,R as BaseComponent,u as Data,S as IDB,x as UID,I as applyAttributes,v as applyStyles,L as create,P as kebabToCamel,A as setNestedProp};
|
package/core/AppRouter.js
CHANGED
|
@@ -131,11 +131,14 @@ export class AppRouter {
|
|
|
131
131
|
*/
|
|
132
132
|
static createRouterData(ctxName, routingMap) {
|
|
133
133
|
this.setRoutingMap(routingMap);
|
|
134
|
-
let routeData = Data.
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
134
|
+
let routeData = Data.registerCtx(
|
|
135
|
+
{
|
|
136
|
+
route: null,
|
|
137
|
+
options: null,
|
|
138
|
+
title: null,
|
|
139
|
+
},
|
|
140
|
+
ctxName
|
|
141
|
+
);
|
|
139
142
|
window.addEventListener(this.routingEventName, (/** @type {CustomEvent} */ e) => {
|
|
140
143
|
routeData.multiPub({
|
|
141
144
|
route: e.detail.route,
|
package/core/BaseComponent.js
CHANGED
|
@@ -133,6 +133,8 @@ export class BaseComponent extends HTMLElement {
|
|
|
133
133
|
this.processInnerHtml = false;
|
|
134
134
|
/** @type {Boolean} */
|
|
135
135
|
this.allowCustomTemplate = false;
|
|
136
|
+
/** @type {Boolean} */
|
|
137
|
+
this.ctxOwner = false;
|
|
136
138
|
}
|
|
137
139
|
|
|
138
140
|
/** @returns {String} */
|
|
@@ -152,21 +154,28 @@ export class BaseComponent extends HTMLElement {
|
|
|
152
154
|
|
|
153
155
|
/** @returns {String} */
|
|
154
156
|
get ctxName() {
|
|
155
|
-
|
|
157
|
+
let ctxName = this.getAttribute(DICT.CTX_NAME_ATTR)?.trim() || this.cssCtxName || this._cachedCtxName || this.autoCtxName;
|
|
158
|
+
/**
|
|
159
|
+
* Cache last ctx name to be able to access context when element becames disconnected
|
|
160
|
+
*
|
|
161
|
+
* @type {String}
|
|
162
|
+
*/
|
|
163
|
+
this._cachedCtxName = ctxName;
|
|
164
|
+
return ctxName;
|
|
156
165
|
}
|
|
157
166
|
|
|
158
167
|
/** @returns {Data} */
|
|
159
168
|
get localCtx() {
|
|
160
169
|
if (!this.__localCtx) {
|
|
161
170
|
/** @private */
|
|
162
|
-
this.__localCtx = Data.
|
|
171
|
+
this.__localCtx = Data.registerCtx({}, this);
|
|
163
172
|
}
|
|
164
173
|
return this.__localCtx;
|
|
165
174
|
}
|
|
166
175
|
|
|
167
176
|
/** @returns {Data} */
|
|
168
177
|
get nodeCtx() {
|
|
169
|
-
return Data.
|
|
178
|
+
return Data.getCtx(this.ctxName, false) || Data.registerCtx({}, this.ctxName);
|
|
170
179
|
}
|
|
171
180
|
|
|
172
181
|
/**
|
|
@@ -185,7 +194,7 @@ export class BaseComponent extends HTMLElement {
|
|
|
185
194
|
name = prop.replace(DICT.EXT_DATA_CTX_PRFX, '');
|
|
186
195
|
} else if (prop.includes(DICT.NAMED_DATA_CTX_SPLTR)) {
|
|
187
196
|
let pArr = prop.split(DICT.NAMED_DATA_CTX_SPLTR);
|
|
188
|
-
ctx = Data.
|
|
197
|
+
ctx = Data.getCtx(pArr[0]);
|
|
189
198
|
name = pArr[1];
|
|
190
199
|
} else {
|
|
191
200
|
ctx = fnCtx.localCtx;
|
|
@@ -204,15 +213,21 @@ export class BaseComponent extends HTMLElement {
|
|
|
204
213
|
* @param {Boolean} [init]
|
|
205
214
|
*/
|
|
206
215
|
sub(prop, handler, init = true) {
|
|
216
|
+
let subCb = (val) => {
|
|
217
|
+
if (!this.isConnected) {
|
|
218
|
+
return;
|
|
219
|
+
}
|
|
220
|
+
handler(val);
|
|
221
|
+
};
|
|
207
222
|
let parsed = BaseComponent.__parseProp(/** @type {string} */ (prop), this);
|
|
208
223
|
// @ts-ignore
|
|
209
224
|
if (!parsed.ctx.has(prop)) {
|
|
210
225
|
// Avoid *prop binding race:
|
|
211
226
|
window.setTimeout(() => {
|
|
212
|
-
this.allSubs.add(parsed.ctx.sub(parsed.name,
|
|
227
|
+
this.allSubs.add(parsed.ctx.sub(parsed.name, subCb, init));
|
|
213
228
|
});
|
|
214
229
|
} else {
|
|
215
|
-
this.allSubs.add(parsed.ctx.sub(parsed.name,
|
|
230
|
+
this.allSubs.add(parsed.ctx.sub(parsed.name, subCb, init));
|
|
216
231
|
}
|
|
217
232
|
}
|
|
218
233
|
|
|
@@ -286,6 +301,11 @@ export class BaseComponent extends HTMLElement {
|
|
|
286
301
|
}
|
|
287
302
|
}
|
|
288
303
|
|
|
304
|
+
/** @private */
|
|
305
|
+
get __ctxOwner() {
|
|
306
|
+
return this.ctxOwner || (this.hasAttribute(DICT.CTX_OWNER_ATTR) && this.getAttribute(DICT.CTX_OWNER_ATTR) !== 'false');
|
|
307
|
+
}
|
|
308
|
+
|
|
289
309
|
/** @private */
|
|
290
310
|
__initDataCtx() {
|
|
291
311
|
/** @type {{ [key: string]: string }} */
|
|
@@ -297,18 +317,17 @@ export class BaseComponent extends HTMLElement {
|
|
|
297
317
|
}
|
|
298
318
|
}
|
|
299
319
|
}
|
|
300
|
-
let rewrite = this.hasAttribute(DICT.CTX_OWNER_ATTR) && this.getAttribute(DICT.CTX_OWNER_ATTR) !== 'false';
|
|
301
320
|
for (let prop in this.init$) {
|
|
302
321
|
if (prop.startsWith(DICT.EXT_DATA_CTX_PRFX)) {
|
|
303
|
-
this.nodeCtx.add(prop.replace(DICT.EXT_DATA_CTX_PRFX, ''), this.init$[prop],
|
|
322
|
+
this.nodeCtx.add(prop.replace(DICT.EXT_DATA_CTX_PRFX, ''), this.init$[prop], this.__ctxOwner);
|
|
304
323
|
} else if (prop.includes(DICT.NAMED_DATA_CTX_SPLTR)) {
|
|
305
324
|
let propArr = prop.split(DICT.NAMED_DATA_CTX_SPLTR);
|
|
306
325
|
let ctxName = propArr[0].trim();
|
|
307
326
|
let propName = propArr[1].trim();
|
|
308
327
|
if (ctxName && propName) {
|
|
309
|
-
let namedCtx = Data.
|
|
328
|
+
let namedCtx = Data.getCtx(ctxName, false);
|
|
310
329
|
if (!namedCtx) {
|
|
311
|
-
namedCtx = Data.
|
|
330
|
+
namedCtx = Data.registerCtx({}, ctxName);
|
|
312
331
|
}
|
|
313
332
|
namedCtx.add(propName, this.init$[prop]);
|
|
314
333
|
}
|
package/core/Data.js
CHANGED
|
@@ -12,21 +12,15 @@ function cloneObj(obj) {
|
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
export class Data {
|
|
15
|
-
/**
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
*/
|
|
20
|
-
constructor(src) {
|
|
21
|
-
this.uid = Symbol();
|
|
22
|
-
this.name = src.name || null;
|
|
23
|
-
if (src.schema.constructor === Object) {
|
|
24
|
-
this.store = cloneObj(src.schema);
|
|
15
|
+
/** @param {Object<string, any>} schema */
|
|
16
|
+
constructor(schema) {
|
|
17
|
+
if (schema.constructor === Object) {
|
|
18
|
+
this.store = cloneObj(schema);
|
|
25
19
|
} else {
|
|
26
20
|
// For Proxy support:
|
|
27
21
|
/** @private */
|
|
28
22
|
this._storeIsProxy = true;
|
|
29
|
-
this.store =
|
|
23
|
+
this.store = schema;
|
|
30
24
|
}
|
|
31
25
|
/** @type {Object<String, Set<Function>>} */
|
|
32
26
|
this.callbackMap = Object.create(null);
|
|
@@ -128,52 +122,36 @@ export class Data {
|
|
|
128
122
|
};
|
|
129
123
|
}
|
|
130
124
|
|
|
131
|
-
remove() {
|
|
132
|
-
delete Data.globalStore[this.uid];
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
/** @param {Object<string, any>} schema */
|
|
136
|
-
static registerLocalCtx(schema) {
|
|
137
|
-
let state = new Data({
|
|
138
|
-
schema,
|
|
139
|
-
});
|
|
140
|
-
Data.globalStore[state.uid] = state;
|
|
141
|
-
return state;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
125
|
/**
|
|
145
|
-
* @param {String} ctxName
|
|
146
126
|
* @param {Object<string, any>} schema
|
|
127
|
+
* @param {any} [uid]
|
|
147
128
|
* @returns {Data}
|
|
148
129
|
*/
|
|
149
|
-
static
|
|
130
|
+
static registerCtx(schema, uid = Symbol()) {
|
|
150
131
|
/** @type {Data} */
|
|
151
|
-
let
|
|
152
|
-
if (
|
|
153
|
-
console.warn('State: context
|
|
132
|
+
let data = Data.globalStore.get(uid);
|
|
133
|
+
if (data) {
|
|
134
|
+
console.warn('State: context UID "' + uid + '" already in use');
|
|
154
135
|
} else {
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
schema,
|
|
158
|
-
});
|
|
159
|
-
Data.globalStore[ctxName] = state;
|
|
136
|
+
data = new Data(schema);
|
|
137
|
+
Data.globalStore.set(uid, data);
|
|
160
138
|
}
|
|
161
|
-
return
|
|
139
|
+
return data;
|
|
162
140
|
}
|
|
163
141
|
|
|
164
|
-
/** @param {
|
|
165
|
-
static
|
|
166
|
-
|
|
142
|
+
/** @param {any} uid */
|
|
143
|
+
static deleteCtx(uid) {
|
|
144
|
+
Data.globalStore.delete(uid);
|
|
167
145
|
}
|
|
168
146
|
|
|
169
147
|
/**
|
|
170
|
-
* @param {
|
|
148
|
+
* @param {any} uid
|
|
171
149
|
* @param {Boolean} [notify]
|
|
172
150
|
* @returns {Data}
|
|
173
151
|
*/
|
|
174
|
-
static
|
|
175
|
-
return Data.globalStore
|
|
152
|
+
static getCtx(uid, notify = true) {
|
|
153
|
+
return Data.globalStore.get(uid) || (notify && console.warn('State: wrong context UID - "' + uid + '"'), null);
|
|
176
154
|
}
|
|
177
155
|
}
|
|
178
156
|
|
|
179
|
-
Data.globalStore =
|
|
157
|
+
Data.globalStore = new Map();
|
package/core/repeatProcessor.js
CHANGED
|
@@ -43,8 +43,11 @@ export function repeatProcessor(fr, fnCtx) {
|
|
|
43
43
|
if (currentList[idx]) {
|
|
44
44
|
// @ts-ignore
|
|
45
45
|
if (currentList[idx].set$) {
|
|
46
|
-
//
|
|
47
|
-
|
|
46
|
+
// wait until repeated element's state will be initialized
|
|
47
|
+
setTimeout(() => {
|
|
48
|
+
// @ts-ignore
|
|
49
|
+
currentList[idx].set$(item);
|
|
50
|
+
});
|
|
48
51
|
} else {
|
|
49
52
|
for (let k in item) {
|
|
50
53
|
currentList[idx][k] = item[k];
|