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

package/dist/cjs/layout/affiliation/affiliation.js

@@ -26,7 +26,10 @@ function root(layout, state) {
   const roleAttr = role ? ` data-role="${role}"` : '';
   const data = state.value || {};
   const channelAttr = data.channel ? ` data-channel="${data.channel}"` : '';
-  return `<div class="${className} ${status}"${roleAttr}${channelAttr}>${status === _constants.STATUS.READY ? templates[status](layout, state) : ''}</div>`;
+  const items = layout._getItems(state);
+  const itemCount = items ? items.length : undefined;
+  const itemCountAttr = itemCount !== undefined ? ` data-item-count="${itemCount}"` : '';
+  return `<div class="${className} ${status}"${roleAttr}${channelAttr}${itemCountAttr}>${status === _constants.STATUS.READY ? templates[status](layout, state) : ''}</div>`;
 }
 function ready(layout, state) {
   const {
@@ -104,7 +107,7 @@ function itemHeaderRightText(layout, state, value, meta) {
   } = layout;
   const logoText = _templates.helpers.asFunction(templates.logoText)(layout, state, value, meta) || '';
   const logoImg = _templates.helpers.asFunction(templates.logoImg)(layout, state, value, meta);
-  return logoImg ? `<span class="${className}__item-header-logo-phrase">${logoText}</span>${logoImg}` : '';
+  return logoImg ? `<span class="${className}__item-header-logo-text">${logoText}</span>${logoImg}` : '';
 }
 function logoImg(layout, state, value, meta) {
   const {
@@ -261,14 +264,9 @@ class AffiliationLayout extends _collection.default {
   }
   _render(element, states, controls) {
     super._render(element, states, controls);
-
-    // update item count, but raf to display as attribute
-    const items = this._getItems(states.state);
-    this._itemCount = items ? items.length : undefined;
-    (0, _commons.requestAnimationFrame)(() => {
-      this._syncItemCount();
-      this._syncItemIndex();
-    });
+    // sync again for incremental item rendering
+    this._syncItemCount(states);
+    this._syncItemIndex();
   }
   _syncElement(element) {
     const oldElement = this._element;
@@ -283,7 +281,11 @@ class AffiliationLayout extends _collection.default {
     newElement && this._viewable.observe(newElement);
   }
   _syncItemCount() {
-    const itemCount = this._itemCount;
+    let {
+      state
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    const items = this._getItems(state);
+    const itemCount = this._itemCount = items ? items.length : undefined;
     if (itemCount === this._displayedCount) {
       return;
     }

package/dist/cjs/layout/progressive.js

@@ -14,10 +14,10 @@ class ProgressiveLayout extends _raf.default {
   _takePending() {
     return this._pending;
   }
-  _applyRender() {
-    let extraControls = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  _applyRender(timestamp) {
+    let extraControls = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     const loop = (0, _commons.capture)(false);
-    super._applyRender(Object.assign({}, extraControls, {
+    super._applyRender(timestamp, Object.assign({}, extraControls, {
       loop: loop.t
     }));
     if (loop.value) {

package/dist/cjs/layout/raf.js

@@ -79,21 +79,20 @@ class RafLayout {
       return;
     }
     this._requested = true;
-    (0, _commons.requestAnimationFrame)(() => this._doRaf());
+    (0, _commons.requestAnimationFrame)(timestamp => this._doRaf(timestamp));
   }
-  _doRaf() {
+  _doRaf(timestamp) {
     if (!this._requested) {
       return; // just in case
     }
     this._requested = false;
-    this._applyRender();
+    this._applyRender(timestamp);
   }
-  _applyRender() {
-    let extraControls = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  _applyRender(timestamp) {
+    let extraControls = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     if (!this._pending) {
       return; // just in case
     }
-    const timestamp = Date.now();
     let [state, {
       notifyUpdate
     }] = this._takePending();

package/dist/cjs/version.js

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _default = exports.default = '1.10.0';
+var _default = exports.default = '1.10.1-beta.1';

package/package.json

@@ -26,7 +26,7 @@
     "url": "https://github.com/MisoAI/miso-client-js-sdk/issues"
   },
   "dependencies": {
-    "@miso.ai/commons": "1.10.0"
+    "@miso.ai/commons": "1.10.1-beta.1"
   },
-  "version": "1.10.0"
+  "version": "1.10.1-beta.1"
 }

package/src/layout/affiliation/affiliation.js

@@ -13,7 +13,10 @@ function root(layout, state) {
   const roleAttr = role ? ` data-role="${role}"` : '';
   const data = state.value || {};
   const channelAttr = data.channel ? ` data-channel="${data.channel}"` : '';
-  return `<div class="${className} ${status}"${roleAttr}${channelAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}</div>`;
+  const items = layout._getItems(state);
+  const itemCount = items ? items.length : undefined;
+  const itemCountAttr = itemCount !== undefined ? ` data-item-count="${itemCount}"` : '';
+  return `<div class="${className} ${status}"${roleAttr}${channelAttr}${itemCountAttr}>${status === STATUS.READY ? templates[status](layout, state) : ''}</div>`;
 }
 
 function ready(layout, state) {
@@ -70,7 +73,7 @@ function itemHeaderRightText(layout, state, value, meta) {
   const { className, templates } = layout;
   const logoText = helpers.asFunction(templates.logoText)(layout, state, value, meta) || '';
   const logoImg = helpers.asFunction(templates.logoImg)(layout, state, value, meta);
-  return logoImg ? `<span class="${className}__item-header-logo-phrase">${logoText}</span>${logoImg}` : '';
+  return logoImg ? `<span class="${className}__item-header-logo-text">${logoText}</span>${logoImg}` : '';
 }
 
 function logoImg(layout, state, value, meta) {
@@ -227,15 +230,9 @@ export default class AffiliationLayout extends CollectionLayout {
 
   _render(element, states, controls) {
     super._render(element, states, controls);
-
-    // update item count, but raf to display as attribute
-    const items = this._getItems(states.state);
-    this._itemCount = items ? items.length : undefined;
-
-    raf(() => {
-      this._syncItemCount();
-      this._syncItemIndex();
-    });
+    // sync again for incremental item rendering
+    this._syncItemCount(states);
+    this._syncItemIndex();
   }
 
   _syncElement(element) {
@@ -252,8 +249,9 @@ export default class AffiliationLayout extends CollectionLayout {
     newElement && this._viewable.observe(newElement);
   }
 
-  _syncItemCount() {
-    const itemCount = this._itemCount;
+  _syncItemCount({ state } = {}) {
+    const items = this._getItems(state);
+    const itemCount = this._itemCount = items ? items.length : undefined;
     if (itemCount === this._displayedCount) {
       return;
     }

package/src/layout/progressive.js

@@ -11,9 +11,9 @@ export default class ProgressiveLayout extends RafLayout {
     return this._pending;
   }
 
-  _applyRender(extraControls = {}) {
+  _applyRender(timestamp, extraControls = {}) {
     const loop = capture(false);
-    super._applyRender({ ...extraControls, loop: loop.t });
+    super._applyRender(timestamp, { ...extraControls, loop: loop.t });
     if (loop.value) {
       this._requestRaf();
     }

package/src/layout/raf.js

@@ -59,22 +59,21 @@ export default class RafLayout {
       return;
     }
     this._requested = true;
-    raf(() => this._doRaf());
+    raf(timestamp => this._doRaf(timestamp));
   }
 
-  _doRaf() {
+  _doRaf(timestamp) {
     if (!this._requested) {
       return; // just in case
     }
     this._requested = false;
-    this._applyRender();
+    this._applyRender(timestamp);
   }
 
-  _applyRender(extraControls = {}) {
+  _applyRender(timestamp, extraControls = {}) {
     if (!this._pending) {
       return; // just in case
     }
-    const timestamp = Date.now();
     let [state, { notifyUpdate }] = this._takePending();
     state = Object.freeze({ ...state, timestamp });
 

package/src/version.js

@@ -1 +1 @@
-export default '1.10.0';
+export default '1.10.1-beta.1';