@symbiotejs/symbiote 1.4.2 → 1.4.3

package/core/AppRouter.js

@@ -0,0 +1,155 @@
+import { Data } from './Data.js';
+
+export class AppRouter {
+  /** @private */
+  static _print(msg) {
+    console.warn(msg);
+  }
+
+  /** @param {String} title */
+  static setDefaultTitle(title) {
+    this.defaultTitle = title;
+  }
+
+  /** @param {Object<string, {}>} map */
+  static setRoutingMap(map) {
+    Object.assign(this.appMap, map);
+    for (let route in this.appMap) {
+      if (!this.defaultRoute && this.appMap[route].default === true) {
+        this.defaultRoute = route;
+      } else if (!this.errorRoute && this.appMap[route].error === true) {
+        this.errorRoute = route;
+      }
+    }
+  }
+
+  /** @param {String} name */
+  static set routingEventName(name) {
+    /** @private */
+    this.__routingEventName = name;
+  }
+
+  /** @returns {String} */
+  static get routingEventName() {
+    return this.__routingEventName || 'sym-on-route';
+  }
+
+  static readAddressBar() {
+    let result = {
+      route: null,
+      options: {},
+    };
+    let paramsArr = window.location.search.split(this.separator);
+    paramsArr.forEach((part) => {
+      if (part.includes('?')) {
+        result.route = part.replace('?', '');
+      } else if (part.includes('=')) {
+        let pair = part.split('=');
+        result.options[pair[0]] = decodeURI(pair[1]);
+      } else {
+        result.options[part] = true;
+      }
+    });
+    return result;
+  }
+
+  static notify() {
+    let routeBase = this.readAddressBar();
+    let routeScheme = this.appMap[routeBase.route];
+    if (routeScheme && routeScheme.title) {
+      document.title = routeScheme.title;
+    }
+    if (routeBase.route === null && this.defaultRoute) {
+      this.applyRoute(this.defaultRoute);
+      return;
+    } else if (!routeScheme && this.errorRoute) {
+      this.applyRoute(this.errorRoute);
+      return;
+    } else if (!routeScheme && this.defaultRoute) {
+      this.applyRoute(this.defaultRoute);
+      return;
+    } else if (!routeScheme) {
+      this._print(`Route "${routeBase.route}" not found...`);
+      return;
+    }
+    let event = new CustomEvent(AppRouter.routingEventName, {
+      detail: {
+        route: routeBase.route,
+        options: Object.assign(routeScheme || {}, routeBase.options),
+      },
+    });
+    window.dispatchEvent(event);
+  }
+
+  /**
+   * @param {String} route
+   * @param {Object<string, any>} [options]
+   */
+  static reflect(route, options = {}) {
+    let routeScheme = this.appMap[route];
+    if (!routeScheme) {
+      this._print('Wrong route: ' + route);
+      return;
+    }
+    let routeStr = '?' + route;
+    for (let prop in options) {
+      if (options[prop] === true) {
+        routeStr += this.separator + prop;
+      } else {
+        routeStr += this.separator + prop + '=' + `${options[prop]}`;
+      }
+    }
+    let title = routeScheme.title || this.defaultTitle || '';
+    window.history.pushState(null, title, routeStr);
+    document.title = title;
+  }
+
+  /**
+   * @param {String} route
+   * @param {Object<string, any>} [options]
+   */
+  static applyRoute(route, options = {}) {
+    this.reflect(route, options);
+    this.notify();
+  }
+
+  /** @param {String} char */
+  static setSeparator(char) {
+    /** @private */
+    this._separator = char;
+  }
+
+  /** @returns {String} */
+  static get separator() {
+    return this._separator || '&';
+  }
+
+  /**
+   * @param {String} ctxName
+   * @param {Object<string, {}>} routingMap
+   * @returns {Data}
+   */
+  static createRouterData(ctxName, routingMap) {
+    this.setRoutingMap(routingMap);
+    let routeData = Data.registerNamedCtx(ctxName, {
+      route: null,
+      options: null,
+      title: null,
+    });
+    window.addEventListener(this.routingEventName, (/** @type {CustomEvent} */ e) => {
+      routeData.multiPub({
+        route: e.detail.route,
+        options: e.detail.options,
+        title: e.detail.options?.title || this.defaultTitle || '',
+      });
+    });
+    AppRouter.notify();
+    return routeData;
+  }
+}
+
+AppRouter.appMap = Object.create(null);
+
+window.onpopstate = () => {
+  AppRouter.notify();
+};

package/core/BaseComponent.js

@@ -0,0 +1,437 @@
+import { Data } from './Data.js';
+import { DICT } from './dictionary.js';
+import { UID } from '../utils/UID.js';
+
+import PROCESSORS from './tpl-processors.js';
+
+let autoTagsCount = 0;
+
+export class BaseComponent extends HTMLElement {
+  initCallback() {}
+
+  /** @private */
+  __initCallback() {
+    if (this.__initialized) {
+      return;
+    }
+    /** @private */
+    this.__initialized = true;
+    this.initCallback?.();
+  }
+
+  /** @type {String} */
+  static template;
+
+  /**
+   * @param {String | DocumentFragment} [template]
+   * @param {Boolean} [shadow]
+   */
+  render(template, shadow = this.renderShadow) {
+    /** @type {DocumentFragment} */
+    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?.constructor === DocumentFragment) {
+        fr = template;
+      } else if (template?.constructor === String) {
+        let tpl = document.createElement('template');
+        tpl.innerHTML = template;
+        // @ts-ignore
+        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',
+      });
+    }
+
+    // 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 {
+      addFr();
+    }
+  }
+
+  /**
+   * @template {BaseComponent} T
+   * @param {(fr: DocumentFragment, fnCtx: T) => void} processorFn
+   */
+  addTemplateProcessor(processorFn) {
+    this.tplProcessors.add(processorFn);
+  }
+
+  constructor() {
+    super();
+    /** @type {Object<string, unknown>} */
+    this.init$ = Object.create(null);
+
+    /** @type {Set<(fr: DocumentFragment, fnCtx: unknown) => void>} */
+    this.tplProcessors = new Set();
+    /** @type {Object<string, unknown>} */
+    this.ref = Object.create(null);
+    this.allSubs = new Set();
+    /** @type {Boolean} */
+    this.pauseRender = false;
+    /** @type {Boolean} */
+    this.renderShadow = false;
+    /** @type {Boolean} */
+    this.readyToDestroy = true;
+  }
+
+  /** @returns {String} */
+  get autoCtxName() {
+    if (!this.__autoCtxName) {
+      /** @private */
+      this.__autoCtxName = UID.generate();
+      this.style.setProperty(DICT.CSS_CTX_PROP, `'${this.__autoCtxName}'`);
+    }
+    return this.__autoCtxName;
+  }
+
+  /** @returns {String} */
+  get cssCtxName() {
+    return this.getCssData(DICT.CSS_CTX_PROP, true);
+  }
+
+  /** @returns {String} */
+  get ctxName() {
+    return this.getAttribute(DICT.CTX_NAME_ATTR)?.trim() || this.cssCtxName || this.autoCtxName;
+  }
+
+  /** @returns {Data} */
+  get localCtx() {
+    if (!this.__localCtx) {
+      /** @private */
+      this.__localCtx = Data.registerLocalCtx({});
+    }
+    return this.__localCtx;
+  }
+
+  /** @returns {Data} */
+  get nodeCtx() {
+    return Data.getNamedCtx(this.ctxName, false) || Data.registerNamedCtx(this.ctxName, {});
+  }
+
+  /**
+   * @private
+   * @template {BaseComponent} T
+   * @param {String} prop
+   * @param {T} fnCtx
+   */
+  static __parseProp(prop, fnCtx) {
+    /** @type {Data} */
+    let ctx;
+    /** @type {String} */
+    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,
+    };
+  }
+
+  /**
+   * @template T
+   * @param {String} prop
+   * @param {(value: T) => void} handler
+   */
+  sub(prop, handler) {
+    let parsed = BaseComponent.__parseProp(prop, this);
+    this.allSubs.add(parsed.ctx.sub(parsed.name, handler));
+  }
+
+  /** @param {String} prop */
+  notify(prop) {
+    let parsed = BaseComponent.__parseProp(prop, this);
+    parsed.ctx.notify(parsed.name);
+  }
+
+  /** @param {String} prop */
+  has(prop) {
+    let parsed = BaseComponent.__parseProp(prop, this);
+    return parsed.ctx.has(parsed.name);
+  }
+
+  /**
+   * @template T
+   * @param {String} prop
+   * @param {T} val
+   */
+  add(prop, val) {
+    let parsed = BaseComponent.__parseProp(prop, this);
+    parsed.ctx.add(parsed.name, val, false);
+  }
+
+  /**
+   * @template T
+   * @param {Object<string, T>} obj
+   */
+  add$(obj) {
+    for (let prop in obj) {
+      this.add(prop, obj[prop]);
+    }
+  }
+
+  get $() {
+    if (!this.__stateProxy) {
+      /** @type {Object<string, any>} */
+      let o = Object.create(null);
+      /** @private */
+      this.__stateProxy = new Proxy(o, {
+        set: (obj, /** @type {String} */ prop, val) => {
+          let parsed = BaseComponent.__parseProp(prop, this);
+          parsed.ctx.pub(parsed.name, val);
+          return true;
+        },
+        get: (obj, /** @type {String} */ prop) => {
+          let parsed = BaseComponent.__parseProp(prop, this);
+          return parsed.ctx.read(parsed.name);
+        },
+      });
+    }
+    return this.__stateProxy;
+  }
+
+  /** @param {Object<string, any>} kvObj */
+  set$(kvObj) {
+    for (let key in kvObj) {
+      this.$[key] = kvObj[key];
+    }
+  }
+
+  /** @private */
+  __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() {
+    if (this.__disconnectTimeout) {
+      window.clearTimeout(this.__disconnectTimeout);
+    }
+    if (!this.connectedOnce) {
+      let ctxNameAttrVal = this.getAttribute(DICT.CTX_NAME_ATTR)?.trim();
+      if (ctxNameAttrVal) {
+        this.style.setProperty(DICT.CSS_CTX_PROP, `'${ctxNameAttrVal}'`);
+      }
+      this.__initDataCtx();
+      for (let proc of PROCESSORS) {
+        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);
+    }
+    /** @private */
+    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);
+  }
+
+  /**
+   * @param {String} [tagName]
+   * @param {Boolean} [isAlias]
+   */
+  static reg(tagName, isAlias = false) {
+    if (!tagName) {
+      autoTagsCount++;
+      tagName = `${DICT.AUTO_TAG_PRFX}-${autoTagsCount}`;
+    }
+    /** @private */
+    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;
+  }
+
+  /** @param {Object<string, string>} desc */
+  static bindAttributes(desc) {
+    this.observedAttributes = Object.keys(desc);
+    /** @private */
+    this.__attrDesc = desc;
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+    /** @type {String} */
+    let $prop = this.constructor['__attrDesc'][name];
+    if ($prop) {
+      if (this.__dataCtxInitialized) {
+        this.$[$prop] = newVal;
+      } else {
+        this.init$[$prop] = newVal;
+      }
+    } else {
+      this[name] = newVal;
+    }
+  }
+
+  /**
+   * @param {String} propName
+   * @param {Boolean} [silentCheck]
+   */
+  getCssData(propName, silentCheck = false) {
+    if (!this.__cssDataCache) {
+      /** @private */
+      this.__cssDataCache = Object.create(null);
+    }
+    if (!Object.keys(this.__cssDataCache).includes(propName)) {
+      if (!this.__computedStyle) {
+        /** @private */
+        this.__computedStyle = window.getComputedStyle(this);
+      }
+      let val = this.__computedStyle.getPropertyValue(propName).trim();
+      // Firefox doesn't transform string values into JSON format:
+      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];
+  }
+
+  /**
+   * @param {String} propName
+   * @param {Boolean} [external]
+   * @returns {String}
+   */
+  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;
+  }
+
+  /**
+   * @param {String} propName
+   * @param {Function} [handler]
+   * @param {Boolean} [isAsync]
+   */
+  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?.(val);
+          });
+        } else {
+          handler?.(val);
+        }
+      },
+      get: () => {
+        return this[localPropName];
+      },
+    });
+    this[propName] = this[localPropName];
+  }
+
+  /** @param {String} cssTxt */
+  static set shadowStyles(cssTxt) {
+    let styleBlob = new Blob([cssTxt], {
+      type: 'text/css',
+    });
+    /** @private */
+    this.__shadowStylesUrl = URL.createObjectURL(styleBlob);
+  }
+}