@symbiotejs/symbiote 1.11.4 → 1.11.5-alpha
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 +2 -2
- package/build/symbiote.js +31 -30
- package/build/symbiote.min.js +2 -2
- package/core/tpl-processors.js +33 -29
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var
|
|
2
|
-
`,"\\n"),t=
|
|
1
|
+
var $=Object.defineProperty;var I=(o,t,e)=>t in o?$(o,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[t]=e;var x=(o,t,e)=>(I(o,typeof t!="symbol"?t+"":t,e),e);function M(o){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(o)}var h=class{constructor(t){t.constructor===Object?this.store=M(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){!s&&Object.keys(this.store).includes(t)||(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 l=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",ROOT_STYLE_ATTR_NAME:"sym-component"});var g="1234567890QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm",F=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()*F);return e}};function S(o,t,e){let s=!0,r,i=t.split(".");return i.forEach((n,c)=>{c<i.length-1?o=o[n]:r=n}),o?o[r]=e:s=!1,s}function w(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(`[${l.REPEAT_ATTR}]`)].forEach(e=>{let s=e.getAttribute(l.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 n=e.innerHTML;r.template=n,r.reg(s)}for(;e.firstChild;)e.firstChild.remove();let i=e.getAttribute(l.REPEAT_ATTR);t.sub(i,n=>{if(!n){for(;e.firstChild;)e.firstChild.remove();return}let c=[...e.children],f,E=u=>{u.forEach((a,b)=>{if(c[b])if(c[b].set$)setTimeout(()=>{c[b].set$(a)});else for(let p in a)c[b][p]=a[p];else{f||(f=new DocumentFragment);let p=new r;Object.assign(p.init$,a),f.appendChild(p)}}),f&&e.appendChild(f);let d=c.slice(u.length,c.length);for(let a of d)a.remove()};if(n.constructor===Array)E(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)}E(u)}else console.warn("Symbiote repeat data type error:"),console.log(n)}),e.removeAttribute(l.REPEAT_ATTR),e.removeAttribute(l.REPEAT_ITEM_TAG_ATTR)})}var O="__default__";function U(o,t){if(t.shadowRoot)return;let e=[...o.querySelectorAll("slot")];if(!e.length)return;let s={};e.forEach(r=>{let i=r.getAttribute("name")||O;s[i]={slot:r,fr:document.createDocumentFragment()}}),t.initChildren.forEach(r=>{var n;let i=O;r instanceof Element&&r.hasAttribute("slot")&&(i=r.getAttribute("slot"),r.removeAttribute("slot")),(n=s[i])==null||n.fr.appendChild(r)}),Object.values(s).forEach(r=>{if(r.fr.childNodes.length)r.slot.parentNode.replaceChild(r.fr,r.slot);else if(r.slot.childNodes.length){let i=document.createDocumentFragment();i.append(...r.slot.childNodes),r.slot.parentNode.replaceChild(i,r.slot)}else r.slot.remove()})}function j(o,t){[...o.querySelectorAll(`[${l.EL_REF_ATTR}]`)].forEach(e=>{let s=e.getAttribute(l.EL_REF_ATTR);t.ref[s]=e,e.removeAttribute(l.EL_REF_ATTR)})}function K(o,t){[...o.querySelectorAll(`[${l.BIND_ATTR}]`)].forEach(e=>{let r=e.getAttribute(l.BIND_ATTR).split(";");[...e.attributes].forEach(i=>{if(i.name.startsWith("-")&&i.value){let n=w(i.name.replace("-",""));r.push(n+":"+i.value),e.removeAttribute(i.name)}}),r.forEach(i=>{if(!i)return;let n=i.split(":").map(u=>u.trim()),c=n[0],f;c.indexOf(l.ATTR_BIND_PRFX)===0&&(f=!0,c=c.replace(l.ATTR_BIND_PRFX,""));let E=n[1].split(",").map(u=>u.trim());for(let u of E){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(c,""):e.removeAttribute(c):e.setAttribute(c,a):S(e,c,a)||(e[l.SET_LATER_KEY]||(e[l.SET_LATER_KEY]=Object.create(null)),e[l.SET_LATER_KEY][c]=a)})}}),e.removeAttribute(l.BIND_ATTR)})}var y="{{",A="}}",B="skip-text";function v(o){let t,e=[],s=document.createTreeWalker(o,NodeFilter.SHOW_TEXT,{acceptNode:r=>{var i;return!((i=r.parentElement)==null?void 0:i.hasAttribute(B))&&r.textContent.includes(y)&&r.textContent.includes(A)&&1}});for(;t=s.nextNode();)e.push(t);return e}var Y=function(o,t){v(o).forEach(s=>{let r=[],i;for(;s.textContent.includes(A);)s.textContent.startsWith(y)?(i=s.textContent.indexOf(A)+A.length,s.splitText(i),r.push(s)):(i=s.textContent.indexOf(y),s.splitText(i)),s=s.nextSibling;r.forEach(n=>{let c=n.textContent.replace(y,"").replace(A,"");n.textContent="",t.sub(c,f=>{n.textContent=f})})})},N=[D,U,j,K,Y];var P="'",C='"',W=/\\([0-9a-fA-F]{1,6} ?)/g;function H(o){return(o[0]===C||o[0]===P)&&(o[o.length-1]===C||o[o.length-1]===P)}function z(o){return(o[0]===C||o[0]===P)&&(o=o.slice(1)),(o[o.length-1]===C||o[o.length-1]===P)&&(o=o.slice(0,-1)),o}function q(o){let t="",e="";for(var s=0;s<o.length;s++){let r=o[s+1];o[s]==="\\"&&r==='"'?(t+='\\"',s++):o[s]==='"'&&e!=="\\"?t+='\\"':t+=o[s],e=o[s]}return t}function X(o){let t=o;H(o)&&(t=z(t),t=t.replace(W,(e,s)=>String.fromCodePoint(parseInt(s.trim(),16))),t=t.replaceAll(`\\
|
|
2
|
+
`,"\\n"),t=q(t),t=C+t+C);try{return JSON.parse(t)}catch{throw new Error(`Failed to parse CSS property value: ${t}. Original input: ${o}`)}}var L=0,m=null,_=null,T=class extends HTMLElement{constructor(){super();x(this,"updateCssData",()=>{var t;this.dropCssDataCache(),(t=this.__boundCssProps)==null||t.forEach(e=>{let s=this.getCssData(this.__extractCssName(e),!0);s!==null&&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 i=this.getAttribute(l.USE_TPL);if(i){let n=this.getRootNode(),c=(n==null?void 0:n.querySelector(i))||document.querySelector(i);c?t=c.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=R.generate(),this.style.setProperty(l.CSS_CTX_PROP,`'${this.__autoCtxName}'`)),this.__autoCtxName}get cssCtxName(){return this.getCssData(l.CSS_CTX_PROP,!0)}get ctxName(){var e;let t=((e=this.getAttribute(l.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,r;if(t.startsWith(l.EXT_DATA_CTX_PRFX))s=e.nodeCtx,r=t.replace(l.EXT_DATA_CTX_PRFX,"");else if(t.includes(l.NAMED_DATA_CTX_SPLTR)){let i=t.split(l.NAMED_DATA_CTX_SPLTR);s=h.getCtx(i[0]),r=i[1]}else s=e.localCtx,r=t;return{ctx:s,name:r}}sub(t,e,s=!0){let r=n=>{!this.isConnected||e(n)},i=T.__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=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 r=T.__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=T.__parseProp(s,this);return i.ctx.pub(i.name,r),!0},get:(e,s)=>{let r=T.__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(l.CTX_OWNER_ATTR)&&this.getAttribute(l.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(l.EXT_DATA_CTX_PRFX))this.nodeCtx.add(e.replace(l.EXT_DATA_CTX_PRFX,""),this.init$[e],this.__ctxOwner);else if(e.includes(l.NAMED_DATA_CTX_SPLTR)){let s=e.split(l.NAMED_DATA_CTX_SPLTR),r=s[0].trim(),i=s[1].trim();if(r&&i){let n=h.getCtx(r,!1);n||(n=h.registerCtx({},r)),n.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(l.CTX_NAME_ATTR))==null?void 0:t.trim();if(e&&this.style.setProperty(l.CSS_CTX_PROP,`'${e}'`),this.__initDataCtx(),this[l.SET_LATER_KEY]){for(let s in this[l.SET_LATER_KEY])S(this,s,this[l.SET_LATER_KEY][s]);delete this[l.SET_LATER_KEY]}this.initChildren=[...this.childNodes];for(let s of N)this.addTemplateProcessor(s);if(this.pauseRender)this.__initCallback();else if(this.constructor.__rootStylesLink){let s=this.getRootNode();if(!s)return;if(s==null?void 0:s.querySelector(`link[${l.ROOT_STYLE_ATTR_NAME}="${this.constructor.is}"]`)){this.render();return}let i=this.constructor.__rootStylesLink.cloneNode(!0);i.setAttribute(l.ROOT_STYLE_ATTR_NAME,this.constructor.is),i.onload=()=>{this.render()},s.nodeType===Node.DOCUMENT_NODE?s.head.appendChild(i):s.prepend(i)}else 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||(L++,t=`${l.AUTO_TAG_PRFX}-${L}`),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();try{this.__cssDataCache[t]=X(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 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)}static set rootStyles(t){if(!this.__rootStylesLink){let e=new Blob([t],{type:"text/css"}),s=URL.createObjectURL(e),r=document.createElement("link");r.href=s,r.rel="stylesheet",this.__rootStylesLink=r}}},k=T;x(k,"template");export{k as BaseComponent};
|
package/build/symbiote.js
CHANGED
|
@@ -254,42 +254,43 @@ function repeatProcessor(fr, fnCtx) {
|
|
|
254
254
|
}
|
|
255
255
|
|
|
256
256
|
// core/tpl-processors.js
|
|
257
|
+
var DEFAULT_SLOT_KEY = "__default__";
|
|
257
258
|
function slotProcessor(fr, fnCtx) {
|
|
258
259
|
if (fnCtx.shadowRoot) {
|
|
259
260
|
return;
|
|
260
261
|
}
|
|
261
262
|
let slots = [...fr.querySelectorAll("slot")];
|
|
262
|
-
if (slots.length) {
|
|
263
|
-
|
|
264
|
-
slots.forEach((slot) => {
|
|
265
|
-
let slotName = slot.getAttribute("name");
|
|
266
|
-
if (slotName) {
|
|
267
|
-
slotMap[slotName] = {
|
|
268
|
-
slot,
|
|
269
|
-
fr: document.createDocumentFragment()
|
|
270
|
-
};
|
|
271
|
-
} else {
|
|
272
|
-
slotMap.__default__ = {
|
|
273
|
-
slot,
|
|
274
|
-
fr: document.createDocumentFragment()
|
|
275
|
-
};
|
|
276
|
-
}
|
|
277
|
-
});
|
|
278
|
-
fnCtx.initChildren.forEach((child) => {
|
|
279
|
-
var _a;
|
|
280
|
-
let slotName = (_a = child.getAttribute) == null ? void 0 : _a.call(child, "slot");
|
|
281
|
-
if (slotName) {
|
|
282
|
-
child.removeAttribute("slot");
|
|
283
|
-
slotMap[slotName].fr.appendChild(child);
|
|
284
|
-
} else if (slotMap.__default__) {
|
|
285
|
-
slotMap.__default__.fr.appendChild(child);
|
|
286
|
-
}
|
|
287
|
-
});
|
|
288
|
-
Object.values(slotMap).forEach((mapObj) => {
|
|
289
|
-
mapObj.slot.parentNode.insertBefore(mapObj.fr, mapObj.slot);
|
|
290
|
-
mapObj.slot.remove();
|
|
291
|
-
});
|
|
263
|
+
if (!slots.length) {
|
|
264
|
+
return;
|
|
292
265
|
}
|
|
266
|
+
let slotMap = {};
|
|
267
|
+
slots.forEach((slot) => {
|
|
268
|
+
let slotName = slot.getAttribute("name") || DEFAULT_SLOT_KEY;
|
|
269
|
+
slotMap[slotName] = {
|
|
270
|
+
slot,
|
|
271
|
+
fr: document.createDocumentFragment()
|
|
272
|
+
};
|
|
273
|
+
});
|
|
274
|
+
fnCtx.initChildren.forEach((child) => {
|
|
275
|
+
var _a;
|
|
276
|
+
let slotName = DEFAULT_SLOT_KEY;
|
|
277
|
+
if (child instanceof Element && child.hasAttribute("slot")) {
|
|
278
|
+
slotName = child.getAttribute("slot");
|
|
279
|
+
child.removeAttribute("slot");
|
|
280
|
+
}
|
|
281
|
+
(_a = slotMap[slotName]) == null ? void 0 : _a.fr.appendChild(child);
|
|
282
|
+
});
|
|
283
|
+
Object.values(slotMap).forEach((mapObj) => {
|
|
284
|
+
if (mapObj.fr.childNodes.length) {
|
|
285
|
+
mapObj.slot.parentNode.replaceChild(mapObj.fr, mapObj.slot);
|
|
286
|
+
} else if (mapObj.slot.childNodes.length) {
|
|
287
|
+
let slotFr = document.createDocumentFragment();
|
|
288
|
+
slotFr.append(...mapObj.slot.childNodes);
|
|
289
|
+
mapObj.slot.parentNode.replaceChild(slotFr, mapObj.slot);
|
|
290
|
+
} else {
|
|
291
|
+
mapObj.slot.remove();
|
|
292
|
+
}
|
|
293
|
+
});
|
|
293
294
|
}
|
|
294
295
|
function refProcessor(fr, fnCtx) {
|
|
295
296
|
[...fr.querySelectorAll(`[${DICT.EL_REF_ATTR}]`)].forEach((el) => {
|
package/build/symbiote.min.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var B=Object.defineProperty;var
|
|
2
|
-
`,"\\n"),t=tt(t),t=b+t+b);try{return JSON.parse(t)}catch{throw new Error(`Failed to parse CSS property value: ${t}. Original input: ${o}`)}}var k=0,T=null,d=null,p=class extends HTMLElement{constructor(){super();A(this,"updateCssData",()=>{var t;this.dropCssDataCache(),(t=this.__boundCssProps)==null||t.forEach(e=>{let s=this.getCssData(this.__extractCssName(e),!0);s!==null&&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(l.USE_TPL);if(i){let n=this.getRootNode(),a=(n==null?void 0:n.querySelector(i))||document.querySelector(i);a?t=a.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=S.generate(),this.style.setProperty(l.CSS_CTX_PROP,`'${this.__autoCtxName}'`)),this.__autoCtxName}get cssCtxName(){return this.getCssData(l.CSS_CTX_PROP,!0)}get ctxName(){var e;let t=((e=this.getAttribute(l.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(l.EXT_DATA_CTX_PRFX))s=e.nodeCtx,r=t.replace(l.EXT_DATA_CTX_PRFX,"");else if(t.includes(l.NAMED_DATA_CTX_SPLTR)){let i=t.split(l.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=n=>{!this.isConnected||e(n)},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(l.CTX_OWNER_ATTR)&&this.getAttribute(l.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(l.EXT_DATA_CTX_PRFX))this.nodeCtx.add(e.replace(l.EXT_DATA_CTX_PRFX,""),this.init$[e],this.__ctxOwner);else if(e.includes(l.NAMED_DATA_CTX_SPLTR)){let s=e.split(l.NAMED_DATA_CTX_SPLTR),r=s[0].trim(),i=s[1].trim();if(r&&i){let n=u.getCtx(r,!1);n||(n=u.registerCtx({},r)),n.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(l.CTX_NAME_ATTR))==null?void 0:t.trim();if(e&&this.style.setProperty(l.CSS_CTX_PROP,`'${e}'`),this.__initDataCtx(),this[l.SET_LATER_KEY]){for(let s in this[l.SET_LATER_KEY])g(this,s,this[l.SET_LATER_KEY][s]);delete this[l.SET_LATER_KEY]}this.initChildren=[...this.childNodes];for(let s of v)this.addTemplateProcessor(s);if(this.pauseRender)this.__initCallback();else if(this.constructor.__rootStylesLink){let s=this.getRootNode();if(!s)return;if(s==null?void 0:s.querySelector(`link[${l.ROOT_STYLE_ATTR_NAME}="${this.constructor.is}"]`)){this.render();return}let i=this.constructor.__rootStylesLink.cloneNode(!0);i.setAttribute(l.ROOT_STYLE_ATTR_NAME,this.constructor.is),i.onload=()=>{this.render()},s.nodeType===Node.DOCUMENT_NODE?s.head.appendChild(i):s.prepend(i)}else 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||(k++,t=`${l.AUTO_TAG_PRFX}-${k}`),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();try{this.__cssDataCache[t]=X(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)}static set rootStyles(t){if(!this.__rootStylesLink){let e=new Blob([t],{type:"text/css"}),s=URL.createObjectURL(e),r=document.createElement("link");r.href=s,r.rel="stylesheet",this.__rootStylesLink=r}}},N=p;A(N,"template");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 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(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 r="?"+t;for(let n in e)e[n]===!0?r+=this.separator+n:r+=this.separator+n+`=${e[n]}`;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||""})}),E.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}};E.appMap=Object.create(null);function M(o,t){for(let e in t)e.includes("-")?o.style.setProperty(e,t[e]):o.style[e]=t[e]}function I(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&&I(t,o.attributes),o.styles&&M(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",et="symbiote-db",st="symbiote-idb-update_",U=class{_notifyWhenReady(t=null){window.dispatchEvent(new CustomEvent(j,{detail:{dbName:this.name,storeName:this.storeName,event:t}}))}get _updEventName(){return st+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=n=>{var a;((a=n.target.result)==null?void 0:a._value)?r(n.target.result._value):(r(null),console.warn(`IDB: cannot read "${t}"`))},s.onerror=n=>{i(n)}})}write(t,e,s=!1){let r={_key:t,_value:e},n=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).put(r);return new Promise((a,_)=>{n.onsuccess=m=>{s||this._notifySubscribers(t),a(m.target.result)},n.onerror=m=>{_(m)}})}delete(t,e=!1){let r=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).delete(t);return new Promise((i,n)=>{r.onsuccess=a=>{e||this._notifySubscribers(t),i(a)},r.onerror=a=>{n(a)}})}getAll(){let e=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).getAll();return new Promise((s,r)=>{e.onsuccess=i=>{let n=i.target.result;s(n.map(a=>a._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,P.clear(this.name)}},P=class{static get readyEventName(){return j}static open(t=et,e="store"){let s=t+"/"+e;return this._reg[s]||(this._reg[s]=new U(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]}};A(P,"_reg",Object.create(null));export{E as AppRouter,N as BaseComponent,u as Data,P as IDB,S as UID,I as applyAttributes,M as applyStyles,$ as create,D as kebabToCamel,g as setNestedProp};
|
|
1
|
+
var B=Object.defineProperty;var K=(o,t,e)=>t in o?B(o,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[t]=e;var A=(o,t,e)=>(K(o,typeof t!="symbol"?t+"":t,e),e);function H(o){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(o)}var u=class{constructor(t){t.constructor===Object?this.store=H(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){!s&&Object.keys(this.store).includes(t)||(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 l=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",ROOT_STYLE_ATTR_NAME:"sym-component"});var O="1234567890QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm",W=O.length-1,S=class{static generate(t="XXXXXXXXX-XXX"){let e="";for(let s=0;s<t.length;s++)e+=t[s]==="-"?t[s]:O.charAt(Math.random()*W);return e}};function g(o,t,e){let s=!0,r,i=t.split(".");return i.forEach((n,a)=>{a<i.length-1?o=o[n]:r=n}),o?o[r]=e:s=!1,s}function N(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 L(o,t){[...o.querySelectorAll(`[${l.REPEAT_ATTR}]`)].forEach(e=>{let s=e.getAttribute(l.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 n=e.innerHTML;r.template=n,r.reg(s)}for(;e.firstChild;)e.firstChild.remove();let i=e.getAttribute(l.REPEAT_ATTR);t.sub(i,n=>{if(!n){for(;e.firstChild;)e.firstChild.remove();return}let a=[...e.children],_,m=h=>{h.forEach((c,w)=>{if(a[w])if(a[w].set$)setTimeout(()=>{a[w].set$(c)});else for(let C in c)a[w][C]=c[C];else{_||(_=new DocumentFragment);let C=new r;Object.assign(C.init$,c),_.appendChild(C)}}),_&&e.appendChild(_);let f=a.slice(h.length,a.length);for(let c of f)c.remove()};if(n.constructor===Array)m(n);else if(n.constructor===Object){let h=[];for(let f in n){let c=n[f];Object.defineProperty(c,"_KEY_",{value:f,enumerable:!0}),h.push(c)}m(h)}else console.warn("Symbiote repeat data type error:"),console.log(n)}),e.removeAttribute(l.REPEAT_ATTR),e.removeAttribute(l.REPEAT_ITEM_TAG_ATTR)})}var v="__default__";function q(o,t){if(t.shadowRoot)return;let e=[...o.querySelectorAll("slot")];if(!e.length)return;let s={};e.forEach(r=>{let i=r.getAttribute("name")||v;s[i]={slot:r,fr:document.createDocumentFragment()}}),t.initChildren.forEach(r=>{var n;let i=v;r instanceof Element&&r.hasAttribute("slot")&&(i=r.getAttribute("slot"),r.removeAttribute("slot")),(n=s[i])==null||n.fr.appendChild(r)}),Object.values(s).forEach(r=>{if(r.fr.childNodes.length)r.slot.parentNode.replaceChild(r.fr,r.slot);else if(r.slot.childNodes.length){let i=document.createDocumentFragment();i.append(...r.slot.childNodes),r.slot.parentNode.replaceChild(i,r.slot)}else r.slot.remove()})}function Y(o,t){[...o.querySelectorAll(`[${l.EL_REF_ATTR}]`)].forEach(e=>{let s=e.getAttribute(l.EL_REF_ATTR);t.ref[s]=e,e.removeAttribute(l.EL_REF_ATTR)})}function z(o,t){[...o.querySelectorAll(`[${l.BIND_ATTR}]`)].forEach(e=>{let r=e.getAttribute(l.BIND_ATTR).split(";");[...e.attributes].forEach(i=>{if(i.name.startsWith("-")&&i.value){let n=N(i.name.replace("-",""));r.push(n+":"+i.value),e.removeAttribute(i.name)}}),r.forEach(i=>{if(!i)return;let n=i.split(":").map(h=>h.trim()),a=n[0],_;a.indexOf(l.ATTR_BIND_PRFX)===0&&(_=!0,a=a.replace(l.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,c=>{f==="double"?c=!!c:f==="single"&&(c=!c),_?(c==null?void 0:c.constructor)===Boolean?c?e.setAttribute(a,""):e.removeAttribute(a):e.setAttribute(a,c):g(e,a,c)||(e[l.SET_LATER_KEY]||(e[l.SET_LATER_KEY]=Object.create(null)),e[l.SET_LATER_KEY][a]=c)})}}),e.removeAttribute(l.BIND_ATTR)})}var x="{{",y="}}",G="skip-text";function V(o){let t,e=[],s=document.createTreeWalker(o,NodeFilter.SHOW_TEXT,{acceptNode:r=>{var i;return!((i=r.parentElement)==null?void 0:i.hasAttribute(G))&&r.textContent.includes(x)&&r.textContent.includes(y)&&1}});for(;t=s.nextNode();)e.push(t);return e}var Q=function(o,t){V(o).forEach(s=>{let r=[],i;for(;s.textContent.includes(y);)s.textContent.startsWith(x)?(i=s.textContent.indexOf(y)+y.length,s.splitText(i),r.push(s)):(i=s.textContent.indexOf(x),s.splitText(i)),s=s.nextSibling;r.forEach(n=>{let a=n.textContent.replace(x,"").replace(y,"");n.textContent="",t.sub(a,_=>{n.textContent=_})})})},X=[L,q,Y,z,Q];var R="'",b='"',J=/\\([0-9a-fA-F]{1,6} ?)/g;function Z(o){return(o[0]===b||o[0]===R)&&(o[o.length-1]===b||o[o.length-1]===R)}function tt(o){return(o[0]===b||o[0]===R)&&(o=o.slice(1)),(o[o.length-1]===b||o[o.length-1]===R)&&(o=o.slice(0,-1)),o}function et(o){let t="",e="";for(var s=0;s<o.length;s++){let r=o[s+1];o[s]==="\\"&&r==='"'?(t+='\\"',s++):o[s]==='"'&&e!=="\\"?t+='\\"':t+=o[s],e=o[s]}return t}function k(o){let t=o;Z(o)&&(t=tt(t),t=t.replace(J,(e,s)=>String.fromCodePoint(parseInt(s.trim(),16))),t=t.replaceAll(`\\
|
|
2
|
+
`,"\\n"),t=et(t),t=b+t+b);try{return JSON.parse(t)}catch{throw new Error(`Failed to parse CSS property value: ${t}. Original input: ${o}`)}}var M=0,T=null,d=null,p=class extends HTMLElement{constructor(){super();A(this,"updateCssData",()=>{var t;this.dropCssDataCache(),(t=this.__boundCssProps)==null||t.forEach(e=>{let s=this.getCssData(this.__extractCssName(e),!0);s!==null&&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(l.USE_TPL);if(i){let n=this.getRootNode(),a=(n==null?void 0:n.querySelector(i))||document.querySelector(i);a?t=a.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=S.generate(),this.style.setProperty(l.CSS_CTX_PROP,`'${this.__autoCtxName}'`)),this.__autoCtxName}get cssCtxName(){return this.getCssData(l.CSS_CTX_PROP,!0)}get ctxName(){var e;let t=((e=this.getAttribute(l.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(l.EXT_DATA_CTX_PRFX))s=e.nodeCtx,r=t.replace(l.EXT_DATA_CTX_PRFX,"");else if(t.includes(l.NAMED_DATA_CTX_SPLTR)){let i=t.split(l.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=n=>{!this.isConnected||e(n)},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(l.CTX_OWNER_ATTR)&&this.getAttribute(l.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(l.EXT_DATA_CTX_PRFX))this.nodeCtx.add(e.replace(l.EXT_DATA_CTX_PRFX,""),this.init$[e],this.__ctxOwner);else if(e.includes(l.NAMED_DATA_CTX_SPLTR)){let s=e.split(l.NAMED_DATA_CTX_SPLTR),r=s[0].trim(),i=s[1].trim();if(r&&i){let n=u.getCtx(r,!1);n||(n=u.registerCtx({},r)),n.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(l.CTX_NAME_ATTR))==null?void 0:t.trim();if(e&&this.style.setProperty(l.CSS_CTX_PROP,`'${e}'`),this.__initDataCtx(),this[l.SET_LATER_KEY]){for(let s in this[l.SET_LATER_KEY])g(this,s,this[l.SET_LATER_KEY][s]);delete this[l.SET_LATER_KEY]}this.initChildren=[...this.childNodes];for(let s of X)this.addTemplateProcessor(s);if(this.pauseRender)this.__initCallback();else if(this.constructor.__rootStylesLink){let s=this.getRootNode();if(!s)return;if(s==null?void 0:s.querySelector(`link[${l.ROOT_STYLE_ATTR_NAME}="${this.constructor.is}"]`)){this.render();return}let i=this.constructor.__rootStylesLink.cloneNode(!0);i.setAttribute(l.ROOT_STYLE_ATTR_NAME,this.constructor.is),i.onload=()=>{this.render()},s.nodeType===Node.DOCUMENT_NODE?s.head.appendChild(i):s.prepend(i)}else 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||(M++,t=`${l.AUTO_TAG_PRFX}-${M}`),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();try{this.__cssDataCache[t]=k(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)}static set rootStyles(t){if(!this.__rootStylesLink){let e=new Blob([t],{type:"text/css"}),s=URL.createObjectURL(e),r=document.createElement("link");r.href=s,r.rel="stylesheet",this.__rootStylesLink=r}}},D=p;A(D,"template");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 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(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 r="?"+t;for(let n in e)e[n]===!0?r+=this.separator+n:r+=this.separator+n+`=${e[n]}`;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||""})}),E.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}};E.appMap=Object.create(null);function I(o,t){for(let e in t)e.includes("-")?o.style.setProperty(e,t[e]):o.style[e]=t[e]}function $(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 U(o={tag:"div"}){let t=document.createElement(o.tag);if(o.attributes&&$(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=U(e);t.appendChild(s)}),t}var j="idb-store-ready",st="symbiote-db",rt="symbiote-idb-update_",F=class{_notifyWhenReady(t=null){window.dispatchEvent(new CustomEvent(j,{detail:{dbName:this.name,storeName:this.storeName,event:t}}))}get _updEventName(){return rt+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=n=>{var a;((a=n.target.result)==null?void 0:a._value)?r(n.target.result._value):(r(null),console.warn(`IDB: cannot read "${t}"`))},s.onerror=n=>{i(n)}})}write(t,e,s=!1){let r={_key:t,_value:e},n=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).put(r);return new Promise((a,_)=>{n.onsuccess=m=>{s||this._notifySubscribers(t),a(m.target.result)},n.onerror=m=>{_(m)}})}delete(t,e=!1){let r=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).delete(t);return new Promise((i,n)=>{r.onsuccess=a=>{e||this._notifySubscribers(t),i(a)},r.onerror=a=>{n(a)}})}getAll(){let e=this.db.transaction(this.storeName,"readwrite").objectStore(this.storeName).getAll();return new Promise((s,r)=>{e.onsuccess=i=>{let n=i.target.result;s(n.map(a=>a._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,P.clear(this.name)}},P=class{static get readyEventName(){return j}static open(t=st,e="store"){let s=t+"/"+e;return this._reg[s]||(this._reg[s]=new F(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]}};A(P,"_reg",Object.create(null));export{E as AppRouter,D as BaseComponent,u as Data,P as IDB,S as UID,$ as applyAttributes,I as applyStyles,U as create,N as kebabToCamel,g as setNestedProp};
|
package/core/tpl-processors.js
CHANGED
|
@@ -4,6 +4,8 @@ import { kebabToCamel } from '../utils/kebabToCamel.js';
|
|
|
4
4
|
// Should go first among other processors:
|
|
5
5
|
import { repeatProcessor } from './repeatProcessor.js';
|
|
6
6
|
|
|
7
|
+
const DEFAULT_SLOT_KEY = '__default__';
|
|
8
|
+
|
|
7
9
|
/**
|
|
8
10
|
* @template {import('./BaseComponent.js').BaseComponent} T
|
|
9
11
|
* @param {DocumentFragment} fr
|
|
@@ -14,36 +16,38 @@ function slotProcessor(fr, fnCtx) {
|
|
|
14
16
|
return;
|
|
15
17
|
}
|
|
16
18
|
let slots = [...fr.querySelectorAll('slot')];
|
|
17
|
-
if (slots.length) {
|
|
18
|
-
|
|
19
|
-
slots.forEach((slot) => {
|
|
20
|
-
let slotName = slot.getAttribute('name');
|
|
21
|
-
if (slotName) {
|
|
22
|
-
slotMap[slotName] = {
|
|
23
|
-
slot,
|
|
24
|
-
fr: document.createDocumentFragment(),
|
|
25
|
-
};
|
|
26
|
-
} else {
|
|
27
|
-
slotMap.__default__ = {
|
|
28
|
-
slot,
|
|
29
|
-
fr: document.createDocumentFragment(),
|
|
30
|
-
};
|
|
31
|
-
}
|
|
32
|
-
});
|
|
33
|
-
fnCtx.initChildren.forEach((/** @type {Element} */ child) => {
|
|
34
|
-
let slotName = child.getAttribute?.('slot');
|
|
35
|
-
if (slotName) {
|
|
36
|
-
child.removeAttribute('slot');
|
|
37
|
-
slotMap[slotName].fr.appendChild(child);
|
|
38
|
-
} else if (slotMap.__default__) {
|
|
39
|
-
slotMap.__default__.fr.appendChild(child);
|
|
40
|
-
}
|
|
41
|
-
});
|
|
42
|
-
Object.values(slotMap).forEach((mapObj) => {
|
|
43
|
-
mapObj.slot.parentNode.insertBefore(mapObj.fr, mapObj.slot);
|
|
44
|
-
mapObj.slot.remove();
|
|
45
|
-
});
|
|
19
|
+
if (!slots.length) {
|
|
20
|
+
return;
|
|
46
21
|
}
|
|
22
|
+
|
|
23
|
+
/** @type {Record<string, { slot: HTMLSlotElement; fr: DocumentFragment }>} */
|
|
24
|
+
let slotMap = {};
|
|
25
|
+
slots.forEach((slot) => {
|
|
26
|
+
let slotName = slot.getAttribute('name') || DEFAULT_SLOT_KEY;
|
|
27
|
+
slotMap[slotName] = {
|
|
28
|
+
slot,
|
|
29
|
+
fr: document.createDocumentFragment(),
|
|
30
|
+
};
|
|
31
|
+
});
|
|
32
|
+
fnCtx.initChildren.forEach((child) => {
|
|
33
|
+
let slotName = DEFAULT_SLOT_KEY;
|
|
34
|
+
if (child instanceof Element && child.hasAttribute('slot')) {
|
|
35
|
+
slotName = child.getAttribute('slot');
|
|
36
|
+
child.removeAttribute('slot');
|
|
37
|
+
}
|
|
38
|
+
slotMap[slotName]?.fr.appendChild(child);
|
|
39
|
+
});
|
|
40
|
+
Object.values(slotMap).forEach((mapObj) => {
|
|
41
|
+
if (mapObj.fr.childNodes.length) {
|
|
42
|
+
mapObj.slot.parentNode.replaceChild(mapObj.fr, mapObj.slot);
|
|
43
|
+
} else if (mapObj.slot.childNodes.length) {
|
|
44
|
+
let slotFr = document.createDocumentFragment();
|
|
45
|
+
slotFr.append(...mapObj.slot.childNodes);
|
|
46
|
+
mapObj.slot.parentNode.replaceChild(slotFr, mapObj.slot);
|
|
47
|
+
} else {
|
|
48
|
+
mapObj.slot.remove();
|
|
49
|
+
}
|
|
50
|
+
});
|
|
47
51
|
}
|
|
48
52
|
|
|
49
53
|
/**
|