@athoscommerce/snap-preact 1.9.1 → 1.10.0

package/dist/cjs/src/Snap.js

@@ -1,230 +1,155 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Snap = exports.STYLESHEET_CLASSNAME = exports.DEV_COOKIE = exports.BRANCH_PARAM = exports.BRANCH_COOKIE = void 0;
-var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-var preact_1 = require("preact");
-var deepmerge_1 = __importDefault(require("deepmerge"));
-var is_plain_object_1 = require("is-plain-object");
-var mobx_1 = require("mobx");
-var snap_client_1 = require("@athoscommerce/snap-client");
-var snap_logger_1 = require("@athoscommerce/snap-logger");
-var snap_tracker_1 = require("@athoscommerce/snap-tracker");
-var snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
-var snap_controller_1 = require("@athoscommerce/snap-controller");
-var getInitialUrlState_1 = require("./getInitialUrlState/getInitialUrlState");
-var createSearchController_1 = __importDefault(require("./create/createSearchController"));
-var utils_1 = require("./utils");
-var setupEvents_1 = require("./setupEvents");
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const preact_1 = require("preact");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const is_plain_object_1 = require("is-plain-object");
+const mobx_1 = require("mobx");
+const snap_client_1 = require("@athoscommerce/snap-client");
+const snap_logger_1 = require("@athoscommerce/snap-logger");
+const snap_tracker_1 = require("@athoscommerce/snap-tracker");
+const snap_toolbox_1 = require("@athoscommerce/snap-toolbox");
+const snap_controller_1 = require("@athoscommerce/snap-controller");
+const getInitialUrlState_1 = require("./getInitialUrlState/getInitialUrlState");
+const createSearchController_1 = __importDefault(require("./create/createSearchController"));
+const utils_1 = require("./utils");
+const setupEvents_1 = require("./setupEvents");
 // configure MobX
 (0, mobx_1.configure)({ useProxies: 'never', isolateGlobalState: true, enforceActions: 'never' });
 exports.BRANCH_COOKIE = 'athosBranch';
 exports.BRANCH_PARAM = 'athos-preview';
 exports.DEV_COOKIE = 'athos-Dev';
 exports.STYLESHEET_CLASSNAME = 'athos-snap-bundle-styles';
-var MAX_PARENT_LEVELS = 3;
-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: '#athos-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: '#athos-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: '#athos-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, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
+const MAX_PARENT_LEVELS = 3;
+const COMPONENT_ERROR = `Uncaught Error - Invalid value passed as the component.
+This usually happens when you pass a JSX Element, and not a function that returns the component, in the snap config. 
+		
+		instead of - 
+
+	targeters: [
+		{
+			selector: '#athos-content',
+			hideTarget: true,
+			component: <Content/>,
+		},
+	]
+
+		or - 
+
+	targeters: [
+		{
+			selector: '#athos-content',
+			hideTarget: true,
+			component: Content,
+		},
+	]
+
+		please try - 
+
+	targeters: [
+		{
+			selector: '#athos-content',
+			hideTarget: true,
+			component: () => Content
+		},
+	]
+
+The error above happened in the following targeter in the Snap Config`;
+class Snap {
+    constructor(config, services) {
         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));
+        this.getInstantiator = (id) => {
+            return this._instantiatorPromises[id] || Promise.reject(`getInstantiator could not find instantiator with id: ${id}`);
         };
-        this.getController = function (id) {
-            return _this._controllerPromises[id] || Promise.reject("getController could not find controller with id: ".concat(id));
+        this.getController = (id) => {
+            return this._controllerPromises[id] || Promise.reject(`getController could not find controller with id: ${id}`);
         };
-        this.getControllers = function () {
-            var controllerIds = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                controllerIds[_i] = arguments[_i];
-            }
-            var getControllerPromises = [];
-            controllerIds.forEach(function (id) { return getControllerPromises.push(_this.getController(id)); });
+        this.getControllers = (...controllerIds) => {
+            const getControllerPromises = [];
+            controllerIds.forEach((id) => 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]];
-            });
-        }); };
+        this.createController = async (type, config, services, urlConfig, context, callback) => {
+            if (typeof this._controllerPromises[config.id] != 'undefined') {
+                throw new Error(`Controller with id '${config.id}' is already defined`);
+            }
+            this._controllerPromises[config.id] = new Promise((resolve) => this._createController(type, config, services, urlConfig, context, async (cntrlr) => {
+                if (typeof callback == 'function')
+                    await callback(cntrlr);
+                resolve(cntrlr);
+            }));
+            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) {
-                    case 0:
-                        switch (type) {
-                            case snap_controller_1.ControllerTypes.autocomplete:
-                                importPromise = Promise.resolve().then(function () { return __importStar(require('./create/createAutocompleteController')); });
-                                break;
-                            case snap_controller_1.ControllerTypes.finder:
-                                importPromise = Promise.resolve().then(function () { return __importStar(require('./create/createFinderController')); });
-                                break;
-                            case snap_controller_1.ControllerTypes.recommendation:
-                                importPromise = Promise.resolve().then(function () { return __importStar(require('./create/createRecommendationController')); });
-                                break;
-                            case snap_controller_1.ControllerTypes.search:
-                            default:
-                                importPromise = Promise.resolve().then(function () { return __importStar(require('./create/createSearchController')); });
-                                break;
-                        }
-                        return [4 /*yield*/, importPromise];
-                    case 1:
-                        creationFunc = (_a.sent()).default;
-                        if (!this.controllers[config.id]) {
-                            window.athos.controller = window.athos.controller || {};
-                            window.athos.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 || {}),
-                            }, {
-                                client: (services === null || services === void 0 ? void 0 : services.client) || this.client,
-                                store: services === null || services === void 0 ? void 0 : services.store,
-                                urlManager: services === null || services === void 0 ? void 0 : services.urlManager,
-                                eventManager: services === null || services === void 0 ? void 0 : services.eventManager,
-                                profiler: services === null || services === void 0 ? void 0 : services.profiler,
-                                logger: services === null || services === void 0 ? void 0 : services.logger,
-                                tracker: (services === null || services === void 0 ? void 0 : services.tracker) || this.tracker,
-                            });
-                        }
-                        if (!callback) return [3 /*break*/, 3];
-                        return [4 /*yield*/, callback(this.controllers[config.id])];
-                    case 2:
-                        _a.sent();
-                        _a.label = 3;
-                    case 3: return [2 /*return*/, this.controllers[config.id]];
-                }
-            });
-        }); };
+        this._createController = async (type, config, services, urlConfig, context, callback) => {
+            let importPromise;
+            switch (type) {
+                case snap_controller_1.ControllerTypes.autocomplete:
+                    importPromise = import('./create/createAutocompleteController');
+                    break;
+                case snap_controller_1.ControllerTypes.finder:
+                    importPromise = import('./create/createFinderController');
+                    break;
+                case snap_controller_1.ControllerTypes.recommendation:
+                    importPromise = import('./create/createRecommendationController');
+                    break;
+                case snap_controller_1.ControllerTypes.search:
+                default:
+                    importPromise = import('./create/createSearchController');
+                    break;
+            }
+            // @ts-ignore - we know the config is correct, but complicated typing
+            const creationFunc = (await importPromise).default;
+            if (!this.controllers[config.id]) {
+                window.athos.controller = window.athos.controller || {};
+                window.athos.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 || {}),
+                }, {
+                    client: services?.client || this.client,
+                    store: services?.store,
+                    urlManager: services?.urlManager,
+                    eventManager: services?.eventManager,
+                    profiler: services?.profiler,
+                    logger: services?.logger,
+                    tracker: services?.tracker || this.tracker,
+                });
+            }
+            if (callback) {
+                await callback(this.controllers[config.id]);
+            }
+            return this.controllers[config.id];
+        };
         this.handlers = {
-            attributes: function (event) {
-                var trackerId = _this.tracker.config.id;
-                var attributeList = [
-                    "ss-".concat(trackerId, "-cart-add"),
-                    "ss-".concat(trackerId, "-cart-remove"),
-                    "ss-".concat(trackerId, "-cart-clear"),
-                    "ss-".concat(trackerId, "-cart-view"),
-                    "ss-".concat(trackerId, "-intellisuggest"),
-                    "ss-".concat(trackerId, "-intellisuggest-signature"),
-                    "href",
+            attributes: (event) => {
+                const trackerId = this.tracker.config.id;
+                const attributeList = [
+                    `ss-${trackerId}-cart-add`,
+                    `ss-${trackerId}-cart-remove`,
+                    `ss-${trackerId}-cart-clear`,
+                    `ss-${trackerId}-cart-view`,
+                    `ss-${trackerId}-intellisuggest`,
+                    `ss-${trackerId}-intellisuggest-signature`,
+                    `href`,
                 ];
-                var attributes = {};
-                var levels = 0;
-                var elem = null;
+                const attributes = {};
+                let levels = 0;
+                let elem = null;
                 elem = event && event.target;
                 while (Object.keys(attributes).length == 0 && elem !== null && levels <= MAX_PARENT_LEVELS) {
                     if (elem.attributes) {
-                        Object.values(elem.attributes).forEach(function (attr) {
-                            var attrName = attr.nodeName;
+                        Object.values(elem.attributes).forEach((attr) => {
+                            const attrName = attr.nodeName;
                             if (attributeList.indexOf(attrName) != -1) {
                                 attributes[attrName] = elem && elem.getAttribute(attrName);
                             }
@@ -233,50 +158,50 @@ var Snap = /** @class */ (function () {
                     elem = elem.parentElement;
                     levels++;
                 }
-                if (attributes["ss-".concat(trackerId, "-cart-add")]) {
+                if (attributes[`ss-${trackerId}-cart-add`]) {
                     // add skus to cart
-                    var skus = attributes["ss-".concat(trackerId, "-cart-add")].split(',');
-                    _this.tracker.cookies.cart.add(skus);
-                    _this.eventManager.fire('controller/recommendation/update');
+                    const skus = attributes[`ss-${trackerId}-cart-add`].split(',');
+                    this.tracker.cookies.cart.add(skus);
+                    this.eventManager.fire('controller/recommendation/update');
                 }
-                else if (attributes["ss-".concat(trackerId, "-cart-remove")]) {
+                else if (attributes[`ss-${trackerId}-cart-remove`]) {
                     // remove skus from cart
-                    var skus = attributes["ss-".concat(trackerId, "-cart-remove")].split(',');
-                    _this.tracker.cookies.cart.remove(skus);
-                    _this.eventManager.fire('controller/recommendation/update');
+                    const skus = attributes[`ss-${trackerId}-cart-remove`].split(',');
+                    this.tracker.cookies.cart.remove(skus);
+                    this.eventManager.fire('controller/recommendation/update');
                 }
-                else if ("ss-".concat(trackerId, "-cart-clear") in attributes) {
+                else if (`ss-${trackerId}-cart-clear` in attributes) {
                     // clear all from cart
-                    _this.tracker.cookies.cart.clear();
-                    _this.eventManager.fire('controller/recommendation/update');
+                    this.tracker.cookies.cart.clear();
+                    this.eventManager.fire('controller/recommendation/update');
                 }
-                else if ("ss-".concat(trackerId, "-cart-view") in attributes) {
+                else if (`ss-${trackerId}-cart-view` in attributes) {
                     // update recs
-                    _this.eventManager.fire('controller/recommendation/update');
+                    this.eventManager.fire('controller/recommendation/update');
                 }
-                else if (attributes["ss-".concat(trackerId, "-intellisuggest")] && attributes["ss-".concat(trackerId, "-intellisuggest-signature")]) {
+                else if (attributes[`ss-${trackerId}-intellisuggest`] && attributes[`ss-${trackerId}-intellisuggest-signature`]) {
                     // product click is deprecated
-                    _this.tracker.track.product.click();
+                    this.tracker.track.product.click();
                 }
             },
-            error: function (event) {
+            error: (event) => {
                 try {
-                    var filename = event.filename;
+                    const { filename } = event;
                     if ((filename.includes('snapui.searchspring.io') || filename.includes('snapui.athoscommerce.io')) &&
                         filename.endsWith('.js') &&
-                        _this.tracker.track.error) {
-                        var colno = event.colno, lineno = event.lineno, stack = event.error.stack, message = event.message, timeStamp = event.timeStamp;
-                        var href = window.location.href;
-                        var beaconPayload = {
-                            href: href,
-                            filename: filename,
-                            stack: stack,
-                            message: message,
-                            colno: colno,
-                            lineno: lineno,
+                        this.tracker.track.error) {
+                        const { colno, lineno, error: { stack }, message, timeStamp, } = event;
+                        const href = window.location.href;
+                        const beaconPayload = {
+                            href,
+                            filename,
+                            stack,
+                            message,
+                            colno,
+                            lineno,
                             errortimestamp: timeStamp,
                         };
-                        _this.tracker.track.error(beaconPayload);
+                        this.tracker.track.error(beaconPayload);
                     }
                 }
                 catch (e) {
@@ -289,7 +214,7 @@ var Snap = /** @class */ (function () {
         document.removeEventListener('click', this.handlers.attributes);
         document.addEventListener('click', this.handlers.attributes);
         this.config = config;
-        var globalContext = {};
+        let globalContext = {};
         try {
             // get global context
             globalContext = (0, snap_toolbox_1.getContext)([
@@ -317,26 +242,26 @@ var Snap = /** @class */ (function () {
         this.context = (0, deepmerge_1.default)(this.config.context || {}, globalContext || {}, {
             isMergeableObject: is_plain_object_1.isPlainObject,
         });
-        if (!((_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) && this.context.siteId) {
-            var defaultClientConfig = {
+        if (!this.config?.client?.globals?.siteId && this.context.siteId) {
+            const defaultClientConfig = {
                 globals: {
                     siteId: this.context.siteId,
                 },
             };
             this.config.client = (0, deepmerge_1.default)(defaultClientConfig, this.config.client || {});
         }
-        if ((!(services === null || services === void 0 ? void 0 : services.client) || !(services === null || services === void 0 ? void 0 : services.tracker)) && !((_f = (_e = (_d = this.config) === null || _d === void 0 ? void 0 : _d.client) === null || _e === void 0 ? void 0 : _e.globals) === null || _f === void 0 ? void 0 : _f.siteId)) {
+        if ((!services?.client || !services?.tracker) && !this.config?.client?.globals?.siteId) {
             //error msg should change depending if this is a snap templates site or not.
-            if (services === null || services === void 0 ? void 0 : services.templatesStore) {
-                throw new Error("SnapTemplates: config provided must contain a valid config.siteId value");
+            if (services?.templatesStore) {
+                throw new Error(`SnapTemplates: config provided must contain a valid config.siteId value`);
             }
             else {
-                throw new Error("Snap: config provided must contain a valid config.client.globals.siteId value");
+                throw new Error(`Snap: config provided must contain a valid config.client.globals.siteId value`);
             }
         }
         // segmented merchandising context -> client globals
-        if (((_g = this.config.client) === null || _g === void 0 ? void 0 : _g.globals) && ((_h = this.context.merchandising) === null || _h === void 0 ? void 0 : _h.segments)) {
-            if ((_j = this.config.client.globals) === null || _j === void 0 ? void 0 : _j.merchandising) {
+        if (this.config.client?.globals && this.context.merchandising?.segments) {
+            if (this.config.client.globals?.merchandising) {
                 this.config.client.globals.merchandising.segments = (0, deepmerge_1.default)(this.config.client.globals.merchandising.segments, this.context.merchandising.segments);
             }
             else {
@@ -345,13 +270,13 @@ var Snap = /** @class */ (function () {
                 };
             }
         }
-        if (services === null || services === void 0 ? void 0 : services.templatesStore) {
+        if (services?.templatesStore) {
             this.templates = services.templatesStore;
         }
         try {
-            var urlParams = (0, snap_toolbox_1.url)(window.location.href);
-            var branchOverride_1 = ((_k = urlParams === null || urlParams === void 0 ? void 0 : urlParams.params) === null || _k === void 0 ? void 0 : _k.query[exports.BRANCH_PARAM]) || snap_toolbox_1.cookies.get(exports.BRANCH_COOKIE);
-            var cookieDomain_1 = (typeof window !== 'undefined' && window.location.hostname && '.' + window.location.hostname.replace(/^www\./, '')) || undefined;
+            const urlParams = (0, snap_toolbox_1.url)(window.location.href);
+            const branchOverride = urlParams?.params?.query[exports.BRANCH_PARAM] || snap_toolbox_1.cookies.get(exports.BRANCH_COOKIE);
+            const cookieDomain = (typeof window !== 'undefined' && window.location.hostname && '.' + window.location.hostname.replace(/^www\./, '')) || undefined;
             /* app mode priority:
                 1. node env
                 2. config
@@ -366,76 +291,76 @@ var Snap = /** @class */ (function () {
                 this.mode = this.config.mode;
             }
             // query param / cookie override
-            if ((((_l = urlParams === null || urlParams === void 0 ? void 0 : urlParams.params) === null || _l === void 0 ? void 0 : _l.query) && 'dev' in urlParams.params.query) || !!snap_toolbox_1.cookies.get(exports.DEV_COOKIE)) {
-                if (((_m = urlParams === null || urlParams === void 0 ? void 0 : urlParams.params.query) === null || _m === void 0 ? void 0 : _m.dev) == 'false' || ((_o = urlParams === null || urlParams === void 0 ? void 0 : urlParams.params.query) === null || _o === void 0 ? void 0 : _o.dev) == '0') {
-                    snap_toolbox_1.cookies.unset(exports.DEV_COOKIE, cookieDomain_1);
+            if ((urlParams?.params?.query && 'dev' in urlParams.params.query) || !!snap_toolbox_1.cookies.get(exports.DEV_COOKIE)) {
+                if (urlParams?.params.query?.dev == 'false' || urlParams?.params.query?.dev == '0') {
+                    snap_toolbox_1.cookies.unset(exports.DEV_COOKIE, cookieDomain);
                     this.mode = snap_toolbox_1.AppMode.production;
                 }
                 else {
-                    snap_toolbox_1.cookies.set(exports.DEV_COOKIE, '1', 'Lax', 0, cookieDomain_1);
+                    snap_toolbox_1.cookies.set(exports.DEV_COOKIE, '1', 'Lax', 0, cookieDomain);
                     this.mode = snap_toolbox_1.AppMode.development;
                 }
             }
-            var initiatorPrefix = ((_p = window === null || window === void 0 ? void 0 : window.athos) === null || _p === void 0 ? void 0 : _p.managed) ? "managed/" : '';
+            const initiatorPrefix = window?.athos?.managed ? `managed/` : '';
             // client mode uses client config over snap config
             if (this.config.client) {
                 this.config.client.config = this.config.client.config || {};
                 if (!this.config.client.config.initiator) {
-                    this.config.client.config.initiator = "athos/".concat(initiatorPrefix, "snap/preact/").concat(snap_toolbox_1.version);
+                    this.config.client.config.initiator = `athos/${initiatorPrefix}snap/preact/${snap_toolbox_1.version}`;
                 }
                 this.config.client.config.mode = this.config.client.config.mode || this.mode;
             }
             // feature check block
             (0, utils_1.configureSnapFeatures)(this.config);
-            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.client = services?.client || new snap_client_1.Client(this.config.client.globals, this.config.client.config);
             this.logger =
-                (services === null || services === void 0 ? void 0 : services.logger) ||
+                services?.logger ||
                     new snap_logger_1.Logger({
-                        prefix: "".concat(((_r = (_q = this.config.tracker) === null || _q === void 0 ? void 0 : _q.config) === null || _r === void 0 ? void 0 : _r.framework) == 'snap/templates'
+                        prefix: `${this.config.tracker?.config?.framework == 'snap/templates'
                             ? 'Snap Preact Templates '
-                            : ((_t = (_s = this.config.tracker) === null || _s === void 0 ? void 0 : _s.config) === null || _t === void 0 ? void 0 : _t.framework) == 'snap/hybrid'
+                            : this.config.tracker?.config?.framework == 'snap/hybrid'
                                 ? 'Snap Preact Hybrid '
-                                : 'Snap Preact '),
+                                : 'Snap Preact '}`,
                         mode: this.mode,
                     });
             // create tracker
-            var trackerGlobals = ((_u = this.config.tracker) === null || _u === void 0 ? void 0 : _u.globals) || this.config.client.globals;
-            if ((_v = this.context.currency) === null || _v === void 0 ? void 0 : _v.code) {
+            let trackerGlobals = this.config.tracker?.globals || this.config.client.globals;
+            if (this.context.currency?.code) {
                 trackerGlobals = (0, deepmerge_1.default)(trackerGlobals || {}, {
                     currency: this.context.currency,
                 });
             }
-            if ((_w = this.context.shopper) === null || _w === void 0 ? void 0 : _w.cart) {
+            if (this.context.shopper?.cart) {
                 trackerGlobals = (0, deepmerge_1.default)(trackerGlobals || {}, {
                     cart: this.context.shopper.cart,
                 });
             }
-            var trackerConfig = (0, deepmerge_1.default)(((_x = this.config.tracker) === null || _x === void 0 ? void 0 : _x.config) || {}, {
-                framework: "".concat(initiatorPrefix).concat(((_z = (_y = this.config.tracker) === null || _y === void 0 ? void 0 : _y.config) === null || _z === void 0 ? void 0 : _z.framework) || 'snap', "/preact"),
+            const trackerConfig = (0, deepmerge_1.default)(this.config.tracker?.config || {}, {
+                framework: `${initiatorPrefix}${this.config.tracker?.config?.framework || 'snap'}/preact`,
                 mode: this.mode,
             });
-            this.tracker = (services === null || services === void 0 ? void 0 : services.tracker) || new snap_tracker_1.Tracker(trackerGlobals, trackerConfig);
+            this.tracker = services?.tracker || new snap_tracker_1.Tracker(trackerGlobals, trackerConfig);
             // log version
             this.logger.imageText({
                 url: 'https://snapui.athoscommerce.io/favicon.svg',
-                text: "[".concat(snap_toolbox_1.version, "]"),
-                style: "color: ".concat(this.logger.colors.indigo, "; font-weight: bold;"),
+                text: `[${snap_toolbox_1.version}]`,
+                style: `color: ${this.logger.colors.indigo}; font-weight: bold;`,
             });
             // handle branch override
-            if (branchOverride_1 && !document.querySelector("script[".concat(exports.BRANCH_COOKIE, "]"))) {
-                this.logger.warn(":: loading branch override ~ '".concat(branchOverride_1, "' ..."));
+            if (branchOverride && !document.querySelector(`script[${exports.BRANCH_COOKIE}]`)) {
+                this.logger.warn(`:: loading branch override ~ '${branchOverride}' ...`);
                 // set a cookie with branch
                 if (snap_toolbox_1.featureFlags.cookies) {
-                    snap_toolbox_1.cookies.set(exports.BRANCH_COOKIE, branchOverride_1, 'Lax', 3600000, cookieDomain_1); // 1 hour
+                    snap_toolbox_1.cookies.set(exports.BRANCH_COOKIE, branchOverride, 'Lax', 3600000, cookieDomain); // 1 hour
                 }
                 else {
                     this.logger.warn('Cookies are not supported/enabled by this browser, branch overrides will not persist!');
                 }
                 // get the path and siteId from the current bundle script in case its not the same as the client config
-                var path = "https://snapui.athoscommerce.io/".concat((_1 = (_0 = this.config.client) === null || _0 === void 0 ? void 0 : _0.globals) === null || _1 === void 0 ? void 0 : _1.siteId, "/");
-                var script = document.querySelector('script[src*="//snapui.searchspring.io"], script[src*="//snapui.athoscommerce.io"]');
+                let path = `https://snapui.athoscommerce.io/${this.config.client?.globals?.siteId}/`;
+                const script = document.querySelector('script[src*="//snapui.searchspring.io"], script[src*="//snapui.athoscommerce.io"]');
                 if (script) {
-                    var scriptRoot = script.getAttribute('src').match(/\/\/snapui.searchspring.io\/[a-zA-Z0-9]{6}\//);
+                    let scriptRoot = script.getAttribute('src').match(/\/\/snapui.searchspring.io\/[a-zA-Z0-9]{6}\//);
                     if (scriptRoot) {
                         path = scriptRoot.toString();
                     }
@@ -447,79 +372,62 @@ var Snap = /** @class */ (function () {
                     }
                 }
                 // append script with new branch in path
-                var branchScript_1 = document.createElement('script');
-                var src_1 = "".concat(path).concat(branchOverride_1, "/bundle.js");
-                branchScript_1.src = src_1;
-                branchScript_1.setAttribute(exports.BRANCH_COOKIE, branchOverride_1);
+                const branchScript = document.createElement('script');
+                const src = `${path}${branchOverride}/bundle.js`;
+                branchScript.src = src;
+                branchScript.setAttribute(exports.BRANCH_COOKIE, branchOverride);
                 new snap_toolbox_1.DomTargeter([
                     {
                         selector: 'body',
                         inject: {
                             action: 'append', // before, after, append, prepend
-                            element: function () {
-                                var branchContainer = document.createElement('div');
+                            element: () => {
+                                const branchContainer = document.createElement('div');
                                 branchContainer.id = 'athos-branch-override';
                                 return branchContainer;
                             },
                         },
                     },
-                ], function (target, elem) { return __awaiter(_this, void 0, void 0, function () {
-                    var props, getBundleDetails, _a, err_1, BranchOverride;
-                    return __generator(this, function (_b) {
-                        switch (_b.label) {
-                            case 0:
-                                props = {};
-                                _b.label = 1;
-                            case 1:
-                                _b.trys.push([1, 4, , 5]);
-                                return [4 /*yield*/, Promise.resolve().then(function () { return __importStar(require('./getBundleDetails/getBundleDetails')); })];
-                            case 2:
-                                getBundleDetails = (_b.sent()).getBundleDetails;
-                                _a = props;
-                                return [4 /*yield*/, getBundleDetails(src_1)];
-                            case 3:
-                                _a.details = _b.sent();
-                                return [3 /*break*/, 5];
-                            case 4:
-                                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/src/components/Organisms/BranchOverride')); })];
-                            case 6:
-                                BranchOverride = (_b.sent()).BranchOverride;
-                                (0, preact_1.render)((0, jsx_runtime_1.jsx)(BranchOverride, __assign({}, props, { branch: branchOverride_1, onRemoveClick: function () {
-                                        snap_toolbox_1.cookies.unset(exports.BRANCH_COOKIE, cookieDomain_1);
-                                        var urlState = (0, snap_toolbox_1.url)(window.location.href);
-                                        urlState === null || urlState === void 0 ? true : delete urlState.params.query[exports.BRANCH_PARAM];
-                                        var newUrl = urlState === null || urlState === void 0 ? void 0 : urlState.url();
-                                        if (newUrl && newUrl != window.location.href) {
-                                            window.location.href = newUrl;
-                                        }
-                                        else {
-                                            window.location.reload();
-                                        }
-                                    } })), elem);
-                                // reset the global athos object
-                                try {
-                                    delete window.athos;
-                                }
-                                catch (e) {
-                                    window.athos = undefined;
-                                }
-                                document.head.appendChild(branchScript_1);
-                                return [2 /*return*/];
-                        }
-                    });
-                }); });
+                ], async (target, elem) => {
+                    const props = {};
+                    try {
+                        const getBundleDetails = (await import('./getBundleDetails/getBundleDetails')).getBundleDetails;
+                        props.details = await getBundleDetails(src);
+                    }
+                    catch (err) {
+                        props.error = err;
+                    }
+                    const BranchOverride = (await import('../components/src/components/Organisms/BranchOverride')).BranchOverride;
+                    (0, preact_1.render)((0, jsx_runtime_1.jsx)(BranchOverride, { ...props, branch: branchOverride, onRemoveClick: () => {
+                            snap_toolbox_1.cookies.unset(exports.BRANCH_COOKIE, cookieDomain);
+                            const urlState = (0, snap_toolbox_1.url)(window.location.href);
+                            delete urlState?.params.query[exports.BRANCH_PARAM];
+                            const newUrl = urlState?.url();
+                            if (newUrl && newUrl != window.location.href) {
+                                window.location.href = newUrl;
+                            }
+                            else {
+                                window.location.reload();
+                            }
+                        } }), elem);
+                    // reset the global athos object
+                    try {
+                        delete window.athos;
+                    }
+                    catch (e) {
+                        window.athos = undefined;
+                    }
+                    document.head.appendChild(branchScript);
+                });
                 // remove snap bundle styles
-                document.querySelectorAll(".".concat(exports.STYLESHEET_CLASSNAME)).forEach(function (el) { return el.remove(); });
+                document.querySelectorAll(`.${exports.STYLESHEET_CLASSNAME}`).forEach((el) => el.remove());
                 // prevent further instantiation of config
                 throw 'branch override';
             }
         }
         catch (e) {
             if (e == 'branch override') {
-                throw "".concat(this.logger.emoji.bang, " Snap instantiation halted - using branch override.");
+                throw `${this.logger.emoji.bang} Snap instantiation halted - using branch override.`;
             }
             this.logger.error(e);
         }
@@ -529,451 +437,310 @@ var Snap = /** @class */ (function () {
         window.athos.context = this.context;
         if (this.client)
             window.athos.client = this.client;
-        if (services === null || services === void 0 ? void 0 : services.templatesStore)
+        if (services?.templatesStore)
             window.athos.templates = this.templates;
         this.eventManager = (0, setupEvents_1.setupEvents)();
         if (this.eventManager) {
-            window.athos.on = function (event) {
-                var _a;
-                var func = [];
-                for (var _i = 1; _i < arguments.length; _i++) {
-                    func[_i - 1] = arguments[_i];
-                }
-                (_a = _this.eventManager).on.apply(_a, __spreadArray([event], func, false));
+            window.athos.on = (event, ...func) => {
+                this.eventManager.on(event, ...func);
             };
-            window.athos.fire = function (event) {
-                var _a;
-                var func = [];
-                for (var _i = 1; _i < arguments.length; _i++) {
-                    func[_i - 1] = arguments[_i];
-                }
-                (_a = _this.eventManager).fire.apply(_a, __spreadArray([event], func, false));
+            window.athos.fire = (event, ...func) => {
+                this.eventManager.fire(event, ...func);
             };
         }
         // autotrack shopper id from the context
-        if ((_3 = (_2 = this.context) === null || _2 === void 0 ? void 0 : _2.shopper) === null || _3 === void 0 ? void 0 : _3.id) {
+        if (this.context?.shopper?.id) {
             this.tracker.track.shopper.login({
                 id: this.context.shopper.id,
             });
         }
         // create controllers
-        Object.keys(((_4 = this.config) === null || _4 === void 0 ? void 0 : _4.controllers) || {}).forEach(function (type) {
+        Object.keys(this.config?.controllers || {}).forEach((type) => {
             switch (type) {
                 case 'search': {
-                    _this.config.controllers[type].forEach(function (controller, index) {
-                        var _a, _b, _c, _d, _e, _f, _g, _h;
+                    this.config.controllers[type].forEach((controller, index) => {
                         try {
-                            if (typeof _this._controllerPromises[controller.config.id] != 'undefined') {
-                                _this.logger.error("Controller with id '".concat(controller.config.id, "' is already defined"));
+                            if (typeof this._controllerPromises[controller.config.id] != 'undefined') {
+                                this.logger.error(`Controller with id '${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 || {}),
+                            const cntrlr = (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 || {}),
+                                context: (0, deepmerge_1.default)(this.context || {}, controller.context || {}),
                             }, {
-                                client: ((_a = controller.services) === null || _a === void 0 ? void 0 : _a.client) || _this.client,
-                                store: (_b = controller.services) === null || _b === void 0 ? void 0 : _b.store,
-                                urlManager: (_c = controller.services) === null || _c === void 0 ? void 0 : _c.urlManager,
-                                eventManager: (_d = controller.services) === null || _d === void 0 ? void 0 : _d.eventManager,
-                                profiler: (_e = controller.services) === null || _e === void 0 ? void 0 : _e.profiler,
-                                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,
+                                client: controller.services?.client || this.client,
+                                store: controller.services?.store,
+                                urlManager: controller.services?.urlManager,
+                                eventManager: controller.services?.eventManager,
+                                profiler: controller.services?.profiler,
+                                logger: controller.services?.logger,
+                                tracker: controller.services?.tracker || this.tracker,
                             });
                             window.athos.controller = window.athos.controller || {};
-                            window.athos.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 searchPromise_1 = null;
-                            var runSearch_1 = function () { return __awaiter(_this, void 0, void 0, function () {
-                                var _a;
-                                return __generator(this, function (_b) {
-                                    if (!searchPromise_1) {
-                                        // handle custom initial UrlManager state
-                                        if ((_a = controller.url) === null || _a === void 0 ? void 0 : _a.initial) {
-                                            (0, getInitialUrlState_1.getInitialUrlState)(controller.url.initial, cntrlr_1.urlManager).go({ history: 'replace' });
-                                        }
-                                        searchPromise_1 = this.controllers[controller.config.id].search();
+                            window.athos.controller[cntrlr.config.id] = this.controllers[cntrlr.config.id] = cntrlr;
+                            this._controllerPromises[cntrlr.config.id] = new Promise((resolve) => resolve(cntrlr));
+                            let searchPromise = null;
+                            const runSearch = async () => {
+                                if (!searchPromise) {
+                                    // handle custom initial UrlManager state
+                                    if (controller.url?.initial) {
+                                        (0, getInitialUrlState_1.getInitialUrlState)(controller.url.initial, cntrlr.urlManager).go({ history: 'replace' });
                                     }
-                                    return [2 /*return*/, searchPromise_1];
-                                });
-                            }); };
-                            var targetFunction_1 = function (target, elem, originalElem) { return __awaiter(_this, void 0, void 0, function () {
-                                var targetFunctionPromises, onTarget, _a, _b, _1, Component_1, err_2;
-                                var _this = this;
-                                return __generator(this, function (_c) {
-                                    switch (_c.label) {
-                                        case 0:
-                                            targetFunctionPromises = [];
-                                            if (target.renderAfterSearch) {
-                                                targetFunctionPromises.push(runSearch_1());
-                                            }
-                                            else {
-                                                targetFunctionPromises.push(Promise.resolve());
-                                                runSearch_1();
-                                            }
-                                            onTarget = target.onTarget;
-                                            _a = onTarget;
-                                            if (!_a) return [3 /*break*/, 2];
-                                            return [4 /*yield*/, onTarget(target, elem, originalElem)];
-                                        case 1:
-                                            _a = (_c.sent());
-                                            _c.label = 2;
-                                        case 2:
-                                            _a;
-                                            _c.label = 3;
-                                        case 3:
-                                            _c.trys.push([3, 5, , 6]);
-                                            targetFunctionPromises.push(target.component());
-                                            return [4 /*yield*/, Promise.all(targetFunctionPromises)];
-                                        case 4:
-                                            _b = _c.sent(), _1 = _b[0], Component_1 = _b[1];
-                                            setTimeout(function () {
-                                                (0, preact_1.render)((0, jsx_runtime_1.jsx)(Component_1, __assign({ controller: _this.controllers[controller.config.id], snap: _this }, target.props)), elem);
-                                            });
-                                            return [3 /*break*/, 6];
-                                        case 5:
-                                            err_2 = _c.sent();
-                                            this.logger.error(err_2);
-                                            this.logger.error(COMPONENT_ERROR, target);
-                                            return [3 /*break*/, 6];
-                                        case 6: return [2 /*return*/];
-                                    }
-                                });
-                            }); };
-                            (_h = controller === null || controller === void 0 ? void 0 : controller.targeters) === null || _h === void 0 ? void 0 : _h.forEach(function (target, target_index) {
+                                    searchPromise = this.controllers[controller.config.id].search();
+                                }
+                                return searchPromise;
+                            };
+                            const targetFunction = async (target, elem, originalElem) => {
+                                const targetFunctionPromises = [];
+                                if (target.renderAfterSearch) {
+                                    targetFunctionPromises.push(runSearch());
+                                }
+                                else {
+                                    targetFunctionPromises.push(Promise.resolve());
+                                    runSearch();
+                                }
+                                const onTarget = target.onTarget;
+                                onTarget && (await onTarget(target, elem, originalElem));
+                                try {
+                                    targetFunctionPromises.push(target.component());
+                                    const [_, Component] = await Promise.all(targetFunctionPromises);
+                                    setTimeout(() => {
+                                        (0, preact_1.render)((0, jsx_runtime_1.jsx)(Component, { controller: this.controllers[controller.config.id], snap: this, ...target.props }), elem);
+                                    });
+                                }
+                                catch (err) {
+                                    this.logger.error(err);
+                                    this.logger.error(COMPONENT_ERROR, target);
+                                }
+                            };
+                            controller?.targeters?.forEach((target, target_index) => {
                                 if (!target.selector) {
-                                    throw new Error("Targets at index ".concat(target_index, " missing selector value (string)."));
+                                    throw new Error(`Targets at index ${target_index} missing selector value (string).`);
                                 }
                                 if (!target.component) {
-                                    throw new Error("Targets at index ".concat(target_index, " missing component value (Component)."));
+                                    throw new Error(`Targets at index ${target_index} missing component value (Component).`);
                                 }
-                                var contextPage = _this.context.pageType && "".concat(_this.context.pageType).toLowerCase().trim();
+                                const contextPage = this.context.pageType && `${this.context.pageType}`.toLowerCase().trim();
                                 if (target.prefetch || ['search', 'category'].includes(contextPage)) {
-                                    runSearch_1();
+                                    runSearch();
                                     target.component();
                                 }
-                                cntrlr_1.createTargeter(__assign({ controller: cntrlr_1 }, target), function (target, elem, originalElem) { return __awaiter(_this, void 0, void 0, function () {
-                                    var Skeleton_1;
-                                    return __generator(this, function (_a) {
-                                        switch (_a.label) {
-                                            case 0:
-                                                if (!(target && target.skeleton && elem)) return [3 /*break*/, 2];
-                                                return [4 /*yield*/, target.skeleton()];
-                                            case 1:
-                                                Skeleton_1 = _a.sent();
-                                                setTimeout(function () {
-                                                    (0, preact_1.render)((0, jsx_runtime_1.jsx)(Skeleton_1, {}), elem);
-                                                });
-                                                _a.label = 2;
-                                            case 2: return [4 /*yield*/, targetFunction_1(target, elem, originalElem)];
-                                            case 3:
-                                                _a.sent();
-                                                return [2 /*return*/];
-                                        }
-                                    });
-                                }); });
+                                cntrlr.createTargeter({ controller: cntrlr, ...target }, async (target, elem, originalElem) => {
+                                    if (target && target.skeleton && elem) {
+                                        const Skeleton = await target.skeleton();
+                                        setTimeout(() => {
+                                            (0, preact_1.render)((0, jsx_runtime_1.jsx)(Skeleton, {}), elem);
+                                        });
+                                    }
+                                    await targetFunction(target, elem, originalElem);
+                                });
                             });
                         }
                         catch (err) {
-                            _this.logger.error("Failed to instantiate ".concat(type, " controller at index ").concat(index, "."), err);
+                            this.logger.error(`Failed to instantiate ${type} controller at index ${index}.`, err);
                         }
                     });
                     break;
                 }
                 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"));
+                    this.config.controllers[type].forEach((controller, index) => {
+                        if (typeof this._controllerPromises[controller.config.id] != 'undefined') {
+                            this.logger.error(`Controller with id '${controller.config.id}' is already defined`);
                             return;
                         }
-                        _this._controllerPromises[controller.config.id] = new Promise(function (resolve) { return __awaiter(_this, void 0, void 0, function () {
-                            var bound_1, runBind_1, targetFunction_2, err_3;
-                            var _this = this;
-                            var _a;
-                            return __generator(this, function (_b) {
-                                switch (_b.label) {
-                                    case 0:
-                                        _b.trys.push([0, 3, , 4]);
-                                        bound_1 = false;
-                                        runBind_1 = function () {
-                                            if (!bound_1) {
-                                                bound_1 = true;
-                                                setTimeout(function () {
-                                                    _this.controllers[controller.config.id].bind();
-                                                });
-                                            }
-                                        };
-                                        targetFunction_2 = function (target, elem, originalElem) { return __awaiter(_this, void 0, void 0, function () {
-                                            var onTarget, _a, importPromises, importResolutions, Component_2, err_4;
-                                            var _this = this;
-                                            return __generator(this, function (_b) {
-                                                switch (_b.label) {
-                                                    case 0:
-                                                        onTarget = target.onTarget;
-                                                        _a = onTarget;
-                                                        if (!_a) return [3 /*break*/, 2];
-                                                        return [4 /*yield*/, onTarget(target, elem, originalElem)];
-                                                    case 1:
-                                                        _a = (_b.sent());
-                                                        _b.label = 2;
-                                                    case 2:
-                                                        _a;
-                                                        _b.label = 3;
-                                                    case 3:
-                                                        _b.trys.push([3, 5, , 6]);
-                                                        importPromises = [];
-                                                        // dynamically import the component
-                                                        importPromises.push(target.component());
-                                                        return [4 /*yield*/, Promise.all(importPromises)];
-                                                    case 4:
-                                                        importResolutions = _b.sent();
-                                                        Component_2 = importResolutions[0];
-                                                        setTimeout(function () {
-                                                            (0, preact_1.render)((0, jsx_runtime_1.jsx)(Component_2, __assign({ controller: _this.controllers[controller.config.id], input: originalElem, snap: _this }, target.props)), elem);
-                                                        });
-                                                        return [3 /*break*/, 6];
-                                                    case 5:
-                                                        err_4 = _b.sent();
-                                                        this.logger.error(err_4);
-                                                        this.logger.error(COMPONENT_ERROR, target);
-                                                        return [3 /*break*/, 6];
-                                                    case 6: return [2 /*return*/];
-                                                }
-                                            });
-                                        }); };
-                                        if (!(!(controller === null || controller === void 0 ? void 0 : controller.targeters) || (controller === null || controller === void 0 ? void 0 : controller.targeters.length) === 0)) return [3 /*break*/, 2];
-                                        return [4 /*yield*/, this._createController(snap_controller_1.ControllerTypes.autocomplete, controller.config, controller.services, controller.url, controller.context, function (cntrlr) {
-                                                if (cntrlr)
-                                                    resolve(cntrlr);
-                                            })];
-                                    case 1:
-                                        _b.sent();
-                                        runBind_1();
-                                        _b.label = 2;
-                                    case 2:
-                                        (_a = controller === null || controller === void 0 ? void 0 : controller.targeters) === null || _a === void 0 ? void 0 : _a.forEach(function (target, target_index) {
-                                            if (!target.selector) {
-                                                throw new Error("Targets at index ".concat(target_index, " missing selector value (string)."));
-                                            }
-                                            if (!target.component) {
-                                                throw new Error("Targets at index ".concat(target_index, " missing component value (Component)."));
-                                            }
-                                            var targeter = new snap_toolbox_1.DomTargeter([
-                                                __assign({ inject: {
-                                                        action: 'after', // before, after, append, prepend
-                                                        element: function () {
-                                                            var acContainer = document.createElement('div');
-                                                            acContainer.className = 'ss__autocomplete--target';
-                                                            acContainer.addEventListener('click', function (e) {
-                                                                e.stopPropagation();
-                                                            });
-                                                            return acContainer;
-                                                        },
-                                                    } }, target),
-                                            ], function (target, elem, originalElem) { return __awaiter(_this, void 0, void 0, 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) {
-                                                                if (cntrlr)
-                                                                    resolve(cntrlr);
-                                                            })];
-                                                        case 1:
-                                                            cntrlr = _a.sent();
-                                                            runBind_1();
-                                                            targetFunction_2(__assign({ controller: cntrlr }, target), elem, originalElem);
-                                                            cntrlr.addTargeter(targeter);
-                                                            return [2 /*return*/];
-                                                    }
-                                                });
-                                            }); });
+                        this._controllerPromises[controller.config.id] = new Promise(async (resolve) => {
+                            try {
+                                let bound = false;
+                                const runBind = () => {
+                                    if (!bound) {
+                                        bound = true;
+                                        setTimeout(() => {
+                                            this.controllers[controller.config.id].bind();
                                         });
-                                        return [3 /*break*/, 4];
-                                    case 3:
-                                        err_3 = _b.sent();
-                                        this.logger.error("Failed to instantiate ".concat(type, " controller at index ").concat(index, "."), err_3);
-                                        return [3 /*break*/, 4];
-                                    case 4: return [2 /*return*/];
+                                    }
+                                };
+                                const targetFunction = async (target, elem, originalElem) => {
+                                    const onTarget = target.onTarget;
+                                    onTarget && (await onTarget(target, elem, originalElem));
+                                    try {
+                                        const importPromises = [];
+                                        // dynamically import the component
+                                        importPromises.push(target.component());
+                                        const importResolutions = await Promise.all(importPromises);
+                                        const Component = importResolutions[0];
+                                        setTimeout(() => {
+                                            (0, preact_1.render)((0, jsx_runtime_1.jsx)(Component, { controller: this.controllers[controller.config.id], input: originalElem, snap: this, ...target.props }), elem);
+                                        });
+                                    }
+                                    catch (err) {
+                                        this.logger.error(err);
+                                        this.logger.error(COMPONENT_ERROR, target);
+                                    }
+                                };
+                                if (!controller?.targeters || controller?.targeters.length === 0) {
+                                    await this._createController(snap_controller_1.ControllerTypes.autocomplete, controller.config, controller.services, controller.url, controller.context, (cntrlr) => {
+                                        if (cntrlr)
+                                            resolve(cntrlr);
+                                    });
+                                    runBind();
                                 }
-                            });
-                        }); });
+                                controller?.targeters?.forEach((target, target_index) => {
+                                    if (!target.selector) {
+                                        throw new Error(`Targets at index ${target_index} missing selector value (string).`);
+                                    }
+                                    if (!target.component) {
+                                        throw new Error(`Targets at index ${target_index} missing component value (Component).`);
+                                    }
+                                    const targeter = new snap_toolbox_1.DomTargeter([
+                                        {
+                                            inject: {
+                                                action: 'after', // before, after, append, prepend
+                                                element: () => {
+                                                    const acContainer = document.createElement('div');
+                                                    acContainer.className = 'ss__autocomplete--target';
+                                                    acContainer.addEventListener('click', (e) => {
+                                                        e.stopPropagation();
+                                                    });
+                                                    return acContainer;
+                                                },
+                                            },
+                                            ...target,
+                                        },
+                                    ], async (target, elem, originalElem) => {
+                                        const cntrlr = await this._createController(snap_controller_1.ControllerTypes.autocomplete, controller.config, controller.services, controller.url, controller.context, (cntrlr) => {
+                                            if (cntrlr)
+                                                resolve(cntrlr);
+                                        });
+                                        runBind();
+                                        targetFunction({ controller: cntrlr, ...target }, elem, originalElem);
+                                        cntrlr.addTargeter(targeter);
+                                    });
+                                });
+                            }
+                            catch (err) {
+                                this.logger.error(`Failed to instantiate ${type} controller at index ${index}.`, err);
+                            }
+                        });
                     });
                     break;
                 }
                 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"));
+                    this.config.controllers[type].forEach((controller, index) => {
+                        if (typeof this._controllerPromises[controller.config.id] != 'undefined') {
+                            this.logger.error(`Controller with id '${controller.config.id}' is already defined`);
                             return;
                         }
-                        _this._controllerPromises[controller.config.id] = new Promise(function (resolve) {
-                            var _a;
+                        this._controllerPromises[controller.config.id] = new Promise((resolve) => {
                             try {
-                                var searched_1 = false;
-                                var runSearch_2 = function () {
-                                    if (!searched_1) {
-                                        _this.controllers[controller.config.id].search();
-                                        searched_1 = true;
+                                let searched = false;
+                                const runSearch = () => {
+                                    if (!searched) {
+                                        this.controllers[controller.config.id].search();
+                                        searched = true;
                                     }
                                 };
-                                var targetFunction_3 = function (target, elem, originalElem) { return __awaiter(_this, void 0, void 0, function () {
-                                    var onTarget, _a, Component_3, err_5;
-                                    var _this = this;
-                                    return __generator(this, function (_b) {
-                                        switch (_b.label) {
-                                            case 0:
-                                                onTarget = target.onTarget;
-                                                _a = onTarget;
-                                                if (!_a) return [3 /*break*/, 2];
-                                                return [4 /*yield*/, onTarget(target, elem, originalElem)];
-                                            case 1:
-                                                _a = (_b.sent());
-                                                _b.label = 2;
-                                            case 2:
-                                                _a;
-                                                _b.label = 3;
-                                            case 3:
-                                                _b.trys.push([3, 5, , 6]);
-                                                return [4 /*yield*/, target.component()];
-                                            case 4:
-                                                Component_3 = _b.sent();
-                                                setTimeout(function () {
-                                                    (0, preact_1.render)((0, jsx_runtime_1.jsx)(Component_3, __assign({ controller: _this.controllers[controller.config.id], snap: _this }, target.props)), elem);
-                                                });
-                                                return [3 /*break*/, 6];
-                                            case 5:
-                                                err_5 = _b.sent();
-                                                this.logger.error(err_5);
-                                                this.logger.error(COMPONENT_ERROR, target);
-                                                return [3 /*break*/, 6];
-                                            case 6: return [2 /*return*/];
-                                        }
-                                    });
-                                }); };
-                                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) {
+                                const targetFunction = async (target, elem, originalElem) => {
+                                    const onTarget = target.onTarget;
+                                    onTarget && (await onTarget(target, elem, originalElem));
+                                    try {
+                                        const Component = await target.component();
+                                        setTimeout(() => {
+                                            (0, preact_1.render)((0, jsx_runtime_1.jsx)(Component, { controller: this.controllers[controller.config.id], snap: this, ...target.props }), elem);
+                                        });
+                                    }
+                                    catch (err) {
+                                        this.logger.error(err);
+                                        this.logger.error(COMPONENT_ERROR, target);
+                                    }
+                                };
+                                if (!controller?.targeters || controller?.targeters.length === 0) {
+                                    this._createController(snap_controller_1.ControllerTypes.finder, controller.config, controller.services, controller.url, controller.context, (cntrlr) => {
                                         if (cntrlr)
                                             resolve(cntrlr);
                                     });
                                 }
-                                (_a = controller === null || controller === void 0 ? void 0 : controller.targeters) === null || _a === void 0 ? void 0 : _a.forEach(function (target, target_index) {
+                                controller?.targeters?.forEach((target, target_index) => {
                                     if (!target.selector) {
-                                        throw new Error("Targets at index ".concat(target_index, " missing selector value (string)."));
+                                        throw new Error(`Targets at index ${target_index} missing selector value (string).`);
                                     }
                                     if (!target.component) {
-                                        throw new Error("Targets at index ".concat(target_index, " missing component value (Component)."));
+                                        throw new Error(`Targets at index ${target_index} missing component value (Component).`);
                                     }
-                                    var targeter = new snap_toolbox_1.DomTargeter([__assign({}, target)], function (target, elem, originalElem) { return __awaiter(_this, void 0, void 0, 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) {
-                                                        if (cntrlr)
-                                                            resolve(cntrlr);
-                                                    })];
-                                                case 1:
-                                                    cntrlr = _a.sent();
-                                                    runSearch_2();
-                                                    targetFunction_3(__assign({ controller: cntrlr }, target), elem, originalElem);
-                                                    cntrlr.addTargeter(targeter);
-                                                    return [2 /*return*/];
-                                            }
+                                    const targeter = new snap_toolbox_1.DomTargeter([{ ...target }], async (target, elem, originalElem) => {
+                                        const cntrlr = await this._createController(snap_controller_1.ControllerTypes.finder, controller.config, controller.services, controller.url, controller.context, (cntrlr) => {
+                                            if (cntrlr)
+                                                resolve(cntrlr);
                                         });
-                                    }); });
+                                        runSearch();
+                                        targetFunction({ controller: cntrlr, ...target }, elem, originalElem);
+                                        cntrlr.addTargeter(targeter);
+                                    });
                                 });
                             }
                             catch (err) {
-                                _this.logger.error("Failed to instantiate ".concat(type, " controller at index ").concat(index, "."), err);
+                                this.logger.error(`Failed to instantiate ${type} controller at index ${index}.`, err);
                             }
                         });
                     });
                     break;
                 }
                 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"));
+                    this.config.controllers[type].forEach((controller, index) => {
+                        if (typeof this._controllerPromises[controller.config.id] != 'undefined') {
+                            this.logger.error(`Controller with id '${controller.config.id}' is already defined`);
                             return;
                         }
-                        _this._controllerPromises[controller.config.id] = new Promise(function (resolve) {
-                            var _a;
+                        this._controllerPromises[controller.config.id] = new Promise((resolve) => {
                             try {
-                                var searched_2 = false;
-                                var runSearch_3 = function () {
-                                    if (!searched_2) {
-                                        _this.controllers[controller.config.id].search();
-                                        searched_2 = true;
+                                let searched = false;
+                                const runSearch = () => {
+                                    if (!searched) {
+                                        this.controllers[controller.config.id].search();
+                                        searched = true;
                                     }
                                 };
-                                var targetFunction_4 = function (target, elem, originalElem) { return __awaiter(_this, void 0, void 0, function () {
-                                    var onTarget, _a, Component_4, err_6;
-                                    var _this = this;
-                                    return __generator(this, function (_b) {
-                                        switch (_b.label) {
-                                            case 0:
-                                                onTarget = target.onTarget;
-                                                _a = onTarget;
-                                                if (!_a) return [3 /*break*/, 2];
-                                                return [4 /*yield*/, onTarget(target, elem, originalElem)];
-                                            case 1:
-                                                _a = (_b.sent());
-                                                _b.label = 2;
-                                            case 2:
-                                                _a;
-                                                _b.label = 3;
-                                            case 3:
-                                                _b.trys.push([3, 5, , 6]);
-                                                return [4 /*yield*/, target.component()];
-                                            case 4:
-                                                Component_4 = _b.sent();
-                                                setTimeout(function () {
-                                                    (0, preact_1.render)((0, jsx_runtime_1.jsx)(Component_4, __assign({ controller: _this.controllers[controller.config.id], snap: _this }, target.props)), elem);
-                                                });
-                                                return [3 /*break*/, 6];
-                                            case 5:
-                                                err_6 = _b.sent();
-                                                this.logger.error(err_6);
-                                                this.logger.error(COMPONENT_ERROR, target);
-                                                return [3 /*break*/, 6];
-                                            case 6: return [2 /*return*/];
-                                        }
-                                    });
-                                }); };
-                                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) {
+                                const targetFunction = async (target, elem, originalElem) => {
+                                    const onTarget = target.onTarget;
+                                    onTarget && (await onTarget(target, elem, originalElem));
+                                    try {
+                                        const Component = await target.component();
+                                        setTimeout(() => {
+                                            (0, preact_1.render)((0, jsx_runtime_1.jsx)(Component, { controller: this.controllers[controller.config.id], snap: this, ...target.props }), elem);
+                                        });
+                                    }
+                                    catch (err) {
+                                        this.logger.error(err);
+                                        this.logger.error(COMPONENT_ERROR, target);
+                                    }
+                                };
+                                if (!controller?.targeters || controller?.targeters.length === 0) {
+                                    this._createController(snap_controller_1.ControllerTypes.recommendation, controller.config, controller.services, controller.url, controller.context, (cntrlr) => {
                                         if (cntrlr)
                                             resolve(cntrlr);
                                     });
                                 }
-                                (_a = controller === null || controller === void 0 ? void 0 : controller.targeters) === null || _a === void 0 ? void 0 : _a.forEach(function (target, target_index) {
+                                controller?.targeters?.forEach((target, target_index) => {
                                     if (!target.selector) {
-                                        throw new Error("Targets at index ".concat(target_index, " missing selector value (string)."));
+                                        throw new Error(`Targets at index ${target_index} missing selector value (string).`);
                                     }
                                     if (!target.component) {
-                                        throw new Error("Targets at index ".concat(target_index, " missing component value (Component)."));
+                                        throw new Error(`Targets at index ${target_index} missing component value (Component).`);
                                     }
-                                    var targeter = new snap_toolbox_1.DomTargeter([__assign({}, target)], function (target, elem, originalElem) { return __awaiter(_this, void 0, void 0, 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) {
-                                                        if (cntrlr)
-                                                            resolve(cntrlr);
-                                                    })];
-                                                case 1:
-                                                    cntrlr = _a.sent();
-                                                    runSearch_3();
-                                                    targetFunction_4(__assign({ controller: cntrlr }, target), elem, originalElem);
-                                                    cntrlr.addTargeter(targeter);
-                                                    return [2 /*return*/];
-                                            }
+                                    const targeter = new snap_toolbox_1.DomTargeter([{ ...target }], async (target, elem, originalElem) => {
+                                        const cntrlr = await this._createController(snap_controller_1.ControllerTypes.recommendation, controller.config, controller.services, controller.url, controller.context, (cntrlr) => {
+                                            if (cntrlr)
+                                                resolve(cntrlr);
                                         });
-                                    }); });
+                                        runSearch();
+                                        targetFunction({ controller: cntrlr, ...target }, elem, originalElem);
+                                        cntrlr.addTargeter(targeter);
+                                    });
                                 });
                             }
                             catch (err) {
-                                _this.logger.error("Failed to instantiate ".concat(type, " controller at index ").concat(index, "."), err);
+                                this.logger.error(`Failed to instantiate ${type} controller at index ${index}.`, err);
                             }
                         });
                     });
@@ -982,24 +749,22 @@ var Snap = /** @class */ (function () {
             }
         });
         // create instantiators
-        if ((_6 = (_5 = this.config) === null || _5 === void 0 ? void 0 : _5.instantiators) === null || _6 === void 0 ? void 0 : _6.recommendation) {
+        if (this.config?.instantiators?.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,
-                        logger: _this.logger,
-                        snap: _this,
-                    }, _this.context);
+                this._instantiatorPromises.recommendation = import('./Instantiators/RecommendationInstantiator').then(({ 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,
+                        logger: this.logger,
+                        snap: this,
+                    }, this.context);
                 });
             }
             catch (err) {
-                this.logger.error("Failed to create Recommendations Instantiator.", err);
+                this.logger.error(`Failed to create Recommendations Instantiator.`, err);
             }
         }
     }
-    return Snap;
-}());
+}
 exports.Snap = Snap;