@miso.ai/client-sdk-ui 1.10.0-beta.1 → 1.10.0-beta.11

package/dist/cjs/layout/list/collection.js

@@ -4,14 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _commons = require("@miso.ai/commons");
 var _constants = require("../../constants.js");
 var _template = _interopRequireDefault(require("../template.js"));
+var _trackable = require("../trackable.js");
 var _templates = require("../templates.js");
 const _excluded = ["templates", "itemType"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
-const VALUE = Symbol.for('miso.value');
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 function root(layout, state) {
   const {
     className,
@@ -28,7 +27,7 @@ function ready(layout, state) {
   const {
     templates
   } = layout;
-  const values = state.value;
+  const values = layout._getItems(state);
 
   // TODO: handle categories, attributes, etc. by introducing sublayout
   if (values && values.length > 0 || state.ongoing) {
@@ -45,7 +44,7 @@ function list(layout, state, values) {
   } = layout;
   const listTag = templates.ordered ? 'ol' : 'ul';
   // TODO: support separator?
-  return `<${listTag} class="${className}__list" data-item-type="${options.itemType}">${templates.items(layout, state, values)}</${listTag}>`;
+  return `<${listTag} class="${className}__list" data-role="list" data-item-type="${options.itemType}">${templates.items(layout, state, values)}</${listTag}>`;
 }
 function items(layout, state, values) {
   let {
@@ -87,6 +86,14 @@ const DEFAULT_TEMPLATES = Object.freeze({
   item,
   productInfoBlock: _templates.productInfoBlock,
   articleInfoBlock: _templates.articleInfoBlock,
+  brandBlock: _templates.brandBlock,
+  titleBlock: _templates.titleBlock,
+  descriptionBlock: _templates.descriptionBlock,
+  dateBlock: _templates.dateBlock,
+  priceBlock: _templates.priceBlock,
+  discountRateText: _templates.discountRateText,
+  ctaBlock: _templates.ctaBlock,
+  cta: _templates.cta,
   imageBlock: _templates.imageBlock,
   indexBlock: _templates.indexBlock,
   helpers: _templates.helpers
@@ -108,19 +115,12 @@ class CollectionLayout extends _template.default {
       templates: Object.assign({}, DEFAULT_TEMPLATES, templates),
       itemType
     }, options));
-    (0, _commons.defineValues)(this, {
-      bindings: Object.freeze({
-        list: this._listBindings.bind(this)
-      })
-    });
     this._view = undefined;
+    this._initTrackable();
   }
   initialize(view) {
     this._view = view;
-    const {
-      proxyElement
-    } = this._view = view;
-    this._unsubscribes.push(proxyElement.on('click', this._onClick.bind(this)));
+    this._unsubscribes.push(view.proxyElement.on('click', this._onClick.bind(this)));
   }
   _preprocess(_ref2) {
     let {
@@ -141,7 +141,7 @@ class CollectionLayout extends _template.default {
   _html(state, rendered, incremental) {
     if (incremental) {
       const offset = rendered.value.length;
-      const values = state.value.slice(offset);
+      const values = (this._getItems(state) || []).slice(offset);
       return values.length > 0 ? this.templates.items(this, state, values, {
         offset
       }) : '';
@@ -170,52 +170,40 @@ class CollectionLayout extends _template.default {
     } else {
       element.innerHTML = html;
     }
-    this._syncValues(element, state);
+    this._syncBindings(element, state);
   }
-  _syncValues(element, state) {
-    if (!element) {
-      return;
-    }
-    const values = state.value || [];
-    let i = 0;
-    for (const itemElement of this._listItemElements(element)) {
-      itemElement[VALUE] = values[i++];
-    }
+  _unrender() {
+    this._clearBindings();
+  }
+  _getItems(state) {
+    return state.value;
   }
   _getListElement(element) {
-    return element.querySelector(`.${this.className}__list`);
+    return element.querySelector('[data-role="list"]');
   }
-  _listItemElements(element) {
+  _getItemElements(element) {
     return element ? Array.from(element.querySelectorAll(`[data-role="item"]`)) : [];
   }
-  _listBindings(rootElement) {
-    if (!rootElement) {
-      return [];
-    }
-    const bindings = [];
-    for (const element of this._listItemElements(rootElement)) {
-      const value = element[VALUE];
-      if (!value) {
-        continue;
-      }
-      const key = this.options.itemType === 'product' ? value.product_id : value;
-      bindings.push({
-        element,
-        key,
-        value
-      });
-    }
-    return bindings;
-  }
   _onClick(event) {
     const element = event.target.closest(`[data-role="item"]`);
     if (!element) {
       return;
     }
-    const value = element[VALUE];
+    const binding = this._bindings.get(element);
+    if (!binding) {
+      return;
+    }
+    this._trackClick(event, binding);
+    this._emitClickEvent(event, binding);
+  }
+  _emitClickEvent(event, binding) {
     const {
       session
     } = this._view._state;
+    const {
+      value,
+      element
+    } = binding;
     this._view._events.emit('click', {
       session,
       value,
@@ -224,8 +212,10 @@ class CollectionLayout extends _template.default {
     });
   }
   destroy() {
+    this._destroyTrackable();
     this._view = undefined;
     super.destroy();
   }
 }
-exports.default = CollectionLayout;
+exports.default = CollectionLayout;
+(0, _trackable.makeTrackable)(CollectionLayout.prototype);

package/dist/cjs/layout/list/list.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _collection = _interopRequireDefault(require("./collection.js"));
 const _excluded = ["className"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 const TYPE = 'list';
 const DEFAULT_CLASSNAME = 'miso-list';
 class ListLayout extends _collection.default {

package/dist/cjs/layout/radio/feedback.js

@@ -9,7 +9,7 @@ var _radio = _interopRequireDefault(require("./radio.js"));
 var _svgs = require("../svgs.js");
 const _excluded = ["className", "templates"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 const TYPE = 'feedback';
 const DEFAULT_CLASSNAME = 'miso-feedback';
 const OPTIONS = ['helpful', 'unhelpful'];

package/dist/cjs/layout/radio/radio.js

@@ -10,7 +10,7 @@ var _template = _interopRequireDefault(require("../template.js"));
 var _templates = require("../templates.js");
 const _excluded = ["className", "templates", "field", "defaultValue"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 function root(layout) {
   const {
     className,

package/dist/cjs/layout/raf.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _commons = require("@miso.ai/commons");
 const _excluded = ["role", "workflow"];
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 class RafLayout {
   constructor() {
     let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

package/dist/cjs/layout/template.js

@@ -9,7 +9,7 @@ var _raf = _interopRequireDefault(require("./raf.js"));
 var _templates = require("./templates.js");
 const _excluded = ["className", "templates"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 class TemplateBasedLayout extends _raf.default {
   constructor() {
     let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

package/dist/cjs/layout/templates.js

@@ -3,15 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.affiliation = affiliation;
+exports.affiliationInfoBlock = affiliationInfoBlock;
 exports.article = article;
 exports.articleInfoBlock = articleInfoBlock;
+exports.brandBlock = brandBlock;
+exports.cta = cta;
+exports.ctaBlock = ctaBlock;
+exports.dateBlock = dateBlock;
+exports.descriptionBlock = descriptionBlock;
+exports.discountRateText = discountRateText;
 exports.helpers = void 0;
 exports.imageBlock = imageBlock;
 exports.indexBlock = indexBlock;
+exports.priceBlock = priceBlock;
 exports.product = product;
 exports.productInfoBlock = productInfoBlock;
 exports.question = question;
 exports.requiresImplementation = requiresImplementation;
+exports.titleBlock = titleBlock;
 exports.unimplemented = unimplemented;
 var _commons = require("@miso.ai/commons");
 var _constants = require("../constants.js");
@@ -47,92 +57,173 @@ function article(layout, state, data, meta) {
   const [openTag, closeTag] = tagPair(layout, data);
   return [openTag, (templates.imageBlock || imageBlock)(layout, data, meta), (templates.infoBlock || templates.articleInfoBlock || articleInfoBlock)(layout, data, meta), (templates.indexBlock || indexBlock)(layout, data, meta), closeTag].join('');
 }
-function productInfoBlock(_ref, _ref2) {
+function affiliation(layout, state, data, meta) {
+  const {
+    templates
+  } = layout;
+  const [openTag, closeTag] = tagPair(layout, data);
+  return [openTag, (templates.infoBlock || templates.affiliationInfoBlock || affiliationInfoBlock)(layout, data, meta), (templates.imageBlock || imageBlock)(layout, data, meta), (templates.brandBlock || brandBlock)(layout, data, meta), closeTag].join('');
+}
+function affiliationInfoBlock(layout, data, meta) {
+  const {
+    className,
+    templates
+  } = layout;
+  return `<div class="${className}__item-info-container">${[(templates.titleBlock || titleBlock)(layout, data, meta), (templates.descriptionBlock || descriptionBlock)(layout, data, meta), (templates.priceBlock || priceBlock)(layout, data, meta), (templates.ctaBlock || ctaBlock)(layout, data, meta)].join('')}</div>`;
+}
+function productInfoBlock(layout, data, meta) {
+  const {
+    className,
+    templates
+  } = layout;
+  return `<div class="${className}__item-info-container">${[(templates.titleBlock || titleBlock)(layout, data, meta), (templates.descriptionBlock || descriptionBlock)(layout, data, meta), (templates.priceBlock || priceBlock)(layout, data, meta)].join('')}</div>`;
+}
+function articleInfoBlock(layout, data, meta) {
+  const {
+    className,
+    templates
+  } = layout;
+  return `<div class="${className}__item-info-container">${[(templates.titleBlock || titleBlock)(layout, data, meta), (templates.dateBlock || dateBlock)(layout, data, meta), (templates.descriptionBlock || descriptionBlock)(layout, data, meta), (templates.ctaBlock || ctaBlock)(layout, data, meta)].join('')}</div>`;
+}
+function titleBlock(_ref, _ref2) {
   let {
     className
   } = _ref;
   let {
-    title,
-    description,
-    sale_price,
-    original_price
+    title
   } = _ref2;
-  let content = '';
-  if (title) {
-    content += `<div class="${className}__item-title">${(0, _commons.escapeHtml)(title)}</div>`;
-  }
-  if (description) {
-    content += `<div class="${className}__item-desc">${(0, _commons.escapeHtml)(description)}</div>`;
-  }
-  const price = sale_price || original_price;
-  if (price) {
-    content += `<hr><div class="${className}__item-price">${price}</div>`;
-    // TODO: enhance this
+  return title ? `<div class="${className}__item-title">${(0, _commons.escapeHtml)(title)}</div>` : '';
+}
+function brandBlock(_ref3, _ref4) {
+  let {
+    className
+  } = _ref3;
+  let {
+    brand,
+    brand_logo
+  } = _ref4;
+  if (!brand && !brand_logo) {
+    return '';
   }
-  return `<div class="${className}__item-info-container">${content}</div>`;
+  const content = brand_logo ? `<img class="${className}__item-brand-logo" src="${brand_logo}"${brand ? ` alt="${brand}"` : ''}>` : `<div class="${className}__item-brand">${brand}</div>`;
+  return `<div class="${className}__item-brand-container">${content}</div>`;
+}
+function descriptionBlock(_ref5, _ref6) {
+  let {
+    className
+  } = _ref5;
+  let {
+    snippet,
+    description
+  } = _ref6;
+  return snippet ? `<div class="${className}__item-snippet">${snippet}</div>` : description ? `<div class="${className}__item-desc">${(0, _commons.escapeHtml)(description)}</div>` : '';
 }
-function articleInfoBlock(_ref3, _ref4) {
+function dateBlock(_ref7, _ref8) {
   let {
     className,
     templates
-  } = _ref3;
+  } = _ref7;
   let {
-    title,
-    snippet,
-    description,
     created_at,
     updated_at,
     published_at
-  } = _ref4;
+  } = _ref8;
   const date = published_at || created_at || updated_at;
-  let content = '';
-  if (title) {
-    content += `<div class="${className}__item-title">${(0, _commons.escapeHtml)(title)}</div>`;
+  return date ? `<div class="${className}__item-date">${formatDate(date, templates.date)}</div>` : '';
+}
+function priceBlock(layout, data) {
+  const {
+    className,
+    templates
+  } = layout;
+  const {
+    sale_price,
+    original_price,
+    currency = 'USD'
+  } = data;
+  const price = sale_price || original_price;
+  if (!price) {
+    return '';
   }
-  if (date) {
-    content += `<div class="${className}__item-date">${formatDate(date, templates.date)}</div>`;
+  const has_price_difference = original_price !== undefined && sale_price !== undefined && sale_price < original_price;
+  const discount_rate_percent = data.discount_rate_percent || (has_price_difference ? Math.floor((1 - sale_price / original_price) * 100) : undefined);
+  let content = '';
+  // original price
+  if (has_price_difference) {
+    content += `<span class="${className}__item-original-price miso-price" data-currency="${currency}">${original_price}</span><br>`;
   }
-  if (snippet) {
-    content += `<div class="${className}__item-snippet">${snippet}</div>`;
-  } else if (description) {
-    content += `<div class="${className}__item-desc">${(0, _commons.escapeHtml)(description)}</div>`;
+  // current price
+  content += `<span class="${className}__item-price miso-price" data-currency="${currency}">${price}</span>`;
+  // discount rate
+  if (discount_rate_percent) {
+    const text = (templates.discountRateText || discountRateText)(layout, Object.assign({}, data, {
+      discount_rate_percent
+    }));
+    content += ` <span class="${className}__item-discount-rate">${text}</span>`;
   }
-  return `<div class="${className}__item-info-container">${content}</div>`;
+  return `<div class="${className}__item-price-container">${content}</div>`;
+}
+function discountRateText(layout, _ref9) {
+  let {
+    discount_rate_percent
+  } = _ref9;
+  return `(${discount_rate_percent}% off)`;
 }
-function imageBlock(_ref5, _ref6) {
+function imageBlock(_ref10, _ref11) {
   let {
     className
-  } = _ref5;
+  } = _ref10;
   let {
     cover_image
-  } = _ref6;
+  } = _ref11;
   if (!cover_image) {
     return '';
   }
   const img = `<img class="${className}__item-cover-image" src="${cover_image}">`;
   return `<div class="${className}__item-cover-image-container">${img}</div>`;
 }
-function indexBlock(_ref7, data, _ref8) {
+function indexBlock(_ref12, data, _ref13) {
   let {
     className
-  } = _ref7;
+  } = _ref12;
   let {
     index
-  } = _ref8;
-  const i = index + 1;
-  return `<div class="${className}__item-index-container"><span class="${className}__item-index miso-citation-index" data-index="${i}"></span></div>`;
+  } = _ref13;
+  return `<div class="${className}__item-index-container"><span class="${className}__item-index miso-citation-index" data-index="${index + 1}"></span></div>`;
+}
+function ctaBlock(layout, data, meta) {
+  const {
+    className,
+    templates
+  } = layout;
+  let _cta = templates.cta || cta;
+  if (typeof _cta === 'function') {
+    _cta = _cta(layout, data, meta);
+  }
+  return _cta ? `<div class="${className}__item-cta-container">${_cta}</div>` : '';
+}
+function cta(layout, data, meta) {
+  const {
+    className,
+    templates
+  } = layout;
+  let text = templates.ctaText;
+  if (typeof text === 'function') {
+    text = text(layout, data, meta);
+  }
+  return text ? `<div class="${className}__item-cta">${text}</div>` : '';
 }
 
 // helpers //
-function tagPair(_ref9, _ref10) {
+function tagPair(_ref14, _ref15) {
   let {
     className,
     options = {}
-  } = _ref9;
+  } = _ref14;
   let {
     product_id,
     url
-  } = _ref10;
+  } = _ref15;
   let {
     classSuffix = 'item-body',
     role = 'item'

package/dist/cjs/layout/text/text.js

@@ -9,7 +9,7 @@ var _constants = require("../../constants.js");
 var _template = _interopRequireDefault(require("../template.js"));
 const _excluded = ["className", "templates", "tag"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 const TYPE = 'text';
 const DEFAULT_CLASSNAME = 'miso-text';
 function root(layout, state) {

package/dist/cjs/layout/text/typewriter/index.js

@@ -12,7 +12,7 @@ var _plaintext = _interopRequireDefault(require("./plaintext.js"));
 var _utils = require("./utils.js");
 const _excluded = ["className", "tag", "format", "tooltip"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 const TYPE = 'typewriter';
 const DEFAULT_CLASSNAME = 'miso-typewriter';
 class TypewriterLayout extends _progressive.default {
@@ -86,7 +86,7 @@ class TypewriterLayout extends _progressive.default {
       onDebug
     });
     // capture citation link click if necessary
-    this._unsubscribes.push(this._view.proxyElement.on('click', e => this._handleClick(e)));
+    this._unsubscribes.push(this._view.proxyElement.on('click', e => this._onClick(e)));
   }
   _getSource(index) {
     const {
@@ -172,7 +172,7 @@ class TypewriterLayout extends _progressive.default {
   }
 
   // event //
-  _handleClick(_ref5) {
+  _onClick(_ref5) {
     let {
       target
     } = _ref5;

package/dist/cjs/layout/trackable.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TrackableMixin = void 0;
+exports.makeTrackable = makeTrackable;
+var _constants = require("../constants.js");
+var _bindings = _interopRequireDefault(require("../util/bindings.js"));
+var _viewables = _interopRequireDefault(require("../util/viewables.js"));
+var _trackers = require("../util/trackers.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function makeTrackable(prototype) {
+  _mixin(prototype, TrackableMixin.prototype);
+}
+function _mixin(target, source) {
+  const descriptors = Object.getOwnPropertyDescriptors(source);
+  for (const key in descriptors) {
+    if (key === 'constructor') {
+      continue;
+    }
+    const {
+      value
+    } = descriptors[key];
+    if (target[key] === undefined && typeof value === 'function') {
+      target[key] = value;
+    }
+    // TODO: getter, setter
+  }
+}
+class TrackableMixin {
+  _initTrackable() {
+    this._bindings = new _bindings.default();
+    this._viewables = new _viewables.default();
+  }
+  _syncBindings(element, state) {
+    const values = this._getItems(state) || [];
+    const keys = values.map(value => this._getItemKey(value));
+    const elements = this._getItemElements(element);
+    const {
+      bounds,
+      unbounds
+    } = this._bindings.update(keys, values, elements);
+    this._onBindingsUpdate(bounds, unbounds);
+  }
+  _clearBindings() {
+    const {
+      bounds,
+      unbounds
+    } = this._bindings.clear();
+    this._onBindingsUpdate(bounds, unbounds);
+  }
+  _getItemKey(value) {
+    // TODO: ad-hoc!
+    return value.product_id || value.text || value.id || value;
+  }
+  _getItems(state) {
+    throw new Error(`Not implemented.`);
+  }
+  _getItemElements(element) {
+    throw new Error(`Not implemented.`);
+  }
+  _onBindingsUpdate(bounds, unbounds) {
+    this._trackImpressions(bounds);
+    this._untrackViewables(unbounds);
+    this._trackViewables(bounds);
+  }
+  _trackImpressions(entries) {
+    if (entries.length === 0) {
+      return;
+    }
+    const {
+      impression: options
+    } = this._view.trackerOptions || {};
+    if (!options) {
+      return;
+    }
+    setTimeout(() => this._view._track(_constants.EVENT_TYPE.IMPRESSION, entries.map(_ref => {
+      let {
+        value
+      } = _ref;
+      return value;
+    })), 0);
+  }
+  _untrackViewables(entries) {
+    for (const {
+      element
+    } of entries) {
+      this._viewables.untrack(element);
+    }
+  }
+  _trackViewables(entries) {
+    if (entries.length === 0) {
+      return;
+    }
+    const {
+      viewable: options
+    } = this._view.trackerOptions || {};
+    if (!options) {
+      return;
+    }
+    for (const {
+      value,
+      element
+    } of entries) {
+      (async () => (await this._viewables.track(element, options)) && this._view._track(_constants.EVENT_TYPE.VIEWABLE, [value]))();
+    }
+  }
+  _trackClick(event, binding) {
+    const {
+      click: options
+    } = this._view.trackerOptions || {};
+    if ((0, _trackers.validateClick)(options, event, binding)) {
+      this._view._track(_constants.EVENT_TYPE.CLICK, [binding.value]);
+    }
+  }
+  _destroyTrackable() {
+    const {
+      unbounds
+    } = this._bindings.clear();
+    this._untrackViewables(unbounds);
+  }
+}
+exports.TrackableMixin = TrackableMixin;

package/dist/cjs/plugin.js

@@ -19,7 +19,7 @@ const _excluded = ["containers", "roles", "combos"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 const PLUGIN_ID = 'std:ui';
 class UiPlugin extends _commons.Component {
   static get id() {