@symbiotejs/symbiote 1.4.1 → 1.4.2

package/package.json

@@ -15,18 +15,17 @@
   "files": [
     "build/symbiote.js",
     "build/symbiote.min.js",
-    "build/symbiote.base.js",
-    "build/symbiote.base.min.js",
-    "build/types.d.ts",
+    "build/BaseComponent.min.js",
+    "build/symbiote.d.ts",
     "README.md",
     "LICENSE"
   ],
   "module": "./build/symbiote.js",
-  "types": "./build/types.d.ts",
+  "types": "./build/symbiote.d.ts",
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "Symbiote.js",
   "author": "hello@symbiotejs.org",
   "license": "MIT",

package/build/symbiote.base.js

@@ -1,620 +0,0 @@
-// core/Data.js
-function cloneObj(obj) {
-  let clone = (o) => {
-    var _a;
-    for (let prop in o) {
-      if (((_a = o[prop]) == null ? void 0 : _a.constructor) === Object) {
-        o[prop] = clone(o[prop]);
-      }
-    }
-    return { ...o };
-  };
-  return clone(obj);
-}
-var Data = class {
-  constructor(src) {
-    this.uid = Symbol();
-    this.name = src.name || null;
-    if (src.schema.constructor === Object) {
-      this.store = cloneObj(src.schema);
-    } else {
-      this._storeIsProxy = true;
-      this.store = src.schema;
-    }
-    this.callbackMap = Object.create(null);
-  }
-  static warn(actionName, prop) {
-    console.warn(`Symbiote Data: cannot ${actionName}. Prop name: ` + prop);
-  }
-  read(prop) {
-    if (!this._storeIsProxy && !this.store.hasOwnProperty(prop)) {
-      Data.warn("read", prop);
-      return null;
-    }
-    return this.store[prop];
-  }
-  has(prop) {
-    return this._storeIsProxy ? this.store[prop] !== void 0 : this.store.hasOwnProperty(prop);
-  }
-  add(prop, val, rewrite = true) {
-    if (!rewrite && Object.keys(this.store).includes(prop)) {
-      return;
-    }
-    this.store[prop] = val;
-    if (this.callbackMap[prop]) {
-      this.callbackMap[prop].forEach((callback) => {
-        callback(this.store[prop]);
-      });
-    }
-  }
-  pub(prop, val) {
-    if (!this._storeIsProxy && !this.store.hasOwnProperty(prop)) {
-      Data.warn("publish", prop);
-      return;
-    }
-    this.add(prop, val);
-  }
-  multiPub(updObj) {
-    for (let prop in updObj) {
-      this.pub(prop, updObj[prop]);
-    }
-  }
-  notify(prop) {
-    if (this.callbackMap[prop]) {
-      this.callbackMap[prop].forEach((callback) => {
-        callback(this.store[prop]);
-      });
-    }
-  }
-  sub(prop, callback, init = true) {
-    if (!this._storeIsProxy && !this.store.hasOwnProperty(prop)) {
-      Data.warn("subscribe", prop);
-      return null;
-    }
-    if (!this.callbackMap[prop]) {
-      this.callbackMap[prop] = /* @__PURE__ */ new Set();
-    }
-    this.callbackMap[prop].add(callback);
-    if (init) {
-      callback(this.store[prop]);
-    }
-    return {
-      remove: () => {
-        this.callbackMap[prop].delete(callback);
-        if (!this.callbackMap[prop].size) {
-          delete this.callbackMap[prop];
-        }
-      },
-      callback
-    };
-  }
-  remove() {
-    delete Data.globalStore[this.uid];
-  }
-  static registerLocalCtx(schema) {
-    let state = new Data({
-      schema
-    });
-    Data.globalStore[state.uid] = state;
-    return state;
-  }
-  static registerNamedCtx(ctxName, schema) {
-    let state = Data.globalStore[ctxName];
-    if (state) {
-      console.warn('State: context name "' + ctxName + '" already in use');
-    } else {
-      state = new Data({
-        name: ctxName,
-        schema
-      });
-      Data.globalStore[ctxName] = state;
-    }
-    return state;
-  }
-  static clearNamedCtx(ctxName) {
-    delete Data.globalStore[ctxName];
-  }
-  static getNamedCtx(ctxName, notify = true) {
-    return Data.globalStore[ctxName] || (notify && console.warn('State: wrong context name - "' + ctxName + '"'), null);
-  }
-};
-Data.globalStore = Object.create(null);
-
-// core/dictionary.js
-var DICT = Object.freeze({
-  BIND_ATTR: "set",
-  ATTR_BIND_PRFX: "@",
-  EXT_DATA_CTX_PRFX: "*",
-  NAMED_DATA_CTX_SPLTR: "/",
-  CTX_NAME_ATTR: "ctx-name",
-  CSS_CTX_PROP: "--ctx-name",
-  EL_REF_ATTR: "ref",
-  AUTO_TAG_PRFX: "sym"
-});
-
-// utils/UID.js
-var CHARS = "1234567890QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm";
-var CHLENGTH = CHARS.length - 1;
-var UID = class {
-  static generate(pattern = "XXXXXXXXX-XXX") {
-    let uid = "";
-    for (let i = 0; i < pattern.length; i++) {
-      uid += pattern[i] === "-" ? pattern[i] : CHARS.charAt(Math.random() * CHLENGTH);
-    }
-    return uid;
-  }
-};
-
-// core/tpl-processors.js
-function slotProcessor(fr, fnCtx) {
-  if (fnCtx.renderShadow) {
-    return;
-  }
-  let slots = [...fr.querySelectorAll("slot")];
-  if (fnCtx.__initChildren.length && slots.length) {
-    let slotMap = {};
-    slots.forEach((slot) => {
-      let slotName = slot.getAttribute("name");
-      if (slotName) {
-        slotMap[slotName] = {
-          slot,
-          fr: document.createDocumentFragment()
-        };
-      } else {
-        slotMap.__default__ = {
-          slot,
-          fr: document.createDocumentFragment()
-        };
-      }
-    });
-    fnCtx.__initChildren.forEach((child) => {
-      var _a;
-      let slotName = (_a = child.getAttribute) == null ? void 0 : _a.call(child, "slot");
-      if (slotName) {
-        child.removeAttribute("slot");
-        slotMap[slotName].fr.appendChild(child);
-      } else if (slotMap.__default__) {
-        slotMap.__default__.fr.appendChild(child);
-      }
-    });
-    Object.values(slotMap).forEach((mapObj) => {
-      mapObj.slot.parentNode.insertBefore(mapObj.fr, mapObj.slot);
-      mapObj.slot.remove();
-    });
-  } else {
-    fnCtx.innerHTML = "";
-  }
-}
-function refProcessor(fr, fnCtx) {
-  [...fr.querySelectorAll(`[${DICT.EL_REF_ATTR}]`)].forEach((el) => {
-    let refName = el.getAttribute(DICT.EL_REF_ATTR);
-    fnCtx.ref[refName] = el;
-    el.removeAttribute(DICT.EL_REF_ATTR);
-  });
-}
-function domSetProcessor(fr, fnCtx) {
-  [...fr.querySelectorAll(`[${DICT.BIND_ATTR}]`)].forEach((el) => {
-    let subStr = el.getAttribute(DICT.BIND_ATTR);
-    let keyValsArr = subStr.split(";");
-    keyValsArr.forEach((keyValStr) => {
-      if (!keyValStr) {
-        return;
-      }
-      let kv = keyValStr.split(":").map((str) => str.trim());
-      let prop = kv[0];
-      let isAttr;
-      if (prop.indexOf(DICT.ATTR_BIND_PRFX) === 0) {
-        isAttr = true;
-        prop = prop.replace(DICT.ATTR_BIND_PRFX, "");
-      }
-      let valKeysArr = kv[1].split(",").map((valKey) => {
-        return valKey.trim();
-      });
-      let isDeep, parent, lastStep, dive;
-      if (prop.includes(".")) {
-        isDeep = true;
-        let propPath = prop.split(".");
-        dive = () => {
-          parent = el;
-          propPath.forEach((step, idx) => {
-            if (idx < propPath.length - 1) {
-              parent = parent[step];
-            } else {
-              lastStep = step;
-            }
-          });
-        };
-        dive();
-      }
-      for (let valKey of valKeysArr) {
-        fnCtx.sub(valKey, (val) => {
-          if (isAttr) {
-            if ((val == null ? void 0 : val.constructor) === Boolean) {
-              val ? el.setAttribute(prop, "") : el.removeAttribute(prop);
-            } else {
-              el.setAttribute(prop, val);
-            }
-          } else if (isDeep) {
-            if (parent) {
-              parent[lastStep] = val;
-            } else {
-              window.setTimeout(() => {
-                dive();
-                parent[lastStep] = val;
-              });
-            }
-          } else {
-            el[prop] = val;
-          }
-        });
-      }
-    });
-    el.removeAttribute(DICT.BIND_ATTR);
-  });
-}
-var OPEN_TOKEN = "{{";
-var CLOSE_TOKEN = "}}";
-var SKIP_ATTR = "skip-text";
-function getTextNodesWithTokens(el) {
-  let node;
-  let result = [];
-  let walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, {
-    acceptNode: (txt) => {
-      var _a;
-      return !((_a = txt.parentElement) == null ? void 0 : _a.hasAttribute(SKIP_ATTR)) && txt.textContent.includes(OPEN_TOKEN) && txt.textContent.includes(CLOSE_TOKEN) && 1;
-    }
-  });
-  while (node = walk.nextNode()) {
-    result.push(node);
-  }
-  return result;
-}
-var txtNodesProcessor = function(fr, fnCtx) {
-  let txtNodes = getTextNodesWithTokens(fr);
-  txtNodes.forEach((txtNode) => {
-    let tokenNodes = [];
-    let offset;
-    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);
-      }
-      txtNode = txtNode.nextSibling;
-    }
-    tokenNodes.forEach((tNode) => {
-      let prop = tNode.textContent.replace(OPEN_TOKEN, "").replace(CLOSE_TOKEN, "");
-      fnCtx.sub(prop, (val) => {
-        tNode.textContent = val;
-      });
-    });
-  });
-};
-var tpl_processors_default = [slotProcessor, refProcessor, domSetProcessor, txtNodesProcessor];
-
-// core/BaseComponent.js
-var autoTagsCount = 0;
-var BaseComponent = class extends HTMLElement {
-  initCallback() {
-  }
-  __initCallback() {
-    var _a;
-    if (this.__initialized) {
-      return;
-    }
-    this.__initialized = true;
-    (_a = this.initCallback) == null ? void 0 : _a.call(this);
-  }
-  render(template, shadow = this.renderShadow) {
-    let fr;
-    if (template || this.constructor["template"]) {
-      if (this.constructor["template"] && !this.constructor["__tpl"]) {
-        this.constructor["__tpl"] = document.createElement("template");
-        this.constructor["__tpl"].innerHTML = this.constructor["template"];
-      }
-      while (this.firstChild) {
-        this.firstChild.remove();
-      }
-      if ((template == null ? void 0 : template.constructor) === DocumentFragment) {
-        fr = template;
-      } else if ((template == null ? void 0 : template.constructor) === String) {
-        let tpl = document.createElement("template");
-        tpl.innerHTML = template;
-        fr = tpl.content.cloneNode(true);
-      } else if (this.constructor["__tpl"]) {
-        fr = this.constructor["__tpl"].content.cloneNode(true);
-      }
-      for (let fn of this.tplProcessors) {
-        fn(fr, this);
-      }
-    }
-    if ((shadow || this.constructor["__shadowStylesUrl"]) && !this.shadowRoot) {
-      this.attachShadow({
-        mode: "open"
-      });
-    }
-    let addFr = () => {
-      fr && (shadow && this.shadowRoot.appendChild(fr) || this.appendChild(fr));
-      this.__initCallback();
-    };
-    if (this.constructor["__shadowStylesUrl"]) {
-      shadow = true;
-      let styleLink = document.createElement("link");
-      styleLink.rel = "stylesheet";
-      styleLink.href = this.constructor["__shadowStylesUrl"];
-      styleLink.onload = addFr;
-      this.shadowRoot.prepend(styleLink);
-    } else {
-      addFr();
-    }
-  }
-  addTemplateProcessor(processorFn) {
-    this.tplProcessors.add(processorFn);
-  }
-  constructor() {
-    super();
-    this.init$ = Object.create(null);
-    this.tplProcessors = /* @__PURE__ */ new Set();
-    this.ref = Object.create(null);
-    this.allSubs = /* @__PURE__ */ new Set();
-    this.pauseRender = false;
-    this.renderShadow = false;
-    this.readyToDestroy = true;
-  }
-  get autoCtxName() {
-    if (!this.__autoCtxName) {
-      this.__autoCtxName = UID.generate();
-      this.style.setProperty(DICT.CSS_CTX_PROP, `'${this.__autoCtxName}'`);
-    }
-    return this.__autoCtxName;
-  }
-  get cssCtxName() {
-    return this.getCssData(DICT.CSS_CTX_PROP, true);
-  }
-  get ctxName() {
-    var _a;
-    return ((_a = this.getAttribute(DICT.CTX_NAME_ATTR)) == null ? void 0 : _a.trim()) || this.cssCtxName || this.autoCtxName;
-  }
-  get localCtx() {
-    if (!this.__localCtx) {
-      this.__localCtx = Data.registerLocalCtx({});
-    }
-    return this.__localCtx;
-  }
-  get nodeCtx() {
-    return Data.getNamedCtx(this.ctxName, false) || Data.registerNamedCtx(this.ctxName, {});
-  }
-  static __parseProp(prop, fnCtx) {
-    let ctx;
-    let name;
-    if (prop.startsWith(DICT.EXT_DATA_CTX_PRFX)) {
-      ctx = fnCtx.nodeCtx;
-      name = prop.replace(DICT.EXT_DATA_CTX_PRFX, "");
-    } else if (prop.includes(DICT.NAMED_DATA_CTX_SPLTR)) {
-      let pArr = prop.split(DICT.NAMED_DATA_CTX_SPLTR);
-      ctx = Data.getNamedCtx(pArr[0]);
-      name = pArr[1];
-    } else {
-      ctx = fnCtx.localCtx;
-      name = prop;
-    }
-    return {
-      ctx,
-      name
-    };
-  }
-  sub(prop, handler) {
-    let parsed = BaseComponent.__parseProp(prop, this);
-    this.allSubs.add(parsed.ctx.sub(parsed.name, handler));
-  }
-  notify(prop) {
-    let parsed = BaseComponent.__parseProp(prop, this);
-    parsed.ctx.notify(parsed.name);
-  }
-  has(prop) {
-    let parsed = BaseComponent.__parseProp(prop, this);
-    return parsed.ctx.has(parsed.name);
-  }
-  add(prop, val) {
-    let parsed = BaseComponent.__parseProp(prop, this);
-    parsed.ctx.add(parsed.name, val, false);
-  }
-  add$(obj) {
-    for (let prop in obj) {
-      this.add(prop, obj[prop]);
-    }
-  }
-  get $() {
-    if (!this.__stateProxy) {
-      let o = Object.create(null);
-      this.__stateProxy = new Proxy(o, {
-        set: (obj, prop, val) => {
-          let parsed = BaseComponent.__parseProp(prop, this);
-          parsed.ctx.pub(parsed.name, val);
-          return true;
-        },
-        get: (obj, prop) => {
-          let parsed = BaseComponent.__parseProp(prop, this);
-          return parsed.ctx.read(parsed.name);
-        }
-      });
-    }
-    return this.__stateProxy;
-  }
-  set$(kvObj) {
-    for (let key in kvObj) {
-      this.$[key] = kvObj[key];
-    }
-  }
-  __initDataCtx() {
-    let attrDesc = this.constructor["__attrDesc"];
-    if (attrDesc) {
-      for (let prop of Object.values(attrDesc)) {
-        if (!Object.keys(this.init$).includes(prop)) {
-          this.init$[prop] = "";
-        }
-      }
-    }
-    for (let prop in this.init$) {
-      if (prop.startsWith(DICT.EXT_DATA_CTX_PRFX)) {
-        this.nodeCtx.add(prop.replace(DICT.EXT_DATA_CTX_PRFX, ""), this.init$[prop]);
-      } else if (prop.includes(DICT.NAMED_DATA_CTX_SPLTR)) {
-        let propArr = prop.split(DICT.NAMED_DATA_CTX_SPLTR);
-        let ctxName = propArr[0].trim();
-        let propName = propArr[1].trim();
-        if (ctxName && propName) {
-          let namedCtx = Data.getNamedCtx(ctxName, false);
-          if (!namedCtx) {
-            namedCtx = Data.registerNamedCtx(ctxName, {});
-          }
-          namedCtx.add(propName, this.init$[prop]);
-        }
-      } else {
-        this.localCtx.add(prop, this.init$[prop]);
-      }
-    }
-    this.__dataCtxInitialized = true;
-  }
-  connectedCallback() {
-    var _a;
-    if (this.__disconnectTimeout) {
-      window.clearTimeout(this.__disconnectTimeout);
-    }
-    if (!this.connectedOnce) {
-      let ctxNameAttrVal = (_a = this.getAttribute(DICT.CTX_NAME_ATTR)) == null ? void 0 : _a.trim();
-      if (ctxNameAttrVal) {
-        this.style.setProperty(DICT.CSS_CTX_PROP, `'${ctxNameAttrVal}'`);
-      }
-      this.__initDataCtx();
-      this.__initChildren = [...this.childNodes];
-      for (let proc of tpl_processors_default) {
-        this.addTemplateProcessor(proc);
-      }
-      if (!this.pauseRender) {
-        this.render();
-      }
-    }
-    this.connectedOnce = true;
-  }
-  destroyCallback() {
-  }
-  disconnectedCallback() {
-    this.dropCssDataCache();
-    if (!this.readyToDestroy) {
-      return;
-    }
-    if (this.__disconnectTimeout) {
-      window.clearTimeout(this.__disconnectTimeout);
-    }
-    this.__disconnectTimeout = window.setTimeout(() => {
-      this.destroyCallback();
-      for (let sub of this.allSubs) {
-        sub.remove();
-        this.allSubs.delete(sub);
-      }
-      for (let proc of this.tplProcessors) {
-        this.tplProcessors.delete(proc);
-      }
-    }, 100);
-  }
-  static reg(tagName, isAlias = false) {
-    if (!tagName) {
-      autoTagsCount++;
-      tagName = `${DICT.AUTO_TAG_PRFX}-${autoTagsCount}`;
-    }
-    this.__tag = tagName;
-    if (window.customElements.get(tagName)) {
-      console.warn(`${tagName} - is already in "customElements" registry`);
-      return;
-    }
-    window.customElements.define(tagName, isAlias ? class extends this {
-    } : this);
-  }
-  static get is() {
-    if (!this.__tag) {
-      this.reg();
-    }
-    return this.__tag;
-  }
-  static bindAttributes(desc) {
-    this.observedAttributes = Object.keys(desc);
-    this.__attrDesc = desc;
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) {
-      return;
-    }
-    let $prop = this.constructor["__attrDesc"][name];
-    if ($prop) {
-      if (this.__dataCtxInitialized) {
-        this.$[$prop] = newVal;
-      } else {
-        this.init$[$prop] = newVal;
-      }
-    } else {
-      this[name] = newVal;
-    }
-  }
-  getCssData(propName, silentCheck = false) {
-    if (!this.__cssDataCache) {
-      this.__cssDataCache = Object.create(null);
-    }
-    if (!Object.keys(this.__cssDataCache).includes(propName)) {
-      if (!this.__computedStyle) {
-        this.__computedStyle = window.getComputedStyle(this);
-      }
-      let val = this.__computedStyle.getPropertyValue(propName).trim();
-      if (val.startsWith(`'`) && val.endsWith(`'`)) {
-        val = val.replace(/\'/g, '"');
-      }
-      try {
-        this.__cssDataCache[propName] = JSON.parse(val);
-      } catch (e) {
-        !silentCheck && console.warn(`CSS Data error: ${propName}`);
-        this.__cssDataCache[propName] = null;
-      }
-    }
-    return this.__cssDataCache[propName];
-  }
-  bindCssData(propName, external = true) {
-    let stateName = (external ? DICT.EXT_DATA_CTX_PRFX : "") + propName;
-    this.add(stateName, this.getCssData(propName, true));
-    return stateName;
-  }
-  dropCssDataCache() {
-    this.__cssDataCache = null;
-    this.__computedStyle = null;
-  }
-  defineAccessor(propName, handler, isAsync) {
-    let localPropName = "__" + propName;
-    this[localPropName] = this[propName];
-    Object.defineProperty(this, propName, {
-      set: (val) => {
-        this[localPropName] = val;
-        if (isAsync) {
-          window.setTimeout(() => {
-            handler == null ? void 0 : handler(val);
-          });
-        } else {
-          handler == null ? void 0 : handler(val);
-        }
-      },
-      get: () => {
-        return this[localPropName];
-      }
-    });
-    this[propName] = this[localPropName];
-  }
-  static set shadowStyles(cssTxt) {
-    let styleBlob = new Blob([cssTxt], {
-      type: "text/css"
-    });
-    this.__shadowStylesUrl = URL.createObjectURL(styleBlob);
-  }
-};
-export {
-  BaseComponent
-};