@symbiotejs/symbiote 2.0.5 → 2.1.0-alpha.1

package/core/Symbiote.js

@@ -162,6 +162,8 @@ export class Symbiote extends HTMLElement {
     this.ctxOwner = false;
     /** @type {Boolean} */
     this.isVirtual = false;
+    /** @type {Boolean} */
+    this.allowTemplateInits = true;
   }
 
   /** @returns {String} */
@@ -341,6 +343,24 @@ export class Symbiote extends HTMLElement {
     return this.ctxOwner || (this.hasAttribute(DICT.CTX_OWNER_ATTR) && this.getAttribute(DICT.CTX_OWNER_ATTR) !== 'false');
   }
 
+  initAttributeObserver() {
+    if (!this.attributeMutationObserver) {
+      this.attributeMutationObserver = new MutationObserver((mutations) => {
+        for (let mr of mutations) {
+          if (mr.type === 'attributes') {
+            let propName = DICT.ATTR_BIND_PX + mr.attributeName;
+            if (this.has(propName)) {
+              this.$[propName] = this.getAttribute(mr.attributeName);
+            }
+          }
+        }
+      });
+      this.attributeMutationObserver.observe(this, {
+        attributes: true,
+      });
+    }
+  }
+
   #initDataCtx() {
     /** @type {{ [key: string]: string }} */
     let attrDesc = this.#super.__attrDesc;
@@ -354,6 +374,9 @@ export class Symbiote extends HTMLElement {
     for (let prop in this.init$) {
       if (prop.startsWith(DICT.SHARED_CTX_PX)) {
         this.sharedCtx.add(prop.replace(DICT.SHARED_CTX_PX, ''), this.init$[prop], this.#ctxOwner);
+      } else if (prop.startsWith(DICT.ATTR_BIND_PX)) {
+        this.localCtx.add(prop, (this.getAttribute(prop.replace(DICT.ATTR_BIND_PX, '')) || this.init$[prop]));
+        this.initAttributeObserver();
       } else if (prop.includes(DICT.NAMED_CTX_SPLTR)) {
         let propArr = prop.split(DICT.NAMED_CTX_SPLTR);
         let ctxName = propArr[0].trim();
@@ -443,6 +466,9 @@ export class Symbiote extends HTMLElement {
     }
     this.#disconnectTimeout = window.setTimeout(() => {
       this.destroyCallback();
+      if (this.attributeMutationObserver) {
+        this.attributeMutationObserver.disconnect();
+      }
       for (let sub of this.allSubs) {
         sub.remove();
         this.allSubs.delete(sub);
@@ -491,7 +517,7 @@ export class Symbiote extends HTMLElement {
 
   /** @param {Object<string, string>} desc */
   static bindAttributes(desc) {
-    this.observedAttributes = Object.keys(desc);
+    this.observedAttributes = [...(this.observedAttributes || []), Object.keys(desc)];
     /** @private */
     this.__attrDesc = desc;
   }

package/core/tpl-processors.js

@@ -52,6 +52,13 @@ function domBindProcessor(fr, fnCtx) {
           castType = 'single';
           valKey = valKey.replace('!', '');
         }
+        if (!fnCtx.has(valKey) && fnCtx.allowTemplateInits) {
+          if (valKey.startsWith(DICT.ATTR_BIND_PX)) {
+            fnCtx.add(valKey, fnCtx.getAttribute(valKey.replace(DICT.ATTR_BIND_PX, '')));
+          } else {
+            fnCtx.add(valKey, null);
+          }
+        }
         fnCtx.sub(valKey, (val) => {
           if (castType === 'double') {
             val = !!val;
@@ -123,6 +130,14 @@ const txtNodesProcessor = function (fr, fnCtx) {
     tokenNodes.forEach((tNode) => {
       let prop = tNode.textContent.replace(DICT.TEXT_NODE_OPEN_TOKEN, '').replace(DICT.TEXT_NODE_CLOSE_TOKEN, '');
       tNode.textContent = '';
+      if (!fnCtx.has(prop) && fnCtx.allowTemplateInits) {
+        if (prop.startsWith(DICT.ATTR_BIND_PX)) {
+          fnCtx.add(prop, fnCtx.getAttribute(prop.replace(DICT.ATTR_BIND_PX, '')));
+          fnCtx.initAttributeObserver();
+        } else {
+          fnCtx.add(prop, null);
+        }
+      }
       fnCtx.sub(prop, (val) => {
         tNode.textContent = val;
       });

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@symbiotejs/symbiote",
-  "version": "2.0.5",
+  "version": "2.1.0-alpha.1",
   "scripts": {
     "types": "rm -rf types && tsc -p dts.cfg.json"
   },