@searchspring/snap-preact 0.29.0 → 0.30.2

package/dist/cjs/Snap.js

@@ -73,7 +73,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Snap = exports.SS_DEV_COOKIE = exports.BRANCH_COOKIE = void 0;
+exports.Snap = exports.DEV_COOKIE = exports.BRANCH_COOKIE = void 0;
 var jsx_runtime_1 = require("preact/jsx-runtime");
 var deepmerge_1 = __importDefault(require("deepmerge"));
 var is_plain_object_1 = require("is-plain-object");
@@ -82,16 +82,20 @@ var snap_client_1 = require("@searchspring/snap-client");
 var snap_logger_1 = require("@searchspring/snap-logger");
 var snap_tracker_1 = require("@searchspring/snap-tracker");
 var snap_toolbox_1 = require("@searchspring/snap-toolbox");
-var snap_toolbox_2 = require("@searchspring/snap-toolbox");
 var snap_controller_1 = require("@searchspring/snap-controller");
 var createSearchController_1 = __importDefault(require("./create/createSearchController"));
 exports.BRANCH_COOKIE = 'ssBranch';
-exports.SS_DEV_COOKIE = 'ssDev';
+exports.DEV_COOKIE = 'ssDev';
+var SESSION_ATTRIBUTION = 'ssAttribution';
 var COMPONENT_ERROR = "Uncaught Error - Invalid value passed as the component.\nThis usually happens when you pass a JSX Element, and not a function that returns the component, in the snap config. \n\t\t\n\t\tinstead of - \n\n\ttargeters: [\n\t\t{\n\t\t\tselector: '#searchspring-content',\n\t\t\thideTarget: true,\n\t\t\tcomponent: <Content/>,\n\t\t},\n\t]\n\n\t\tor - \n\n\ttargeters: [\n\t\t{\n\t\t\tselector: '#searchspring-content',\n\t\t\thideTarget: true,\n\t\t\tcomponent: Content,\n\t\t},\n\t]\n\n\t\tplease try - \n\n\ttargeters: [\n\t\t{\n\t\t\tselector: '#searchspring-content',\n\t\t\thideTarget: true,\n\t\t\tcomponent: () => Content\n\t\t},\n\t]\n\nThe error above happened in the following targeter in the Snap Config";
 var Snap = /** @class */ (function () {
     function Snap(config, services) {
         var _this = this;
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+        this.mode = snap_toolbox_1.AppMode.production;
+        this._instantiatorPromises = {};
+        this._controllerPromises = {};
+        this.controllers = {};
         this.getInstantiator = function (id) {
             return _this._instantiatorPromises[id] || Promise.reject("getInstantiator could not find instantiator with id: ".concat(id));
         };
@@ -107,7 +111,35 @@ var Snap = /** @class */ (function () {
             controllerIds.forEach(function (id) { return getControllerPromises.push(_this.getController(id)); });
             return Promise.all(getControllerPromises);
         };
+        // exposed method used for creating controllers dynamically - calls _createController()
         this.createController = function (type, config, services, urlConfig, context, callback) { return __awaiter(_this, void 0, void 0, function () {
+            var _this = this;
+            return __generator(this, function (_a) {
+                if (typeof this._controllerPromises[config.id] != 'undefined') {
+                    throw new Error("Controller with id '".concat(config.id, "' is already defined"));
+                }
+                this._controllerPromises[config.id] = new Promise(function (resolve) {
+                    return _this._createController(type, config, services, urlConfig, context, function (cntrlr) { return __awaiter(_this, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0:
+                                    if (!(typeof callback == 'function')) return [3 /*break*/, 2];
+                                    return [4 /*yield*/, callback(cntrlr)];
+                                case 1:
+                                    _a.sent();
+                                    _a.label = 2;
+                                case 2:
+                                    resolve(cntrlr);
+                                    return [2 /*return*/];
+                            }
+                        });
+                    }); });
+                });
+                return [2 /*return*/, this._controllerPromises[config.id]];
+            });
+        }); };
+        // internal use method that creates controllers without verifying if id is in use first
+        this._createController = function (type, config, services, urlConfig, context, callback) { return __awaiter(_this, void 0, void 0, function () {
             var importPromise, creationFunc;
             return __generator(this, function (_a) {
                 switch (_a.label) {
@@ -131,7 +163,9 @@ var Snap = /** @class */ (function () {
                     case 1:
                         creationFunc = (_a.sent()).default;
                         if (!this.controllers[config.id]) {
-                            this.controllers[config.id] = creationFunc({
+                            window.searchspring.controller = window.searchspring.controller || {};
+                            window.searchspring.controller[config.id] = this.controllers[config.id] = creationFunc({
+                                mode: this.mode,
                                 url: (0, deepmerge_1.default)(this.config.url || {}, urlConfig || {}),
                                 controller: config,
                                 context: (0, deepmerge_1.default)(this.context || {}, context || {}),
@@ -183,14 +217,13 @@ var Snap = /** @class */ (function () {
         window.removeEventListener('error', this.handlers.error);
         window.addEventListener('error', this.handlers.error);
         this.config = config;
-        this.logger = (services === null || services === void 0 ? void 0 : services.logger) || new snap_logger_1.Logger('Snap Preact ');
         var globalContext = {};
         try {
             // get global context
-            globalContext = (0, snap_toolbox_2.getContext)(['shopper', 'config', 'merchandising']);
+            globalContext = (0, snap_toolbox_1.getContext)(['shopper', 'config', 'merchandising']);
         }
         catch (err) {
-            this.logger.error('failed to find global context');
+            console.error('Snap failed to find global context');
         }
         // merge configs - but only merge plain objects
         this.config = (0, deepmerge_1.default)(this.config || {}, globalContext.config || {}, {
@@ -202,8 +235,9 @@ var Snap = /** @class */ (function () {
         if ((!(services === null || services === void 0 ? void 0 : services.client) || !(services === null || services === void 0 ? void 0 : services.tracker)) && !((_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.client) === null || _b === void 0 ? void 0 : _b.globals) === null || _c === void 0 ? void 0 : _c.siteId)) {
             throw new Error("Snap: config provided must contain a valid config.client.globals.siteId value");
         }
-        if ((_d = this.context.merchandising) === null || _d === void 0 ? void 0 : _d.segments) {
-            if ((_e = this.config.client) === null || _e === void 0 ? void 0 : _e.globals.merchandising) {
+        // segmented merchandising context -> client globals
+        if (((_d = this.config.client) === null || _d === void 0 ? void 0 : _d.globals) && ((_e = this.context.merchandising) === null || _e === void 0 ? void 0 : _e.segments)) {
+            if ((_f = this.config.client.globals) === null || _f === void 0 ? void 0 : _f.merchandising) {
                 this.config.client.globals.merchandising.segments = (0, deepmerge_1.default)(this.config.client.globals.merchandising.segments, this.context.merchandising.segments);
             }
             else {
@@ -212,33 +246,73 @@ var Snap = /** @class */ (function () {
                 };
             }
         }
-        this.client = (services === null || services === void 0 ? void 0 : services.client) || new snap_client_1.Client(this.config.client.globals, this.config.client.config);
-        this.tracker = (services === null || services === void 0 ? void 0 : services.tracker) || new snap_tracker_1.Tracker(this.config.client.globals, { framework: 'preact' });
-        this._controllerPromises = {};
-        this._instantiatorPromises = {};
-        this.controllers = {};
-        // TODO environment switch using URL?
-        this.logger.setMode(process.env.NODE_ENV);
-        // log version
-        this.logger.imageText({
-            url: 'https://snapui.searchspring.io/favicon.svg',
-            text: "[".concat(snap_toolbox_1.version, "]"),
-            style: "color: ".concat(this.logger.colors.indigo, "; font-weight: bold;"),
-        });
         try {
             var urlParams = (0, snap_toolbox_1.url)(window.location.href);
-            var branchParam_1 = ((_g = (_f = urlParams === null || urlParams === void 0 ? void 0 : urlParams.params) === null || _f === void 0 ? void 0 : _f.query) === null || _g === void 0 ? void 0 : _g.branch) || snap_toolbox_1.cookies.get(exports.BRANCH_COOKIE);
-            if (branchParam_1 && !document.querySelector("script[".concat(exports.BRANCH_COOKIE, "]"))) {
-                // set a cookie or localstorage with branch
+            var branchOverride_1 = ((_h = (_g = urlParams === null || urlParams === void 0 ? void 0 : urlParams.params) === null || _g === void 0 ? void 0 : _g.query) === null || _h === void 0 ? void 0 : _h.branch) || snap_toolbox_1.cookies.get(exports.BRANCH_COOKIE);
+            /* app mode priority:
+                1. node env
+                2. config
+                3. override via query param / cookie
+            */
+            // node env
+            if (process.env.NODE_ENV && Object.values(snap_toolbox_1.AppMode).includes(process.env.NODE_ENV)) {
+                this.mode = process.env.NODE_ENV;
+            }
+            // config
+            if (this.config.mode && Object.values(snap_toolbox_1.AppMode).includes(this.config.mode)) {
+                this.mode = this.config.mode;
+            }
+            // query param / cookiev override
+            if ((((_j = urlParams === null || urlParams === void 0 ? void 0 : urlParams.params) === null || _j === void 0 ? void 0 : _j.query) && 'dev' in urlParams.params.query) || !!snap_toolbox_1.cookies.get(exports.DEV_COOKIE)) {
+                if (((_k = urlParams === null || urlParams === void 0 ? void 0 : urlParams.params.query) === null || _k === void 0 ? void 0 : _k.dev) == 'false' || ((_l = urlParams === null || urlParams === void 0 ? void 0 : urlParams.params.query) === null || _l === void 0 ? void 0 : _l.dev) == '0') {
+                    snap_toolbox_1.cookies.unset(exports.DEV_COOKIE);
+                    this.mode = snap_toolbox_1.AppMode.production;
+                }
+                else {
+                    snap_toolbox_1.cookies.set(exports.DEV_COOKIE, '1', 'Lax', 0);
+                    this.mode = snap_toolbox_1.AppMode.development;
+                }
+            }
+            // client mode uses client config over snap config
+            if (this.config.client) {
+                this.config.client.config = this.config.client.config || {};
+                this.config.client.config.mode = this.config.client.config.mode || this.mode;
+            }
+            this.client = (services === null || services === void 0 ? void 0 : services.client) || new snap_client_1.Client(this.config.client.globals, this.config.client.config);
+            this.tracker = (services === null || services === void 0 ? void 0 : services.tracker) || new snap_tracker_1.Tracker(this.config.client.globals, { framework: 'preact' });
+            this.logger = (services === null || services === void 0 ? void 0 : services.logger) || new snap_logger_1.Logger({ prefix: 'Snap Preact ', mode: this.mode });
+            // check for tracking attribution in URL ?ss_attribution=type:id
+            var sessionAttribution = (_m = window.sessionStorage) === null || _m === void 0 ? void 0 : _m.getItem(SESSION_ATTRIBUTION);
+            if ((_p = (_o = urlParams === null || urlParams === void 0 ? void 0 : urlParams.params) === null || _o === void 0 ? void 0 : _o.query) === null || _p === void 0 ? void 0 : _p.ss_attribution) {
+                var attribution = urlParams.params.query.ss_attribution.split(':');
+                var type = attribution[0], id = attribution[1];
+                if (type && id) {
+                    this.tracker.updateContext('attribution', { type: type, id: id });
+                }
+                // save to session storage
+                (_q = window.sessionStorage) === null || _q === void 0 ? void 0 : _q.setItem(SESSION_ATTRIBUTION, urlParams.params.query.ss_attribution);
+            }
+            else if (sessionAttribution) {
+                var _y = sessionAttribution.split(':'), type = _y[0], id = _y[1];
+                if (type && id) {
+                    this.tracker.updateContext('attribution', { type: type, id: id });
+                }
+            }
+            // log version
+            this.logger.imageText({
+                url: 'https://snapui.searchspring.io/favicon.svg',
+                text: "[".concat(snap_toolbox_1.version, "]"),
+                style: "color: ".concat(this.logger.colors.indigo, "; font-weight: bold;"),
+            });
+            if (branchOverride_1 && !document.querySelector("script[".concat(exports.BRANCH_COOKIE, "]"))) {
+                this.logger.warn("...loading build... '".concat(branchOverride_1, "'"));
+                // set a cookie with branch
                 if (snap_toolbox_1.featureFlags.cookies) {
-                    snap_toolbox_1.cookies.set(exports.BRANCH_COOKIE, branchParam_1, 'Lax', 3600000); // 1 hour
-                    snap_toolbox_1.cookies.set(exports.SS_DEV_COOKIE, '1', 'Lax', 0);
+                    snap_toolbox_1.cookies.set(exports.BRANCH_COOKIE, branchOverride_1, 'Lax', 3600000); // 1 hour
                 }
                 else {
                     this.logger.warn('Cookies are not supported/enabled by this browser, branch overrides will not persist!');
                 }
-                this.logger.setMode(snap_logger_1.LogMode.DEVELOPMENT);
-                this.logger.warn("...loading build... '".concat(branchParam_1, "'"));
                 // get the path and siteId from the current bundle script in case its not the same as the client config
                 var path = "https://snapui.searchspring.io/".concat(this.config.client.globals.siteId, "/");
                 var script = document.querySelector('script[src*="//snapui.searchspring.io"]');
@@ -250,9 +324,9 @@ var Snap = /** @class */ (function () {
                 }
                 // append script with new branch in path
                 var branchScript_1 = document.createElement('script');
-                var src_1 = "".concat(path).concat(branchParam_1, "/bundle.js");
+                var src_1 = "".concat(path).concat(branchOverride_1, "/bundle.js");
                 branchScript_1.src = src_1;
-                branchScript_1.setAttribute(exports.BRANCH_COOKIE, branchParam_1);
+                branchScript_1.setAttribute(exports.BRANCH_COOKIE, branchOverride_1);
                 new snap_toolbox_1.DomTargeter([
                     {
                         selector: 'body',
@@ -266,32 +340,30 @@ var Snap = /** @class */ (function () {
                         },
                     },
                 ], function (target, elem) { return __awaiter(_this, void 0, void 0, function () {
-                    var error, bundleDetails, getBundleDetails, err_1, BranchOverride;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
+                    var props, getBundleDetails, _a, err_1, BranchOverride;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
                             case 0:
-                                error = {
-                                    message: 'Error',
-                                    description: '',
-                                };
-                                _a.label = 1;
+                                props = {};
+                                _b.label = 1;
                             case 1:
-                                _a.trys.push([1, 4, , 5]);
+                                _b.trys.push([1, 4, , 5]);
                                 return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require('./getBundleDetails/getBundleDetails')); })];
                             case 2:
-                                getBundleDetails = (_a.sent()).getBundleDetails;
+                                getBundleDetails = (_b.sent()).getBundleDetails;
+                                _a = props;
                                 return [4 /*yield*/, getBundleDetails(src_1)];
                             case 3:
-                                bundleDetails = _a.sent();
+                                _a.details = _b.sent();
                                 return [3 /*break*/, 5];
                             case 4:
-                                err_1 = _a.sent();
-                                error.description = err_1;
+                                err_1 = _b.sent();
+                                props.error = err_1;
                                 return [3 /*break*/, 5];
                             case 5: return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require('./components/BranchOverride')); })];
                             case 6:
-                                BranchOverride = (_a.sent()).BranchOverride;
-                                (0, preact_1.render)((0, jsx_runtime_1.jsx)(BranchOverride, { name: branchParam_1, details: bundleDetails, error: error, onRemoveClick: function () {
+                                BranchOverride = (_b.sent()).BranchOverride;
+                                (0, preact_1.render)((0, jsx_runtime_1.jsx)(BranchOverride, __assign({}, props, { name: branchOverride_1, onRemoveClick: function () {
                                         snap_toolbox_1.cookies.unset(exports.BRANCH_COOKIE);
                                         var urlState = (0, snap_toolbox_1.url)(window.location.href);
                                         urlState === null || urlState === void 0 ? true : delete urlState.params.query['branch'];
@@ -302,8 +374,9 @@ var Snap = /** @class */ (function () {
                                         else {
                                             window.location.reload();
                                         }
-                                    } }), elem);
-                                window.searchspring = undefined;
+                                    } })), elem);
+                                // reset the global searchspring object
+                                delete window.searchspring;
                                 document.head.appendChild(branchScript_1);
                                 return [2 /*return*/];
                         }
@@ -313,33 +386,40 @@ var Snap = /** @class */ (function () {
                 return;
             }
         }
-        catch (e) { }
-        if (window.searchspring) {
-            window.searchspring.context = this.context;
-            if (this.client)
-                window.searchspring.client = this.client;
+        catch (e) {
+            this.logger.error(e);
         }
+        // bind to window global
+        window.searchspring = window.searchspring || {};
+        window.searchspring.context = this.context;
+        if (this.client)
+            window.searchspring.client = this.client;
         // autotrack shopper id from the context
-        if ((_j = (_h = this.context) === null || _h === void 0 ? void 0 : _h.shopper) === null || _j === void 0 ? void 0 : _j.id) {
+        if ((_s = (_r = this.context) === null || _r === void 0 ? void 0 : _r.shopper) === null || _s === void 0 ? void 0 : _s.id) {
             this.tracker.track.shopper.login({
                 id: this.context.shopper.id,
             });
         }
         // auto populate cart cookie from the context
-        if ((_l = (_k = this.context) === null || _k === void 0 ? void 0 : _k.shopper) === null || _l === void 0 ? void 0 : _l.cart) {
+        if ((_u = (_t = this.context) === null || _t === void 0 ? void 0 : _t.shopper) === null || _u === void 0 ? void 0 : _u.cart) {
             var cart = this.context.shopper.cart;
             if (Array.isArray(cart)) {
                 var cartItems = cart.filter(function (item) { return (item === null || item === void 0 ? void 0 : item.sku) || (item === null || item === void 0 ? void 0 : item.childSku); }).map(function (item) { return ((item === null || item === void 0 ? void 0 : item.sku) || (item === null || item === void 0 ? void 0 : item.childSku) || '').trim(); });
                 this.tracker.cookies.cart.set(cartItems);
             }
         }
-        Object.keys(((_m = this.config) === null || _m === void 0 ? void 0 : _m.controllers) || {}).forEach(function (type) {
+        Object.keys(((_v = this.config) === null || _v === void 0 ? void 0 : _v.controllers) || {}).forEach(function (type) {
             switch (type) {
                 case 'search': {
                     _this.config.controllers[type].forEach(function (controller, index) {
                         var _a, _b, _c, _d, _e, _f, _g, _h;
                         try {
+                            if (typeof _this._controllerPromises[controller.config.id] != 'undefined') {
+                                _this.logger.error("Controller with id '".concat(controller.config.id, "' is already defined"));
+                                return;
+                            }
                             var cntrlr_1 = (0, createSearchController_1.default)({
+                                mode: _this.mode,
                                 url: (0, deepmerge_1.default)(_this.config.url || {}, controller.url || {}),
                                 controller: controller.config,
                                 context: (0, deepmerge_1.default)(_this.context || {}, controller.context || {}),
@@ -352,7 +432,8 @@ var Snap = /** @class */ (function () {
                                 logger: (_f = controller.services) === null || _f === void 0 ? void 0 : _f.logger,
                                 tracker: ((_g = controller.services) === null || _g === void 0 ? void 0 : _g.tracker) || _this.tracker,
                             });
-                            _this.controllers[cntrlr_1.config.id] = cntrlr_1;
+                            window.searchspring.controller = window.searchspring.controller || {};
+                            window.searchspring.controller[cntrlr_1.config.id] = _this.controllers[cntrlr_1.config.id] = cntrlr_1;
                             _this._controllerPromises[cntrlr_1.config.id] = new Promise(function (resolve) { return resolve(cntrlr_1); });
                             var searched_1 = false;
                             var runSearch_1 = function () {
@@ -434,6 +515,10 @@ var Snap = /** @class */ (function () {
                 }
                 case 'autocomplete': {
                     _this.config.controllers[type].forEach(function (controller, index) {
+                        if (typeof _this._controllerPromises[controller.config.id] != 'undefined') {
+                            _this.logger.error("Controller with id '".concat(controller.config.id, "' is already defined"));
+                            return;
+                        }
                         _this._controllerPromises[controller.config.id] = new Promise(function (resolve) {
                             var _a;
                             try {
@@ -480,7 +565,7 @@ var Snap = /** @class */ (function () {
                                     });
                                 }); };
                                 if (!(controller === null || controller === void 0 ? void 0 : controller.targeters) || (controller === null || controller === void 0 ? void 0 : controller.targeters.length) === 0) {
-                                    _this.createController(snap_controller_1.ControllerTypes.autocomplete, controller.config, controller.services, controller.url, controller.context, function (cntrlr) {
+                                    _this._createController(snap_controller_1.ControllerTypes.autocomplete, controller.config, controller.services, controller.url, controller.context, function (cntrlr) {
                                         if (cntrlr)
                                             resolve(cntrlr);
                                     });
@@ -508,7 +593,7 @@ var Snap = /** @class */ (function () {
                                         var cntrlr;
                                         return __generator(this, function (_a) {
                                             switch (_a.label) {
-                                                case 0: return [4 /*yield*/, this.createController(snap_controller_1.ControllerTypes.autocomplete, controller.config, controller.services, controller.url, controller.context, function (cntrlr) {
+                                                case 0: return [4 /*yield*/, this._createController(snap_controller_1.ControllerTypes.autocomplete, controller.config, controller.services, controller.url, controller.context, function (cntrlr) {
                                                         if (cntrlr)
                                                             resolve(cntrlr);
                                                     })];
@@ -532,6 +617,10 @@ var Snap = /** @class */ (function () {
                 }
                 case 'finder': {
                     _this.config.controllers[type].forEach(function (controller, index) {
+                        if (typeof _this._controllerPromises[controller.config.id] != 'undefined') {
+                            _this.logger.error("Controller with id '".concat(controller.config.id, "' is already defined"));
+                            return;
+                        }
                         _this._controllerPromises[controller.config.id] = new Promise(function (resolve) {
                             var _a;
                             try {
@@ -576,7 +665,7 @@ var Snap = /** @class */ (function () {
                                     });
                                 }); };
                                 if (!(controller === null || controller === void 0 ? void 0 : controller.targeters) || (controller === null || controller === void 0 ? void 0 : controller.targeters.length) === 0) {
-                                    _this.createController(snap_controller_1.ControllerTypes.finder, controller.config, controller.services, controller.url, controller.context, function (cntrlr) {
+                                    _this._createController(snap_controller_1.ControllerTypes.finder, controller.config, controller.services, controller.url, controller.context, function (cntrlr) {
                                         if (cntrlr)
                                             resolve(cntrlr);
                                     });
@@ -592,7 +681,7 @@ var Snap = /** @class */ (function () {
                                         var cntrlr;
                                         return __generator(this, function (_a) {
                                             switch (_a.label) {
-                                                case 0: return [4 /*yield*/, this.createController(snap_controller_1.ControllerTypes.finder, controller.config, controller.services, controller.url, controller.context, function (cntrlr) {
+                                                case 0: return [4 /*yield*/, this._createController(snap_controller_1.ControllerTypes.finder, controller.config, controller.services, controller.url, controller.context, function (cntrlr) {
                                                         if (cntrlr)
                                                             resolve(cntrlr);
                                                     })];
@@ -616,6 +705,10 @@ var Snap = /** @class */ (function () {
                 }
                 case 'recommendation': {
                     _this.config.controllers[type].forEach(function (controller, index) {
+                        if (typeof _this._controllerPromises[controller.config.id] != 'undefined') {
+                            _this.logger.error("Controller with id '".concat(controller.config.id, "' is already defined"));
+                            return;
+                        }
                         _this._controllerPromises[controller.config.id] = new Promise(function (resolve) {
                             var _a;
                             try {
@@ -660,7 +753,7 @@ var Snap = /** @class */ (function () {
                                     });
                                 }); };
                                 if (!(controller === null || controller === void 0 ? void 0 : controller.targeters) || (controller === null || controller === void 0 ? void 0 : controller.targeters.length) === 0) {
-                                    _this.createController(snap_controller_1.ControllerTypes.recommendation, controller.config, controller.services, controller.url, controller.context, function (cntrlr) {
+                                    _this._createController(snap_controller_1.ControllerTypes.recommendation, controller.config, controller.services, controller.url, controller.context, function (cntrlr) {
                                         if (cntrlr)
                                             resolve(cntrlr);
                                     });
@@ -676,7 +769,7 @@ var Snap = /** @class */ (function () {
                                         var cntrlr;
                                         return __generator(this, function (_a) {
                                             switch (_a.label) {
-                                                case 0: return [4 /*yield*/, this.createController(snap_controller_1.ControllerTypes.recommendation, controller.config, controller.services, controller.url, controller.context, function (cntrlr) {
+                                                case 0: return [4 /*yield*/, this._createController(snap_controller_1.ControllerTypes.recommendation, controller.config, controller.services, controller.url, controller.context, function (cntrlr) {
                                                         if (cntrlr)
                                                             resolve(cntrlr);
                                                     })];
@@ -700,10 +793,11 @@ var Snap = /** @class */ (function () {
                 }
             }
         });
-        if ((_p = (_o = this.config) === null || _o === void 0 ? void 0 : _o.instantiators) === null || _p === void 0 ? void 0 : _p.recommendation) {
+        if ((_x = (_w = this.config) === null || _w === void 0 ? void 0 : _w.instantiators) === null || _x === void 0 ? void 0 : _x.recommendation) {
             try {
                 this._instantiatorPromises.recommendation = Promise.resolve().then(function () { return __importStar(require('./Instantiators/RecommendationInstantiator')); }).then(function (_a) {
                     var RecommendationInstantiator = _a.RecommendationInstantiator;
+                    _this.config.instantiators.recommendation.mode = _this.config.instantiators.recommendation.mode || _this.mode;
                     return new RecommendationInstantiator(_this.config.instantiators.recommendation, {
                         client: _this.client,
                         tracker: _this.tracker,

package/dist/cjs/create/createAutocompleteController.d.ts

@@ -1,5 +1,5 @@
 import { AutocompleteController } from '@searchspring/snap-controller';
 import type { SnapControllerServices, SnapAutocompleteControllerConfig } from '../types';
-declare const _default: (config: SnapAutocompleteControllerConfig, services?: SnapControllerServices) => AutocompleteController;
+declare const _default: (config: SnapAutocompleteControllerConfig, services?: SnapControllerServices | undefined) => AutocompleteController;
 export default _default;
 //# sourceMappingURL=createAutocompleteController.d.ts.map

package/dist/cjs/create/createAutocompleteController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createAutocompleteController.d.ts","sourceRoot":"","sources":["../../../src/create/createAutocompleteController.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AASvE,OAAO,KAAK,EAAE,sBAAsB,EAAE,gCAAgC,EAAE,MAAM,UAAU,CAAC;iCAIjE,gCAAgC,aAAa,sBAAsB,KAAG,sBAAsB;AAApH,wBAkBE"}
+{"version":3,"file":"createAutocompleteController.d.ts","sourceRoot":"","sources":["../../../src/create/createAutocompleteController.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AASvE,OAAO,KAAK,EAAE,sBAAsB,EAAE,gCAAgC,EAAE,MAAM,UAAU,CAAC;iCAIjE,gCAAgC,oDAAsC,sBAAsB;AAApH,wBAwBE"}

package/dist/cjs/create/createAutocompleteController.js

@@ -12,13 +12,18 @@ var snap_tracker_1 = require("@searchspring/snap-tracker");
 (0, mobx_1.configure)({ useProxies: 'never' });
 exports.default = (function (config, services) {
     var urlManager = ((services === null || services === void 0 ? void 0 : services.urlManager) || new snap_url_manager_1.UrlManager(new snap_url_manager_1.UrlTranslator(config.url), snap_url_manager_1.reactLinker)).detach();
+    // set client mode
+    if (config.mode && config.client) {
+        config.client.config = config.client.config || {};
+        config.client.config.mode = config.mode;
+    }
     var cntrlr = new snap_controller_1.AutocompleteController(config.controller, {
         client: (services === null || services === void 0 ? void 0 : services.client) || new snap_client_1.Client(config.client.globals, config.client.config),
         store: (services === null || services === void 0 ? void 0 : services.store) || new snap_store_mobx_1.AutocompleteStore(config.controller, { urlManager: urlManager }),
         urlManager: urlManager,
         eventManager: (services === null || services === void 0 ? void 0 : services.eventManager) || new snap_event_manager_1.EventManager(),
         profiler: (services === null || services === void 0 ? void 0 : services.profiler) || new snap_profiler_1.Profiler(),
-        logger: (services === null || services === void 0 ? void 0 : services.logger) || new snap_logger_1.Logger(),
+        logger: (services === null || services === void 0 ? void 0 : services.logger) || new snap_logger_1.Logger({ mode: config.mode }),
         tracker: (services === null || services === void 0 ? void 0 : services.tracker) || new snap_tracker_1.Tracker(config.client.globals),
     }, config.context);
     return cntrlr;

package/dist/cjs/create/createFinderController.d.ts

@@ -1,5 +1,5 @@
 import { FinderController } from '@searchspring/snap-controller';
 import type { SnapControllerServices, SnapFinderControllerConfig } from '../types';
-declare const _default: (config: SnapFinderControllerConfig, services?: SnapControllerServices) => FinderController;
+declare const _default: (config: SnapFinderControllerConfig, services?: SnapControllerServices | undefined) => FinderController;
 export default _default;
 //# sourceMappingURL=createFinderController.d.ts.map

package/dist/cjs/create/createFinderController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createFinderController.d.ts","sourceRoot":"","sources":["../../../src/create/createFinderController.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AASjE,OAAO,KAAK,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;iCAI3D,0BAA0B,aAAa,sBAAsB,KAAG,gBAAgB;AAAxG,wBAkBE"}
+{"version":3,"file":"createFinderController.d.ts","sourceRoot":"","sources":["../../../src/create/createFinderController.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AASjE,OAAO,KAAK,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;iCAI3D,0BAA0B,oDAAsC,gBAAgB;AAAxG,wBAwBE"}

package/dist/cjs/create/createFinderController.js

@@ -12,13 +12,18 @@ var snap_tracker_1 = require("@searchspring/snap-tracker");
 (0, mobx_1.configure)({ useProxies: 'never' });
 exports.default = (function (config, services) {
     var urlManager = ((services === null || services === void 0 ? void 0 : services.urlManager) || new snap_url_manager_1.UrlManager(new snap_url_manager_1.UrlTranslator(config.url), snap_url_manager_1.reactLinker)).detach(true);
+    // set client mode
+    if (config.mode && config.client) {
+        config.client.config = config.client.config || {};
+        config.client.config.mode = config.mode;
+    }
     var cntrlr = new snap_controller_1.FinderController(config.controller, {
         client: (services === null || services === void 0 ? void 0 : services.client) || new snap_client_1.Client(config.client.globals, config.client.config),
         store: (services === null || services === void 0 ? void 0 : services.store) || new snap_store_mobx_1.FinderStore(config.controller, { urlManager: urlManager }),
         urlManager: urlManager,
         eventManager: (services === null || services === void 0 ? void 0 : services.eventManager) || new snap_event_manager_1.EventManager(),
         profiler: (services === null || services === void 0 ? void 0 : services.profiler) || new snap_profiler_1.Profiler(),
-        logger: (services === null || services === void 0 ? void 0 : services.logger) || new snap_logger_1.Logger(),
+        logger: (services === null || services === void 0 ? void 0 : services.logger) || new snap_logger_1.Logger({ mode: config.mode }),
         tracker: (services === null || services === void 0 ? void 0 : services.tracker) || new snap_tracker_1.Tracker(config.client.globals),
     }, config.context);
     return cntrlr;

package/dist/cjs/create/createRecommendationController.d.ts

@@ -1,5 +1,5 @@
 import { RecommendationController } from '@searchspring/snap-controller';
 import type { SnapControllerServices, SnapRecommendationControllerConfig } from '../types';
-declare const _default: (config: SnapRecommendationControllerConfig, services?: SnapControllerServices) => RecommendationController;
+declare const _default: (config: SnapRecommendationControllerConfig, services?: SnapControllerServices | undefined) => RecommendationController;
 export default _default;
 //# sourceMappingURL=createRecommendationController.d.ts.map

package/dist/cjs/create/createRecommendationController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createRecommendationController.d.ts","sourceRoot":"","sources":["../../../src/create/createRecommendationController.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AASzE,OAAO,KAAK,EAAE,sBAAsB,EAAE,kCAAkC,EAAE,MAAM,UAAU,CAAC;iCAInE,kCAAkC,aAAa,sBAAsB,KAAG,wBAAwB;AAAxH,wBAiBE"}
+{"version":3,"file":"createRecommendationController.d.ts","sourceRoot":"","sources":["../../../src/create/createRecommendationController.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AASzE,OAAO,KAAK,EAAE,sBAAsB,EAAE,kCAAkC,EAAE,MAAM,UAAU,CAAC;iCAInE,kCAAkC,oDAAsC,wBAAwB;AAAxH,wBAwBE"}

package/dist/cjs/create/createRecommendationController.js

@@ -12,13 +12,18 @@ var snap_tracker_1 = require("@searchspring/snap-tracker");
 (0, mobx_1.configure)({ useProxies: 'never' });
 exports.default = (function (config, services) {
     var urlManager = ((services === null || services === void 0 ? void 0 : services.urlManager) || new snap_url_manager_1.UrlManager(new snap_url_manager_1.UrlTranslator(config.url), snap_url_manager_1.reactLinker)).detach(true);
+    // set client mode
+    if (config.mode && config.client) {
+        config.client.config = config.client.config || {};
+        config.client.config.mode = config.mode;
+    }
     var cntrlr = new snap_controller_1.RecommendationController(config.controller, {
         client: (services === null || services === void 0 ? void 0 : services.client) || new snap_client_1.Client(config.client.globals, config.client.config),
         store: (services === null || services === void 0 ? void 0 : services.store) || new snap_store_mobx_1.RecommendationStore(config.controller, { urlManager: urlManager }),
         urlManager: urlManager,
         eventManager: (services === null || services === void 0 ? void 0 : services.eventManager) || new snap_event_manager_1.EventManager(),
         profiler: (services === null || services === void 0 ? void 0 : services.profiler) || new snap_profiler_1.Profiler(),
-        logger: (services === null || services === void 0 ? void 0 : services.logger) || new snap_logger_1.Logger(),
+        logger: (services === null || services === void 0 ? void 0 : services.logger) || new snap_logger_1.Logger({ mode: config.mode }),
         tracker: (services === null || services === void 0 ? void 0 : services.tracker) || new snap_tracker_1.Tracker(config.client.globals),
     }, config.context);
     return cntrlr;

package/dist/cjs/create/createSearchController.d.ts

@@ -1,5 +1,5 @@
 import { SearchController } from '@searchspring/snap-controller';
 import type { SnapControllerServices, SnapSearchControllerConfig } from '../types';
-declare const _default: (config: SnapSearchControllerConfig, services?: SnapControllerServices) => SearchController;
+declare const _default: (config: SnapSearchControllerConfig, services?: SnapControllerServices | undefined) => SearchController;
 export default _default;
 //# sourceMappingURL=createSearchController.d.ts.map

package/dist/cjs/create/createSearchController.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createSearchController.d.ts","sourceRoot":"","sources":["../../../src/create/createSearchController.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAQjE,OAAO,KAAK,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;iCAI3D,0BAA0B,aAAa,sBAAsB,KAAG,gBAAgB;AAAxG,wBAkBE"}
+{"version":3,"file":"createSearchController.d.ts","sourceRoot":"","sources":["../../../src/create/createSearchController.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAQjE,OAAO,KAAK,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAC;iCAI3D,0BAA0B,oDAAsC,gBAAgB;AAAxG,wBAwBE"}

package/dist/cjs/create/createSearchController.js

@@ -12,13 +12,18 @@ var snap_tracker_1 = require("@searchspring/snap-tracker");
 (0, mobx_1.configure)({ useProxies: 'never' });
 exports.default = (function (config, services) {
     var urlManager = (services === null || services === void 0 ? void 0 : services.urlManager) || new snap_url_manager_1.UrlManager(new snap_url_manager_1.UrlTranslator(config.url), snap_url_manager_1.reactLinker);
+    // set client mode
+    if (config.mode && config.client) {
+        config.client.config = config.client.config || {};
+        config.client.config.mode = config.mode;
+    }
     var cntrlr = new snap_controller_1.SearchController(config.controller, {
         client: (services === null || services === void 0 ? void 0 : services.client) || new snap_client_1.Client(config.client.globals, config.client.config),
         store: (services === null || services === void 0 ? void 0 : services.store) || new snap_store_mobx_1.SearchStore(config.controller, { urlManager: urlManager }),
         urlManager: urlManager,
         eventManager: (services === null || services === void 0 ? void 0 : services.eventManager) || new snap_event_manager_1.EventManager(),
         profiler: (services === null || services === void 0 ? void 0 : services.profiler) || new snap_profiler_1.Profiler(),
-        logger: (services === null || services === void 0 ? void 0 : services.logger) || new snap_logger_1.Logger(),
+        logger: (services === null || services === void 0 ? void 0 : services.logger) || new snap_logger_1.Logger({ mode: config.mode }),
         tracker: (services === null || services === void 0 ? void 0 : services.tracker) || new snap_tracker_1.Tracker(config.client.globals),
     }, config.context);
     return cntrlr;

package/dist/cjs/types.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
 import type { Client, ClientConfig, ClientGlobals } from '@searchspring/snap-client';
-import type { AbstractController, SearchControllerConfig, AutocompleteControllerConfig, FinderControllerConfig, RecommendationControllerConfig, ContextVariables } from '@searchspring/snap-controller';
+import type { SearchControllerConfig, AutocompleteControllerConfig, FinderControllerConfig, RecommendationControllerConfig, ContextVariables } from '@searchspring/snap-controller';
 import type { SearchStore, AutocompleteStore, FinderStore, RecommendationStore } from '@searchspring/snap-store-mobx';
 import type { UrlManager, UrlTranslatorConfig } from '@searchspring/snap-url-manager';
 import type { EventManager } from '@searchspring/snap-event-manager';
 import type { Profiler } from '@searchspring/snap-profiler';
 import type { Logger } from '@searchspring/snap-logger';
 import type { Tracker } from '@searchspring/snap-tracker';
+import { AppMode } from '@searchspring/snap-toolbox';
 export declare type SnapControllerServices = {
     client?: Client;
     store?: SearchStore | AutocompleteStore | FinderStore | RecommendationStore;
@@ -17,10 +17,8 @@ export declare type SnapControllerServices = {
     tracker?: Tracker;
 };
 export declare type SnapControllerConfigs = SnapSearchControllerConfig | SnapAutocompleteControllerConfig | SnapFinderControllerConfig | SnapRecommendationControllerConfig;
-export declare type RootComponent = React.ElementType<{
-    controller: AbstractController;
-}>;
 export declare type SnapSearchControllerConfig = {
+    mode?: keyof typeof AppMode | AppMode;
     url?: UrlTranslatorConfig;
     client?: {
         globals: ClientGlobals;
@@ -30,6 +28,7 @@ export declare type SnapSearchControllerConfig = {
     context?: ContextVariables;
 };
 export declare type SnapAutocompleteControllerConfig = {
+    mode?: keyof typeof AppMode | AppMode;
     url?: UrlTranslatorConfig;
     client?: {
         globals: ClientGlobals;
@@ -39,6 +38,7 @@ export declare type SnapAutocompleteControllerConfig = {
     context?: ContextVariables;
 };
 export declare type SnapFinderControllerConfig = {
+    mode?: keyof typeof AppMode | AppMode;
     url?: UrlTranslatorConfig;
     client?: {
         globals: ClientGlobals;
@@ -48,6 +48,7 @@ export declare type SnapFinderControllerConfig = {
     context?: ContextVariables;
 };
 export declare type SnapRecommendationControllerConfig = {
+    mode?: keyof typeof AppMode | AppMode;
     url?: UrlTranslatorConfig;
     client?: {
         globals: ClientGlobals;