@miso.ai/client-sdk-ui 1.9.9-beta.0 → 1.9.9-beta.1

package/dist/cjs/asset/svgs.js

@@ -24,7 +24,7 @@ function loadSvgSprites() {
 }
 loadSvgSprites();
 function getSvg(name) {
-  return `<svg class="miso-ui-icon miso-ui-icon-${name}"><use xlink:href="#${PREFIX}-${name}"></use></svg>`;
+  return `<svg class="miso-ui-icon miso-ui-icon-${name}"><use href="#${PREFIX}-${name}"></use></svg>`;
 }
 const SEND = exports.SEND = getSvg('send');
 const SEARCH = exports.SEARCH = getSvg('search');

package/dist/cjs/combo/ask/index.js

@@ -127,9 +127,9 @@ class AskCombo extends _base.default {
     // TODO: set placeholder if present in options
 
     if (features.followUpQuestions !== false) {
-      wireFollowUps(client, elements.followUpsSection, {
+      wireFollowUps(client, elements.followUpsSection, Object.assign({}, options, {
         template: templates.followUp
-      });
+      }));
     }
     if (features.relatedResources !== false && features.followUpQuestions !== false) {
       wireRelatedResources(client, elements.relatedResourcesSection);

package/dist/cjs/defaults/ask/controls.js

@@ -6,10 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.wireFollowUps = wireFollowUps;
 exports.wireRelatedResources = wireRelatedResources;
 var _templates = require("./templates.js");
+const _excluded = ["template"];
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function wireFollowUps(client, element) {
+  let _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   let {
-    template = _templates.followUp
-  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      template = _templates.followUp
+    } = _ref,
+    options = _objectWithoutPropertiesLoose(_ref, _excluded);
   if (!client) {
     throw new Error('client is required');
   }
@@ -24,9 +28,9 @@ function wireFollowUps(client, element) {
 
   // 1. when an answer is fully populated, insert a new section for the follow-up question
   context.on('done', event => {
-    element.insertAdjacentHTML('beforeend', template({
+    element.insertAdjacentHTML('beforeend', template(Object.assign({}, options, {
       parentQuestionId: event.workflow.questionId
-    }));
+    })));
   });
   // 2. if user starts over, clean up existing follow-up questions
   rootWorkflow.on('loading', () => {

package/dist/cjs/defaults/ask/phrases.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sources = exports.relatedResources = exports.relatedQuestions = exports.question = void 0;
+exports.sources = exports.relatedResources = exports.question = exports.querySuggestions = void 0;
 /**
  * The phrase displayed right before <miso-question>
  */
@@ -17,7 +17,7 @@ const sources = exports.sources = 'My reply is based on the following';
 /**
  * The phrase displayed right before <miso-query-suggestions>
  */
-const relatedQuestions = exports.relatedQuestions = 'Related questions you can explore';
+const querySuggestions = exports.querySuggestions = 'Related questions you can explore';
 
 /**
  * The phrase displayed right before <miso-related-resources>

package/dist/cjs/defaults/ask/templates.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.followUp = followUp;
 exports.root = root;
+var _commons = require("@miso.ai/commons");
 var _constants = require("./constants.js");
 var DEFAULT_PHRASES = _interopRequireWildcard(require("./phrases.js"));
-const _excluded = ["classPrefix", "circledCitationIndex"],
+const _excluded = ["classPrefix", "circledCitationIndex", "phrases"],
   _excluded2 = ["classes"];
 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; }
@@ -44,14 +45,35 @@ function normalizeOptions() {
   let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   let {
       classPrefix = _constants.CLASS_PREFIX,
-      circledCitationIndex = true
+      circledCitationIndex = true,
+      phrases
     } = _ref,
     options = _objectWithoutPropertiesLoose(_ref, _excluded);
+  phrases = normalizePhraseOptions(phrases);
   return Object.assign({
     classPrefix,
-    circledCitationIndex
+    circledCitationIndex,
+    phrases
   }, options);
 }
+function normalizePhraseOptions() {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  if (!options) {
+    return {};
+  }
+  const normalized = {};
+  for (const key in options) {
+    normalized[normalizePhraseOptionKey(key)] = options[key];
+  }
+  return normalized;
+}
+function normalizePhraseOptionKey(key) {
+  key = (0, _commons.kebabOrSnakeToLowerCamel)(key);
+  if (key === 'relatedQuestions') {
+    return 'querySuggestions'; // legacy key
+  }
+  return key;
+}
 
 // sections & containers //
 function followUps(options) {
@@ -86,7 +108,7 @@ function querySuggestions(options) {
     name: 'query-suggestions',
     visibleWhen: 'initial+nonempty'
   }, [phrase(options, {
-    name: 'related-questions',
+    name: 'query-suggestions',
     tag: 'h3'
   }), '<miso-query-suggestions></miso-query-suggestions>']);
 }
@@ -124,7 +146,7 @@ function phrase(options, _ref2) {
   const {
     classPrefix
   } = options;
-  return `<${tag} class="${classPrefix}__phrase ${classPrefix}__${name}-phrase">${phraseText(options, kebabToLowerCamel(name))}</${tag}>`;
+  return `<${tag} class="${classPrefix}__phrase ${classPrefix}__${name}-phrase">${phraseText(options, (0, _commons.kebabToLowerCamel)(name))}</${tag}>`;
 }
 function phraseText(options, key) {
   const {
@@ -193,14 +215,8 @@ function attrs() {
   for (const name in attributes) {
     const value = attributes[name];
     if (value !== undefined) {
-      str += ` ${lowerCamelToKebab(name)}="${value}"`;
+      str += ` ${(0, _commons.lowerCamelToKebab)(name)}="${value}"`;
     }
   }
   return str;
-}
-function kebabToLowerCamel(str) {
-  return str.replace(/-([a-z])/g, g => g[1].toUpperCase());
-}
-function lowerCamelToKebab(str) {
-  return str.replace(/([A-Z])/g, '-$1').toLowerCase();
 }

package/dist/cjs/version.js

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

package/dist/cjs/workflow/base.js

@@ -170,32 +170,6 @@ class Workflow extends _commons.Component {
     return this;
   }
 
-  // configuration //
-  useApi() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    this._options.api = args;
-    return this;
-  }
-  useLayouts() {
-    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    this._options.layouts = options;
-    return this;
-  }
-  useDataProcessor(fn) {
-    this._options.dataProcessor = fn;
-    return this;
-  }
-  useTrackers(options) {
-    this._options.trackers = options;
-    return this;
-  }
-  useInteractions(options) {
-    this._options.interactions = options;
-    return this;
-  }
-
   // trackers //
   get trackers() {
     return this._trackers;
@@ -263,4 +237,5 @@ class Workflow extends _commons.Component {
     }
   }
 }
-exports.default = Workflow;
+exports.default = Workflow;
+(0, _options.makeConfigurable)(Workflow.prototype);

package/dist/cjs/workflow/context.js

@@ -13,28 +13,6 @@ class WorkflowContext extends _commons.Component {
     this._client = client;
     this._options = new _options.WorkflowContextOptions();
   }
-  useApi() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    this._options.api = args;
-    return this;
-  }
-  useLayouts(options) {
-    this._options.layouts = options;
-    return this;
-  }
-  useDataProcessor(fn) {
-    this._options.dataProcessor = fn;
-    return this;
-  }
-  useTrackers(options) {
-    this._options.trackers = options;
-    return this;
-  }
-  useInteractions(options) {
-    this._options.interactions = options;
-    return this;
-  }
 }
-exports.default = WorkflowContext;
+exports.default = WorkflowContext;
+(0, _options.makeConfigurable)(WorkflowContext.prototype);

package/dist/cjs/workflow/options.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.WorkflowOptions = exports.WorkflowContextOptions = void 0;
+exports.makeConfigurable = makeConfigurable;
 exports.mergeApiOptions = mergeApiOptions;
 exports.mergeDataProcessorOptions = mergeDataProcessorOptions;
 exports.mergeInteractionsOptions = mergeInteractionsOptions;
@@ -58,10 +59,15 @@ function normalizeLayoutsOptions() {
   }
   const normalize = {};
   for (const [role, args] of Object.entries(options)) {
-    normalize[role] = normalizeLayoutOptions(args);
+    normalize[normalizeRole(role)] = normalizeLayoutOptions(args);
   }
   return normalize;
 }
+function normalizeRole(role) {
+  role = (0, _commons.lowerCamelToSnake)(role);
+  role = (0, _commons.kebabToSnake)(role);
+  return role;
+}
 function normalizeLayoutOptions(args) {
   // take args:
   // * undefined
@@ -128,8 +134,8 @@ function normalizeInteractionsOptions(options) {
 
 // merge //
 function mergeApiOptions() {
-  for (var _len = arguments.length, optionsList = new Array(_len), _key = 0; _key < _len; _key++) {
-    optionsList[_key] = arguments[_key];
+  for (var _len = arguments.length, optionsList = new Array(_len), _key2 = 0; _key2 < _len; _key2++) {
+    optionsList[_key2] = arguments[_key2];
   }
   if (optionsList[optionsList.length - 1] === false) {
     return false;
@@ -150,8 +156,8 @@ function mergeObjectValueIfPresent(key, base, overrides) {
   } : {};
 }
 function mergeLayoutsOptions() {
-  for (var _len2 = arguments.length, optionsList = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-    optionsList[_key2] = arguments[_key2];
+  for (var _len2 = arguments.length, optionsList = new Array(_len2), _key3 = 0; _key3 < _len2; _key3++) {
+    optionsList[_key3] = arguments[_key3];
   }
   if (optionsList[optionsList.length - 1] === false) {
     return false;
@@ -177,14 +183,14 @@ function mergeLayoutParameters(base, overrides) {
   });
 }
 function mergeDataProcessorOptions() {
-  for (var _len3 = arguments.length, optionsList = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-    optionsList[_key3] = arguments[_key3];
+  for (var _len3 = arguments.length, optionsList = new Array(_len3), _key4 = 0; _key4 < _len3; _key4++) {
+    optionsList[_key4] = arguments[_key4];
   }
   return optionsList.flat().filter(Boolean);
 }
 function mergeTrackersOptions() {
-  for (var _len4 = arguments.length, optionsList = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-    optionsList[_key4] = arguments[_key4];
+  for (var _len4 = arguments.length, optionsList = new Array(_len4), _key5 = 0; _key5 < _len4; _key5++) {
+    optionsList[_key5] = arguments[_key5];
   }
   if (optionsList[optionsList.length - 1] === false) {
     return false;
@@ -201,8 +207,8 @@ function mergeTrackerEventOptions() {
   return overrides === false || base === false ? overrides : Object.assign({}, base, overrides);
 }
 function mergeInteractionsOptions() {
-  for (var _len5 = arguments.length, optionsList = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-    optionsList[_key5] = arguments[_key5];
+  for (var _len5 = arguments.length, optionsList = new Array(_len5), _key6 = 0; _key6 < _len5; _key6++) {
+    optionsList[_key6] = arguments[_key6];
   }
   if (optionsList[optionsList.length - 1] === false) {
     return false;
@@ -251,20 +257,20 @@ class WorkflowContextOptions {
 exports.WorkflowContextOptions = WorkflowContextOptions;
 class WorkflowOptions {
   constructor() {
-    let globals = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let context = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     let defaults = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     this._events = new _commons.EventEmitter({
       target: this
     });
     this._defaults = defaults;
-    this._globals = globals || {};
+    this._context = context || {};
     this._locals = {};
     (0, _commons.defineValues)(this, {
       resolved: new ResolvedWorkflowOptions(this),
       defaults
     });
-    if (globals && globals.on) {
-      this._unsubscribes = [globals.on('*', event => this._notify(event.name))];
+    if (context && context.on) {
+      this._unsubscribes = [context.on('*', event => this._notify(event.name))];
     }
   }
   _notify(name) {
@@ -281,6 +287,28 @@ class WorkflowOptions {
   }
 }
 exports.WorkflowOptions = WorkflowOptions;
+class WorkflowFeature {
+  constructor(options, store, key, normalize, merge) {
+    this._options = options;
+    this._store = store;
+    this._key = key;
+    this._normalize = value => value !== undefined ? normalize(value) : undefined;
+    this._merge = merge;
+  }
+  get() {
+    return this._store[this._key];
+  }
+  set(value) {
+    this._set(this._normalize(value));
+  }
+  merge(value) {
+    this._set(this._merge(this.get(), this._normalize(value)));
+  }
+  _set(value) {
+    this._store[this._key] = value;
+    this._options._notify(this._key);
+  }
+}
 class ResolvedWorkflowOptions {
   constructor(options) {
     this._options = options;
@@ -292,32 +320,57 @@ for (const {
   merge
 } of FEATURES) {
   Object.defineProperty(WorkflowContextOptions.prototype, key, {
-    set: function (value) {
-      this._globals[key] = normalize(value);
-      this._notify(key);
-    },
     get: function () {
-      return this._globals[key];
+      const _key = `_${key}`;
+      return this[_key] || (this[_key] = new WorkflowFeature(this, this._globals, key, normalize, merge));
     }
   });
   Object.defineProperty(WorkflowOptions.prototype, key, {
-    set: function (value) {
-      this._locals[key] = normalize(value);
-      this._notify(key);
-    },
     get: function () {
-      return this._locals[key];
+      const _key = `_${key}`;
+      return this[_key] || (this[_key] = new WorkflowFeature(this, this._locals, key, normalize, merge));
     }
   });
   Object.defineProperty(ResolvedWorkflowOptions.prototype, key, {
     get: function () {
       const options = this._options;
-      return merge(options._defaults[key], options._globals[key], options._locals[key]);
+      return merge(options._defaults[key], options._context[key].get(), options._locals[key]);
+    }
+  });
+}
+function makeConfigurable(prototype) {
+  Object.assign(prototype, {
+    useApi() {
+      for (var _len6 = arguments.length, args = new Array(_len6), _key7 = 0; _key7 < _len6; _key7++) {
+        args[_key7] = arguments[_key7];
+      }
+      this._options.api.merge(args);
+      return this;
+    },
+    clearApi() {
+      this._options.api.set();
+      return this;
     }
   });
+  for (const feature of ['layouts', 'dataProcessor', 'trackers', 'interactions']) {
+    const upperCased = upperCase(feature);
+    Object.assign(prototype, {
+      [`use${upperCased}`](value) {
+        this._options[feature].merge(value);
+        return this;
+      },
+      [`clear${upperCased}`]() {
+        this._options[feature].set();
+        return this;
+      }
+    });
+  }
 }
 
 // helpers //
+function upperCase(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
 function concatArrays(a0, a1) {
   return a0 && a0.length ? a1 && a1.length ? [...a0, ...a1] : a0 : a1;
 }

package/package.json

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

package/src/asset/svgs.js

@@ -24,7 +24,7 @@ function loadSvgSprites() {
 loadSvgSprites();
 
 function getSvg(name) {
-  return `<svg class="miso-ui-icon miso-ui-icon-${name}"><use xlink:href="#${PREFIX}-${name}"></use></svg>`;
+  return `<svg class="miso-ui-icon miso-ui-icon-${name}"><use href="#${PREFIX}-${name}"></use></svg>`;
 }
 
 export const SEND = getSvg('send');

package/src/combo/ask/index.js

@@ -112,7 +112,7 @@ export default class AskCombo extends Combo {
     // TODO: set placeholder if present in options
 
     if (features.followUpQuestions !== false) {
-      wireFollowUps(client, elements.followUpsSection, { template: templates.followUp });
+      wireFollowUps(client, elements.followUpsSection, { ...options, template: templates.followUp });
     }
     if (features.relatedResources !== false && features.followUpQuestions !== false) {
       wireRelatedResources(client, elements.relatedResourcesSection);

package/src/defaults/ask/controls.js

@@ -1,6 +1,6 @@
 import { followUp as followUpTemplate } from './templates.js';
 
-export function wireFollowUps(client, element, { template = followUpTemplate } = {}) {
+export function wireFollowUps(client, element, { template = followUpTemplate, ...options } = {}) {
   if (!client) {
     throw new Error('client is required');
   }
@@ -15,7 +15,7 @@ export function wireFollowUps(client, element, { template = followUpTemplate } =
 
   // 1. when an answer is fully populated, insert a new section for the follow-up question
   context.on('done', (event) => {
-    element.insertAdjacentHTML('beforeend', template({ parentQuestionId: event.workflow.questionId }));
+    element.insertAdjacentHTML('beforeend', template({ ...options, parentQuestionId: event.workflow.questionId }));
   });
   // 2. if user starts over, clean up existing follow-up questions
   rootWorkflow.on('loading', () => {

package/src/defaults/ask/phrases.js

@@ -11,7 +11,7 @@ export const sources = 'My reply is based on the following';
 /**
  * The phrase displayed right before <miso-query-suggestions>
  */
-export const relatedQuestions = 'Related questions you can explore';
+export const querySuggestions = 'Related questions you can explore';
 
 /**
  * The phrase displayed right before <miso-related-resources>

package/src/defaults/ask/templates.js

@@ -1,3 +1,4 @@
+import { lowerCamelToKebab, kebabToLowerCamel, kebabOrSnakeToLowerCamel } from '@miso.ai/commons';
 import { CLASS_PREFIX } from './constants.js';
 import * as DEFAULT_PHRASES from './phrases.js';
 
@@ -31,9 +32,30 @@ export function followUp(options = {}) {
 function normalizeOptions({
   classPrefix = CLASS_PREFIX,
   circledCitationIndex = true,
+  phrases,
   ...options
 } = {}) {
-  return { classPrefix, circledCitationIndex, ...options };
+  phrases = normalizePhraseOptions(phrases);
+  return { classPrefix, circledCitationIndex, phrases, ...options };
+}
+
+function normalizePhraseOptions(options = {}) {
+  if (!options) {
+    return {};
+  }
+  const normalized = {};
+  for (const key in options) {
+    normalized[normalizePhraseOptionKey(key)] = options[key];
+  }
+  return normalized;
+}
+
+function normalizePhraseOptionKey(key) {
+  key = kebabOrSnakeToLowerCamel(key);
+  if (key === 'relatedQuestions') {
+    return 'querySuggestions'; // legacy key
+  }
+  return key;
 }
 
 // sections & containers //
@@ -55,7 +77,7 @@ function querySuggestions(options) {
   const { features = {} } = options;
   return features.querySuggestions === false ? '' :
     container(options, { name: 'query-suggestions', visibleWhen: 'initial+nonempty' }, [
-      phrase(options, { name: 'related-questions', tag: 'h3' }),
+      phrase(options, { name: 'query-suggestions', tag: 'h3' }),
       '<miso-query-suggestions></miso-query-suggestions>',
     ]);
 }
@@ -145,11 +167,3 @@ function attrs({ classes = [], ...attributes } = {}) {
   }
   return str;
 }
-
-function kebabToLowerCamel(str) {
-  return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-}
-
-function lowerCamelToKebab(str) {
-  return str.replace(/([A-Z])/g, '-$1').toLowerCase();
-}

package/src/version.js

@@ -1 +1 @@
-export default '1.9.9-beta.0';
+export default '1.9.9-beta.1';

package/src/workflow/base.js

@@ -4,7 +4,7 @@ import * as sources from '../source/index.js';
 import { STATUS, ROLE } from '../constants.js';
 import { ContainerLayout, ErrorLayout } from '../layout/index.js';
 import { injectLogger } from './utils.js';
-import { WorkflowOptions, mergeLayoutsOptions, mergeInteractionsOptions } from './options.js';
+import { WorkflowOptions, mergeLayoutsOptions, mergeInteractionsOptions, makeConfigurable } from './options.js';
 
 const DEFAULT_LAYOUTS = Object.freeze({
   [ROLE.CONTAINER]: ContainerLayout.type,
@@ -150,32 +150,6 @@ export default class Workflow extends Component {
     return this;
   }
 
-  // configuration //
-  useApi(...args) {
-    this._options.api = args;
-    return this;
-  }
-
-  useLayouts(options = {}) {
-    this._options.layouts = options;
-    return this;
-  }
-
-  useDataProcessor(fn) {
-    this._options.dataProcessor = fn;
-    return this;
-  }
-
-  useTrackers(options) {
-    this._options.trackers = options;
-    return this;
-  }
-
-  useInteractions(options) {
-    this._options.interactions = options;
-    return this;
-  }
-
   // trackers //
   get trackers() {
     return this._trackers;
@@ -241,3 +215,5 @@ export default class Workflow extends Component {
   }
 
 }
+
+makeConfigurable(Workflow.prototype);

package/src/workflow/context.js

@@ -1,5 +1,5 @@
 import { Component } from '@miso.ai/commons';
-import { WorkflowContextOptions } from './options.js';
+import { WorkflowContextOptions, makeConfigurable } from './options.js';
 
 export default class WorkflowContext extends Component {
 
@@ -10,29 +10,6 @@ export default class WorkflowContext extends Component {
     this._options = new WorkflowContextOptions();
   }
 
-  useApi(...args) {
-    this._options.api = args;
-    return this;
-  }
-
-  useLayouts(options) {
-    this._options.layouts = options;
-    return this;
-  }
-
-  useDataProcessor(fn) {
-    this._options.dataProcessor = fn;
-    return this;
-  }
-
-  useTrackers(options) {
-    this._options.trackers = options;
-    return this;
-  }
-
-  useInteractions(options) {
-    this._options.interactions = options;
-    return this;
-  }
-
 }
+
+makeConfigurable(WorkflowContext.prototype);

package/src/workflow/options.js

@@ -1,4 +1,4 @@
-import { EventEmitter, defineValues, asArray, trimObj } from '@miso.ai/commons';
+import { EventEmitter, defineValues, asArray, trimObj, lowerCamelToSnake, kebabToSnake } from '@miso.ai/commons';
 import { ROLE } from '../constants.js';
 
 // normalize //
@@ -28,11 +28,17 @@ export function normalizeLayoutsOptions(options = {}) {
   }
   const normalize = {};
   for (const [role, args] of Object.entries(options)) {
-    normalize[role] = normalizeLayoutOptions(args);
+    normalize[normalizeRole(role)] = normalizeLayoutOptions(args);
   }
   return normalize;
 }
 
+function normalizeRole(role) {
+  role = lowerCamelToSnake(role);
+  role = kebabToSnake(role);
+  return role;
+}
+
 function normalizeLayoutOptions(args) {
   // take args:
   // * undefined
@@ -232,10 +238,10 @@ export class WorkflowContextOptions {
 
 export class WorkflowOptions {
 
-  constructor(globals = {}, defaults = {}) {
+  constructor(context = {}, defaults = {}) {
     this._events = new EventEmitter({ target: this });
     this._defaults = defaults;
-    this._globals = globals || {};
+    this._context = context || {};
     this._locals = {};
 
     defineValues(this, {
@@ -243,9 +249,9 @@ export class WorkflowOptions {
       defaults,
     });
 
-    if (globals && globals.on) {
+    if (context && context.on) {
       this._unsubscribes = [
-        globals.on('*', event => this._notify(event.name)),
+        context.on('*', event => this._notify(event.name)),
       ];
     }
   }
@@ -263,6 +269,35 @@ export class WorkflowOptions {
 
 }
 
+class WorkflowFeature {
+
+  constructor(options, store, key, normalize, merge) {
+    this._options = options;
+    this._store = store;
+    this._key = key;
+    this._normalize = value => value !== undefined ? normalize(value) : undefined;
+    this._merge = merge;
+  }
+
+  get() {
+    return this._store[this._key];
+  }
+
+  set(value) {
+    this._set(this._normalize(value));
+  }
+
+  merge(value) {
+    this._set(this._merge(this.get(), this._normalize(value)));
+  }
+
+  _set(value) {
+    this._store[this._key] = value;
+    this._options._notify(this._key);
+  }
+
+}
+
 class ResolvedWorkflowOptions {
 
   constructor(options) {
@@ -273,32 +308,58 @@ class ResolvedWorkflowOptions {
 
 for (const { key, normalize, merge } of FEATURES) {
   Object.defineProperty(WorkflowContextOptions.prototype, key, {
-    set: function(value) {
-      this._globals[key] = normalize(value);
-      this._notify(key);
-    },
     get: function() {
-      return this._globals[key];
+      const _key = `_${key}`;
+      return this[_key] || (this[_key] = new WorkflowFeature(this, this._globals, key, normalize, merge));
     },
   });
   Object.defineProperty(WorkflowOptions.prototype, key, {
-    set: function(value) {
-      this._locals[key] = normalize(value);
-      this._notify(key);
-    },
     get: function() {
-      return this._locals[key];
+      const _key = `_${key}`;
+      return this[_key] || (this[_key] = new WorkflowFeature(this, this._locals, key, normalize, merge));
     },
   });
   Object.defineProperty(ResolvedWorkflowOptions.prototype, key, {
     get: function() {
       const options = this._options;
-      return merge(options._defaults[key], options._globals[key], options._locals[key]);
+      return merge(options._defaults[key], options._context[key].get(), options._locals[key]);
+    },
+  });
+}
+
+export function makeConfigurable(prototype) {
+  Object.assign(prototype, {
+    useApi(...args) {
+      this._options.api.merge(args);
+      return this;
+    },
+    clearApi() {
+      this._options.api.set();
+      return this;
     },
   });
+  for (const feature of ['layouts', 'dataProcessor', 'trackers', 'interactions']) {
+    const upperCased = upperCase(feature);
+    Object.assign(prototype, {
+      [`use${upperCased}`](value) {
+        (this._options[feature]).merge(value);
+        return this;
+      },
+      [`clear${upperCased}`]() {
+        (this._options[feature]).set();
+        return this;
+      },
+    });
+  }
 }
 
+
+
 // helpers //
+function upperCase(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
 function concatArrays(a0, a1) {
   return (a0 && a0.length) ? (a1 && a1.length) ? [...a0, ...a1] : a0 : a1;
 }