@symbiotejs/symbiote 1.1.2 → 1.3.2

package/README.md

@@ -1,41 +1,42 @@
 # Symbi<span style="color:#f0f">ఠ</span>te.js
 
-## Ultralight and ultrapowerful library to create widgets, organize micro-frontends, build reusable embeddable components and libraries. Everything you need for your modern web application!
-
-### 🔥 Core benefits
-* Minimalistic but reach
-* No additional dependencies
-* Ultralight (~3kb br/gzip for featurefull CDN version)
-* Blazing fast (faster than most of the other mainstream solutions. All of them.)
-* Memory friendly (no any redux-like immutables)
-* CSP friendly - good for enterprise usage
-* Highly extensible
-* Easy to learn - nothing completely new for experienced developers, nothing complicated for newbies
+Ultralight and ultrapowerful library to create widgets, organize micro-frontends, build reusable embeddable components and libraries. 
+Everything you need for your modern web application!
+
+## 🔥 Core benefits
+* Minimalistic but reach.
+* No additional dependencies.
+* Ultralight (~3kb br/gzip for featureful CDN version).
+* Blazing fast (faster than most of the other mainstream solutions; all of them).
+* Memory friendly (no any redux-like immutables).
+* CSP friendly - good for enterprise usage.
+* Highly extensible.
+* Easy to learn - nothing completely new for experienced developers, nothing complicated for newbies.
 * Works in all modern browsers. As is.
-* Easy to test
-* TypeScript friendly - use it in TS or JS projects from the common source code
-* Integration friendly: works with any modern development stack
-* Lifecycle control: no need to initiate something from outside
+* Easy to test.
+* TypeScript friendly - use it in TS or JS projects from the common source code.
+* Integration friendly: works with any modern development stack.
+* Lifecycle control: no need to initiate something from outside.
 * ESM friendly - native JavaScript modules are best!
-* Developer Experience on the mind: compact & convenient APIs, habitual syntax
-* Open source (MIT license)
-
-### 💎 Tech concept keypoints
-* Native `DocumentFragment` instead of expensive Virtual DOM sync
-* Shadow DOM is optional. Use it when you need it only
-* Styling approach: total freedom, from the old classics to the cutting age platforn abilities
-* Native HTML and DOM API instead of expensive custom template syntax processing
-* Templates are out of the component or render function context. It’s just a simple JavaScript template literals. So you can keep or process them wherever you want
-* No logical operators in templates. Logic and presentation is strictly separated.
-* Fast synchronous UI updates
-* Full data context access from the document structure
-* Full data context availability for template bindings
-* DOM API friendly approach for the most perfomant solutions
-* Convenient object model access instead of opaque abstractions
-* Custom Elements work strange sometimes. Don’t worry about that, we do (construction flow)
-
-### 🍏 Quick start
-Easiest way to try Symbiote.js is to create simple `html` file in your text editor and connect the Symbiote base class from web:
+* Developer Experience on the mind: compact & convenient APIs, habitual syntax.
+* Open source (MIT license).
+
+## 💎 Tech concept keypoints
+* Native `DocumentFragment` instead of expensive Virtual DOM sync.
+* Shadow DOM is optional. Use it when you need it only.
+* Styling approach: total freedom, from the old classics to the cutting edge platform abilities.
+* Native HTML and DOM API instead of expensive custom template syntax processing.
+* Templates are out of the component or render function context. It’s just a simple JavaScript template literals. So you can keep or process them wherever you want.
+* No logical operators in templates. Logic and presentation are strictly separated.
+* Fast synchronous UI updates.
+* Full data context access from the document structure.
+* Full data context availability for template bindings.
+* DOM API friendly approach for the most performant solutions.
+* Convenient object model access instead of opaque abstractions.
+* Custom Elements work strange sometimes. Don’t worry about that, we do (construction flow).
+
+## 🍏 Quick start
+The easiest way to try Symbiote.js is to create a simple `html` file in your text editor and connect the Symbiote base class from web:
 
 ```html
 <script type="module">
@@ -51,7 +52,7 @@ Easiest way to try Symbiote.js is to create simple `html` file in your text edit
   }
 
   MyComponent.template = /*html*/ `
-    <h2 set="textContent: count"></h2>
+    <h2>{{count}}</h2>
     <button set="onclick: increment">Click me!</button>
   `;
 
@@ -93,7 +94,7 @@ Symbiote.js is supported and tested in all major modern desktop and mobile brows
 * Safari
 * Edge
 * Opera
-* etc...
+* etc.
 
 **Internet Explorer** - is outdated and not supported anymore:
 
@@ -106,10 +107,10 @@ Big thanks to 🟡 **Uploadcare** for supporting this project!
 
 > https://uploadcare.com/
 
-### 🌎 Useful external links:
+## 🌎 Useful external links
 * https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements
 * https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
 * https://custom-elements-everywhere.com
 * https://open-wc.org/
 
-## If you have questions or proposals - welcome to [Symbiote Discussions](https://github.com/symbiotejs/symbiote.js/discussions)! ❤️
+**If you have questions or proposals - welcome to [Symbiote Discussions](https://github.com/symbiotejs/symbiote.js/discussions)!** ❤️

package/build/symbiote.base.jsdoc.js

@@ -331,11 +331,70 @@ function domSetProcessor(fr, fnCtx) {
   });
 }
 
-var PROCESSORS = [slotProcessor, refProcessor, domSetProcessor];
+const OPEN_TOKEN = '{{';
+const CLOSE_TOKEN = '}}';
+const SKIP_ATTR = 'skip-text';
+
+function getTextNodesWithTokens(el) {
+  let node;
+  let result = [];
+  let walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, {
+    acceptNode: (txt) => {
+      return !txt.parentElement?.hasAttribute(SKIP_ATTR) && txt.textContent.includes(OPEN_TOKEN) && txt.textContent.includes(CLOSE_TOKEN) && 1;
+    },
+  });
+  while ((node = walk.nextNode())) {
+    result.push(node);
+  }
+  return result;
+}
+
+/**
+ * @param {DocumentFragment} fr
+ * @param {any} fnCtx
+ */
+const txtNodesProcessor = function (fr, fnCtx) {
+  let txtNodes = getTextNodesWithTokens(fr);
+  txtNodes.forEach((/** @type {Text} */ txtNode) => {
+    let tokenNodes = [];
+    let offset;
+    // Splitting of the text node:
+    while (txtNode.textContent.includes(CLOSE_TOKEN)) {
+      if (txtNode.textContent.startsWith(OPEN_TOKEN)) {
+        offset = txtNode.textContent.indexOf(CLOSE_TOKEN) + 2;
+        txtNode.splitText(offset);
+        tokenNodes.push(txtNode);
+      } else {
+        offset = txtNode.textContent.indexOf(OPEN_TOKEN);
+        txtNode.splitText(offset);
+      }
+      // @ts-ignore
+      txtNode = txtNode.nextSibling;
+    }
+    tokenNodes.forEach((tNode) => {
+      let prop = tNode.textContent.replace(OPEN_TOKEN, '').replace(CLOSE_TOKEN, '');
+      fnCtx.sub(prop, (val) => {
+        tNode.textContent = val;
+      });
+    });
+  });
+};
+
+var PROCESSORS = [slotProcessor, refProcessor, domSetProcessor, txtNodesProcessor];
 
 let autoTagsCount = 0;
 
 class BaseComponent extends HTMLElement {
+  initCallback() {}
+
+  __initCallback() {
+    if (this.__initialized) {
+      return;
+    }
+    this.__initialized = true;
+    this.initCallback?.();
+  }
+
   /**
    * @param {String | DocumentFragment} [template]
    * @param {Boolean} [shadow]
@@ -365,15 +424,27 @@ class BaseComponent extends HTMLElement {
         fn(fr, this);
       }
     }
-    if (shadow) {
-      if (!this.shadowRoot) {
-        this.attachShadow({
-          mode: 'open',
-        });
-      }
-      fr && this.shadowRoot.appendChild(fr);
+    if ((shadow || this.constructor['__shadowStylesUrl']) && !this.shadowRoot) {
+      this.attachShadow({
+        mode: 'open',
+      });
+    }
+
+    // for the possible asynchronous call:
+    let addFr = () => {
+      fr && ((shadow && this.shadowRoot.appendChild(fr)) || this.appendChild(fr));
+      this.__initCallback();
+    };
+
+    if (this.constructor['__shadowStylesUrl']) {
+      shadow = true; // is needed for cases when Shadow DOM was created manually for some other purposes
+      let styleLink = document.createElement('link');
+      styleLink.rel = 'stylesheet';
+      styleLink.href = this.constructor['__shadowStylesUrl'];
+      styleLink.onload = addFr;
+      this.shadowRoot.prepend(styleLink); // the link shoud be added before the other template elements
     } else {
-      fr && this.appendChild(fr);
+      addFr();
     }
   }
 
@@ -512,8 +583,6 @@ class BaseComponent extends HTMLElement {
     }
   }
 
-  initCallback() {}
-
   __initDataCtx() {
     let attrDesc = this.constructor['__attrDesc'];
     if (attrDesc) {
@@ -561,7 +630,6 @@ class BaseComponent extends HTMLElement {
       if (!this.pauseRender) {
         this.render();
       }
-      this.initCallback?.();
     }
     this.connectedOnce = true;
   }
@@ -692,6 +760,14 @@ class BaseComponent extends HTMLElement {
     });
     this[propName] = this[localPropName];
   }
+
+  /** @param {String} cssTxt */
+  static set shadowStyles(cssTxt) {
+    let styleBlob = new Blob([cssTxt], {
+      type: 'text/css',
+    });
+    this.__shadowStylesUrl = URL.createObjectURL(styleBlob);
+  }
 }
 
 export { BaseComponent };

package/build/symbiote.base.min.js

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

package/build/symbiote.jsdoc.js

@@ -331,11 +331,70 @@ function domSetProcessor(fr, fnCtx) {
   });
 }
 
-var PROCESSORS = [slotProcessor, refProcessor, domSetProcessor];
+const OPEN_TOKEN = '{{';
+const CLOSE_TOKEN = '}}';
+const SKIP_ATTR = 'skip-text';
+
+function getTextNodesWithTokens(el) {
+  let node;
+  let result = [];
+  let walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, {
+    acceptNode: (txt) => {
+      return !txt.parentElement?.hasAttribute(SKIP_ATTR) && txt.textContent.includes(OPEN_TOKEN) && txt.textContent.includes(CLOSE_TOKEN) && 1;
+    },
+  });
+  while ((node = walk.nextNode())) {
+    result.push(node);
+  }
+  return result;
+}
+
+/**
+ * @param {DocumentFragment} fr
+ * @param {any} fnCtx
+ */
+const txtNodesProcessor = function (fr, fnCtx) {
+  let txtNodes = getTextNodesWithTokens(fr);
+  txtNodes.forEach((/** @type {Text} */ txtNode) => {
+    let tokenNodes = [];
+    let offset;
+    // Splitting of the text node:
+    while (txtNode.textContent.includes(CLOSE_TOKEN)) {
+      if (txtNode.textContent.startsWith(OPEN_TOKEN)) {
+        offset = txtNode.textContent.indexOf(CLOSE_TOKEN) + 2;
+        txtNode.splitText(offset);
+        tokenNodes.push(txtNode);
+      } else {
+        offset = txtNode.textContent.indexOf(OPEN_TOKEN);
+        txtNode.splitText(offset);
+      }
+      // @ts-ignore
+      txtNode = txtNode.nextSibling;
+    }
+    tokenNodes.forEach((tNode) => {
+      let prop = tNode.textContent.replace(OPEN_TOKEN, '').replace(CLOSE_TOKEN, '');
+      fnCtx.sub(prop, (val) => {
+        tNode.textContent = val;
+      });
+    });
+  });
+};
+
+var PROCESSORS = [slotProcessor, refProcessor, domSetProcessor, txtNodesProcessor];
 
 let autoTagsCount = 0;
 
 class BaseComponent extends HTMLElement {
+  initCallback() {}
+
+  __initCallback() {
+    if (this.__initialized) {
+      return;
+    }
+    this.__initialized = true;
+    this.initCallback?.();
+  }
+
   /**
    * @param {String | DocumentFragment} [template]
    * @param {Boolean} [shadow]
@@ -365,15 +424,27 @@ class BaseComponent extends HTMLElement {
         fn(fr, this);
       }
     }
-    if (shadow) {
-      if (!this.shadowRoot) {
-        this.attachShadow({
-          mode: 'open',
-        });
-      }
-      fr && this.shadowRoot.appendChild(fr);
+    if ((shadow || this.constructor['__shadowStylesUrl']) && !this.shadowRoot) {
+      this.attachShadow({
+        mode: 'open',
+      });
+    }
+
+    // for the possible asynchronous call:
+    let addFr = () => {
+      fr && ((shadow && this.shadowRoot.appendChild(fr)) || this.appendChild(fr));
+      this.__initCallback();
+    };
+
+    if (this.constructor['__shadowStylesUrl']) {
+      shadow = true; // is needed for cases when Shadow DOM was created manually for some other purposes
+      let styleLink = document.createElement('link');
+      styleLink.rel = 'stylesheet';
+      styleLink.href = this.constructor['__shadowStylesUrl'];
+      styleLink.onload = addFr;
+      this.shadowRoot.prepend(styleLink); // the link shoud be added before the other template elements
     } else {
-      fr && this.appendChild(fr);
+      addFr();
     }
   }
 
@@ -512,8 +583,6 @@ class BaseComponent extends HTMLElement {
     }
   }
 
-  initCallback() {}
-
   __initDataCtx() {
     let attrDesc = this.constructor['__attrDesc'];
     if (attrDesc) {
@@ -561,7 +630,6 @@ class BaseComponent extends HTMLElement {
       if (!this.pauseRender) {
         this.render();
       }
-      this.initCallback?.();
     }
     this.connectedOnce = true;
   }
@@ -692,6 +760,14 @@ class BaseComponent extends HTMLElement {
     });
     this[propName] = this[localPropName];
   }
+
+  /** @param {String} cssTxt */
+  static set shadowStyles(cssTxt) {
+    let styleBlob = new Blob([cssTxt], {
+      type: 'text/css',
+    });
+    this.__shadowStylesUrl = URL.createObjectURL(styleBlob);
+  }
 }
 
 const MSG_NAME = '[Typed State] Wrong property name: ';

package/build/symbiote.min.js

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

package/package.json

@@ -22,7 +22,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.1.2",
+  "version": "1.3.2",
   "description": "Symbiote.js",
   "author": "hello@symbiotejs.org",
   "license": "MIT",