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

package/dist/cjs/layout/templates.js

@@ -25,6 +25,8 @@ exports.titleBlock = titleBlock;
 exports.unimplemented = unimplemented;
 var _commons = require("@miso.ai/commons");
 var _constants = require("../constants.js");
+const _excluded = ["classSuffix", "role"];
+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 requiresImplementation() {
   for (var _len = arguments.length, names = new Array(_len), _key = 0; _key < _len; _key++) {
     names[_key] = arguments[_key];
@@ -61,8 +63,12 @@ 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('');
+  const [openTag, closeTag] = tagPair(layout, data, {
+    link: false
+  });
+  return [openTag, (templates.infoBlock || templates.affiliationInfoBlock || affiliationInfoBlock)(layout, data, meta), (templates.imageBlock || imageBlock)(layout, data, Object.assign({
+    brand: true
+  }, meta)), closeTag].join('');
 }
 function affiliationInfoBlock(layout, data, meta) {
   const {
@@ -156,7 +162,9 @@ function priceBlock(layout, data) {
   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, data);
+    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-price-container">${content}</div>`;
@@ -167,26 +175,28 @@ function discountRateText(layout, _ref9) {
   } = _ref9;
   return `(${discount_rate_percent}% off)`;
 }
-function imageBlock(_ref10, _ref11) {
-  let {
-    className
-  } = _ref10;
-  let {
+function imageBlock(layout, data, meta) {
+  const {
+    className,
+    templates
+  } = layout;
+  const {
     cover_image
-  } = _ref11;
+  } = data;
   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>`;
+  const brand = meta.brand ? (templates.brandBlock || brandBlock)(layout, data, meta) : '';
+  return `<div class="${className}__item-cover-image-container">${img}${brand}</div>`;
 }
-function indexBlock(_ref12, data, _ref13) {
+function indexBlock(_ref10, data, _ref11) {
   let {
     className
-  } = _ref12;
+  } = _ref10;
   let {
     index
-  } = _ref13;
+  } = _ref11;
   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) {
@@ -194,38 +204,45 @@ function ctaBlock(layout, data, meta) {
     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>` : '';
+  const cta = helpers.asFunction(templates.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);
+  const {
+    url
+  } = data;
+  if (!url) {
+    return '';
   }
-  return text ? `<div class="${className}__item-cta">${text}</div>` : '';
+  const [openTag, closeTag] = tagPair(layout, {
+    url
+  }, {
+    classSuffix: 'item-cta',
+    role: 'cta'
+  });
+  const ctaText = helpers.asFunction(templates.ctaText)(layout, data, meta);
+  return ctaText ? `${openTag}${ctaText}${closeTag}` : '';
 }
 
 // helpers //
-function tagPair(_ref14, _ref15) {
+function tagPair(_ref13, _ref14) {
   let {
     className,
     options = {}
-  } = _ref14;
+  } = _ref13;
   let {
     product_id,
     url
-  } = _ref15;
+  } = _ref14;
+  let _ref12 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   let {
-    classSuffix = 'item-body',
-    role = 'item'
-  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      classSuffix = 'item-body',
+      role = 'item'
+    } = _ref12,
+    meta = _objectWithoutPropertiesLoose(_ref12, _excluded);
   const {
     link = {}
   } = options;
@@ -233,8 +250,8 @@ function tagPair(_ref14, _ref15) {
     target = '_blank',
     rel = 'noopener'
   } = link; // TODO: other properties
-  const tag = url ? 'a' : 'div';
-  const urlAttrs = url ? `href="${url}" target="${target}" rel="${rel}"` : '';
+  const tag = meta.link !== false && url ? 'a' : 'div';
+  const urlAttrs = meta.link !== false && url ? `href="${url}" target="${target}" rel="${rel}"` : '';
   const productAttrs = product_id ? `${_constants.ATTR_DATA_MISO_PRODUCT_ID}="${product_id}"` : '';
   const roleAttrs = role ? `data-role="${role}"` : '';
   return [`<${tag} class="${className}__${classSuffix}" ${roleAttrs} ${productAttrs} ${urlAttrs}>`, `</${tag}>`];
@@ -258,8 +275,13 @@ function formatDate(date) {
       throw new Error(`Invalid date format: ${fn}`);
   }
 }
+function asFunction() {
+  let template = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return typeof template === 'function' ? template : () => template;
+}
 const helpers = exports.helpers = Object.freeze({
   tagPair,
   formatDate,
-  escapeHtml: _commons.escapeHtml
+  escapeHtml: _commons.escapeHtml,
+  asFunction
 });

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

@@ -7,10 +7,9 @@ exports.default = void 0;
 var _commons = require("@miso.ai/commons");
 var _constants = require("../../../constants.js");
 var _progressive = _interopRequireDefault(require("../../progressive.js"));
-var _progress = _interopRequireDefault(require("./progress.js"));
 var _plaintext = _interopRequireDefault(require("./plaintext.js"));
 var _utils = require("./utils.js");
-const _excluded = ["className", "tag", "format", "tooltip"];
+const _excluded = ["className", "tag", "format", "tooltip", "speed", "acceleration", "nextCursorFn"];
 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.includes(n)) continue; t[n] = r[n]; } return t; }
 const TYPE = 'typewriter';
@@ -31,7 +30,10 @@ class TypewriterLayout extends _progressive.default {
         className = DEFAULT_CLASSNAME,
         tag = 'auto',
         format = 'markdown',
-        tooltip = false
+        tooltip = false,
+        speed,
+        acceleration,
+        nextCursorFn
       } = _ref,
       options = _objectWithoutPropertiesLoose(_ref, _excluded);
     super(Object.assign({
@@ -43,7 +45,10 @@ class TypewriterLayout extends _progressive.default {
       className
     });
     this._prevState = undefined;
-    this._progress = new _progress.default(options);
+    this._getNextCursor = typeof nextCursorFn === 'function' ? nextCursorFn : (0, _commons.pacer)({
+      speed,
+      acceleration
+    });
     this._readiness = new _commons.Resolution();
 
     // kick off sooner
@@ -86,7 +91,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 {
@@ -154,7 +159,7 @@ class TypewriterLayout extends _progressive.default {
       // new typing streak
       result = this._renderer.clear(container, rendered);
     } else {
-      const cursor = this._progress.get(rendered, state);
+      const cursor = this._getNextCursor(rendered.cursor, state.doneAt, rendered.timestamp, state.timestamp);
       result = this._renderer.update(container, rendered, Object.assign({}, state, {
         cursor
       }));
@@ -172,7 +177,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.tracker.options || {};
+    if (!options) {
+      return;
+    }
+    this._view.tracker.impression(entries.map(_ref => {
+      let {
+        value
+      } = _ref;
+      return value;
+    }));
+  }
+  _untrackViewables(entries) {
+    for (const {
+      element
+    } of entries) {
+      this._viewables.untrack(element);
+    }
+  }
+  _trackViewables(entries) {
+    if (entries.length === 0) {
+      return;
+    }
+    const {
+      viewable: options
+    } = this._view.tracker.options || {};
+    if (!options) {
+      return;
+    }
+    for (const {
+      value,
+      element
+    } of entries) {
+      (async () => (await this._viewables.track(element, options)) && this._view.tracker.viewable([value]))();
+    }
+  }
+  _trackClick(event, binding) {
+    const {
+      click: options
+    } = this._view.tracker.options || {};
+    if ((0, _trackers.validateClick)(options, event, binding)) {
+      this._view.tracker.click([binding.value]);
+    }
+  }
+  _destroyTrackable() {
+    const {
+      unbounds
+    } = this._bindings.clear();
+    this._untrackViewables(unbounds);
+  }
+}
+exports.TrackableMixin = TrackableMixin;

package/dist/cjs/util/bindings.js

@@ -3,131 +3,79 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Bindings = void 0;
-exports.fallbackListFunction = fallbackListFunction;
-var _commons = require("@miso.ai/commons");
-function fallbackListFunction(keyAttrName) {
-  return element => Array.from(element.querySelectorAll(`[${keyAttrName}]`)).map(element => ({
-    element,
-    value: {
-      product_id: element.getAttribute(keyAttrName) // TODO: product_id is ad-hoc
+exports.default = void 0;
+function tuple(keys, values, elements) {
+  const k2b = new Map();
+  const e2b = new Map();
+  const entries = [];
+  for (let index = 0; index < keys.length; index++) {
+    const key = keys[index];
+    const element = elements[index];
+    const value = values[index];
+    const entry = Object.freeze({
+      index,
+      key,
+      value,
+      element
+    });
+    k2b.set(key, entry);
+    e2b.set(element, entry);
+    entries.push(entry);
+  }
+  return {
+    k2b,
+    e2b,
+    entries
+  };
+}
+function diff(from, to) {
+  const entries = [];
+  for (const entry of to.entries) {
+    const f = from.e2b.get(entry.element);
+    if (!f || f.key !== entry.key) {
+      entries.push(entry);
     }
-  }));
+  }
+  return entries;
 }
 class Bindings {
   constructor() {
-    let {
-      keyAttrName = 'data-key',
-      list
-    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    this._list = list || fallbackListFunction(keyAttrName);
-    this._bindings = new Map();
-    this._e2b = new WeakMap();
+    this._k2b = new Map();
+    this._e2b = new Map();
+    this._entries = [];
   }
-  list() {
-    return [...this._bindings.values()];
+  get entries() {
+    return [...this._entries];
   }
-  get(ref) {
-    if (!ref) {
-      throw new Error(`Value or element is required.`);
-    }
-    if (!this._root) {
-      return undefined;
-    }
-    if (!(0, _commons.isElement)(ref)) {
-      return this._bindings.get(ref);
-    }
-    return (0, _commons.findInAncestors)(ref, element => this._e2b.get(element) || undefined, {
-      root: this._root
-    });
+  get(element) {
+    return this._e2b.get(element) || undefined;
   }
-  refresh(rootElement) {
-    if (!rootElement) {
-      return this.unbindAll();
-    }
-    this._root = rootElement;
-    const unbounds = this._purge();
-    const bounds = [];
-    // warn for conflict productIds
-    // TODO
-    for (const pair of this._list(rootElement)) {
-      const [binding, ...ubs] = this._bind(pair);
-      if (binding) {
-        bounds.push(binding);
-      }
-      for (const u of ubs) {
-        unbounds.push(u);
-      }
-    }
+  update(keys, values, elements) {
+    const newTuple = tuple(keys, values, elements);
+    const oldTuple = {
+      k2b: this._k2b,
+      e2b: this._e2b,
+      entries: this._entries
+    };
+    const bounds = diff(oldTuple, newTuple);
+    const unbounds = diff(newTuple, oldTuple);
+    this._k2b = newTuple.k2b;
+    this._e2b = newTuple.e2b;
+    this._entries = newTuple.entries;
     return {
       bounds,
       unbounds
     };
   }
-  unbindAll() {
-    const unbounds = this.list();
-    this._bindings.clear();
-    this._root = undefined;
+  clear() {
+    const unbounds = this._entries;
+    this._k2b = new Map();
+    this._e2b = new Map();
+    this._entries = [];
     return {
       bounds: [],
       unbounds
     };
   }
-  _bind(_ref) {
-    let {
-      element,
-      key,
-      value
-    } = _ref;
-    key = key || value;
-    if (!key) {
-      throw new Error(`Key or value is required.`);
-    }
-    if (!element) {
-      throw new Error(`Element is required.`);
-    }
-
-    // check if binding already exist
-    const oldBinding = this._bindings.get(key);
-    if (oldBinding && oldBinding.element === element) {
-      return [];
-    }
-    const unbound0 = this._unbind(this.get(key));
-    const unbound1 = this._unbind(this.get(element));
-    const binding = Object.freeze({
-      key,
-      value,
-      element
-    });
-    this._bindings.set(key, binding);
-    this._e2b.set(element, binding);
-    const results = [binding];
-    unbound0 && results.push(unbound0);
-    unbound1 && results.push(unbound1);
-    return results;
-  }
-  _purge() {
-    const purged = [];
-    for (const binding of this._bindings.values()) {
-      const {
-        element
-      } = binding;
-      if ((0, _commons.isInDocument)(element)) {
-        continue;
-      }
-      purged.push(this._unbind(binding));
-    }
-    return purged;
-  }
-  _unbind(binding) {
-    if (binding) {
-      this._bindings.delete(binding.key);
-      this._e2b.delete(binding.element);
-    }
-    return binding;
-  }
-  _destroy() {
-    this.unbindAll();
-  }
 }
-exports.Bindings = Bindings;
+exports.default = Bindings;

package/dist/cjs/util/states.js

@@ -15,55 +15,62 @@ const {
   UNTRACKED,
   TRIGGERED
 } = _constants.TRACKING_STATUS;
+
+/*
 const STATES = {
   NEW: Object.freeze({
     [IMPRESSION]: UNTRACKED,
-    [VIEWABLE]: UNTRACKED
+    [VIEWABLE]: UNTRACKED,
   }),
   UNTRACKED: Object.freeze({
     [IMPRESSION]: UNTRACKED,
     [VIEWABLE]: UNTRACKED,
-    [CLICK]: UNTRACKED
-  })
+    [CLICK]: UNTRACKED,
+  }),
 };
+*/
+
+const UNTRACKED_STATES = Object.freeze({
+  [IMPRESSION]: UNTRACKED,
+  [VIEWABLE]: UNTRACKED,
+  [CLICK]: UNTRACKED
+});
 
 /**
  * Tracking states for a session to keep track of the tracking status of each product.
- * For each entry there are status of impression, viewable, and click events. 
- * The actual click tracking status depends on the presence of root element, which is not respected in this object.
+ * For each entry there are status of impression, viewable, and click events.
  */
 class States {
   constructor(sessionId) {
     this.sessionId = sessionId;
-    this._states = new Map(); // productId -> {impression, viewable, click}
+    this._states = new Map(); // item key -> {impression, viewable, click}
   }
-  getFullState(productId) {
+  getFullState(item) {
     // when we receive a bind event, impression is trigger, making an entry here
     // so if the state is not found, the product is not present yet => all untracked
-    const state = this._states.get(getKey(productId));
-    return state ? Object.assign({}, state) : STATES.UNTRACKED;
+    const state = this._states.get(this._getKey(item));
+    return state ? Object.assign({}, state) : UNTRACKED_STATES;
   }
-  get(productId, type) {
-    const state = this._states.get(getKey(productId));
+  get(item, type) {
+    const state = this._states.get(this._getKey(item));
     return state && state[type] || UNTRACKED;
   }
-  set(productIds, type, status) {
+  set(items, type, status) {
     (0, _constants.validateEventType)(type);
     (0, _constants.validateTrackingStatus)(status);
-    for (const productId of (0, _commons.asArray)(productIds)) {
-      this._setOne(getKey(productId), type, status);
+    for (const item of (0, _commons.asArray)(items)) {
+      this._setOne(item, type, status);
     }
   }
-  _setOne(productId, type, status) {
-    // leave click untracked/tracking judged by its global state
-    (0, _commons.computeIfAbsent)(this._states, productId, () => Object.assign({}, STATES.NEW))[type] = status;
+  untriggered(items, type) {
+    return items.filter(item => this.get(item, type) !== TRIGGERED);
+  }
+  _getKey(item) {
+    // TODO: ad-hoc! should move away to higher level
+    return item.product_id || item.text || item.id || item;
   }
-  untriggered(productIds, type) {
-    return productIds.filter(productId => this.get(productId, type) !== TRIGGERED);
+  _setOne(item, type, status) {
+    (0, _commons.computeIfAbsent)(this._states, this._getKey(item), () => Object.assign({}, UNTRACKED_STATES))[type] = status;
   }
 }
-exports.default = States;
-function getKey(value) {
-  // TODO: ad-hoc!
-  return value.product_id || value.text || value;
-}
+exports.default = States;